@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" id="backbtn">
            <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 != '{{Currency()->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