@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('sales::invoices.create_invoice'))
@section('extra-styles')

<link rel="stylesheet" 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" 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" 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 href="{{ asset('assets/css/plugins/input-dropdown/input-dropdown.css') }}" rel="stylesheet">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('assets/css/custom/save-actions-loading.css') }}">

<script src="{{ asset('js/app.js') }}" defer></script>
 <!-- Include Moment.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
 <!-- Include Bootstrap DateTimePicker CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<style>
    .select-style select:focus {
        outline: none;
    }
    .hide{
        display: none;
    }
    td[data-v-e72f6602]:nth-of-type(2){
        min-width: 100px !important;
    }
    td[data-v-9fb955ac]:first-of-type{
        padding: 0px !important;
    }
    .select-style {
        width: 40px;
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
    }

    .select-style select {
        width: 100%;
        padding: 0;
        margin: 0;
        background-color: transparent;
        background-image: none;
        border: none;
        box-shadow: none;
        text-align-last: center;
        color: #504e4e;
        font-size: 13px !important;
    }

    select:after {
        color: #ECEFF1 !important;
    }

    input[name=total_discount]::-webkit-inner-spin-button,
    input[name=total_discount]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
    }

    input[name=labor_fee]::-webkit-inner-spin-button,
    input[name=labor_fee]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
    }
</style>

@if(app()->getLocale()=='en')
<style>
    .input-group-append {
        border-right: 1px solid #CCD6E6;
    }
    .dropdown-menu#saveAndCreate {
        left: -40px;
    }
</style>
@else
<style>
input[type='time']::-webkit-calendar-picker-indicator {
    opacity: 1;
    position: absolute;
    width: 10%;
    left:1%;
}
input[type='time']{
    text-align: right;
}
</style>

