@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="purchaselist"/>
       <input type="hidden" name="member_id" value="{{$driver->member_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="purchaselist"/>
         <input type="hidden" name="member_id" value="{{$driver->member_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="{{$driver->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="{{$driver->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="{{$driver->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="{{$driver->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="Driver"/>
                      <input type="hidden" name="member_id" value="{{$driver->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="Driver"/>
                        <input type="hidden" name="member_id" value="{{$driver->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.DriverOrCompanyShow')
      </div>
      <div class="tools">
        <a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
        <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
      </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>
          <li class="">
              <a href="#tab_1_4" data-toggle="tab" id="tab_attachment">@lang('layout.Attachments')</a>
          </li>
          <div class="btn-group pull-right ">
            <span id="app" v-cloak>      
              <button class="btn btn-success" onclick="location.href='{{route('memberOpeningBalance.create',$driver->id)}}'">@lang('layout.OpeningBalance')</button>
            </span>
          </div>
        </ul> 
        <div class="tab-content">
          <div class="tab-pane active" id="tab_1_1">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12" style="border-radius: 8px; padding: 0px 0px 0px 0px;">
                <div style="display: flex;justify-content: space-around;flex-wrap: wrap;">
                  <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px;padding: 10px; margin-bottom: 10px;">
                    <div style="display: flex;align-items: center;">
                      <div title="{{$driver->name}}" class="twPc-avatarLink" style="margin-right: 10px; margin-left: 10px;">
                        @if($driver->photo ==Null)
                        <img class="twPc-avatarImg" src="{{asset('uploads/avatar.png')}}" style="width:150px; height:150px;border-radius: 50%; border: 5px solid rgb(80, 129, 141);" >
                        @else
                        <img class=" twPc-avatarImg" src="{!!url('/uploads/'.$driver->photo)!!}" style="width:170px; height:170px;" > 
                        @endif    
                      </div>
                      <table class="table table-bordered">
                        <tr>
                          <td colspan="2" class="text-center" style="font-size: 20px;font-weight: bold;">{{$driver->name}}</td>
                        </tr>
                        <tr>
                          @if($driver->phone)
                          <th class="text-center"><i class="fa fa-mobile"></i></th>
                          <td class="text-center">{{$driver->phone}}</td>
                          @endif
                        </tr>
                        <tr>
                          @if($driver->email)
                          <th class="text-center"><i class="fa fa fa-envelope"></i></th>
                          <td class="text-center">{{$driver->email}}</td>
                          @endif
                        </tr>
                        <tr>
                          @if($driver->city)
                          <th class="text-center"><i class="fa fa-home"></i></th>
                          <td class="text-center">{{$driver->city}}</td>
                          @endif
                        </tr>
                        <tr>
                          @if($driver->reg_date)
                          <th class="text-center"><i class="fa fa-calendar-plus-o"></i></th>
                          <td class="text-center">{{convertDate($driver->reg_date)}}</td>
                          @endif
                        </tr>
                      </table>
                    </div>
                  </div>
                  {{-- <div class="col-lg-1 col-md-12 col-sm-12 col-xs-12"></div> --}}
                  <div class="col-lg-5 col-md-12 col-sm-12 col-xs-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px;">
                    <div class="col-md-12" id="customer-summary" v-cloak>
                      <div class="row">
                        <div class="col-md-12">
                          <div class="portlet sale-summary">
                            <div class="portlet-title">
                              <div class=" font-black sbold text-center" style="font-size: 20px;margin-top: 5px;color: black !important;"> @lang('layout.DriverOrCompanySummary') </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 class="text-center">
                                        <i class="fa fa-money"></i> @lang('layout.Currency')
                                      </th>
                                      <th class="text-center">
                                        <i class="fa fa-briefcase"></i> @lang('layout.Receivable')
                                      </th>
                                      <th class="text-center">
                                        <i class="fa fa-briefcase"></i> @lang('layout.Payable') 
                                      </th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    @foreach(getStatement($driver->member_id) AS $rec)
                                    <tr>
                                      <td class="text-center">
                                        {{$rec['currency']}}
                                      </td>
                                      <td class="text-center"> {{ $rec['invoice'] }}</td>
                                      <td class="text-center"> {{ $rec['payment'] }}</td>
                                    </tr>
                                    @endforeach
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!--end col-md-4-->
                      </div>
                      <!--end row-->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {{-- <div class="">
              <div class="col-md-2">
                <ul class="list-unstyled profile-nav">
                  <li>
                  <div title="{{$driver->name}}" class="twPc-avatarLink">
                    @if($driver->photo ==Null)
                    <img class="twPc-avatarImg" src="{{asset('uploads/avatar.png')}}" style="width:170px; height:170px;" >
                    @else
                    <img class=" twPc-avatarImg" src="{!!url('/uploads/'.$driver->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">{{$driver->name}}</h1>
                  <div style="margin-top: 20%;">
                    <ul class="list-inline">
                      <li>
                        <i class="fa fa-user"></i> {{$driver->name}}
                      </li>
                      <li>
                        <i class="fa fa-mobile"></i> {{$driver->phone}}
                      </li>
                      <li>
                        <i class="fa fa fa-envelope"></i> {{$driver->email}}
                      </li>
                      <li>
                        <i class="fa fa-home"></i> {{$driver->city}}
                      </li>
                      <li>
                        <i class="fa fa-calendar-plus-o"></i> {{convertDate($driver->reg_date)}} 
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="portlet sale-summary">
                    <div class="portlet-title">
                      <div class="caption font-red sbold"> @lang('layout.DriverOrCompanySummary') </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="fa fa-money"></i> @lang('layout.Currency')
                              </th>
                              <th class="hidden-xs">
                                <i class="fa fa-briefcase"></i> @lang('layout.Receivable')
                              </th>
                              <th>
                                <i class="fa fa-briefcase"></i> @lang('layout.Payable') 
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach(getStatement($driver->member_id) AS $rec)
                            <tr>
                              <td class="highlight">
                                {{$rec['currency']}}
                              </td>
                              <td class=""> {{ $rec['invoice'] }}</td>
                              <td> {{ $rec['payment'] }}</td>
                            </tr>
                            @endforeach
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <!--end col-md-4-->
              </div>
              <!--end row-->
            </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=" icon-basket-loaded"></i><b> @lang('layout.Purchases') </b></a>
                    </li>
                    <li class="">
                        <a href="#bill" data-toggle="tab" id="ven-bill">
                        <i class="icon-note"></i><b> @lang('layout.Bills')</b> </a>
                    </li>
                    <li class="">
                        <a href="#payments" data-toggle="tab" id="cus-payments">
                        <i class="fa  "></i><b> @lang('layout.Pyments') </b></a>
                    </li> 
                    <li class="">
                        <a href="#statement" data-toggle="tab" id=cus-statement>
                        <i class="icon-credit-card"></i><b> @lang('layout.Statements') </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('layout.PurchasesDetails')</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="pur">
                              <thead>
                                <tr>  
                                  <th>@lang('layout.PurchaseNumber')</th>
                                  <th>@lang('layout.Account')</th>
                                  <th>@lang('layout.Date')</th>
                                  <th>@lang('layout.Type')</th>
                                  <th>@lang('layout.Amount')</th>
                                  <th>@lang('layout.Currency')</th>
                                  <th>@lang('layout.Actions')</th>
                                </tr>
                              </thead>
                            </table>
                          </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                      </div>
                    </div>
                  </div>
                  <!--tab-pane-->
                  <div class="tab-pane" id="bill">
                    <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('layout.BillDetails')</span>
                            </div>
                            <div class="actions">
                              <button type="button" class="btn btn-success" id="excell13"> <i class="fa fa-file-excel-o"></i> @lang('layout.Excel') </button>
                              <button type="submit" class="btn btn-success" id="pdf14"> <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="bills">
                              <thead>
                                <tr>   
                                  <th>@lang('layout.BillNumber')</th>
                                  <th>@lang('layout.Account')</th>
                                  <th>@lang('layout.Date')</th>
                                  <th>@lang('layout.Amount')</th>
                                  <th>@lang('layout.Currency')</th>
                                  <th>@lang('layout.Actions')</th>
                                </tr>
                              </thead>
                            </table>
                          </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                      </div>
                    </div>
                  </div> 
                  <div class="tab-pane" id="payments">
                    <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('layout.PaymentsDetails')</span>
                            </div>
                            <div class="actions">
                              <button type="submit" class="btn btn-success" id="excell15"> <i class="fa fa-file-excel-o"></i> @lang('layout.Excel') </button>
                              <button type="submit" class="btn btn-success" id="pdf16"> <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="payment-table">
                              <thead>
                                <tr>   
                                  <th>@lang('layout.Account')</th>
                                  <th>@lang('layout.Date')</th>
                                  <th>@lang('layout.Amount')</th>
                                  <th>@lang('layout.Rate')</th>
                                  <th>@lang('layout.Currency')</th>
                                  <th>@lang('layout.Actions')</th>
                                </tr>
                              </thead>
                            </table>
                          </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                      </div>
                    </div>
                  </div> 
                  <div class="tab-pane" id="statement">
                    <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('layout.StatementDetails')</span>
                            </div>
                            <div class="actions">
                              <button type="button" id="excell_alls"  class="btn btn-success"> <i class="fa fa-file-excel-o"></i> @lang('layout.Excel') </button>
                              <button type="button" id="print_pdf_alls" class="btn btn-success"> <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="statement-table">
                              <thead>
                                <tr>
                                  <th>@lang('layout.Account')</th>
                                  <th>@lang('layout.Description')</th>
                                  <th>@lang('layout.Currency')</th>
                                  <th>@lang('layout.Rate')</th>
                                  <th>@lang('layout.Type')</th>
                                  <th>@lang('layout.Receivable')</th>
                                  <th>@lang('layout.Payable')</th>
                                  <th>@lang('layout.Date')</th>
                                </tr>
                              </thead>
                            </table>
                          </div>
                        </div>
                        <!-- END EXAMPLE TABLE PORTLET-->
                      </div>
                    </div>
                  </div>
                  <!--  -->
                </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.PersonalInfo') </a>
                    <span class="after"> </span>
                  </li>
                  <li>
                    <a data-toggle="tab" href="#tab_2-2">
                      <i class="icon-home"></i> @lang('layout.AddressInfo') 
                    </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.Email')</th>
                            <th>@lang('layout.Phone')</th>
                            <th>@lang('layout.Phone2')</th>
                            <th>@lang('layout.Code')</th>
                            <th>@lang('layout.CarType')</th>
                            <th>@lang('layout.PlateNumber')</th>
                            <th>@lang('layout.Type')</th>
                            <th>@lang('layout.ForeignDriver')</th>
                            <th>@lang('layout.Rent')</th>
                            <th>@lang('layout.DateOfBirth')</th>
                            <th>@lang('layout.Date')</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr class="active">
                              <td class="hidden-xs"> {{ $driver->email }}  </td>
                              <td class="hidden-xs"> {{ $driver->phone }}  </td>
                              <td class="hidden-xs"> {{ $driver->phone2 }}  </td>
                              <td class="hidden-xs"> {{ $driver->code }}  </td>
                              <td class="hidden-xs"> {{ $driver->car }}  </td>
                              <td class="hidden-xs"> {{ $driver->plateNumber }}  </td>
                              <td class="hidden-xs"> @if($driver->driver_type) @lang('layout.'.$driver->driver_type) @endif </td>
                              <td class="hidden-xs"> @if($driver->foreign_type) @lang('layout.yes') @endif</td>
                              <td class="hidden-xs"> {{ $driver->rent }}  </td>
                              <td class="hidden-xs"> {{ convertDate($driver->date_of_birth) }}  </td>
                              <td class="hidden-xs"> {{ $driver->reg_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.Address1')</th>
                            <th>@lang('layout.Address2')</th>
                            <th>@lang('layout.City')</th>
                            <th>@lang('layout.Country')</th>
                            <th>@lang('layout.VisaIssueDate')</th>
                            <th>@lang('layout.VisaEndDate')</th>
                            <th>@lang('layout.Commitment')</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr class="active">
                              <td class="hidden-xs"> {{ $driver->address1 }}  </td>
                              <td class="hidden-xs"> {{ $driver->address2 }}  </td>
                              <td class="hidden-xs"> {{ $driver->city }}  </td>
                              <td class="hidden-xs"> {{ $driver->country }}  </td> 
                              <td class="hidden-xs"> {{ convertDate($driver->visa_issue_date) }}  </td> 
                              <td class="hidden-xs"> {{ convertDate($driver->visa_end_date) }}  </td> 
                              <td class="hidden-xs"> {{ $driver->Dcomit }}  </td>
                            </tr>
                          </tbody>
                        </table>
                      </div> 
                    </div>  
                  </div>
                </div>
              </div>
              <!--end col-md-9-->
            </div>
          </div>
          <!--end tab-pane-->
          <!--tab_1_2-->
          <div class="tab-pane" id="tab_1_4">
            <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('layout.Attachments')</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="portlet light bordered">
                        <div class="portlet-body">
                            <form role="form" action="{{route('attachment.store')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="redirect_route" value="driver.show">
                                <input type="hidden" name="foreign_data_id" value="{{$driver->id}}">
                                <input type="hidden" name="path" value="uploads/driver">
                                <input type="hidden" name="table_name" value="members">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">@lang('layout.AttachmentTitle')</label>
                                            <input type="text" name="title" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="control-label">@lang('layout.Description')</label>
                                            <textarea name="description" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                    <img src="" alt=""> </div>
                                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px;"> </div>
                                                <div>
                                                    <span class="btn default btn-file">
                                                        <span class="fileinput-new">@lang('layout.SelectFile')</span>
                                                        <span class="fileinput-exists">@lang('layout.Change')</span>
                                                        <input type="hidden" value="" name=""><input type="file" name="photo"> </span>

                                                    <a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput"> @lang('layout.Remove') </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="margiv-top-10">
                                    <button type="button" onclick="regForm(this)" class="btn green"> @lang('layout.Submit') </button>
                                    <a href="{{route('dailyExpense.index')}}" class="btn default">@lang('layout.Cancel')</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover" id="attachment">
                        <thead>
                            <tr>
                                <th>@lang('layout.AttachmentTitle')</th>
                                <th>@lang('layout.Description')</th>
                                <th>@lang('layout.Action')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </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($driver->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 {

                }
              });
            }
          }

        });

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

    columns: [
    { data: 'Number', name: 'purchases.number' },
    { data: 'Account', name: 'accounts.name' },
    { data: 'Date', name: 'Date' ,orderable:false,searchable:false},
    { data: 'Type', name: 'purchases.type' },
    { data: 'Amount', name: 'Amount',orderable:false,searchable:false },
    { data: 'Currency', name: 'transactions.unit' },
    { data: 'actions', name: 'actions',orderable:false,searchable:false},
    ]
  });


// Purchases  scripts end 

// Invoices  scripts starts 

$(document).ready(function(){ 
  $.fn.dataTable.ext.errMode='{{dataTableWarning()}}';
  $('#ven-bill').on('shown.bs.tab', function(event){

    $('#bills').DataTable({
      scrollCollapse: true,
      serverSide: true,
      paging: true,
      responsive:'{{responsiveDataTable()}}',
                pagingType:'{{paginationType()}}',
      retrieve: true, 
      ajax:{

        url:'{{route("driver.show",$driver->id)}}',
        data:{type:'bill'}
      },
      columns: [ 
      { data: 'Number', name: 'Number' },
      { data: 'Account', name: 'accounts.name' },
      { data: 'Date', name: 'Date', orderable:false,searchable:false },
      { data: 'Amount', name: 'transactions.amount' , orderable:false,searchable:false},
      { data: 'Currency', name: 'transactions.unit' },
      { data: 'actions', name: 'actions', orderable:false,searchable:false },
      ]
    });

  });
});

// Payments scripts 

$(document).ready(function(){ 
  $.fn.dataTable.ext.errMode='{{dataTableWarning()}}';
  $('#cus-payments').on('shown.bs.tab', function(event){

    $('#payment-table').DataTable({
      scrollCollapse: true,
      serverSide: true,
      responsive:'{{responsiveDataTable()}}',
                pagingType:'{{paginationType()}}',
      paging: true,
      retrieve: true,

      ajax:{
        url:'{{route("driver.show",$driver->id)}}',
        data:{type:'payment'}
      },  
      columns: [

      { data: 'Account', name: 'accounts.name' },
      { data: 'Date',    name: 'Date' ,orderable:false,searchable:false},
      { data: 'Amount', name: 'Amount',orderable:false,searchable:false },
      { data: 'Rate', name: 'Rate',orderable:false,searchable:false },
      { data: 'Currency', name: 'transactions.unit' },
      { data: 'actions', name: 'actions',orderable:false,searchable:false },
      ]
    });

  });
});

// Pyaments  scripts end

// begin of statement
$(document).ready(function(){
  $.fn.dataTable.ext.errMode='{{dataTableWarning()}}';
  $('#cus-statement').on('shown.bs.tab', function(event){
    $('#statement-table').DataTable({
      scrollCollapse: true,
      serverSide: true,
      paging: true,
      responsive:'{{responsiveDataTable()}}',
                pagingType:'{{paginationType()}}',
      retrieve: true,
      order: [[ 7, "asc" ]],
      ajax:{
        url:'{{route("driver.show",$driver->member_id)}}',
        data:{type:'statements'}
      },
      columns: [
      { data: 'Account',    name: 'Account' },
      { data: 'Description', name: 'Description' },
      { data: 'Currency',   name: 'Currency' },
      { data: 'Rate',       name: 'Rate' },
      { data: 'Type',       name: 'Type' },
      { data: 'Receiable',  name: 'Receiable' },
      { data: 'Payable',    name: 'Payable' },
      { data: 'Date',       name: 'Date' }
      ]
    });
  });
}); 
// end of statement

// begin of attachment
$(document).ready(function(){
  $('#attachment').DataTable({
      ajax: {
          url: '{{route("driver.show",$driver->id)}}',
          data: {
              type: 'attachment'
          }
      },

      scrollCollapse: true,
      responsive: '{{responsiveDataTable()}}',
      pagingType: '{{paginationType()}}',
      serverSide: true,
      destroy: true,
      paging: true,
      columns: [

          {
              data: 'title',
              name: 'attachments.title'
          },
          {
              data: 'description',
              name: 'attachments.description'
          },
          {
              data: 'actions',
              name: 'actions',
              orderable: false,
              searchable: false
          },
      ]
  });
}); 
// end of attachment

   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