@extends('layouts.store.app')
{{--@section('title', 'Home Page')--}}
{{--@section('heading', 'All Posts')--}}
{{--@section('link_text', 'Add New Post')--}}
{{--@section('link', '/orders/public/ar/store')--}}

@section('head')
    <title>@yield('title')</title>


    {{--<!-- Bootstrap 3.3.7 -->--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/ionicons.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/skin-blue.min.css') }}">

    {{--jquery--}}
    <script src="{{ asset('dashboard_files/js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/jquery-ui.js') }}"></script>

    {{--datatable--}}
    <script type="text/javascript" src="{{ asset('dashboard_files/plugins/jquery.dataTables/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('dashboard_files/plugins/dataTables.bootstrap/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/dataTables.select.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/custom.css')}}">


    @if (app()->getLocale() == 'ar')
        <link rel="stylesheet" href="{{ asset('css/font-awesome-rtl.min.css') }}">
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/AdminLTE-rtl.min.css') }}">
        {{--by sarar        <link href="https://fonts.googleapis.com/css?family=Cairo:400,700" rel="stylesheet">--}}
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/bootstrap-rtl.min.css') }}">
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/rtl.css') }}">

        <style>
            .datepicker-dropdown {
                max-width: 300px;
            }

            .datepicker {
                float: right
            }

            .datepicker.dropdown-menu {
                right: auto
            }
        </style>

        <style>
            body, h1, h2, h3, h4, h5, h6 {
                font-family: 'Cairo', sans-serif !important;
            }
        </style>

        {{--google font--}}
        {{--        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cairo:400,600&display=swap">--}}

        <style>
            body {
                font-family: 'cairo', 'sans-serif';
            }

            .breadcrumb-item + .breadcrumb-item {
                padding-left: .5rem;
            }

            .breadcrumb-item + .breadcrumb-item::before {
                padding-left: .5rem;
            }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination {
                margin: 2px 2px;
            }
        </style>
    @else
        {{-- by sarar       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">--}}
        <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/AdminLTE.min.css') }}">
    @endif

    {{--    ----------------------------------------}}

    {{--<!-- Bootstrap 3.3.7 -->--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/ionicons.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/skin-blue.min.css') }}">

    {{--jquery--}}
    <script src="{{ asset('dashboard_files/js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/jquery-ui.js') }}"></script>

    {{--datatable--}}
    <script type="text/javascript" src="{{ asset('dashboard_files/plugins/jquery.dataTables/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('dashboard_files/plugins/dataTables.bootstrap/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/dataTables.select.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/custom.css')}}">

    <link rel="stylesheet" href="{{ asset('dashboard_files/css/spotlight.min.css')}}">
    <script src="{{ asset('dashboard_files/js/spotlight.min.js') }}"></script>

    {{--daterangepicker--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/css/bootstrap-datepicker.min.css') }}">
    {{--    --}}{{--    --}}
    {{--    <link rel="stylesheet" type="text/css" href="{{ asset('dashboard_files/css/datatables.min.css')}}">--}}

    {{--    <script type="text/javascript" charset="utf8" src="{{ asset('dashboard_files/js/datatables.min.js')}}"></script>--}}
    {{--    --}}{{----}}


    @if (app()->getLocale() == 'ar')
        <link rel="stylesheet" href="{{ asset('css/font-awesome-rtl.min.css') }}">
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/AdminLTE-rtl.min.css') }}">
        {{--by sarar        <link href="https://fonts.googleapis.com/css?family=Cairo:400,700" rel="stylesheet">--}}
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/bootstrap-rtl.min.css') }}">
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/rtl.css') }}">

        <style>
            .datepicker-dropdown {
                max-width: 300px;
            }

            .datepicker {
                float: right
            }

            .datepicker.dropdown-menu {
                right: auto
            }
        </style>

        <style>
            body, h1, h2, h3, h4, h5, h6 {
                font-family: 'Cairo', sans-serif !important;
            }
        </style>

        {{--google font--}}
        {{--        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cairo:400,600&display=swap">--}}

        <style>
            body {
                font-family: 'cairo', 'sans-serif';
            }

            .breadcrumb-item + .breadcrumb-item {
                padding-left: .5rem;
            }

            .breadcrumb-item + .breadcrumb-item::before {
                padding-left: .5rem;
            }

            div.dataTables_wrapper div.dataTables_paginate ul.pagination {
                margin: 2px 2px;
            }
        </style>
    @else
        {{-- by sarar       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">--}}
        <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
        <link rel="stylesheet" href="{{ asset('dashboard_files/css/AdminLTE.min.css') }}">
    @endif

    <style>
        .mr-2 {
            margin-right: 5px;
        }

        .loader {
            border: 5px solid #f3f3f3;
            border-radius: 50%;
            border-top: 5px solid #367FA9;
            width: 60px;
            height: 60px;
            -webkit-animation: spin 1s linear infinite; /* Safari */
            animation: spin 1s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
    {{--    --}}{{--<!-- jQuery 3 -->--}}
    {{--    <script src="{{ asset('dashboard_files/js/jquery.min.js') }}"></script>--}}

    {{--noty--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/plugins/noty/noty.css') }}">
    <script src="{{ asset('dashboard_files/plugins/noty/noty.min.js') }}"></script>

    {{--morris--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/plugins/morris/morris.css') }}">

    {{--<!-- iCheck -->--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/plugins/icheck/all.css') }}">

    {{--html in  ie--}}
    <script src="{{ asset('dashboard_files/js/html5shiv.min.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/respond.min.js') }}"></script>

@endsection

@section('tile')

    {{--<!-- Bootstrap 3.3.7 -->--}}
    <script src="{{ asset('dashboard_files/js/bootstrap.min.js') }}"></script>

    {{--<!-- AdminLTE App -->--}}
    <script src="{{ asset('dashboard_files/js/adminlte.min.js') }}"></script>

    {{--custom js--}}
    <script src="{{ asset('dashboard_files/js/custom/image_preview.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/custom/order.js?v=' .filemtime(public_path('dashboard_files/js/custom/order.js'))) }}"></script>


    {{-----------------------------------------------------------------}}

    {{--<!-- Bootstrap 3.3.7 -->--}}
    <script src="{{ asset('dashboard_files/js/bootstrap.min.js') }}"></script>

    {{--icheck--}}
    <script src="{{ asset('dashboard_files/plugins/icheck/icheck.min.js') }}"></script>

    {{--<!-- FastClick -->--}}
    <script src="{{ asset('dashboard_files/js/fastclick.js') }}"></script>

    {{--<!-- AdminLTE App -->--}}
    <script src="{{ asset('dashboard_files/js/adminlte.min.js') }}"></script>

    {{--ckeditor standard--}}
    <script src="{{ asset('dashboard_files/plugins/ckeditor/ckeditor.js') }}"></script>

    {{--jquery number--}}
    <script src="{{ asset('dashboard_files/js/jquery.number.min.js') }}"></script>

    {{--print this--}}
    <script src="{{ asset('dashboard_files/js/printThis.js') }}"></script>

    {{--morris --}}
    <script src="{{ asset('dashboard_files/js/raphael-min.js') }}"></script>
    <script src="{{ asset('dashboard_files/plugins/morris/morris.min.js') }}"></script>

    {{--custom js--}}
    <script src="{{ asset('dashboard_files/js/custom/image_preview.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/custom/order.js?v=' .filemtime(public_path('dashboard_files/js/custom/order.js'))) }}"></script>

    {{--select 2--}}
    <link rel="stylesheet" href="{{ asset('dashboard_files/plugins/select2/select2.min.css') }}">
    <script type="text/javascript" src="{{ asset('dashboard_files/plugins/select2/select2.min.js') }}"></script>


    <script type="text/javascript" src="{{ asset('dashboard_files/js/Chart.min.js') }}"></script>
    {{--<script type="text/javascript" src="{{ asset('dashboard_files/plugins/chart.js/chart.js') }}"></script>--}}

    {{--daterangepicker--}}
    <script type="text/javascript" src="{{ asset('dashboard_files/js/bootstrap-datepicker.min.js') }}"></script>

    @if (app()->getLocale() == 'ar')
        <script type="text/javascript" src="{{ asset('dashboard_files/js/bootstrap-datepicker.ar.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('dashboard_files/js/TafqeetAr.js') }}"></script>
    @else
        <script type="text/javascript" src="{{ asset('dashboard_files/js/bootstrap-datepicker.en-GB.min.js') }}"></script>
        <script src="{{ asset('dashboard_files/js/jquery-numbersinwords.min.js') }}"></script>
    @endif

    {{--custom--}}
    <script src="{{ asset('dashboard_files/js/custom/index.js') }}"></script>
    <script src="{{ asset('dashboard_files/js/custom/roles.js') }}"></script>

@endsection
@section('content')

    <div class="row">
        <form name="quotes-form" action="{{ route('store.send') }}"
              method="post">

            {{ csrf_field() }}
            {{ method_field('post') }}

            {{--        <input type="hidden" name="requestID" value="{{\Carbon\Carbon::now()->timestamp}}">--}}
            <input type="hidden" name="branch" value="1116">

            <div class="col-md-8">

                <div class="box box-primary">

                    <div class="box-header with-border">

                        <div class="col-md-12">
                            <h3 class="box-title" style="margin-bottom: 15px">@lang('site.products')
                                <small>{{ isset($productsCount)?$productsCount:0 }}</small>
                            </h3>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" id="data-table-search" class="form-control" autofocus placeholder="@lang('site.search')">
                            </div>
                        </div>

                    </div><!-- end of box header -->

                    <div class="box-body table-responsive">
                        <table class="table datatable table-hover" id="products-table" style="width: 100%;">
                            <thead>
                            <tr>
                                <th>@lang('site.prodCCode')</th>
                                <th>@lang('site.product')</th>
                                {{--                            <th>@lang('site.stock')</th>--}}
                                {{--                            <th>@lang('site.sys_price')</th>--}}
                                <th>@lang('site.image')</th>
                                <th>@lang('site.add')</th>
                            </tr>
                            </thead>
                        </table>

                    </div><!-- end of table responsive -->

                </div><!-- end of box -->

            </div><!-- end of col -->

            <div class="col-md-8" id="quotes-details" >

                <div class="box box-primary">

                    <div class="box-header">

                        <h3 class="box-title">@lang('site.quote') @lang('site.new')</h3>

                    </div><!-- end of box header -->

                    <div class="col-md-12">
                        <div class="box-body">

                            <div class="nav-tabs-custom">

                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#main-view" data-toggle="tab">@lang('site.main_view')</a></li>
                                    <li class=""><a href="#sub-view" data-toggle="tab">@lang('site.sub_view')</a></li>
                                </ul>

                                <div class="tab-content">

                                    <div class="tab-pane active" id="main-view">

                                        <div class="box-body">

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="client_id">@lang('site.select') @lang('site.client')</label>
                                                    <br>
                                                    <select id="client_id" name="client_id" class="form-control select2">
                                                        <option value=""></option>
                                                        @if ((isset($client)?$client:false))
                                                            <option value="{{ $client->id }}" {{ $client->id == request()->client_id ? 'selected' : '' }}>{{ $client->name }}</option>
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="docType_id">@lang('site.docType')</label>
                                                    <br>
                                                    <select id="docType_id" name="docType_id" class="form-control disabled" required>
                                                        <option value="1" selected>docType->name</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="currency_id">@lang('site.currency')</label>
                                                    <br>
                                                    <select id="currency_id" name="currency_id" class="form-control disabled" required>
                                                        <option value="1" selected>$currency->name</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>@lang('site.issue_date')</label>
                                                    <div class="input-group date">
                                                        <div class="input-group-addon">
                                                            <i class="fa fa-calendar"></i>
                                                        </div>

                                                        <label for="datepicker-issue-date"></label>
                                                        <input
                                                            id="datepicker-issue-date"
                                                            min="{{now()->format('Y')}}-01-01"
                                                            max="{{now()->format('Y')}}-31-12"
                                                            type="text" name="issue_date" class="form-control"
                                                            value="{{now()->format('Y-m-d')}}"
                                                            placeholder="@lang('site.issue_date')"
                                                            required pattern="\d{4}-\d{2}-\d{2}"
                                                            {{-- value="{{ date('Y-m-d',strtotime(old('c_date')))  }}"--}}
                                                        >
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>@lang('site.valid_date')</label>
                                                    <div class="input-group date">
                                                        <div class="input-group-addon">
                                                            <i class="fa fa-calendar"></i>
                                                        </div>

                                                        <label for="datepicker-valid-date"></label>
                                                        <input
                                                            id="datepicker-valid-date"
                                                            min="{{now()->format('Y')}}-01-01"
                                                            max="{{now()->format('Y')}}-31-12"
                                                            type="text" name="valid_date" class="form-control"
                                                            value="{{now()->format('Y-m-d')}}"
                                                            placeholder="@lang('site.valid_date')"
                                                            required pattern="\d{4}-\d{2}-\d{2}"
                                                            {{-- value="{{ date('Y-m-d',strtotime(old('c_date')))  }}"--}}
                                                        >
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="valid_period">@lang('site.valid_period')</label>
                                                    <input type="number" id="valid_period" name="valid_period"
                                                           class="form-control valid-period"
                                                           autofocus min="0" value="{{ old('valid_period',0) }}"
                                                           placeholder="@lang('site.valid_period')">
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="deliver_period">@lang('site.deliver_period')</label>
                                                    <input type="number" id="deliver_period" name="deliver_period"
                                                           class="form-control deliver-period"
                                                           autofocus min="0" value="{{ old('deliver_period',0) }}"
                                                           placeholder="@lang('site.deliver_period')">
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="pay_period">@lang('site.pay_period')</label>
                                                    <input type="number" id="pay_period" name="pay_period"
                                                           class="form-control pay-period"
                                                           autofocus min="0" value="{{ old('pay_period',0) }}"
                                                           placeholder="@lang('site.pay_period')">
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="note">@lang('site.note')</label>
                                                    <input type="text" id="note" name="note"
                                                           class="form-control"
                                                           autofocus value="{{ old('note') }}"
                                                           placeholder="@lang('site.note')">
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                    <div class="tab-pane" id="sub-view">

                                        <div class="box-body">
                                            <div class="col-md-12">

                                                <div class="form-group">
                                                    <label for="to_name">@lang('site.to_name')</label>
                                                    <input type="text" id="to_name" name="to_name" class="form-control"
                                                           placeholder="@lang('site.to_name')" value="{{ old('to_name') }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="vendor_name">@lang('site.vendor_name')</label>
                                                    <input type="text" id="vendor_name" name="vendor_name" class="form-control"
                                                           placeholder="@lang('site.vendor_name')" value="{{ old('vendor_name') }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="address">@lang('site.address')</label>
                                                    <input type="text" id="address" name="address" class="form-control"
                                                           placeholder="@lang('site.address')" value="{{ old('address') }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="city">@lang('site.city')</label>
                                                    <input type="text" id="city" name="city" class="form-control"
                                                           placeholder="@lang('site.city')" value="{{ old('city') }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="phone">@lang('site.phone')</label>
                                                    <input type="text" id="phone" name="phone" class="form-control"
                                                           placeholder="@lang('site.phone')" value="{{ old('phone') }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="note">@lang('site.note')</label>
                                                    <input type="text" id="note" name="note"
                                                           class="form-control"
                                                           autofocus value="{{ old('note') }}"
                                                           placeholder="@lang('site.note')">
                                                </div>

                                            </div>
                                        </div>

                                    </div>

                                </div><!-- end of tab content -->

                            </div><!-- end of nav tabs -->

                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="box-body table-responsive">

                            @include('dashboard.partials._errors')

                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>@lang('site.prodCCode')</th>
                                    <th>@lang('site.product')</th>
                                    <th>@lang('site.quantity')</th>
                                    <th>@lang('site.price')</th>
                                    <th>@lang('site.subtotal')</th>
                                    <th>@lang('site.subtotal_tax')</th>
                                    <th>@lang('site.delete')</th>
                                </tr>
                                <tr>
                                    <th style="width: 100px">
                                        @include('dashboard.quotes.data_table.customAdd')
                                    </th>
                                </tr>
                                </thead>

                                <tbody class="quote-list">

                                </tbody>

                            </table><!-- end of table -->


                        </div><!-- end of box body -->
                    </div>

                    <div class="box-body">
                        {{--                                @if (Str::contains($client->name, 'نقدي'))--}}
                        {{--                                @if (false)--}}
                        <div class="panel-group" style="display: none;">

                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" href="#cash_client">
                                            @lang('site.cash_client')
                                        </a>
                                    </h4>
                                </div>

                                <div id="cash_client" class="panel-collapse">

                                    <div class="panel-body">

                                        <div class="form-group">
                                            <label><p class="margin">@lang('site.client_name')
                                                    :<code>.@lang('site.required')</code></p></label>
                                            <input type="text" name="client_name" class="form-control"
                                                   value="{{ old('client_name') }}">
                                        </div>

                                        <div class="form-group">
                                            <label><p class="margin">@lang('site.tax_number')
                                                    :<code>.@lang('site.required')</code></p></label>
                                            <input type="text" name="tax_number" class="form-control"
                                                   value="{{ old('tax_number') }}">
                                        </div>

                                    </div><!-- end of panel body -->

                                </div><!-- end of panel collapse -->

                            </div><!-- end of panel primary -->

                        </div><!-- end of panel group -->
                        {{--                                @endif--}}
                    </div>

                    <div class="box-body">
                        <div class="box box-primary">
                            <div class="box-body">
                                <label>@lang('site.client_agreement')</label>
                                <div class="form-group" style="display: flex;align-items: flex-end;">
                                    <div class="radio" style="padding-left: 10px;padding-right: 10px;">
                                        <label>
                                            <input type="radio" name="client_agree" id="client_agree" value="1">
                                            @lang('site.client_agree')
                                        </label>
                                    </div>

                                    <div class="radio" style="padding-left: 10px;padding-right: 10px;">
                                        <label>
                                            <input type="radio" name="client_agree" id="client_agree" value="0" checked>
                                            @lang('site.client_not_agree')
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="{{(app()->getLocale() == 'ar')? 'text-left' :'text-right'}}">
                            <h4>@lang('site.total') : <span class="total-price">0</span> @lang('site.sar')</h4>
                            <h4>@lang('site.total_tax') : <span
                                    class="total-price-tax">0</span> @lang('site.sar')</h4>
                        </div>
                        <button class="btn btn-primary btn-block disabled" id="add-quote-form-btn" data-validate="{{ trans('validation.attributes.selecting_client_or_enter_client_details_is')." ".str_replace(":attribute","",trans('validation.required')) }}"><i
                                class="fa fa-send-o"></i> @lang('site.send_to_approve')</button>
                    </div>

                </div><!-- end of box -->

            </div><!-- end of col -->

        </form>

    </div><!-- end of row -->

@endsection

@push('scripts')

    <script>
        let productsTable = $('#products-table').DataTable({
            dom: "tiplr",
            serverSide: true,
            processing: true,
            "language": {
                "url": "{{ asset('dashboard_files/datatable-lang/' . app()->getLocale() . '.json') }}"
            },
            ajax: {
                url: '{{ route('store.data') }}',
            },
            columns: [
                //{data: 'record_select', name: 'record_select', searchable: false, sortable: false, width: '1%'},
                {data: 'cCode', name: 'cCode'},
                {data: 'name', name: 'name'},
                // {data: 'stock', name: 'stock'},
                // {data: 'price', name: 'price'},
                {data: 'image', name: 'image', searchable: false, sortable: false},
                // {data: 'ur_price', name: 'ur_price'},
                {data: 'add', name: 'add', searchable: false, sortable: false},
            ],
            order: [[3, 'desc']],
            drawCallback: function (settings) {
                //$('.record__select').prop('checked', false);
                //$('#record__select-all').prop('checked', false);
                //$('#record-ids').val();
                //$('#bulk-delete').attr('disabled', true);
            }
        });

        $('#data-table-search').keyup(function () {
            productsTable.search(this.value).draw();
        })

        $('input[type="radio"]').on('click change', function (e) {
            calculateTotal();
        });

        $('#client_id').select2({
            // 'width': '80%',
            ajax: {
                url: "{{ route('dashboard.clients.index') }}",
                dataType: 'json',
                data: function (params) {
                    return {
                        search: params.term,
                    }
                },
                processResults: function (data) {
                    data.splice(0, 0, {id: '', text: 'بدون عميل مسجل'});
                    return {
                        results: data
                    };
                }
            }
        });

        let issue_date = $('#datepicker-issue-date');
        let valid_date = $('#datepicker-valid-date');
        let valid_period = $('#valid_period');
        // $(this).datepicker('getFormattedDate')
        issue_date.datepicker({
            // todayBtn: true,
            autoclose: true,
            format: 'yyyy-mm-dd',
        }).on('change', function(e) {
            if($(this).val() >= valid_date.val()){
                valid_date.val($(this).val());
            }
            valid_period.val((new Date(valid_date.val()).getTime() - new Date($(this).val()).getTime()) / (1000 * 3600 * 24));
        });

        valid_date.datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
        }).on('change', function(e) {
            if($(this).val() <= issue_date.val()){
                issue_date.val($(this).val());
            }
            valid_period.val((new Date($(this).val()).getTime() - new Date(issue_date.val()).getTime()) / (1000 * 3600 * 24));
        });

        //change order search
        $('body').on('keyup change', '.valid-period', function () {
            let val = $(this).val();
            valid_date.datepicker('setDate', new Date(issue_date.datepicker('getDate').getTime()+(val*24*60*60*1000)))
        });//end of product quantity change

        $("#client_id").change(function () {
            if($(this).select2('data')[0].text.includes('نقدي')) {
                $('.panel-group').show();
            } else {
                $('.panel-group').css('display', 'none');
            }
        });

        $("#docType_id").change(function () {
            productsTable.ajax.reload();
        });

        $("#currency_id").change(function () {
            productsTable.ajax.reload();
        });

        $('[data-validate]').on('click', function (e) {
            let message = $(this).data('validate');

            let ci = document.forms["quotes-form"]["client_id"].value;
            let tn = document.forms["quotes-form"]["to_name"].value;
            let vn = document.forms["quotes-form"]["vendor_name"].value;

            let vdt = document.forms["quotes-form"]["valid_date"].value;
            let idt = document.forms["quotes-form"]["issue_date"].value;
            let vpr = document.forms["quotes-form"]["valid_period"].value;

            // console.log(vpr)
            if(Date.parse(idt) >= Date.parse(vdt)){
                valid_date.val(issue_date.val());
            }

            if(Date.parse(vdt) <= Date.parse(idt)){
                issue_date.val(valid_date.val());
            }

            valid_period.val((new Date(valid_date.val()).getTime() - new Date(issue_date.val()).getTime()) / (1000 * 3600 * 24));

            if ((ci === "") && (tn === "") && (vn === "")) {
                alert(message);
                let my_element = document.querySelector("#quotes-details");
                my_element.scrollIntoView({
                    behavior: "smooth",
                    block: "start",
                    inline: "nearest"
                });
                return false;
            }
        });

    </script>

@endpush