@extends('layouts.default')
@section('title')
Tally Connection - {{ $seller_details->seller_name }}
@stop

@section('content')
<style type="text/css">
  li{
    line-height: 34px;
  }
  #kt_wrapper{
    padding-top: 96px!important;
  }
  .connect_page{
    margin-top: 46px !important;
  }
  .tallyPassword{
    font-size: large;
  }
</style>
<div class="connect_page">
   <div class="card" id="kt_conenct">
      <!--begin::Card body-->
      <div class="card-body p-lg-5">
          <!--begin::Plans-->
          <div class="d-flex flex-column">
              <!--begin::Heading-->
              <div class="mb-5 text-center">
                  <h1 class="fw-bolder">Connect your Tally account</h1>
                  <div class="text-gray-400 fw-bold fs-5"></div>
              </div>
              <!--end::Heading-->
              <!--begin::Row-->
              <div class="row g-10">
                  <div class="col-md-12 text-center connection-img" style="margin-top: 16px;">
                    @if($module == 'tlaz')
                      <img src="{{ asset('assets/images/az-tl-connection.png') }}" width="300">
                    @elseif($module == 'tlwc')
                      <img src="{{ asset('assets/images/wc-tl-connection.png') }}" width="300">
                    @endif
                  </div>

                  <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
              <!--begin::Stepper-->
              <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_create_account_stepper">
                <!--begin::Aside-->
                <div class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px me-9">
                  <!--begin::Wrapper-->
                  <div class="card-body">
                    <!--begin::Nav-->
                    <div class="stepper-nav">
                      <!--begin::Step 1-->
                      <div class="stepper-item current" data-kt-stepper-element="nav">
                        <!--begin::Line-->
                        <div class="stepper-line w-40px"></div>
                        <!--end::Line-->
                        <!--begin::Icon-->
                        <div class="stepper-icon w-40px h-40px">
                          <i class="stepper-check fas fa-check"></i>
                          <span class="stepper-number">1</span>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Label-->
                        <div class="stepper-label">
                          <h3 class="stepper-title">Get PTG File</h3>
                          <div class="stepper-desc fw-bold">Setup PTG file for Tally</div>
                        </div>
                        <!--end::Label-->
                      </div>
                      <!--end::Step 1-->
                      <!--begin::Step 2-->
                      <div class="stepper-item" data-kt-stepper-element="nav">
                        <!--begin::Line-->
                        <div class="stepper-line w-40px"></div>
                        <!--end::Line-->
                        <!--begin::Icon-->
                        <div class="stepper-icon w-40px h-40px">
                          <i class="stepper-check fas fa-check"></i>
                          <span class="stepper-number">2</span>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Label-->
                        <div class="stepper-label">
                          <h3 class="stepper-title">Setup PTG File</h3>
                          <div class="stepper-desc fw-bold">Setup PTG file in Tally</div>
                        </div>
                        <!--end::Label-->
                      </div>
                      <!--end::Step 2-->
                      <!--begin::Step 3-->
                      <div class="stepper-item" data-kt-stepper-element="nav">
                        <!--begin::Line-->
                        <div class="stepper-line w-40px"></div>
                        <!--end::Line-->
                        <!--begin::Icon-->
                        <div class="stepper-icon w-40px h-40px">
                          <i class="stepper-check fas fa-check"></i>
                          <span class="stepper-number">3</span>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Label-->
                        <div class="stepper-label">
                          <h3 class="stepper-title">Data fetch</h3>
                          <div class="stepper-desc fw-bold">Required data fretched from Tally</div>
                        </div>
                        <!--end::Label-->
                      </div>
                      <!--end::Step 3-->
                      <!--begin::Step 4-->
                      <div class="stepper-item" data-kt-stepper-element="nav">
                        <!--begin::Line-->
                        <div class="stepper-line w-40px"></div>
                        <!--end::Line-->
                        <!--begin::Icon-->
                        <div class="stepper-icon w-40px h-40px">
                          <i class="stepper-check fas fa-check"></i>
                          <span class="stepper-number">4</span>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Label-->
                        <div class="stepper-label">
                          <h3 class="stepper-title">Check Connection</h3>
                          <div class="stepper-desc fw-bold">Check Tally connection properly done</div>
                        </div>
                        <!--end::Label-->
                      </div>
                      <!--end::Step 4-->
                      <!--begin::Step 5-->
                      <div class="stepper-item" data-kt-stepper-element="nav">
                        <!--begin::Line-->
                        <div class="stepper-line w-40px"></div>
                        <!--end::Line-->
                        <!--begin::Icon-->
                        <div class="stepper-icon w-40px h-40px">
                          <i class="stepper-check fas fa-check"></i>
                          <span class="stepper-number">5</span>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Label-->
                        <div class="stepper-label">
                          <h3 class="stepper-title">Completed</h3>
                          <div class="stepper-desc fw-bold">Woah, we are here</div>
                        </div>
                        <!--end::Label-->
                      </div>
                      <!--end::Step 5-->
                    </div>
                    <!--end::Nav-->
                  </div>
                  <!--end::Wrapper-->
                </div>
                <!--begin::Aside-->
                <!--begin::Content-->
                <div class="card d-flex flex-row-fluid flex-center">
                  <!--begin::Form-->
                  <form class="card-body " novalidate="novalidate" id="kt_create_account_form">
                    <!--begin::Step 1-->
                    <div class="current" data-kt-stepper-element="content">
                      <!--begin::Wrapper-->
                      <div class="w-100">
                        <!--begin::Heading-->
                        <div class="">
                          <ol>
                            <li>Please make sure you have the Tally application version installed and open in the computer you wish to do the sync.</li>
                            <li>Open the company in Tally which you would like to integrate with this app.</li>
                            <li>Download the PTG file by clicking on the Download button here. <button class="btn btn-primary btn-sm" type="button" onclick="generatePTGFile()" style="    padding: calc(0.45rem + 1px) calc(0.8rem + 1px);">Download</button>
                              <a href="javascript:void(0);" onclick="openSendPTGFileMailPopup()" style="font-size: 14px;"><u> Get file in email? </u></a>
                            </li>
                            <li>A PTG File will be generated and downloaded to your system. In case it does not download automatically, please check if it is stopped by any blocker in your browser.</li>
                            <li>Once you download the file, a Password will be shown here. You need to copy and save this password. This will be required in the steps below to setup the integration. Password : <b class="tallyPassword"> </b> <a href="javascript:void(0);" class="hidden copyPassword" data-toggle="tooltip" data-placement="top" title="Copy to clipboard!" onclick="copyToClipboard();"><i class="fa fa-copy" style="display: inline;"></i></a></li>
                            <li>If you plan to use this on a PC/Server other than where it was download, please copy this file to that PC/Server before proceeding further and complete the next steps from that PC/server.</li>
                          </ol>
                        </div>
                        <!--end::Heading-->
                      </div>
                      <!--end::Wrapper-->
                    </div>
                    <!--end::Step 1-->
                    <!--begin::Step 2-->
                    <div data-kt-stepper-element="content">
                      <!--begin::Wrapper-->
                      <div class="w-100">
                        <!--begin::Heading-->
                        <div class="">
                          <ol>
                            <li>Double-click on the PTG file. If the Tally and Tally webconnector is properly setup in your PC/Server, this file will be recognized and a Wizard will open in the Tally software.</li>
                            <li>If the setup is smooth, our application will be displayed in the Tally Web Connector window. If you have multiple integrations, Click the relevant row, else click first check box.</li>
                          </ol>
                        </div>
                        <!--end::Heading-->
                      </div>
                      <!--end::Wrapper-->
                    </div>
                    <!--end::Step 2-->
                    <!--begin::Step 3-->
                    <div data-kt-stepper-element="content">
                      <!--begin::Wrapper-->
                      <div class="w-100">
                        <!--begin::Heading-->
                        <div class="pb-10 pb-lg-12">
                          <ol>
                             <li>Click on Update Selected button in Tally webconnector for the correct row and wait to for the validation process to complete.</li>
                             <li>When you click on the Update Selected button, it will execute some basic queries to check that a proper communication is established between our Server to your Tally file. It will also fetch the required data from your company file necessary to setup the system.</li>
                          </ol>
                        </div>
                        <!--end::Heading-->
                      </div>
                      <!--end::Wrapper-->
                    </div>
                    <!--end::Step 3-->
                    <!--begin::Step 4-->
                    <div data-kt-stepper-element="content">
                      <!--begin::Wrapper-->
                      <div class="w-100">
                        <!--begin::Heading-->
                        <div class="">
                          <ol>
                            <li>Once the process complete in Tally web connector on your PC/server, click on Test Connection button below to verify that communication is established successfully.</li>
                            <li>If connection is setup successfully, a Setup button will become visible. Please click on the Setup button to proceed to the application Settings page.</li>
                          </ol>
                        </div>
                        <!--end::Heading-->
                      </div>
                      <!--end::Wrapper-->
                    </div>
                    <!--end::Step 4-->
                    <!--begin::Step 5-->
                    <div data-kt-stepper-element="content">
                      <!--begin::Wrapper-->
                      <div class="w-100">
                        <!--begin::Heading-->
                        <div class="pb-8 pb-lg-10">
                          @if(isset($downloadFile) && !empty($downloadFile) && $downloadFile == 'yes')
                            <!-- <span>
                              Your connection is succesfully done. Please proceed to do settings further.
                            </span>
                            <div class="col-md-12" id="settingsBtn">
                                <a class="btn btn-info btn-sm" href="{{ @$settingUrl }}">Setup Settings</a>
                            </div> -->
                            <span id="testConnection">After complition of all above steps you are expected to successfully connect your tally company data. You can check by click this button below.
                            <br>
                            <button  type="button" class="btn btn-success btn-sm" onclick="testConnection()"  style="margin-top:20px;">Test Connection</button>
                            </span>
                          @else
                            <div class="col-md-12 text-left mb-10 hidden" id="proccedNext">
                                <span id="testConnection">After complition of all above steps you are expected to successfully connect your tally company data. You can check by click this button below.
                                <br>
                                <button  type="button" class="btn btn-success btn-sm" onclick="testConnection()"  style="margin-top:20px;">Test Connection</button>
                                </span>
                                
                            </div>
                          @endif
                        </div>
                        <!--end::Heading-->
                      </div>
                      <!--end::Wrapper-->
                    </div>
                    <!--end::Step 5-->
                    <!--begin::Actions-->
                    <div class="d-flex flex-stack pt-3">
                      <!--begin::Wrapper-->
                      <div class="mr-2">
                        <button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
                        <span class="svg-icon svg-icon-4 me-1">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1" fill="black" />
                            <path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z" fill="black" />
                          </svg>
                        </span>
                        <!--end::Svg Icon-->Back</button>
                      </div>
                      <!--end::Wrapper-->
                      <!--begin::Wrapper-->
                      <div>
                        <button type="button" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
                          <span class="indicator-label">Submit
                          <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                          <span class="svg-icon svg-icon-3 ms-2 me-0">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                              <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
                              <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
                            </svg>
                          </span>
                          <!--end::Svg Icon--></span>
                          <span class="indicator-progress">Please wait...
                          <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                        <button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                        <span class="svg-icon svg-icon-4 ms-1 me-0">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
                            <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
                          </svg>
                        </span>
                        <!--end::Svg Icon--></button>
                      </div>
                      <!--end::Wrapper-->
                    </div>
                    <!--end::Actions-->
                  </form>
                  <!--end::Form-->
                </div>
                <!--end::Content-->
              </div>
              <!--end::Stepper-->
            </div>
            <!--end::Container-->
          </div>


                
              </div>
              <!--end::Row-->
          </div>
          <!--end::Plans-->
      </div>
      <!--end::Card body-->
    </div>
