@extends('layouts.app')
@section('style')
<link rel="stylesheet" type="text/css" href="{{URL::asset('
profile/profile-2.min.css')}}"> 
<style type="text/css">
.padding{
  padding: 0px;    
}
</style>
</style>
<style type="text/css">
.modal-container{
    width: 30% !important;
}
</style>
@stop
@section('content')
@include('customers.modal')

<!-- purchase excell   -->
  <div id="app11" v-cloak>
        {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
       <input type="hidden" name="type" value="transportCompany_details"/>
       <input type="hidden" name="transportCompany_id" value="{{$transportCompany->id}}"/>
        <button id="show-modal11" style="display: none" type="button"  @click="editExample11">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
            
                   <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.Date')</label>
                            <div class="input-group">
                                <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                             
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        
        {{Form::close()}}
    </div>
    
<!--    -->


<!-- purchase pdf   -->
  <div id="app12" v-cloak>
       {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
         <input type="hidden" name="type" value="transportCompany_details"/>
        <input type="hidden" name="transportCompany_id" value="{{$transportCompany->id}}"/>
        <button id="show-modal12" style="display: none" type="button"  @click="editExample12">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
            
                   <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.Date')</label>
                            <div class="input-group">
                                <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                             
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        
        {{Form::close()}}
    </div>
    
<!--    -->

<!-- bill excell   -->
  <div id="app13" v-cloak>
        {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
         <input type="hidden" name="type" value="builllist"/>
         <input type="hidden" name="member_id" value="{{$transportCompany->member_id}}"/> 
        <button id="show-modal13" style="display: none" type="button"  @click="editExample13">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
            
                   <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.Date')</label>
                            <div class="input-group">
                                <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                             
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        
        {{Form::close()}}
    </div>
    
<!--    -->

<!-- bill pdf   -->
  <div id="app14" v-cloak>
       {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
         <input type="hidden" name="type" value="builllist"/>
         <input type="hidden" name="member_id" value="{{$transportCompany->member_id}}"/> 
        <button id="show-modal14" style="display: none" type="button"  @click="editExample14">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
            
                   <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.Date')</label>
                            <div class="input-group">
                                <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                             
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        
        {{Form::close()}}
    </div>
    
<!--    -->


<!-- payment excell   -->
  <div id="app15" v-cloak>
          {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
          <input type="hidden" name="type" value="all_pay"/>              
          <input type="hidden" name="member_id" value="{{$transportCompany->member_id}}"/>
        <button id="show-modal15" style="display: none" type="button"  @click="editExample15">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
            
                   <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.Date')</label>
                            <div class="input-group">
                                <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                             
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        
        {{Form::close()}}
    </div>
    
<!--    -->




<!-- payment pdf   -->
  <div id="app16" v-cloak>
        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
        <input type="hidden" name="type" value="all_pay"/>
        <input type="hidden" name="member_id" value="{{$transportCompany->member_id}}"/>
        <button id="show-modal16" style="display: none" type="button"  @click="editExample16">Show Modal</button>
        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false" >
            <div slot="body">
            
                   <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label"> @lang('layout.Date')</label>
                            <div class="input-group">
                                <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                             
                                <span class="input-group-addon"> @lang('layout.To') </span>
                                <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div slot="footer">
                <button type="submit" class="btn btn-success" @click="ok">
                    @lang('layout.Submit')
                </button>
                <button type="button" class="btn btn-danger" @click="close">
                    @lang('layout.Cancel')
                </button>
            </div>
        </modal>
        
        {{Form::close()}}
    </div>
    
<!--    -->
<div id="apps1" v-cloak>
  {{Form::open(['route' => 'export.PDFAny','method' => 'DELETE','class' => 'inline'])}}
  <input type="hidden" name="type" value="vendorStatement"/>
 <input type="hidden" name="type_name" value="transportCompany"/>
                     <input type="hidden" name="member_id" value="{{$transportCompany->member_id}}"/> 
  <button id="show-modals1" style="display: none" type="button" @click="editExample">Show Modal</button>
  <!-- use the modal component, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false" >
    <div slot="body">
      <div class="row">
        <div class="form-group">
          <div>
            <label>@lang('layout.HomeCurency')</label>
            <input class="mt-checkbox" type="checkbox" name="home_currency" checked="">
          </div>
             <div  class="col-md-12">
                    <label class="control-label ">@lang('layout.Currency') </label>
                    <select name="currency"  class="form-control">
                      <option value="">@lang('layout.Select')</option>
                      @foreach(currencyList() AS $currency)
                      <option value="{{$currency->code}}">{{$currency->code}}</option>
                      @endforeach
                    </select>
                  </div>
          <div  class="col-md-12">
            <label class="control-label ">@lang('layout.SelectType') </label>
            <select name="category"  class="form-control">
              <option  value="">@lang('layout.SelectType')</option>
              <option  value="item">@lang('layout.WithItem')</option>
              <option selected="selected"  value="">@lang('layout.WithoutItem')</option>
            </select>
          </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label class="control-label"> @lang('layout.Date')</label>
                    <div class="input-group">
                        <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                     
                        <span class="input-group-addon"> @lang('layout.To') </span>
                        <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                     
                    </div>
                </div>
           </div>
        </div>
      </div>
    </div>
    <div slot="footer">
      <button type="submit" class="btn btn-success" @click="ok">
        @lang('layout.Submit')
      </button>
      <button type="button" class="btn btn-danger" @click="close">
        @lang('layout.Cancel')
      </button>
    </div>
  </modal>
  {{Form::close()}}
</div>
<div id="apps2" v-cloak>
 {{Form::open(['route' => 'export.exportCsv','method' => 'DELETE','class' => 'inline'])}}

 <input type="hidden" name="type" value="vendorStatement"/>
 <input type="hidden" name="type_name" value="transportCompany"/>
                     <input type="hidden" name="member_id" value="{{$transportCompany->member_id}}"/> 
 <button id="show-modals2" style="display: none" type="button" @click="editExample2">Show Modal</button>
 <!-- use the modal component, pass in the prop -->
 <modal v-if="showModal" @close="showModal = false" >
  <div slot="body">
    <div class="row">
      <div class="form-group">
        <div>
            <label>@lang('layout.HomeCurency')</label>
            <input class="mt-checkbox" type="checkbox" name="home_currency" checked="">
          </div>
   <div  class="col-md-12">
          <label class="control-label ">@lang('layout.Currency') </label>
          <select name="currency"  class="form-control">
            <option value="">@lang('layout.Select')</option>
            @foreach(currencyList() AS $currency)
            <option value="{{$currency->code}}">{{$currency->code}}</option>
            @endforeach
          </select>
        </div>
       <div  class="col-md-12">
        <label class="control-label ">@lang('layout.SelectType') </label>
         <select name="category"  class="form-control">
              <option  value="">@lang('layout.SelectType')</option>
              <option  value="item">@lang('layout.WithItem')</option>
              <option selected="selected"  value="">@lang('layout.WithoutItem')</option>
            </select>
      </div>
        <div class="col-md-12">
                <div class="form-group">
                    <label class="control-label"> @lang('layout.Date')</label>
                    <div class="input-group">
                        <input class="form-control" id="range-from-example11" autocomplete="off" name="from_date">
                     
                        <span class="input-group-addon"> @lang('layout.To') </span>
                        <input class="form-control" id="range-to-example11" autocomplete="off" name="to_date">
                     
                    </div>
                </div>
           </div>
    </div>
  </div>

</div>
<div slot="footer">
  <button type="submit" class="btn btn-success" @click="ok">
    @lang('layout.Submit')
  </button>
  <button type="button" class="btn btn-danger" @click="close">
    @lang('layout.Cancel')
  </button>
</div>
</modal>

{{Form::close()}}
</div>

<div class="portlet">
 <div class="portlet-title" id="backbtn">
  <div class="caption">
    <i class=""></i>@lang('layout.ShowTransportCompany')
  </div>
  <div class="tools">
  </div>
</div>
<div class="portlet-body">
  <div class="tabbable-line tabbable-full-width">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#tab_1_1" data-toggle="tab"> @lang('layout.Overview') </a>
      </li>
      <li>
        <a href="#tab_1_3" data-toggle="tab"> @lang('layout.Info') </a>
      </li>

</ul> 
<div class="tab-content">
  <div class="tab-pane active" id="tab_1_1">
    <div class="">
      <div class="col-md-2">
        <ul class="list-unstyled profile-nav">
          <li>
           <div title="{{$transportCompany->name}}" class="twPc-avatarLink">
            @if($transportCompany->photo ==Null)
            <img class="twPc-avatarImg" src="{{asset('uploads/avatar.png')}}" style="width:170px; height:170px;" >
            @else
            <img class=" twPc-avatarImg" src="{!!url('/uploads/'.$transportCompany->photo)!!}" style="width:170px; height:170px;" > 
            @endif    
          </div>
        </li> 
      </ul>
    </div>
    <div class="col-md-10" id="customer-summary" v-cloak>
      <div class="row">
         <div class="col-md-6 profile-info">
          <h1 class="font-green sbold uppercase">{{$transportCompany->name}}</h1>
          <div style="margin-top: 20%;">
            <ul class="list-inline">
              <li>
                <i class="fa fa-user"></i> {{$transportCompany->name}}</li>
                <li>
                  <i class="fa fa-mobile"></i> {{$transportCompany->phone}}</li>
                  <li>
                    <i class="fa fa fa-envelope"></i> {{$transportCompany->email}}</li>

                    <li>
                      <i class="fa fa-home"></i> {{$transportCompany->city}}</li>
                      <li>
                        <i class="fa fa-calendar-plus-o"></i> {{convertDate($transportCompany->reg_date)}} </li>
                      </ul>
                    </div>
        </div>
                  <!--end col-md-8-->

                  <div class="col-md-6">
                    <div class="portlet sale-summary">
                      <div class="portlet-title">
                        <div class="caption font-red sbold"> @lang('layout.TransportCompanySummary') </div>
                        <div class="tools">
                          <a class="reload" href="javascript:;"> </a>
                        </div>
                      </div>
                      <div class="portlet-body">
                        <div class="table-scrollable">
                          <table class="table table-striped table-bordered table-advance table-hover">
                            <thead>
                              <tr>
                                <th>
                                  <i class="icon-user"></i> @lang('menu.Driver')
                                </th>
                              
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                  <td class="highlight">
                                     {{$countDrivers['number']}}
                                   </td>

                                 </tr>
                                </tbody>
                              </table>
                            </div>

                          </div>
                        </div>
                      </div>

                      <!--end col-md-4-->
                    </div>
                    <!--end row-->
                  </div>
                </div>
                <div class="">
                  <div class="tabbable-line tabbable-custom-profile">
                    <ul class="nav nav-tabs">  
                     <li class="active">
                      <a href="#Purchases" data-toggle="tab" id="Purch-table">
                       <i class="suicon-user"></i><b> @lang('menu.Driver') </b></a>
                     </li>
                
                   </ul> 
                   <div class="tab-content padding" style="padding: 0px;">
                    <div class="tab-pane active" id="Purchases">
                     <div class="row">
                      <div class="col-md-12">
                        <!-- BEGIN EXAMPLE TABLE PORTLET-->
                        <div class="portlet light bordered">
                          <div class="portlet-title">
                            <div class="caption font-dark">
                              <i class="icon-settings font-dark"></i>
                              <span class="caption-subject bold uppercase">@lang('menu.Driver')</span>
                            </div>
                            <div class="actions">
                              <button type="button" class="btn btn-success" id="excell11"> <i class="fa fa-file-excel-o"></i> @lang('layout.Excel') </button>
                              <button type="button" class="btn btn-success" id="pdf12"> <i class="fa fa-file-pdf-o"></i> @lang('layout.PDF') </button>
                            
                           </div>
                         </div>
                         <div class="portlet-body">
                          <table class="table table-striped table-bordered table-hover" id="driver">
                            <thead>
                              <tr>  
                                <th>@lang('layout.Code')</th>
                                <th>@lang('layout.Name')</th>
                                <th>@lang('layout.Email')</th>
                                <th>@lang('layout.Phone')</th>
                                <th>@lang('layout.Actions')</th>
                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                      <!-- END EXAMPLE TABLE PORTLET-->
                    </div>
                  </div>
                </div>
                <!--tab-pane-->


      </div>
    </div>
  </div>
</div>
<!--tab_1_2-->
<div class="tab-pane" id="tab_1_3">
  <div class=" profile-account">
    <div class="col-md-3">
      <ul class="ver-inline-menu tabbable margin-bottom-10">
        <li class="active">
          <a data-toggle="tab" href="#tab_1-1">
            <i class="icon-user"></i> @lang('layout.Information') </a>
            <span class="after"> </span>
          </li>
          <li>
            <a data-toggle="tab" href="#tab_2-2">
              <i class="icon-home"></i> @lang('layout.Address') </a>
            </li> 
          </ul>
        </div>
        <div class="col-md-9">
          <div class="tab-content">
            <div id="tab_1-1" class="tab-pane active">
              <div class="row">
                <div class="col-md-12">
                 <table class="table">
                   <thead>
                    <tr>
                     <th>@lang('layout.LicenseNumber')</th>
                     <th>@lang('layout.LicenseType')</th>
                     <th>@lang('layout.Branch')</th>
                     <th>@lang('layout.Email')</th>
                     <th>@lang('layout.Phone')</th>
                     <th>@lang('layout.RegDate')</th>
                     <th>@lang('layout.ExpireDate')</th>
                   </tr>
                 </thead>
                 <tbody>
                  <tr class="active">
                    <td class="hidden-xs"> {{ $transportCompany->license_number }}  </td>
                    <td class="hidden-xs"> {{ __('type.' .$transportCompany->license_type )}}  </td> 
                    <td class="hidden-xs"> {{ $transportCompany->branch }}  </td>
                    <td class="hidden-xs"> {{ $transportCompany->email }}  </td>
                    <td class="hidden-xs"> {{ $transportCompany->phone }}  </td>
                    <td class="hidden-xs"> {{ convertDate($transportCompany->reg_date) }}  </td>
                    <td class="hidden-xs"> {{ convertDate($transportCompany->expire_date) }}  </td>

                  </tr>

                </tbody>
              </table>

            </div> 
          </div>  
        </div>
        <div id="tab_2-2" class="tab-pane">
          <div class="row">
           <div class="col-md-12">
             <table class="table">
               <thead>
                <tr>
                 <th>@lang('layout.Address')</th>
                 <th>@lang('layout.City')</th>
                 <th>@lang('layout.Country')</th>
                 <th>@lang('layout.PostCode')</th>
                 <th>@lang('layout.Description')</th>
               </tr>
             </thead>
             <tbody>
              <tr class="active">
                <td class="hidden-xs"> {{ $transportCompany->address }}  </td>
                <td class="hidden-xs"> {{ $transportCompany->city }}  </td>
                <td class="hidden-xs"> {{ $transportCompany->country }}  </td> 
                <td class="hidden-xs"> {{ $transportCompany->post_code }}  </td> 
                <td class="hidden-xs"> {{ $transportCompany->description }}  </td>
              </tr>
            </tbody>
          </table>
        </div> 
      </div>  
    </div>


  </div>
</div>
<!--end col-md-9-->
</div>
</div>
<!--end tab-pane-->

<!--end tab-pane-->
</div>
</div>
</div>
</div> 
<iframe id="payframe" style="display: none;" ></iframe>

@endsection
@push('scripts')

<script>
  Vue.component("v-select", VueSelect.VueSelect);
    @if (Session('payment_id'))
    printVoucher("{{Session('payment_id')}}")
    @endif

    //   function printVoucher(id){
    //     document.getElementById("payframe").src ="{{url('printPayment')}}/"+id;

    // } 
    function printVoucher(id) {
 document.location.href="{{url('printPayment')}}/"+id;
  
}
  Vue.component('modal', {
    template: '#modal-template'
  });

  new Vue({
    el: '#customer-summary',
    data:{

      summary : {!! memberBalance($transportCompany->id) !!},

    },
    methods: {}

  });
  new Vue({
    el: '#app',
    data:{
      balance:{},

      amount:null,
      selectedCurrency:{!! json_encode(Currency()->getCurrency()) !!},
      currency:{!!  json_encode(getCurrencies()) !!},
      showModal: false,
      prepaidModal:false,
    },
    computed:{

            // accountUpdate() {
            //     var b = _.clone(Banks)
            //     return this.accounts = b.filter((account) => {
            //         return (new RegExp(this.selectedCurrency.code.toLowerCase())).test(account.code.toLowerCase())
            //     })
            // },
          },
          methods:{
            
            openingSubmit(){

              swal({
                title: "Are you sure?",
                text: "",
                icon: "info",
                buttons: true,
                dangerMode: true,
              })
              .then((willDelete) => {
                if (willDelete) {
                  document.getElementById("customer-opening-balance").submit()

                } else {

                }
              });
            },
            prepaidSubmit(){

              swal({
                title: "Are you sure?",
                text: "",
                icon: "info",
                buttons: true,
                dangerMode: true,
              })
              .then((willDelete) => {
                if (willDelete) {
                  document.getElementById("customer-prepaid-balance").submit()

                } else {

                }
              });
            }
          }

        });

 

   $('#driver').DataTable({
    scrollCollapse: true,
    serverSide: true,
    paging: true,
    responsive:'{{responsiveDataTable()}}',
    pagingType:'{{paginationType()}}',
    retrieve: true,
    ajax:{
      url:'{{route("transportCompany.show",$transportCompany->id)}}',
      data:{type:'driver'}
    },

    columns: [
    { data: 'code', name: 'members.code' },
    { data: 'name', name: 'members.name' },
    { data: 'email', name: 'email' ,orderable:false,searchable:false},
    { data: 'phone', name: 'members.phone' },
    { data: 'actions', name: 'actions',orderable:false,searchable:false},

  


    ]
  });

   var Modal=Vue.component('modal', {
          template: '#modal-template',
          methods: {
            ok: function() {
              this.$emit('ok')
            }
          }
        });
// start app
new Vue({
  el: '#apps1',
  data: {
    showModal: false,
    selectedMember:null,
  },
  methods:{
    ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
  this.showModal = !this.showModal;
},
editExample : function(){
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})

}
},
})
$('#print_pdf_alls').on('click',function(e){
  $('#show-modals1').click();
  e.preventDefault();
})
new Vue({
  el: '#apps2',
  data: {
    showModal: false
  },
  methods:{
    ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
  this.showModal = !this.showModal;
},
editExample2 : function(){
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})
$('#excell_alls').on('click',function(e){
  $('#show-modals2').click();
  e.preventDefault();
})

   /////purchase excell




       new Vue({
    el: '#app11',
    data: {
        showModal: false
    },
    methods:{
        ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
    this.showModal = !this.showModal;
},
editExample11 : function(){
    
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})


    $('#excell11').on('click',function(e){
        $('#show-modal11').click();
        e.preventDefault();
    })



       /////purchase pdf




       new Vue({
    el: '#app12',
    data: {
        showModal: false
    },
    methods:{
        ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
    this.showModal = !this.showModal;
},
editExample12 : function(){
    
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})


    $('#pdf12').on('click',function(e){
        $('#show-modal12').click();
        e.preventDefault();
    })



  /////bill excell

       new Vue({
    el: '#app13',
    data: {
        showModal: false
    },
    methods:{
        ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
    this.showModal = !this.showModal;
},
editExample13 : function(){
    
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})


    $('#excell13').on('click',function(e){
        $('#show-modal13').click();
        e.preventDefault();
    })




     /////bill pdf

       new Vue({
    el: '#app14',
    data: {
        showModal: false
    },
    methods:{
        ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
    this.showModal = !this.showModal;
},
editExample14 : function(){
    
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})


    $('#pdf14').on('click',function(e){
        $('#show-modal14').click();
        e.preventDefault();
    })


         /////payment excell

       new Vue({
    el: '#app15',
    data: {
        showModal: false
    },
    methods:{
        ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
    this.showModal = !this.showModal;
},
editExample15 : function(){
    
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
            altFormat: 'u',
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})


    $('#excell15').on('click',function(e){
        $('#show-modal15').click();
        e.preventDefault();
    })

             /////payment excell

       new Vue({
    el: '#app16',
    data: {
        showModal: false
    },
    methods:{
        ok:function(){
//alert('you clicked me');
this.showModal = !this.showModal;
},
close:function(e)
{
    this.showModal = !this.showModal;
},
editExample16 : function(){
    
//Your other code that launches the modal
this.showModal= true;
this.$nextTick(function(){
    $(document).ready(function(){
        var to, from;
        to = $("#range-to-example11").persianDatepicker({
           
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
        
        });
        from = $("#range-from-example11").persianDatepicker({
          
            initialValue: false,
            observer: true,
            format: 'YYYY/MM/DD',
            autoClose:true,
      
        });
    });
})
}
},
})


    $('#pdf16').on('click',function(e){
        $('#show-modal16').click();
        e.preventDefault();
    })
</script>
@endpush