@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('purchases::supplier_receipts.Create Supplier Receipt'))
@section('extra-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/pickers/daterange/daterangepicker.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/plugins/pickers/daterange/daterange.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/frames.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/person-details.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style-svgFont.css') }}">
    <script src="{{ asset('js/app.js') }}" defer></script>
    <style>
        .hide {
            display: none;
        }
        .headBtns button.save-font {
            font-size: 16px;
            font-weight: 100;
            font-family: 'Arbfont', 'Changa', sans-serif;
        }
    </style>
@endsection
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('company.suppliers.index', $subdomain)}}">@lang('companyuser::sidebar.Purchases')</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="{{route('company.supplier-receipts.index', $subdomain)}}">@lang('purchases::supplier_receipts.Supplier Receipts')</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="#">@lang('Create')</a>
                </li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <section id="basic-form-layouts" class="form-border add-form-section filter-section-collapse">
        <form action="{{ route('company.supplier-receipts.store', $subdomain) }}" method="post" id="supplierReceiptForm" enctype="multipart/form-data">
        @csrf
        <div class="container-fluid">
            <div class="headBtns mx-1 fixed-btns">
                <div class="btn-group pull-right">
                    <a type="button" data-toggle="dropdown" aria-haspopup="true" class="bg-transparent" style="font-size: inherit; border:none;" aria-expanded="false" title="{{ __('Save')}}">
                        <span class="icon-Save action-icon"></span>
                    </a>
                        <x-save-actions
                            id="saveAndCreate"
                            form-id="supplierReceiptForm"
                            action-input-id="action-type"
                            :can-save="isset($currentFiscalYearId)"
                            :support-drafts="false"
                            :show-print="true"
                            date-field-name="payment_date"
                            :require-type-selection="false"
                        />
                </div>
                <div class="mb-1 pull-left">
                    <a class="text-green" href="{{ route('company.supplier-receipts.index', $subdomain)}}" title="{{__('Back')}}">
                        @if(LaravelLocalization::getCurrentLocale() === 'en')
                            <span class="icon-Previous action-icon back-btnIcon"></span>
                        @else
                            <span class="icon-Next action-icon back-btnIcon"></span>
                        @endif
                    </a>

                </div>
            </div>

            @if( !isset($currentFiscalYearId))
                <div class="row">
                    <div class="col-md-12  col-xs-12 text-center">
                        <div class="alert alert-white settings-alert">
                            @lang('superadmin::Dashboard.Please set your ')&nbsp;
                            <a href="{{route('company.accounting-settings.index', $subdomain)}}">
                                @lang('settings::general_settings.accounting settings') </a>
                            &nbsp;
                            @lang('superadmin::Dashboard.to start adding accounting transactions')
                        </div>
                    </div>
                </div>
            @endif
            <div class=" match-height">
                <div class="">
                    {{-- @include('companyuser::errors.all') --}}
                    @include('companyuser::errors.operation-locked')
                    @include('companyuser::errors.lists')
                    @error('remaining')
                    <div class="invalid-feedback text text-danger" role="alert">
                        <p>{{ $message }}</p>
                    </div>
                    @enderror
                    <div class="card mt-2">
                        <div class="">
                            @if($remaining)
                                <div class="card-block">

                                    <input type="hidden" name="remaining" value="{{ $remaining }}">
                                    <div class="row mb-2">
                                        <div class="col-lg-7">
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Reference ID')
                                                    </label>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" name="code" value="{{ $suggested_code ?? '' }}" readonly class="w-100 form-control h-45{{ $errors->has('code') ? ' is-invalid' : '' }}">
                                                    @error('code')
                                                    <div class="invalid-feedback text text-danger" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Supplier Invoice Reference Number')
                                                    </label>
                                                    <span>(@lang('optional'))</span>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" name="supplier_invoice_reference_number" value="{{ $supplierReceipt ? $supplierReceipt->supplier_invoice_reference_number : '' }}" maxlength="15" class="w-100 form-control h-45 english-only{{ $errors->has('supplier_invoice_reference_number') ? ' is-invalid' : '' }}">
                                                    @error('supplier_invoice_reference_number')
                                                    <div class="invalid-feedback text text-danger" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                    <div class="text-danger english-error" style="display: none" style="display:none;" role="alert">
                                                        <p>@lang('validation.english-only')</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label for="description">@lang('accounting::chart_of_accounts.Description')</label>
                                                    ( @lang('optional') )
                                                </div>
                                                <div class="col-md-8">
                                                    <textarea name="description" id="" rows="5" cols="450" maxlength="500" class="w-100 form-control{{ $errors->has('description') ? ' is-invalid' : '' }}">{{ $supplierReceipt ? $supplierReceipt->description : '' }}</textarea>
                                                    @error('description')
                                                    <span class="invalid-feedback text text-danger" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </span>
                                                    @enderror
                                                </div>

                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Supplier')</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <div class='input-group' id="supplier-receipt-app">
                                                        @php
                                                        $selectedSupplierId = old('supplier')
                                                            ?? ($supplierReceipt ? $supplierReceipt->supplier_id : null)
                                                            ?? request('supplier')
                                                            ?? request('supplier_id');
                                                    @endphp
                                                        <suppliers-dropdown-component
                                                            :selected="{{ json_encode(\Modules\Purchases\Models\Supplier::getForDropdown($selectedSupplierId, ['id', 'name', 'email', 'mobile', 'country_code', 'current_balance', 'type'])) }}"
                                                            :disable-inactive="true"
                                                            :create-new="true"
                                                            :create-new-url="'{{ route('company.suppliers.create', ['subdomain' => $subdomain]) }}'"
                                                            :lang="'{{ app()->getLocale() }}'"
                                                            :multi-select="false"
                                                            :disable-inactive="true"
                                                            input-name="supplier"
                                                            input-id="supplier"
                                                            :display-key="'name'"
                                                            :translations="{
                                                                placeholder: '{{ __('purchases::supplier_receipts.select supplier') }}',
                                                                searchPlaceholder: '{{ __('purchases::suppliers.search_suppliers') }}',
                                                                noResultsText: '{{ __('purchases::suppliers.no_suppliers_found') }}',
                                                                createNewText: '{{ __('purchases::suppliers.add_new_supplier') }}'
                                                            }"
                                                            class="w-100"
                                                            @change="($event) => {
                                                                handleSupplierChange({
                                                                    supplier: $event,
                                                                    countryCodes: @js(\App\Enums\PhoneCode::map())
                                                                });
                                                                handleSupplierReceiptChange({
                                                                    url: '{{route('company.supplier-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}',
                                                                    supplierId: $event ? $event.id : null
                                                                });
                                                            }"
                                                        />
                                                    </div>

                                                    @error('supplier')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Payment Date')</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <x-date-picker 
                                                        name="payment_date" 
                                                        id="payment_date"
                                                        :default-today="true"
                                                        :value="old('payment_date')"
                                                        input-class="h-45"
                                                        :is-invalid="$errors->has('payment_date')"
                                                        :max-date="Date::now('date')"
                                                        data-fiscal-year="{{$currentFiscalYear ?? null }}"
                                                    />
                                                    <input type="hidden" name="current_fiscal_year_id" value="{{ $currentFiscalYearId ?? 0 }}">

                                                    @error('payment_date')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                    @error('current_fiscal_year_id')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                            <span class="custom-control-description pl-0 ml-0">
                                                <label for="cost_center_id">{{ __('products::cost_center.Cost Center') }}</label>
                                            </span>
                                                </div>
                                                <div class="col-md-8">
                                                    <select name="cost_center_id" id="cost_center_id" class="w-100 h-45 select2-tag py-1 form-control">
                                                        @can('cost-center.main-center.create')
                                                        <option value="">
                                                            {{__('products::cost_center.main center')}}
                                                        </option>
                                                        @endcan
                                                        @foreach($costCenters as $costCenter)
                                                            @if($costCenter->parent_id)
                                                                <option @if(old('cost_center_id', $supplierReceipt? $supplierReceipt->cost_center_id: '') == $costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}}
                                                                    {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                                                </option>
                                                            @else
                                                                <option @if(old('cost_center_id', $supplierReceipt? $supplierReceipt->cost_center_id: '') == $costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}} -
                                                                    {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                    @error('cost_center_id')
                                                    <span class="invalid-feedback text text-danger" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Payment Account')</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <select name="payment_account" class="w-100 h-45 py-1 form-control select2-tag payment-account{{ $errors->has('payment_account') ? ' is-invalid' : '' }}" data-current-balance="{{ json_encode($paymentAccounts) }}">
                                                        <option value="">{{ trans('purchases::supplier_receipts.select payment account') }}</option>
                                                        @foreach($paymentAccountsForDropdown as $key => $value)
                                                            <option value="{{ $key }}" {{ $supplierReceipt && $supplierReceipt->payment_account_id == $key ? 'selected' : '' }}>{{ $value }}</option>
                                                        @endforeach
                                                    </select>

                                                    @error('payment_account')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                </div>
                                                <div class="col-md-2 payment-account-balance" data-toggle="tooltip" data-placement="bottom" title="@lang('purchases::supplier_receipts.payment account balance')">
                                                </div>
                                            </div>

                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Payment Amount')</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" name="payment_amount"
                                                           onfocusout="prepareCurrentReceiptInvoices('{{route('company.supplier-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}');"
                                                           class="w-100 form-control h-45 number {{$errors->has('payment_amount') ? 'is-invalid':''}}"
                                                           value="{{old('payment_amount') ?? ($supplierReceipt ? $supplierReceipt->paid_amount : null)}}">

                                                    @error('payment_amount')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="row mb-half">
                                                <div class="col-md-4">
                                                    <label>@lang('purchases::supplier_receipts.Kind')</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <select name="kind" onchange="
                                                        prepareCurrentReceiptInvoices('{{route('company.supplier-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}')"
                                                            class="select2-tag py-1 form-control h-45 @if($errors->has('kind')) is-invalid @endif">
                                                        @foreach(Modules\Purchases\Enums\PaymentReceiptTypesEnum::translatedPaymentReceiptTypesList() as $key => $type)
                                                            @php $supplierKind = $supplierReceipt ? $supplierReceipt->kind : ''; @endphp
                                                            <option {{ ($key == $supplierKind) ? "selected" : ($key == Modules\Purchases\Enums\PaymentReceiptTypesEnum::PAID ? "selected" : "") }}
                                                                    value="{{$key}}">{{$type}}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    @error('kind')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-5 rounded">
                                            <div class="card frame-gray" style="background-color: rgb(245, 247, 250) !important; margin: auto;">
                                                <div class="card-header border-bottom-gray p-1" style="background-color: rgb(245, 247, 250) !important;">
                                                    <h3>@lang('purchases::supplier_receipts.Supplier Details'):</h3>
                                                </div>
                                                <div class="card-body">
                                                    <table class="table table-borderless person-details">
                                                        <tbody>
                                                        <tr>
                                                            <th scope="row"><b>@lang('purchases::supplier_receipts.Phone'):</b>
                                                            </th>
                                                            <td>
                                                                <a id="supplier-phone"></a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row"><b>@lang('purchases::supplier_receipts.Email'):</b></th>
                                                            <td>
                                                                <a target="_top" id="supplier-email"></a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row"><b>@lang('purchases::supplier_receipts.Outstanding Balance'):</b></th>
                                                            <td>
                                                                <a target="_top" id="supplier-balance"></a>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-1">
                                        <div class="col-md-12">
                                            @if( $customFields->count() )
                                                <button class="mb-1 btn btn-default w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                                    <div class="d-flex justify-content-between">
                                                        <span>{{ __('purchases::supplier_receipts.additional_fields') }} </span><i class="fa fa-angle-down"></i>
                                                    </div>
                                                </button>
                                                <div class="collapse" id="collapseExample">
                                                    <div class="card card-body mb-0">
                                                        @foreach($customFields as $key=>$field)
                                                            <div class="row mb-1">
                                                                <div class="col-md-4">
                                                                    <label for="{{$field->name_en}}">
                                                                        {{ $field->{'name_'.app()->getLocale()} }}
                                                                    </label>
                                                                </div>
                                                                <div class="col-md-8">
                                                                    @if($field['type']=='checkbox')
                                                                        <input id="{{$field->name_en}}" type="checkbox" name="custom_fields[{{($key+1)}}][value]" @isset(old('custom_fields')[$key+1]['value']) checked @endisset>
                                                                    @else
                                                                        <input class="w-100 py-1 form-control @if($field->type=='date') singledate @endif" placeholder="{{ $field->{'name_'.app()->getLocale()} }}" name="custom_fields[{{($key+1)}}][value]" type="{{ ($field->type=='date')?'text':(($field->type=='check_box')?'checkbox':$field->type) }}" id="{{$field->name_en}}" value="{{old('custom_fields') ? old('custom_fields')[$key+1]['value'] : null}}">
                                                                    @endif
                                                                    <input type="hidden" value="{{$field->name_ar}}" name="custom_fields[{{ ($key+1) }}][name_ar]">
                                                                    <input type="hidden" value="{{$field->name_en}}" name="custom_fields[{{ ($key+1) }}][name_en]">
                                                                    <input type="hidden" value="{{$field->type}}" name="custom_fields[{{ ($key+1) }}][type]">
                                                                    <input type="hidden" value="{{$field->module}}" name="custom_fields[{{ ($key+1) }}][module]">
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="col-md-12">
                                            <button class="mb-1 btn btn-default w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseTerm" aria-expanded="false" aria-controls="collapseTerm">
                                                <div class="d-flex justify-content-between">
                                                    <span>{{ __('purchases::supplier_receipts.terms_and_condition') }} </span><i class="fa fa-angle-down"></i>
                                                </div>
                                            </button>
                                            <div class="collapse" id="collapseTerm">
                                                <div class="card card-body mb-0">
                                                    <rich-text-editor-component :lang="{{ json_encode(app()->getLocale()) }}" :path="{{ json_encode('purchases/supplier_receipts/terms') }}" :name="{{ json_encode('terms') }}" :value="{{ json_encode(old('terms', $terms)) }}">
                                                    </rich-text-editor-component>
                                                </div>
                                            </div>
                                            @error('terms')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>

                                        <div class="col-md-12">
                                            <button class="mb-1 btn btn-default w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseUseInInvoices" aria-expanded="false" aria-controls="collapseUseInInvoices"
                                                    @click="exampleModalShowing = true ;">
                                                <div class="d-flex justify-content-between">
                                                    <span>{{ __('purchases::supplier_receipts.Assign to Bills') }} </span><i class="fa fa-angle-down"></i>
                                                </div>
                                            </button>
                                            <div class="collapse" id="collapseUseInInvoices">
                                                <div class="card card-body mb-0">
                                                    <div class="alert alert-info text-center mt-1 mb-0 current-receipt-hint">
                                                        {{ __('purchases::supplier_receipts.bills_loading_hint') }}
                                                    </div>
                                                    <div id="currentReceiptInvices" hidden>
                                                        <current-receipt-invoices
                                                            :showing="exampleModalShowing" @close="exampleModalShowing = false"
                                                            :csrf="{{ json_encode(csrf_token()) }}"
                                                            :lang="{{ json_encode(app()->getLocale()) }}"
                                                            :translations="{{ json_encode([
                                                                'type' => __('sales::customer_receipts.Receipt'),
                                                                'allocation' => __('sales::customer_receipts.allocation'),
                                                                'remaningamount' => __('sales::customer_receipts.remaningAmount'),
                                                                'unpaidtype' => __('sales::customer_receipts.unpaidtype'),
                                                                'unpaid_hint' => __('purchases::purchase_bills.You have to assign purchase bills to be linked with this'),
                                                                'referenceid' => __('sales::customer_receipts.ReferenceID'),
                                                                'date' => __('sales::customer_receipts.Date'),
                                                                'amount' => __('sales::customer_receipts.Amount'),
                                                                'assigned' => __('sales::customer_receipts.assign'),
                                                                'totalstring' => __('sales::customer_receipts.totalString'),
                                                                'outstanding' => __('sales::customer_receipts.outstanding'),
                                                                'allocated' => __('sales::customer_receipts.allocated'),
                                                                'search' => __('purchases::purchase_bills.search'),
                                                                'loading' => __('purchases::supplier_receipts.Loading bills...'),
                                                                'no_records' => __('purchases::supplier_receipts.no_bills_found_for_supplier'),
                                                                'no_unpaid' => __('purchases::supplier_receipts.no_unpaid_bills_for_supplier'),
                                                            ]) }}"
                                                        >
                                                        </current-receipt-invoices>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <button class="mb-1 btn btn-default w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseNote" aria-expanded="false" aria-controls="collapseNote">
                                                <div class="d-flex justify-content-between">
                                                    <span>{{ __('purchases::supplier_receipts.notes') }} </span><i class="fa fa-angle-down"></i>
                                                </div>
                                            </button>
                                            <div class="collapse" id="collapseNote">
                                                <div class="card card-body mb-0">
                                                    <rich-text-editor-component :lang="{{ json_encode(app()->getLocale()) }}" :path="{{ json_encode('purchases/supplier_receipts/notes') }}" :name="{{ json_encode('notes') }}" :value="{{ json_encode(old('notes', $notes)) }}">
                                                    </rich-text-editor-component>
                                                </div>
                                            </div>
                                            @error('notes')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>
                                        <attachments-component
                                        :translations="{{ json_encode([
                                            'attachments' => __('general.attachments'),
                                            'attachments_validation' => __('general.attachments_validation'),
                                            'attachments_max_size' => __('general.attachments_max_size'),
                                            'selected_files' => __('general.selected_files'),
                                        ]) }}"
                                        :errors="{{ json_encode($errors->get('attachments.*')) }}"
                                        :preloaded-files="{{ json_encode($supplierReceipt->attachments ?? []) }}"
                                    ></attachments-component>
                                    </div>
                                    <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="favoritesModalLabel">
                                                        @lang('accounting::manual_journal_entries.confirmation_date')</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>
                                                        @lang('accounting::manual_journal_entries.confirmation_date_in_past')
                                                    </p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                    <span class="pull-right">
                                                <button type="submit" name="action" value="" class="btn btn-primary">@lang('Continue')</button>
                                            </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @else
                                @include('info.limit_reached')

                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="request-reference" hidden>{{old('code')}}</p>
        <p class="request-amount" hidden>{{old('payment_amount')}}</p>
        <p class="request-kind" hidden>{{old('kind')}}</p>
        <p class="request-supplier" hidden>{{old('supplier')}}</p>
        <p class="request-route" hidden>{{route('company.supplier-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}</p>
        </form>
        @include('purchases::warning-modal')
    </section>


@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_purchases_supplier_receipts_create');
        console.log('web_purchases_supplier_receipts_create event');
    </script>
    <script>
        let mainAction ;
        // Keep reference to the latest in-flight request to avoid race conditions
        window.currentSupplierReceiptRequest = null;

        window.prepareCurrentReceiptInvoicesGlobal = function(url, supplierId = null) {
            // This global function used to invoke the prepare the current receipt to support
            // both the old (html inputs) and the new (vue components)
            // could be refactored after changing all the html inputs to vue components
            prepareCurrentReceiptInvoices(url, supplierId)
        }

        function prepareCurrentReceiptInvoices(url, supplierId = null) {
            let supplierIdFromDom = $("#supplier").val();
            let currentSupplierId = supplierId || supplierIdFromDom;
            let amount = $('input[name="payment_amount"]').val();
            let kind = $('select[name="kind"]').val();
            let reference = $('input[name="code"]').val();
            let costCenterId = $('select[name="cost_center_id"]').val();
            let route = url + '/' + currentSupplierId;

            if (currentSupplierId && amount) {
                // Show Vue component and hide the static hint as soon as a request is sent
                $('#currentReceiptInvices').attr('hidden', false);
                $('.current-receipt-hint').addClass('d-none');

                fetchCurrentReceipt(route, reference, amount, kind, costCenterId)
            }
        }

        function fetchCurrentReceipt(route, reference, amount, kind, costCenterId) {
            if (typeof window.setCurrentReceiptInvoicesLoading === 'function') {
                window.setCurrentReceiptInvoicesLoading(true);
            }

            // Abort any previous pending request to prevent stale responses
            if (window.currentSupplierReceiptRequest && window.currentSupplierReceiptRequest.readyState !== 4) {
                window.currentSupplierReceiptRequest.abort();
            }

            window.currentSupplierReceiptRequest = $.ajax({
                url: route,
                type: 'GET',
                dataType: "json",
                data: {
                    receiptObject: {
                        reference: reference,
                        amount: amount,
                        kind: kind,
                        cost_center_id: costCenterId
                    }
                },
                success: function(response) {
                    @can('purchases.supplier-receipts.create')
                    let invoices = response.invoices || [];
                    $('#currentReceiptInvices').attr('hidden', false);
                    $('.current-receipt-hint').addClass('d-none');
                    showCurrentReceiptInvoices(true, invoices, response);
                    @endcan
                },
                error: function(xhr, status, error) {

                },
                complete: function(jqXHR) {
                    // Only clear loading state if this is the latest request
                    if (window.currentSupplierReceiptRequest === jqXHR) {
                        if (typeof window.setCurrentReceiptInvoicesLoading === 'function') {
                            window.setCurrentReceiptInvoicesLoading(false);
                        }
                        window.currentSupplierReceiptRequest = null;
                    }
                },
            });
        }

        window.addEventListener('DOMContentLoaded', function() {
            (function($) {
                let supplier = $(".request-supplier").text();
                let url = $(".request-route").text();
                let route = url + '/' + supplier;

                let reference = $(".request-reference").text();
                let amount = $(".request-amount").text();
                let kind = $(".request-kind").text();

                if (route && reference && amount && kind) {
                    fetchCurrentReceipt(route, reference, amount, kind)
                }

                $(".printClick").on("click", function() {
                    $('[name=is_print]').prop('checked', true);
                })
                $("select.select2-custom").select2({
                    allowClear: true,
                    escapeMarkup: function(markup) {
                        return markup;
                    },
                    tags: false,
                    language: {
                        noResults: function() {
                            return ` <a href="{{ route('company.suppliers.create',['subdomain' => $subdomain,'reference'=>'supplier-receipts']) }}"
                                    class="btn btn-sm btn-default" style="padding: .25rem 0rem;">
                                    <span class="pull-left lh-30">{{ __('Add new supplier')}}</span>
                                    <i class="fa fa-plus-square-o  font-large-1" aria-hidden="true"></i>

                                 </a>`;
                        }
                    },
                });


                // this to show account balance when chose it from select
                $(".payment-account").change(function() {
                    var accountId = this.value
                    if (!accountId)
                        return;
                    var account = $(this).data('current-balance')[accountId]
                    balance = account ? account['current_balance'] : '';
                    $('.payment-account-balance').html(balance);

                }).change();

                let isPopUpDisplayed = false;
                localStorage.setItem("isPopUpDisplayed", isPopUpDisplayed);

                $('input[name=supplier_invoice_reference_number]').on('change',function () {
                    localStorage.setItem("isPopUpDisplayed", isPopUpDisplayed);
                    checkDuplicatedReferenceNumber();
                });

                $('#cost_center_id').on('change', function() {
                    const url = '{{route('company.supplier-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}';
                    prepareCurrentReceiptInvoices(url);
                });

                function checkDuplicatedReferenceNumber() {
                    isPopUpDisplayed = true;
                    let referenceNumber = $('input[name=supplier_invoice_reference_number]').val()
                    $.ajax({
                            url: "{{route('company.suppliers-receipts.invoice-reference-number', [$subdomain])}}",
                            type: 'GET',
                            dataType: "json",
                            data:{
                                invoiceReferenceNumber:referenceNumber,
                            },
                            success: function(response) {

                                if(response == true){
                                    localStorage.setItem("isPopUpDisplayed", isPopUpDisplayed);
                                    $('#warningInvoiceReferenceNumber').modal();
                                }

                            },
                            error: function(xhr, status, error) {

                            },
                            complete: function(data) {
                            }
                        });
                }

            })(jQuery);
        });
    </script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.date.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.time.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/pickadate/legacy.js')}}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script src="{{url('assets/js/vendors/js/pickers/dateTime/picker-date-time.js')}}" defer></script>
    <script src="{{asset('js/validation/regex-english-characters-numbers.js')}}" defer></script>
    <script src="{{asset('js/validation/limit-digits-in-decimal-numbers.js')}}" defer></script>
@endsection