</div>
<div class="modal fade" id="mdlTestConnection" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Test Connection</h4>
        <a href="javascript:void(0);" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times fa-lg"></i></a>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <p id="testConnectionMsg"></p>
            <span class="hidden" id="next-step">
             Connection established successfully. You may procced with setup company by clicking this button.
             <br>
            <a class="btn btn-info btn-sm " href="{{ route('tyauth',array('seller_id' => $seller_id)) }}" style="margin-top:20px;">Setup Company</a>
            </span>
          </div>            
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:void(0);" class="btn btn-primary close" data-dismiss="modal">Ok</a>
      </div>
    </div>
  </div>
</div> 
<div class="modal fade" id="askforstate" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Select State</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            {{ Form::select('seller_state',
            $stateList , Input::old('seller_state', @$oldState),
            array('class'=>'form-control select2 seller_state',
            'style'=>'width:100%','id'=>'seller_state'))
            }}
            <span id="err_seller_state" class="text-red" style="color: red;"></span>
          </div>            
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:void(0);" onclick="savesellerstate()" class="btn btn-primary ">Save</a>
      </div>
    </div>
  </div>
</div> 
<div class="modal fade" id="sendPTGFileMail" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" style="display: inline-block;">
        <div class="modal-header">
          <h4 class="modal-title">Get PTG File in Email</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <p>
              Please enter your email address in the box below to receive the PTG file in your inbox.
            </p>
            </div>
            @if(!empty($seller_details->seller_email))
            <div class="col-md-12">
              <p>
              The file will also be sent to the store owner email - < {{$seller_details->seller_email}} >
            </p>
            </div>
            @endif
            <div class="col-md-12">
              <div class="col-md-4">Email:</div>
              <div class="col-md-8"><input type="text" name="sendPTGFileMailId" id="sendPTGFileMailId" class="form-control"></div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" onclick="sendPTGFileMail();">Send</button>
        </div>
      </div>
    </div>
  </div> 
  <div>
    @include('tally.common.tallyauthinstructions')
  </div>
