@extends('layouts.dashboard.app')

@section('content')

    <div class="content-wrapper">

        <section class="content-header">
            <section class="col-md-12">
                <div>
                    <h2>@lang('site.add_quote')</h2>
                </div>

                <ul class="breadcrumb mt-2">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.welcome') }}"><i
                                class="fa fa-dashboard"></i> @lang('site.home')</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('dashboard.quotes.index') }}">@lang('site.quotes')</a>
                    </li>
                    <li class="breadcrumb-item active">@lang('site.add')</li>
                </ul>
            </section>
        </section>
        <div class="container">

            <section class="content">

                <div class="row">
                    <form name="quotes-form" action="{{ route('dashboard.quotes.update', ['quote' => $quote->id]) }}"
                          method="post">

                        {{ csrf_field() }}
                        {{ method_field('put') }}

                        <input type="hidden" name="from" value="{{auth()->user()->getRole()}}">
                        {{--                    <input type="hidden" name="issue_date" value="{{ now() }}">--}}

                        <div class="col-md-12" 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 ($client)
                                                                        <option
                                                                            value="{{ $client->id }}" {{ $client->id == request()->client_id ? 'selected' : '' }}>{{ $client->name }}</option>
                                                                    @endif
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <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>
                                                                    @foreach (auth()->user()->docs as $docType)
                                                                        <option
                                                                            value="{{ $docType->id }}" {{ old('docType_id') == $docType->id ? 'selected' : '' }}>{{ $docType->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <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>
                                                                    @foreach (auth()->user()->currency as $currency)
                                                                        <option
                                                                            value="{{ $currency->id }}" {{ old('currency_id') == $currency->id ? 'selected' : '' }}>{{ $currency->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="rate">@lang('site.rate')</label>
                                                                <input type="number"
                                                                       id="rate"
                                                                       name="rate"
                                                                       step="any"
{{--                                                                       data-url="{{ route('dashboard.quotes.rate') }}"--}}
{{--                                                                       data-token="{{ csrf_token() }}"--}}
                                                                       data-rate="1"
                                                                       class="form-control rate"
                                                                       disabled
                                                                       value="1"
                                                                       placeholder="@lang('site.rate')"
                                                                >
                                                            </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>
                                                    </div>

                                                </div>

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

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

                                    </div>
                                </div>
                                {{--                                <div class="box-body">--}}
                                {{--                                    <div class="col-md-12">--}}
                                {{--                                        <h4>--}}
                                {{--                                            <span class="pull-left">@lang('site.client_name') : {{ auth()->user()->name }}</span>--}}
                                {{--                                            <span class="pull-right">@lang('site.salesMan') : {{ auth()->user()->cCode }}</span>--}}
                                {{--                                        </h4>--}}
                                {{--                                    </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>
                                                <td>
                                                    <button type="button" id="add-product"
                                                            class="btn btn-success btn-sm btn-light">{{ __('site.addProducts') }}
                                                    </button>
                                                </td>
                                                <th style="width: 100px">
                                                    @include('dashboard.quotes.data_table.customAdd')
                                                </th>
                                            </tr>
                                            </thead>

                                            <tbody id="quote-list" 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">
                                        <table class="table">
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <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">
                                                                    @lang('site.client_not_agree')
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>

                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="box-body">
                                                        <label>@lang('site.client_order_for_branch')</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_branch"
                                                                           id="client_branch_no" value="0">
                                                                    @lang('site.no')
                                                                </label>
                                                            </div>

                                                            <div class="radio"
                                                                 style="padding-left: 10px;padding-right: 10px;">
                                                                <label>
                                                                    <input type="radio" name="client_branch"
                                                                           id="client_branch_yes" value="1">
                                                                    @lang('site.yes')
                                                                </label>
                                                            </div>

                                                            <label for="client_branch_name">
                                                                <input type="text" name="client_branch_name"
                                                                       id="client_branch_name"
                                                                       class="form-control client-branch-name has-error"
                                                                       placeholder="@lang('site.branch_name')"
                                                                       style="display: none;border-color: rgb(255, 0, 0);">
                                                            </label>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </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> {{$quote->currency->code_name}}</h4>
                                        <h4>@lang('site.total_tax') : <span
                                                class="total-price-tax">0</span> {{$quote->currency->code_name}}</h4>
                                    </div>
                                    <button class="btn btn-primary btn-block disabled" id="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 -->

            </section><!-- end of content -->
        </div>
    </div><!-- end of content wrapper -->

@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('dashboard.quotes.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'},
                @if(auth()->user()->isUserManager())
                    {data: 'tPrice', name: 'tPrice'},
                    {data: 'exPrice', name: 'exPrice'},
                @endif
                // {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();
        });

        $('#currency_id').on('change', function (e) {
            let rate = parseFloat($("#rate").val().replace(/,/g, ''))
            if ($('option:selected', this).val() == 1) {
                $("#rate").data( "rate", rate)
                $("#rate").prop('value', 1);
                $("#rate").prop('disabled', true);
            } else {
                let price_rate = 1;
                if($("#rate").data( "rate") !== 1) {
                    price_rate = $("#rate").data( "rate");
                } else {
                    price_rate = 1;
                }
                $("#rate").prop('value', price_rate);
                $("#rate").prop('disabled', false);
            }
            //
            // let url = $(this).data('url');
            // let token = $(this).data('token');
            // let method = "POST";
            //
            // let data = new FormData();
            // data.append('_token', token);
            // data.append('currency', $('option:selected', this).val());
            //
            // callApi(url,data,method)
            // // console.log($(this).val())
            // productsTable.ajax.reload();
        });

        $('body').on('keyup change', '.rate', function() {
            // let url = $(this).data('url');
            // let token = $(this).data('token');
            // let method = "POST";
            //
            // let data = new FormData();
            // data.append('_token', token);
            // data.append('rate', $(this).val());
        });

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


        $('[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