@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 type="text/css">
.modal-container{
    width: 30% !important;
}
</style>
@stop
@section('content')
@include('customers.modal')


<!-- sale   -->
  <div id="app11" v-cloak>
        {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
       <input type="hidden" name="type" value="SaleList"/>
       <input type="hidden" name="member_id" value="{{$customer->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>
    
<!--    -->
<!---- sale pdf ----->
<div id="app12" v-cloak>
        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
        <input type="hidden" name="type" value="SaleList"/>
        <input type="hidden" name="member_id" value="{{$customer->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>
    
<!-------- -->
<!-- invoice excell    -->
  <div id="app13" v-cloak>
        {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
       <input type="hidden" name="type" value="invoicelist"/>
        <input type="hidden" name="member_id" value="{{$customer->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>
    
<!--    -->



<!---- invoice pdf ----->
<div id="app14" v-cloak>
        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
         <input type="hidden" name="type" value="invoicelist"/>
        <input type="hidden" name="member_id" value="{{$customer->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>
    
<!-------- -->


<!-- receve excell    -->
  <div id="app15" v-cloak>
        {{Form::open(['route' => 'export.ExcelAll','method' => 'DELETE','class' => 'inline'])}}
        <input type="hidden" name="type" value="receive"/>

        <input type="hidden" name="member_id" value="{{$customer->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>
    
<!--    -->

<!---- receive pdf ----->
<div id="app16" v-cloak>
        {{Form::open(['route' => 'export.PDFAll','method' => 'DELETE','class' => 'inline'])}}
         <input type="hidden" name="type" value="receive"/>
         <input type="hidden" name="member_id" value="{{$customer->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="Customer"/>
  <input type="hidden" name="member_id" value="{{$customer->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.SelectType') </label>
            <select name="category"  class="form-control">
              <option  value="item">@lang('layout.WithItem')</option>
              <option selected="selected"  value="">@lang('layout.WithoutItem')</option>
              <option  value="afghan">Afghan</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="Customer"/>


 <input type="hidden" name="member_id" value="{{$customer->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.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">
  <div class="caption">
    <i class=""></i>@lang('layout.CustomerInformation')
  </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> 
      <div class="btn-group pull-right">


        <span id="app" v-cloak>
          <button class="btn btn-success"  onclick="location.href='{{route('memberOpeningBalance.create',$customer->id)}}'">@lang('layout.OpeningBalance')</button>

          <button type=button id="show-modal" class="btn btn-success" v-on:click="prepaidModal = true">@lang('layout.Prepaid')</button>
          <!-- use the modal component, pass in the prop -->
          <modal v-if="prepaidModal" @close="prepaidModal = false">

            <div slot="body">
              <div class="row">
                <div class="form-group">
                  {{Form::open(['route'=>['customer.prepaid',$customer->id],'method'=>'post','class'=> 'form-horizontal','id'=>'customer-prepaid-balance'])}}

                  <div class="col-md-12">
                    <div class="form-group">


                      {{--<div class="input-group ">--}}
                        {{--<label class="control-label ">@lang('layout.SelectAccountReceivable')</label>--}}

                        {{--{{Form::select('account',$accountReceivable,null,['class'=>'form-control '])}}--}}

                      {{--</div>--}}


                      <label class="control-label ">@lang('layout.SelectCurrency')</label>

                      <select  class="form-control" v-model="selectedCurrency">

                        <option v-for="curre in currency" :value="curre">@{{ curre.code }}</option>

                      </select>

                      <input type="hidden" name="currency" :value="selectedCurrency.code">

                      <div   v-show="selectedCurrency.code != '{{getHomeCurrency()["code"]}}'"  class="input-group ">
                        <span class="input-group-addon">@lang('layout.Rate')</span>
                        <input name="rate" type="number" v-model="selectedCurrency.exchange_rate"  min="0" step="0.01"  data-number-stepfactor="100" class="form-control currency" id="c2" />

                      </div>

                      <label class="control-label ">@lang('layout.Account') </label>


                      <select class="form-control" name="bank_account">
                        <option v-for="Account in accountUpdate" :value="Account.id">@{{ Account.name }}</option>
                      </select>

                      <label class="control-label ">@lang('layout.Balance')</label>
                      <div class="input-group ">
                        <span class="input-group-addon">@{{  selectedCurrency.code }}</span>

                        <input  name="balance" type="number" v-model="amount"  min="0" step="0.01"  data-number-stepfactor="100" class="form-control currency" id="c2" />
                        <span class="input-group-addon">@{{ selectedCurrency.symbol}}</span>
                      </div>


                    </div>
                  </div>

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

              </div>
            </div>
            <h3 slot="header">@lang('layout.Prepaid')</h3>

            <div slot="footer">
              <button type=button class="btn btn-success" v-on:click="prepaidSubmit">
                @lang('layout.OK')
              </button>
              <button type=button class="btn btn-danger"
              v-on:click="prepaidModal = false">
              @lang('layout.Cancel')
            </button>
          </div>
        </modal>
      </span>


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

                      <li>
                        <i class="fa fa-home"></i> {{$customer->city}}</li>
                        <li>
                          <i class="fa calendar-plus-o"></i>{{convertDate($customer->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.CustomerSummary') </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-briefcase"></i> @lang('layout.Currency')
                                  </th>
                                  <th class="hidden-xs">
                                    <i class="fa fa-user"></i> @lang('layout.Receivable')</th>
                                    <th>
                                      <i class="fa fa-briefcase"></i> @lang('layout.Payable') </th>

                                    </tr>
                                  </thead>
                                  <tbody>
                                   @foreach(getStatement($customer->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>
               <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.Sales') </b></a>
                      </li>
                      <li class="">
                        <a href="#Invoices" data-toggle="tab" id="cus-invoices">
                          <i class="icon-note"></i><b>@lang('layout.Invoices')</b> </a>
                        </li>
                        <li class="">
                          <a href="#payments" data-toggle="tab" id="cus-payments">
                            <i class="fa  "></i><b> @lang('layout.Receive') </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;" cellspacing="0">
                            <div class="tab-pane active" id="Purchases">
                              <div class="portlet-body">
                                <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.SaleDetails')</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.SalesNumber')</th>
                                          <th>@lang('layout.SalesType')</th>
                                          <th>@lang('layout.Account')</th>
                                          <th>@lang('layout.Date')</th>
                                          <th>@lang('layout.Currency')</th>
                                          <th>@lang('layout.Amount')</th>
                                          <th>@lang('layout.Discount')</th>
                                          <th>@lang('layout.Actions')</th>
                                        </tr>
                                      </thead>
                                    </table>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!--tab-pane-->
                            <div class="tab-pane" id="Invoices">
                              <div class="portlet-body">
                                <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.InvoiceDetails')</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="button" 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="Invoice" cellspacing="0">
                                      <thead>
                                        <tr>
                                          <th>@lang('layout.InvoiceNumber')</th>
                                          <th>@lang('layout.SalesType')</th>
                                          <th>@lang('layout.Account')</th>
                                          <th>@lang('layout.Date')</th>
                                          <th>@lang('layout.Currency')</th>
                                          <th>@lang('layout.Amount')</th>
                                          <th>@lang('layout.Discount')</th>
                                          <th>@lang('layout.Actions')</th>

                                        </tr>
                                      </thead>
                                    </table>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!--tab-pane-->
                            <!--  -->
                            <div class="tab-pane" id="payments">
                              <div class="portlet-body">
                                <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.RecieveDetials')</span>
                                    </div>
                                    <div class="actions">
                                      
                                      <button type="button" 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" cellspacing="0">
                                      <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>
                              </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.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="row 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.Name')</th>
                                         <th>@lang('layout.Email')</th>
                                         <th>@lang('layout.Phone')</th>
                                         <th>@lang('layout.Code')</th>
                                         <th>@lang('layout.Gender')</th>
                                         <th>@lang('layout.DateOfBirth')</th>
                                         <th>@lang('layout.Membership')</th>
                                         <th>@lang('layout.Date')</th>
                                       </tr>
                                     </thead>
                                     <tbody>
                                      <tr class="active">
                                        <td class="hidden-xs"> {{ $customer->name }}  </td>
                                        <td class="hidden-xs"> {{ $customer->email }}  </td>
                                        <td class="hidden-xs"> {{ $customer->phone }}  </td>
                                        <td class="hidden-xs"> {{ $customer->code }}  </td>
                                        <td class="hidden-xs"> {{ $customer->gender }}  </td>
                                        <td class="hidden-xs"> {{ convertDate($customer->date_of_birth)}}  </td>
                                        <td class="hidden-xs"> {{ $customer->membership }}  </td>
                                        <td class="hidden-xs"> {{ convertDate($customer->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.PostCode')</th>
                                     <th>@lang('layout.City')</th>
                                     <th>@lang('layout.Country')</th>
                                   </tr>
                                 </thead>
                                 <tbody>
                                  <tr class="active">
                                    <td class="hidden-xs"> {{ $customer->address1 }}  </td>
                                    <td class="hidden-xs"> {{ $customer->address2 }}  </td>
                                    <td class="hidden-xs"> {{ $customer->post_code }}  </td>
                                    <td class="hidden-xs"> {{ $customer->city }}  </td>
                                    <td class="hidden-xs"> {{ $customer->country }}  </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>


    

        <!-- for factor begin -->

         <div id="factor-obj" >
           
            </div>
        <iframe id="saleFrames" style="display: none;" ></iframe>

        <!-- end for factor -->

        @endsection
        @push('scripts')

        <script src="{{url('/vue/sweetalert1.min.js')}}"></script>

        <script>
         
           function printVoucher(id) {

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

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

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

            },
            methods: {}

          });
          var Banks  = {!! $banks!!}
          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:{
              routeAndModal(e) {
                regForm(this);
                location.href='{{route('memberOpeningBalance.create',$customer->id)}}';
              },
              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 {

                  }
                });
              }
            }

          });

          // alert('adads');
          $('#pur').DataTable({  
            scrollCollapse: true,
            serverSide: true,
            paging: true,
            retrieve: true,
            

            ajax:{

              url:'{{route("customer.show",$customer->member_id)}}',
              data:{type:'purchase'}
            },

            columns: [
            { data: 'number', name: 'id' },
            { data: 'type', name: 'sales.type' },
            { data: 'account_name', name: 'accounts.name' },
            { data: 'date', name: 'date' , orderable:false,searchable:false},
            { data: 'currency', name: 'currency',orderable:false,searchable:false },
            { data: 'amount', name: 'account' , orderable:false,searchable:false},
            { data: 'discount', name: 'account', orderable:false,searchable:false },
            { data: 'actions', name: 'actions' , orderable:false,searchable:false},
            ]
          });  



          $(document).ready(function(){


            $('#cus-invoices').on('shown.bs.tab', function(event){

              $('#Invoice').DataTable({
                scrollCollapse: true,
                serverSide: true,
                paging: true,
                retrieve: true,


                
                ajax:{

                  url:'{{route("customer.show",$customer->member_id)}}',
                  data:{type:'invoice'}
                },
                columns: [
                { data: 'number', name: 'sales.number' },
                { data: 'type', name: 'sales.type' },
                { data: 'account_name', name: 'accounts.name' },
                { data: 'date', name: 'date' , orderable:false,searchable:false},
                { data: 'currency', name: 'transactions.unit' },
                { data: 'amount', name: 'amount' , orderable:false,searchable:false},
                { data: 'discount', name: 'discount', orderable:false,searchable:false },
                { data: 'actions', name: 'actions' , orderable:false,searchable:false},
                ]
              });

            });
          });

// Payments scripts 

$(document).ready(function(){ 
  $('#cus-payments').on('shown.bs.tab', function(event){

    $('#payment-table').DataTable({
      scrollCollapse: true,
      serverSide: true,
      paging: true,
      retrieve: true,

      ajax:{
        url:'{{route("customer.show",$customer->member_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
//statement
$(document).ready(function(){
  $('#cus-statement').on('shown.bs.tab', function(event){
    $('#statement-table').DataTable({
      scrollCollapse: true,
      serverSide: true,
      paging: true,
      retrieve: true,
      ajax:{
        url:'{{route("customer.show",$customer->member_id)}}',
        data:{type:'statements'}
      },
      columns: [
      { data: 'Account',    name: 'Account' },
      { 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 statement

function factorPrint(id) {
  document.location.href="{{url('invoiceFactorPrint')}}/"+id;
  
  // $.ajax({
  //           // This PHP file will generate the PDF and save it to your server
  //           // $pdf->Output('path/to/pdf/file.pdf', 'F');
  //           url: "{{url('/')}}/invoiceFactorPrint/"+id,
  //           type: 'get',
  //           cache: false,

  //         }).done(function () {

  //           var s = ' <object  data="' + '{{url('factor22.pdf')}}' + '" type="application/pdf" width="0" height="0"> </object>'

  //           $('#factor-obj').html(s);

  //           // $('#someDiv').html('<iframe src="path/to/pdf/file.pdf"></iframe>');
  //         })
  //         .fail(function () {
  //           console.log("error");
  //         });

        }



        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();
})



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();
    })

    ///////////pdf sale
    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();
    })
    ////invoice




       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();
    })


    /////invooice 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();
    })



        /////receive 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();
    })





        /////receive pdf




       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({
            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,
      
        });
    });
})
}
},
})


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

</script>
@endpush