@endsection
@section('more_scripts')
<script src="{{asset('assets/js/custom/create-account.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){

    if('{{$seller_state}}' == ''){
      $('#askforstate').modal({ backdrop: "static ", keyboard: false });
      $('#askforstate').modal('show');
    }
  });
  function savesellerstate(){
    var state = $('#seller_state').val();
    if(state == ''){
      if(state == ''){
        $('#err_seller_state').html('Store State is required.');
      }else{
        $('#err_seller_state').html('');
      }
      return false;
    }else{
      $.ajax({
          type: 'POST',
          url: "{{ route('storesellerstate')}}", 
          data:{"seller_id": "{{$seller_id}}", "state": state},
          success:function( data ) 
          { 
            stopLoading();
            if(data.success == true){
              $('#askforstate').modal('hide');
            }
          },
          error : function(error)
          {
          }
      });
    }

  }
  function testConnection(){
    $.ajax({
        type: 'GET',
        url: "{{ route('checktallyconnection')}}?seller_id={{$seller_id}}", 
        data:"",
        success:function( data ) 
        { 
          stopLoading();
          if(data.success == true){
            $("#next-step").removeClass("hidden");
            $("#testConnection").addClass("hidden");              

            $('#testConnectionMsg').text(data.message);
            $('#mdlTestConnection').modal('show');
          }else{
            if(data.data == 'updatecompany'){
              $("#next-step").removeClass("hidden");
              $("#testConnection").addClass("hidden");
              $('#testConnectionMsg').text('');
              $('#mdlTestConnection').modal('show');
            } else {
              $('#testConnectionMsg').text(data.message);
              $('#mdlTestConnection').modal('show');               
            }
          }
        },
        error : function(error)
        {
        }
    });
  }

  function generatePTGFile() 
  {
      @if(isset($downloadFile) && !empty($downloadFile) && $downloadFile == 'yes')
        var url = "{{ route("generateptgfile")}}?seller_id={{$seller_id}}&downloadFile=yes";
      @else
        var url = "{{ route("generateptgfile")}}?seller_id={{$seller_id}}";
      @endif
      
       $.ajax({
            type: 'GET',
            url: url, 
            data:"",
            success:function( data ) 
            {
              console.log(data);
              if(data != false){

                var element = document.createElement('a');
                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data.content));
                element.setAttribute('download', data.fileName);
                element.click();
                $(".tallyPassword").text(data.password);
                $("#proccedNext").removeClass('hidden');
                @if(isset($downloadFile) && !empty($downloadFile) && $downloadFile == 'yes')
                  $("#settingsBtn").removeClass("hidden");
                @endif
                $(".copyPassword").removeClass("hidden");
              }else{
                alert('Something went wrong while file download. Please try again after page reload.');
              }
            },
            error : function(xhr,status,error)
            {
               console.log(error);
            }
      });
  }
  function copyToClipboard() {
    var copyText = $(".tallyPassword").text();
    var textarea = document.createElement("textarea");
    textarea.textContent = copyText;
    textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy"); 

    document.body.removeChild(textarea);
  }
  function openSendPTGFileMailPopup()
  {
    $("#sendPTGFileMailId").val("");
    $('#sendPTGFileMail').modal("show");
  }
  function sendPTGFileMail() 
  {
      var url = "{{ route("generateptgfile")}}?seller_id={{$seller_id}}&sendMail=yes&mailId="+$("#sendPTGFileMailId").val();

      @if(isset($downloadFile) && !empty($downloadFile) && $downloadFile == 'yes')
        url = "{{ route("generateptgfile")}}?seller_id={{$seller_id}}&downloadFile=yes&sendMail=yes&mailId="+$("#sendPTGFileMailId").val();
      @endif

       $.ajax({
              type: 'GET',
              url: url,
              data:"",
              success:function( data ) 
              { 
                  console.log(data);
                  if (typeof data.password == 'undefined')
                  $(".tallyPassword").text(data.password);
                  @if(isset($downloadFile) && !empty($downloadFile) && $downloadFile == 'yes')
                    $("#settingsBtn").removeClass("hidden");
                  @else
                    $("#proccedNext").removeClass("hidden");
                  @endif
                    $(".copyPassword").removeClass("hidden");

                  $('#sendPTGFileMail').modal("hide");
              },
              error : function(xhr,status,error)
              {
                 console.log("error");
                 console.log(error);
              }
      });
    }
</script>
@endsection