@extends('layouts/default')

@section('commonbuttons')

@stop


@section('title')
Xero Sync Settings
@stop

<style type="text/css">
  .custTxnInfoBlock .tooltip-inner{
    max-width: 500px !important;
    text-align: left !important;
  }
  .parallel-div{
    width: 50%;float: left;padding: 20px;
  }
</style>
@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/paper-bootstrap-wizard.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/demo.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/themify-icons.css')}}"/>
<div class="setting_page">
  <div class="d-inline-block w-100"> 
    <div class="ui-layout">
    
    <div class="row">
    <div class="col-md-12">
      <div class="box box-default">
        <div class="box-body">
            
            <div class="next-card" id="showSettings">
              <div class="row">
                  @include('notifications')
                  <div class="col-md-12">
                  <form id="create-form" class="" method="post" action="" autocomplete="off" role="form" enctype="multipart/form-data">
                  <div>
                    <div class="form-group {{ $errors->has('bank_account') ? ' has-error' : '' }}">
                      <div class="row text-center"><b>Select Sync Type</b></div>
                      <div class="row" style="padding: 10px;">
                        <div class="parallel-div" style="text-align: right;border-right: 2px black solid;">
                          <div class="marketplace-info btn btn-wd" onclick="storeSyncType('Summary');" style="cursor: pointer;">
                            <div class="text-center marketplace-footer">
                              <div>Click to Continue Sync with</div>
                              <b style="font-size: x-large;">Summary Entry to Xero</b>
                            </div>
                          </div>
                         </div>
                         <div class="headerDivider"></div>
                         <div class="parallel-div">
                            <div class="marketplace-info btn btn-wd" onclick="storeSyncType('Individual');" style="cursor: pointer;">
                              <div class="text-center marketplace-footer">
                                <div>Click to Continue Sync with</div>
                                <b style="font-size: x-large;">Individual Orders to Xero</b>
                              </div>
                              
                            </div>
                         </div>
                        </div>
                      <!-- <div class="row">
                        <div class="col-md-5">
                          <div class="next-label">Select Way of Sync</div>
                          {{ Form::select('sync_type', array(''=>'--Select Sync Type--','Individual'=>'Individual','Summary'=>'Summary') , Input::old('sync_type', @$settingData['sync_type']), array('class'=>'form-control', 'style'=>'width:100%','id'=>'sync_type')) }}
                          {!! $errors->first('sync_type', '<span class="alert-msg"><i class="fa fa-times"></i> :message</span>') !!}
                          <input type="hidden" name="seller_id" value="{{$seller_id}}">
                        </div>
                         <button type="button" class="btn btn-finish btn-success btn-wd" onclick="storeSyncType();" style="margin-top: 21px;">Save</button>
                        <div class="col-md-12 field-info">
                          Note goes here for instructions.
                        </div>
                      </div> -->
                     </div> 
                    </div>
                </form><br>
                   
                  </div>
              </div>
            </div>
            <div class="text-center">
              <button onclick="disconnectCompany();" class="btn btn-danger btn-wd"><i class="fa fa-remove icon-white"></i> Disconnect {{$companyName}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

@stop
@section('moar_scripts')
<style type="text/css">
  .error {
    border-color: #ec0606;
  }
  label.error{
    color:#ec0606;
  }
  .alert-success{
    color: #212b36 !important;
    background-color: #e0f5f5 !important;
    border: none;
    box-shadow: inset 0 3px 0 0 #47c1bf, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
  }
  .alert-success:focus {
       box-shadow: inset 0 3px 0 0 #47c1bf, inset 0 0 0 3px #47c1bf, 0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15);
  }
  .msgText{
    font-size: 12px;
  }
</style>
<script src="{{asset('assets/js/jquery.bootstrap.wizard.js')}}"></script>
<script src="{{ asset('assets/js/bootbox.min.js') }}"></script>
<script type="text/javascript">
   $(document).ready(function() 
    {
       $validator = $("#create-form").validate({ 
                rules: {
                  seller_id: {
                    required: true,
                  },
                  sync_type: {
                    required: true,
                  },   
                }
              });
    });
  
    function disconnectCompany()
    {
      bootbox.confirm({
          title: "Disconnect {{$companyName}}",
          message: "Are you sure you want to disconnect this company?",
          buttons: {
              cancel: {
                  label: '<i class="fa fa-times"></i> Cancel'
              },
              confirm: {
                  label: '<i class="fa fa-check"></i> Confirm'
              }
          },
          callback: function (result) {
              if(result)
              {
                $.ajax({
                        type: 'GET',
                        url: "{{route('disconnect',array('seller_id' => $seller_id))}}", 
                        data:"",
                        success:function( data ) 
                        { 
                           window.location.reload();
                        },
                        error : function(xhr,status,error)
                        {
                           window.settingsEditor.refresh();
                        }
                });
              }
          }
      });
    }

    function storeSyncType(type)
    {
      if(type == 'Individual')
        var bootboxMessage = "<div>This method will sync all your orders individually from Woocommerce to your Xero account. This will separately sync the orders and the payouts & fees. Please click on Confirm to continue.</div><br><div>If you want to sync only summary entries, please click on Cancel to go back and select the other option.</div>";
      if(type == 'Summary')
        var bootboxMessage = "<div>This method will sync all your data from Woocommerce to your Xero account in a summary format. This will create one entry based on each payout that you receive from Woocommerce which will include the sales, refunds, payouts and fees. Please click on Confirm to continue.</div><br><div>If you want to sync individual order entries, please click on Cancel to go back and select the other option.</div>";
      bootbox.confirm({
          title: "Confirm Sync Type",
          message: bootboxMessage,
          buttons: {
              cancel: {
                  label: '<i class="fa fa-times"></i> Cancel'
              },
              confirm: {
                  label: '<i class="fa fa-check"></i> Confirm'
              }
          },
          callback: function (result) {
              if(result)
              {
                startLoading();
                $.ajaxSetup({
                    headers: {
                         'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                $.ajax({
                        type: 'POST',
                        url: "{{route('storeSyncTypeWc',array('seller_id' => $seller_id ))}}", 
                        data:{sync_type:type},
                        success:function( data , code ) 
                        { 
                          window.location.reload();
                        }
                });
              }
          }
      });
    }
</script>
<script src="{{asset('assets/js/paper-bootstrap-wizard.js')}}"></script>
@stop