@endif
@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.customers.index', $subdomain)}}">@lang('companyuser::sidebar.Sales')</a></li>
            <li class="breadcrumb-item active"><a href="{{route('company.invoices.index', $subdomain)}}">@lang('sales::invoices.invoices')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('Create') @lang('sales::invoices.'.(request('type') ?? 'sales_invoice'))</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.invoices.store', $subdomain) }}" method="POST" id="invoiceForm" enctype="multipart/form-data" class="add_form">
    @csrf
    <div class="container-fluid">
        <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right" id="save-actions-btn-group">
                <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="invoiceForm"
                    action-input-id="action-type"
                    :can-save="isset($currentFiscalYearId)"
                    :support-drafts="!str_contains(request()->getRequestUri(), 'debit') && !$companyInfo->zatca_comply"
                    :show-print="!str_contains(request()->getRequestUri(), 'debit')"
                    date-field-name="payment_date"
                    :require-type-selection="true"
                    type-selector-id="invoiceType"
                />

            </div>
            <x-save-actions-loading />
            <div class="mb-1 pull-left">
                <a class="text-green" href="{{ route('company.invoices.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>
        @php
            $showInvoiceTypeSelector = false;
            if (!request()->query('type') && array_keys(request()->query()) && is_int(array_keys(request()->query())[0])) {
                request()->merge(['type' => array_keys(request()->query())[0]]);
            }

            if(!isset(request()->query()['type'])){
               $showInvoiceTypeSelector = true;
                if($companyInfo->zatca_comply){
                    // Invoice type is null (we need to get it from the settings model)
                    if($settings->invoice_type == \Modules\Sales\Enums\Zatca\CertificateInvoiceTypesEnum::STANDARD_AND_SIMPLIFIED){
                        $invoiceTaxableTypes = \Modules\Sales\Enums\InvoiceTypesEnum::TAXABLE_TYPES;
                    }else{
                        $invoiceTaxableTypes = [\Modules\Sales\Enums\InvoiceTypesEnum::SIMPLIFIED_TAX_INVOICE];
                    }
                    $queryType = '';
                }else{
                    if($settings){
                        if($settings->taxable){
                            $invoiceTaxableTypes = \Modules\Sales\Enums\InvoiceTypesEnum::TAXABLE_TYPES;
                            $queryType = \Modules\Sales\Enums\InvoiceTypesEnum::SIMPLIFIED_TAX_INVOICE;
                        }else{
                            $invoiceTaxableTypes = [\Modules\Sales\Enums\InvoiceTypesEnum::SALES_INVOICE];
                            $queryType = \Modules\Sales\Enums\InvoiceTypesEnum::SALES_INVOICE;
                        }
                    }else{
                        $invoiceTaxableTypes = [\Modules\Sales\Enums\InvoiceTypesEnum::SALES_INVOICE];
                        $queryType = \Modules\Sales\Enums\InvoiceTypesEnum::SALES_INVOICE;
                    }
                }
            }else{
                $queryType = request()->query()['type'];
            }
            $isSimplifiedType = false;
            if (in_array($queryType, Modules\Sales\Enums\InvoiceTypesEnum::SIMPLIFIED_TYPES) && $isNotSimplifiedOnlyInvoiceCompany) {
                $isSimplifiedType = true;
            }
        @endphp
        @if ($isSimplifiedType && $companyInfo->zatca_comply)
            <div class="mt-2 text-danger">
                <p>{{__('sales::invoices.note_for_simplified_invoice_b2b_client')}}</p>
            </div>
        @endif
        @if (str_contains(request()->getRequestUri(), 'create-invoice-debit-from-invoice'))
            <input type="hidden" name="parent_id" value="{{$invoice->id}}">
        @endif

        {{-- Hidden field to keep track of requisition conversion --}}
        @php
            $convertedRequisitionId = old('converted_requisition_id', isset($invoice) ? $invoice->requisition_id : '');
        @endphp
        @if ($convertedRequisitionId)
            <input type="hidden" name="converted_requisition_id" value="{{ $convertedRequisitionId }}">
        @endif

        @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="">
                <div class="card mt-2">
                    <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
                        @error('attachment_id')
                        <div class="invalid-feedback text text-danger" role="alert">
                            <p>{{ $message }}</p>
                        </div>
                        @enderror
                        @if($remaining)
                        <div class="card-block">
                            <div class="row mb-2">
                                <div class="col-lg-7">
                                    @if(isset($taxableUser) && $taxableUser && !request('type') || $showInvoiceTypeSelector)
                                    <div class="row mb-half">
                                        <div class="col-md-3">
                                            <label>@lang('sales::invoices.type')
                                            </label>
                                        </div>
                                        <div class="col-md-9">
                                                 <select name="type" id="invoiceType" class="w-100 py-1 h-45 form-control select2-tag">
                                                     <option value="" selected disabled>@lang('sales::invoices.choose_type')</option>
                                                    @foreach($invoiceTaxableTypes as $type)
                                                    <option @if(old('type') == $type || ( isset($invoice) && $invoice->type == $type)) selected @endif value="{{$type}}">
                                                        {{__('sales::invoices.'.$type)}}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            <div id="type-error" class="invalid-feedback text text-danger d-none" role="alert">
                                                <p>{{  __('sales::estimates.type') }}</p>
                                            </div>
                                            @error('type')
                                            <div class="invalid-feedback text text-danger" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    @else
                                    <input type="hidden" name="type" value="{{request('type') ?? 'sales_invoice'}}">
                                    @endif
                                    <div class="row mb-half">
                                        <div class="col-md-3">
                                            <label>@lang('sales::invoices.Reference ID')
                                            </label>
                                        </div>
                                        <div class="col-md-9">
                                            <input type="text" name="code" value="{{ old('code', $suggested_code) }}" readonly class="w-100 form-control h-45 @error('code') is-invalid @enderror">
                                            @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-3">
                                            <label for="description">{{ __('accounting::chart_of_accounts.Description') }}</label>
                                            ( @lang('optional') )
                                        </div>
                                        <div class="col-md-9">
                                            <textarea name="description" id="description" rows="5" cols="450" maxlength="{{ \App\Rules\DescriptionMaxLengthRule::DEFAULT_MAX_LENGTH }}" placeholder="{{ $companyInfo->zatca_comply ? __('sales::invoices.description_placeholder') : __('general.description_char_limit', ['max' => \App\Rules\DescriptionMaxLengthRule::DEFAULT_MAX_LENGTH]) }}" class="w-100 form-control @error('description') is-invalid @enderror">{{ old('description', $invoice ? $invoice->description : null) }}</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-3">
                                            <label>@lang('sales::invoices.Customer')</label>
                                            <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-md-9">
                                            <div class='input-group'>
                                                @php
                                                    $selectedCustomerId = old('customer') 
                                                        ?? ($invoice ? $invoice->customer_id : null)
                                                        ?? request('customer') 
                                                        ?? request('customer_id');
                                                @endphp
                                                <customers-dropdown-component
                                                    :selected="{{ json_encode(\Modules\Sales\Models\Customer::getForDropdown($selectedCustomerId, ['id', 'name', 'email', 'mobile', 'country_code', 'current_balance', 'type'])) }}"
                                                    :create-new="true"
                                                    :create-new-url="'{{ route('company.customers.create', ['subdomain' => $subdomain, 'reference' => 'invoices', 'attachment_id' => request('attachment_id'), 'type' => request('type')]) }}'"
                                                    :lang="'{{ app()->getLocale() }}'"
                                                    :multi-select="false"
                                                    :required="true"
                                                    :disable-inactive="true"
                                                    :input-name="'customer'"
                                                    :display-key="'name'"
                                                    :is-invalid='@json($errors->has("customer"))'
                                                    :translations="{
                                                        placeholder: '{{ __('sales::estimates.please_select_customer') }}',
                                                        searchPlaceholder: '{{ __('sales::customers.search_customers') }}',
                                                        noResultsText: '{{ __('sales::customers.no_customers_found') }}',
                                                        createNewText: '{{ __('sales::customers.add_new_customer') }}',
                                                        validationMessage: '{{ __('sales::estimates.please_select_customer') }}'
                                                    }"
                                                    class="w-100"
                                                    @change="handleInvoiceCustomerChange($event, @js(\App\Enums\PhoneCode::map()))"
                                                    @php
                                                        $mountedCustomer = null;
                                                        if ($selectedCustomerId) {
                                                            $mountedCustomer = \Modules\Sales\Models\Customer::find($selectedCustomerId);
                                                        }
                                                    @endphp
                                                    @if($mountedCustomer)
                                                    @mounted="handleCustomerChange({
                                                        customer: @js($mountedCustomer->toArray()),
                                                        countryCodes: @js(\App\Enums\PhoneCode::map())
                                                    })"
                                                    @endif
                                                />
                                            </div>

                                            @error('customer')
                                            <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-3">
                                            <label>@lang('sales::invoices.bill_date')</label>
                                        </div>
                                        <div class="col-md-9">
                                            <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')"
                                                :show-clear="false"
                                                data-fiscal-year="{{$currentFiscalYear ?? null }}"
                                            />
                                            <div id="payment_date_past_note" class="text-info small mt-1" style="display:none;">
                                                @lang('sales::invoices.late_issuance_note')
                                            </div>
                                            <input type="hidden" name="current_fiscal_year_id" value="{{ $currentFiscalYearId ?? 0 }}">
                                            <input type="hidden" name="remaining" value="{{ $remaining }}">
                                            <input type="hidden" name="attachment_id" value="{{ request('attachment_id') }}">

                                            @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-3">
                                            <label>@lang('sales::invoices.time')</label>
                                        </div>
                                        <div class="col-md-9">
                                            <x-date-picker 
                                                name="time" 
                                                id="supply_time"
                                                :default-to-current-time="true"
                                                mode="time"
                                                :value="old('time')"
                                                input-class="h-45"
                                                :is-invalid="$errors->has('time')"
                                            />
                                            <!-- <input class="form-control" type="text" id="supply_time" /> -->

                                            @error('time')
                                            <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-3">
                                            <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-9">
                                            @php
                                                // Determine the pre-selected cost center id
                                                $preloadedCostCenterId = old('cost_center_id', isset($cost_center_id) ? $cost_center_id : ($invoice ? $invoice->cost_center_id : ''));
                                                $hasMainCostCenterPermission = auth()->user()->can('cost-center.main-center.create');
                                                $shouldSelectMainCostCenter = empty($preloadedCostCenterId) && $hasMainCostCenterPermission;
                                            @endphp
                                            <div>
                                                <cost-centers-dropdown-component
                                                :selected="{{ json_encode(\Modules\Products\Models\CostCenter::getForDropdown($preloadedCostCenterId, ['id', 'code', 'name_ar', 'name_en'])) }}"
                                                :lang="'{{ app()->getLocale() }}'"
                                                :multi-select="false"
                                                :show-all-option="false"
                                                input-name="cost_center_id"
                                                :main-cost-center-id="0"
                                                :select-main-cost-center="@json($shouldSelectMainCostCenter)"
                                                input-id="cost_center_id"
                                                :page-type="'create'"
                                                :disabled='@json(!empty($disableCostCenter))'
                                                :is-invalid='@json($errors->has("cost_center_id"))'
                                                :translations="{
                                                    placeholder: '{{ __('products::cost_center.select_cost_center') }}',
                                                    searchPlaceholder: '{{ __('products::cost_center.search_cost_centers') }}',
                                                    noResultsText: '{{ __('products::cost_center.no_cost_centers_found') }}',
                                                    allOptionText: '{{ __('general.All') }}',
                                                }"
                                                class="w-100"
                                               @change="handleCostCenterChange"
                                            />
                                            </div>
                                            @if(!empty($disableCostCenter))
                                                <input type="hidden" name="cost_center_id" value="{{ $preloadedCostCenterId }}">
                                            @endif
                                            @error('cost_center_id')
                                            <span class="invalid-feedback text text-danger" role="alert">
                                                <p>{{ $message }}</p>
                                            </span>
                                            @enderror
                                            @if(isFeatureActive(Modules\Settings\Enums\FeaturesEnum::INVENTORY))
                                            <span class="invalid-feedback text text-warning" role="alert">
                                                <p>{{ __('validation.change_warning', ['field' => __('products::cost_center.Cost Center')]) }}</p>
                                            </span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row mb-half">
                                        <div class="col-md-3">
                                            <label>@lang('sales::invoices.payment_term')</label>
                                            <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-md-9">
                                            @php
                                                // Replicate the original select logic:
                                                if (old('payment_term')) {
                                                    $oldPaymentTermId = old('payment_term');
                                                } elseif ($invoice && $invoice->payment_account) {
                                                    $oldPaymentTermId = $invoice->payment_term_id ?? null;
                                                } elseif (old('payment_account')) {
                                                    $oldPaymentTermId = 'cash';
                                                } else {
                                                    $oldPaymentTermId = null;
                                                }
                                            @endphp
                                            <div>
                                                <payment-terms-dropdown-component
                                                class="payment-term"
                                                :selected="{{  json_encode(\Modules\Settings\Models\PaymentTerm::getForDropdown($oldPaymentTermId))}}"
                                                :disable-inactive="true" :create-new="true"
                                                :create-new-url="'{{ route('company.payment-terms.create', ['subdomain' => $subdomain]) }}'"
                                                :lang="'{{ app()->getLocale() }}'" 
                                                :multi-select="false"
                                                :input-name="'payment_term'"
                                                input-id="payment_term"
                                                :is-invalid="{{ $errors->has('payment_term') ? 'true' : 'false' }}"
                                                data-current-balance="{{ $paymentAccounts }}"
                                                @change="handlePaymentTermChange"
                                                @mounted="handlePaymentTermChange"
                                                :translations="{
                                                    placeholder: '{{ __('settings::payment_term.select_payment_term') }}',
                                                    searchPlaceholder: '{{ __('settings::payment_term.search_payment_terms') }}',
                                                    noResultsText: '{{ __('settings::payment_term.no_payment_terms_found') }}',
                                                    createNewText: '{{ __('settings::payment_term.add_new_payment_term') }}'
                                            }" />
                                            </div>
                                            @error('payment_term')
                                            <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                <p>{{ $message }}</p>
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div hidden>
                                        <input type="number" name="zatca_comply" value="{{ $zatcaComply }}">
                                    </div>
                                    @if (!str_contains(request()->getRequestUri(), 'debit') || !isset($invoice->id))
                                        <div class="row mb-half">
                                            <div class="col-md-3">
                                                <label>@lang('sales::invoices.supply_date')</label>
                                            </div>
                                            <div class="col-md-9">
                                                <x-date-picker 
                                                    name="supply_date" 
                                                    id="supply_date"
                                                    :default-today="true"
                                                    :value="old('supply_date')"
                                                    input-class="h-45"
                                                    :show-clear="false"
                                                    :is-invalid="$errors->has('supply_date')"
                                                />

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

                                            </div>
                                        </div>
                                    @endif
                                    <div class="row mb-half" style="display:none" id="paymentAccountDropdown">
                                        <div class="col-md-3">
                                            <label>@lang('sales::invoices.Payment Account')</label>
                                            <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="payment_account" class="w-100 h-45 py-1 form-control payment-account select2-tag{{ $errors->has('payment_account') ? ' is-invalid' : '' }}" data-current-balance="{{ $paymentAccounts }}" placeholder="{{ trans('sales::invoices.select payment account') }}" style="width:100%">
                                                @foreach($paymentAccountsForDropdown as $key => $value)
                                                    <option value="{{ $key }}" {{ (old('payment_account', $invoice ? $invoice->payment_account_id : null) == $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('sales::invoices.payment account balance')">
                                        </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('sales::invoices.Customer Details'):</h3>
                                        </div>
                                        <div class="card-body">
                                            <table class="table table-borderless person-details">
                                                <tbody>
                                                    <tr>
                                                        <th scope="row"><b>@lang('sales::invoices.Phone'):</b>
                                                        </th>
                                                        <td>
                                                            <a id="customer-phone"></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row"><b>@lang('sales::invoices.Email'):</b>
                                                        </th>
                                                        <td>
                                                            <a target="_top" id="customer-email"></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row"><b>@lang('sales::invoices.Outstanding Balance'):</b></th>
                                                        <td>
                                                            <a target="_top" id="customer-balance"></a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-12">
                                <invoice-product-component
                                :description_max_length_rule="{{ json_encode(\App\Rules\DescriptionMaxLengthRule::DEFAULT_MAX_LENGTH) }}"
                                :is_negative_inventory_allowed="{{ json_encode(isFeatureActive(Modules\Settings\Enums\FeaturesEnum::NEGATIVE_INVENTORY)) }}"
                                :is_inventory_feature_enabled="{{ json_encode(isFeatureActive(Modules\Settings\Enums\FeaturesEnum::INVENTORY)) }}"
                                :description="{{ json_encode(__('sales::estimates.description')) }}"
                                :total="{{ json_encode(__('sales::estimates.total_amount')) }}"
                                :total_with_service="{{ json_encode(__('sales::estimates.total_amount_with_service')) }}"
                                :clear_all="{{ json_encode(__('sales::estimates.clear_all')) }}"
                                :add_new_line="{{ json_encode(__('sales::estimates.add_new_line')) }}"
                                :lang="{{ json_encode(Lang::locale()) }}"
                                :old="{{ json_encode(old() ? old() : ($invoice ? ['products' => $invoice->invoiceDetails] : null)) }}"
                                :qty="{{ json_encode(__('sales::estimates.qty')) }}"
                                :qty_after_label="{{ json_encode(__('inventory::requisitions.qty_after')) }}"
                                :products_title="{{ json_encode(__('sales::invoices.products')) }}"
                                :services_title="{{ json_encode(__('sales::invoices.services')) }}"
                                :recipes_title="{{ json_encode(__('sales::invoices.recipes')) }}"
                                :unit_price="{{ json_encode(__('sales::estimates.unit_price')) }}"
                                :total_discount="{{ json_encode(__('sales::estimates.total discount')) }}"
                                :vat="{{ json_encode(__('sales::estimates.vat')) }}"
                                :vat_value="{{ json_encode(__('sales::estimates.vat_value')) }}"
                                :gross="{{ json_encode(__('sales::estimates.gross')) }}"
                                :labor_fee="{{ json_encode(__('settings::forms_design.labor_fee')) }}"
                                :labor_fee_tooltip="{{ json_encode(__('sales::invoices.labor_fee_tooltip')) }}"
                                :records_max_limits="{{ json_encode(__('sales::invoices.records_max_limits')) }}"
                                :amount="{{ json_encode(__('sales::estimates.amount')) }}"
                                :discount="{{ json_encode(__('sales::estimates.discount')) }}"
                                :photo="{{ json_encode(__('sales::estimates.photo')) }}"
                                :is_description_appear="{{ json_encode($isDescriptionAppear) }}"
                                :is_tax_appear="{{ json_encode($isTaxAppear) }}"
                                :is_labor_fee_appear="{{ json_encode($isLaborFeeAppear) }}"
                                :invoice_labor_fee="{{ json_encode($invoice ? $invoice->labor_fee ?? 0 : 0) }}"
                                :is_discount_appear="{{ json_encode($isDiscountAppear) }}"
                                :is_photo_appear="{{ json_encode($isPhotoAppear) }}"
                                :company_default_tax="{{ json_encode($companyDefaultTax) }}"
                                :products="{{ json_encode($products) }}" :taxes="{{ json_encode($taxes) }}"
                                :units="{{ json_encode($units) }}"
                                :taxes_statuses="{{ json_encode($taxes_statuses) }}"
                                :exclusive_tax_status="{{ json_encode(\Modules\Sales\Enums\InvoiceTaxesStatusEnum::EXCLUSIVE) }}"
                                :inclusive_tax_status="{{ json_encode(\Modules\Sales\Enums\InvoiceTaxesStatusEnum::INCLUSIVE) }}"
                                :no_tax_status="{{ json_encode(\Modules\Sales\Enums\InvoiceTaxesStatusEnum::NO_TAXES) }}"
                                :tax_disabled="{{ json_encode(old() && old('taxes_status') == \Modules\Sales\Enums\InvoiceTaxesStatusEnum::NO_TAXES ? true : ($invoice && $invoice->taxes_status == \Modules\Sales\Enums\InvoiceTaxesStatusEnum::NO_TAXES ? true : false)) }}"
                                :other_fee_services="{{ json_encode($otherFeeServices ?? []) }}"
                                :subdomain="{{ json_encode($subdomain) }}"
                                :other_fees_screen_name="{{ json_encode('Invoices') }}"
                                :other_fees_can_create="{{ json_encode(auth()->user() && auth()->user()->can('settings.other-fees.create')) }}"
                                :other_fees_quick_create_url="{{ json_encode(route('company.other-fees.store', $subdomain)) }}"
                                :other_fees_quick_create_data_url="{{ json_encode(route('company.other-fees.quick-create-data', $subdomain)) }}"
                                :fee_services_lang="{{ json_encode(array_merge(__('settings::other_fees.component'), [
                                    'fees_lang' => __('settings::other_fees.other_fees'),
                                    'fees_settings_url' => route('company.other-fees.index', $subdomain),
                                    'fee_warrning_message' => __('settings::other_fees.redirect_to_fees_settings_to_update'),
                                    'name_en' => __('settings::other_fees.name_en'),
                                    'name_ar' => __('settings::other_fees.name_ar'),
                                    'fee_value_label' => __('settings::other_fees.fee_value_label'),
                                    'tax' => __('settings::other_fees.tax'),
                                    'account' => __('settings::other_fees.account'),
                                    'please_select_tax' => __('settings::other_fees.please_select_tax'),
                                    'please_select_account' => __('settings::other_fees.please_select_account'),
                                    'reference_id' => __('settings::other_fees.reference_id'),
                                ])) }}"
                                :invoice_tax_status="{{ json_encode(old() ? old('taxes_status') : ($invoice ? $invoice->taxes_status : \Modules\Sales\Enums\InvoiceTaxesStatusEnum::EXCLUSIVE)) }}"
                                :form_design_tax_status="{{ json_encode($formDesignTaxStatus) }}"
                                :form_design_include_vat="{{ json_encode(\Modules\Settings\Enums\TaxStatusesEnum::INCLUDE_VAT) }}"
                                :zatca_comply="{{ json_encode($zatcaComply) }}"
                                :is_simplified_type="{{ json_encode($isSimplifiedType) }}"
                                :currency="{{json_encode(__('settings::currencies.'.$currency))}}"
                                :add_product_popup_data="{{ json_encode([
                                    'product_title' => __('New') . ' ' . __('Product'),
                                    'service_title' => __('New') . ' ' . __('Service'),
                                    'name_ar' => __('products::product.NameAr'),
                                    'name_en' => __('products::product.Name'),
                                    'product_type' => \Modules\Products\Models\Product::TYPE_PRODUCT,
                                    'service_type' => \Modules\Products\Models\Product::TYPE_SERVICE,
                                    'identifier' => __('products::product.Id'),
                                    'product_identifier' => $product_identifier,
                                    'service_identifier' => $service_identifier,
                                    'subcategories' => $subcategories,
                                    'cancel' => __('Cancel'),
                                    'continue' => __('Continue'),
                                    'create' => __('Create'),
                                    'edit' => __('Edit'),
                                    'inventory_item' => __('products::product.Inventory Item'),
                                    'selling_price' => __('products::product.Selling Price'),
                                    'buying_price' => __('products::product.Buying Price'),
                                    'category_id' => $categoryId,
                                    'unit_id' => $unitId,
                                    'tax' => __('products::product.Taxes'),
                                    'inventory_account_id' => $inventory_account_id,
                                    'selling_account_id' => $selling_account_id,
                                    'purchasing_account_id' => $purchasing_account_id,
                                    'no_tax' => __('No Default Tax Rate'),
                                    'url' => route('company.products.store', ['subdomain' => $subdomain]),
                                    'default_elements_validation' => __('products::product.default_elements_validation'),
                                    'addProductButtonText' => __('products::product.a Product'),
                                    'addServiceButtonText' => __('products::product.Service'),
                                    'addButtonImg' => asset('assets/images/svg/plus.svg'),
                                    'saving_product_message' => __('sales::invoices.saving_product_message'),
                                    'saving_service_message' => __('sales::invoices.saving_service_message'),
                                    'product_created_success_refresh_failed' => __('sales::invoices.product_created_success_refresh_failed'),
                                    'service_created_success_refresh_failed' => __('sales::invoices.service_created_success_refresh_failed'),
                                    'no_warehouses_for_cost_center' => __('sales::invoices.no_warehouses_for_cost_center'),
                                    'product_creation_failed' => __('sales::invoices.product_creation_failed'),
                                    'service_creation_failed' => __('sales::invoices.service_creation_failed'),
                                    // Warehouse Assignment Titles
                                    'warehouse_assignment_title' => __('sales::invoices.warehouse_assignment_title'),
                                    'warehouse_title' => __('sales::invoices.warehouse_title'),
                                    'buying_price_title' => __('sales::invoices.buying_price_title'),
                                    'selling_price_title' => __('sales::invoices.selling_price_title'),
                                    'opening_balance_title' => __('sales::invoices.opening_balance_title'),
                                    'buying_product_title' => __('products::product.Buying Product'),
                                    'selling_product_title' => __('products::product.Selling Product'),
                                    'buying_account_title' => __('products::product.Buying Account'),
                                    'selling_account_title' => __('products::product.Selling Account'),
                                    'min_quantity_title' => __('sales::invoices.min_quantity_title'),
                                    'notify_low_quantity_title' => __('sales::invoices.notify_low_quantity_title'),
                                    'inventory_account_title' => __('sales::invoices.inventory_account_title'),
                                    'actions_title' => __('sales::invoices.actions_title'),
                                    'warehouse_assignment_placeholder' => __('sales::invoices.warehouse_assignment_placeholder'),
                                    'add_new_line_title' => __('sales::invoices.add_new_line_title'),
                                    'clear_all_title' => __('sales::invoices.clear_all_title'),
                                    'select_inventory_account' => __('sales::invoices.select_inventory_account'),
                                    // Update Messages
                                    'updating_products_message' => __('sales::invoices.updating_products_message'),
                                    'products_update_failed_message' => __('sales::invoices.products_update_failed_message'),
                                    'invalid_response_format_message' => __('sales::invoices.invalid_response_format_message'),
                                ]) }}"
                                :should_show_retention="{{ json_encode($shouldShowRetention) }}"
                                :retention_percentage="{{ json_encode($retentionPercentage ?? 0) }}"
                                :parent_retention_account_id="{{ json_encode($retentionAccountId) }}"
                                :retention_account_id="{{ json_encode($retentionAccountId) }}"
                                :retention_account_name="{{ json_encode($retentionAccountName) }}"
                                :loading_label="{{ json_encode(__('general.loading')) }}"
                                :retention_translation="{{ json_encode(__('sales::invoices.retention')) }}"
                               ></invoice-product-component>
                            <p class="mx-1 text-danger" id="validate_minimum_quantity">@lang('sales::invoices.validate_minimum_quantity_message')</p>
                                    <br>
                                    @error('products.*')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        <p>{!! $message !!}</p>
                                    </span>
                                    @enderror
                                    @error('other_fees_details.*')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        <p>{!! $message !!}</p>
                                    </span>
                                    @enderror
                                    @error('products')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        <p>{!! $message !!}</p>
                                    </span>
                                    @enderror
                                    @error('labor_fee')
                                    <span class="invalid-feedback text text-danger" role="alert">
                                        <p>{{ $message }}</p>
                                    </span>
                                    @enderror
                                </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>{{ __('sales::invoices.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>
                                @error('zatca_errors')
                                    <div class="invalid-feedback text text-danger w-100 d-block mx-2" role="alert">
                                        <p>{{ $message }}</p>
                                    </div>
                                @enderror
                                <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>{{ __('sales::invoices.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">
                                            @if($companyInfo->zatca_comply)
                                                <p>@lang('sales::invoices.toc_zatca_note')</p>
                                            @endif
                                            <rich-text-editor-component :lang="{{ json_encode(app()->getLocale()) }}" :path="{{ json_encode('sales/invoices/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="#collapseNote" aria-expanded="false" aria-controls="collapseNote">
                                        <div class="d-flex justify-content-between">
                                            <span>{{ __('sales::invoices.notes') }} </span><i class="fa fa-angle-down"></i>
                                        </div>
                                    </button>
                                    <div class="collapse" id="collapseNote">
                                        <div class="card card-body mb-0">
                                            @if($companyInfo->zatca_comply)
                                                <p>@lang('sales::invoices.notes_zatca_note')</p>
                                            @endif
                                            <rich-text-editor-component :lang="{{ json_encode(app()->getLocale()) }}" :path="{{ json_encode('sales/invoices/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>
                                @if(!old('attachment_id') && !request('attachment_id'))
                                <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($invoice->requisitionAttachments ?? $invoice->attachments ?? []) }}"
                                ></attachments-component>
                                @endif
                                
                            </div>
                        </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="button" name="action" action-value="" class="btn btn-primary" id="continue_button">@lang('Continue')</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($invoice && $invoice->deletedProducts)
                        {{---------------- popup for displaying bill deleted products ---------------------}}
                        <div class="modal fade" id="showDeletedProductsModal" 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('Warning')</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p id="cloneMsg">
                                            @lang('sales::estimates.deleted_products')
                                        </p>
                                        <ol id="deletedProducts">
                                            @foreach($invoice->deletedProducts as $product)
                                            <li> {{ $product}} </li>
                                            @endforeach
                                        </ol>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                        <span class="pull-right">
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif


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


@endsection

@section('extra_scripts')
@include('sales::scripts.get_products_sales_script')

    <script>
        gtag('event', 'web_sales_invoice_create');
        console.log('web_sales_invoice_create event');
    </script>

<script src="{{ asset('/assets/js/plugins/input-dropdown/input-dropdown.js') }}" defer></script>
<script src="{{ asset('vendor/sweetalert/sweetalert.all.js')  }}" defer></script>
<script src="{{ asset('js/validation/quantity-messages.js') }}" defer></script>


<script>
    window.addEventListener('disable_form_submit', function(){
        Swal.fire({
            icon: "error",
            text: "{{__('sales::invoices.exceeded_simplified_invoice_amount')}}",
            confirmButtonText: "{{__('sales::invoices.ok')}}",
        });
        $('.swal2-container').css('z-index', 99999);
        this.disableSaveBtn()
    })

    window.addEventListener('enable_form_submit', function(){
        this.enableSaveBtn()
    })

    window.addEventListener('show_minimum_quantity', function() {
        $("#validate_minimum_quantity").removeClass('hidden')
        this.disableSaveBtn()
    })

    window.addEventListener('hide_minimum_quantity', function() {
        $("#validate_minimum_quantity").addClass('hidden')
        this.enableSaveBtn()
    })

    function disableSaveBtn() {
        $("#saveAndCreate").attr('hidden', 'hidden');
        $(".headBtns .btn-group a").css('cursor', 'not-allowed')
    }
    function enableSaveBtn() {
        $("#saveAndCreate").attr('hidden', false);
        $(".headBtns .btn-group a").css('cursor', 'pointer')
    }

    window.addEventListener('DOMContentLoaded', function(){

        (function($) {

            $(".printClick").on("click", function() {
                $('[name=is_print]').prop('checked', true);
            })

            $(document).on('change', '#payment_date', function() {
                var today = (new Date()).toLocaleDateString('sv-SE', {timeZone: "{{$companyInfo->timezone}}"});
                var selected = $(this).val();
                $('#payment_date_past_note').toggle(!!selected && selected < today);
            })

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

            //on change select type
            $('#invoiceType').on('change', function() {
                let simplifiedType = "