@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('sales::invoices.create_debit_note'))
@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/plugins/input-dropdown/input-dropdown.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style-svgFont.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 rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" 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
@php
    if (array_keys(request()->query()) && array_keys(request()->query())[0] != 'type') {
        request()->merge(['type' => array_keys(request()->query())[0]]);
    }
    $queryType = request()->query()['type'];
    $isSimplifiedType = false;
    if (in_array($queryType, Modules\Sales\Enums\InvoiceTypesEnum::SIMPLIFIED_TYPES) && $isNotSimplifiedOnlyInvoiceCompany) {
        $isSimplifiedType = true;
    }
@endphp
@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.debit-notes.index', $subdomain) }}">@lang('companyuser::sidebar.Debit Notes')</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.debit-notes.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">
                    <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="false"
                        :show-print="true"
                        date-field-name="payment_date"
                        before-submit-callback="onDebitNoteBeforeSubmit"
                    />
                </div>
                <div class="mb-1 pull-left">
                    <a class="text-green" href="{{ route('company.debit-notes.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 ($isSimplifiedType && $companyInfo->zatca_comply)
                <div class="mt-2 font-weight-bold text-danger">
                    <p>{{ __('sales::invoices.note_for_simplified_invoice_b2b_client') }}</p>
                </div>
            @endif
            <input type="hidden" name="invoice_id" value="{{ old('invoice_id') ?? (($invoice && $invoice->id) ? $invoice->id : null) }}"/>
            @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('type')
                                <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'))
                                                <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"
                                                            class="w-100 py-1 h-45 form-control select2-tag">
                                                            @foreach ($invoiceTaxableTypes as $type)
                                                                <option @if (old('type') == $type || $invoice->type == $type) selected @endif
                                                                    value="{{ $type }}">
                                                                    {{ __('sales::invoices.' . $type) }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @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::debit_notes.Reference ID')
                                                    </label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="code" value="{{ old('code', $suggested_code ?? null) }}" 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-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="500" placeholder="{{ $companyInfo->zatca_comply ? __('sales::invoices.description_placeholder') : '' }}" class="w-100 form-control{{ $errors->has('description') ? ' is-invalid' : '' }}">{{ 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"
                                                            :required="true"
                                                            :create-new-url="'{{ route('company.customers.create', ['subdomain' => $subdomain, 'reference' => 'debit-notes', 'attachment_id' => request('attachment_id'), 'type' => request('type')]) }}'"
                                                            :lang="'{{ app()->getLocale() }}'"
                                                            :multi-select="false"
                                                            :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="handleDebitNoteCustomerChange($event)"
                                                            @php
                                                                $mountedCustomer = null;
                                                                if ($selectedCustomerId) {
                                                                    $mountedCustomer = \Modules\Sales\Models\Customer::find($selectedCustomerId);
                                                                }
                                                            @endphp
                                                            @if($mountedCustomer)
                                                            @mounted="handleDebitNoteCustomerChange(@js($mountedCustomer->toArray()))"
                                                            @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.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')"
                                                    />

                                                    @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">
                                                    <select name="cost_center_id" id="cost_center_id"
                                                        class="w-100 py-1 h-45 form-control select2-tag">
                                                        @can('cost-center.main-center.create')
                                                        <option value="0">
                                                            {{ __('products::cost_center.main center') }}
                                                        </option>
                                                        @endcan
                                                        @foreach ($costCenters as $costCenter)
                                                            @if ($costCenter->parent_id)
                                                                <option @if (old('cost_center_id', $invoice ? $invoice->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', $invoice ? $invoice->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
                                                    @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) {
                                                            $oldPaymentTermId = $invoice->payment_term_id ?? '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="{{ old('zatca_comply', $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>
                                                </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 }}" style="width:100%">
                                                        <option value="" disabled selected>{{ trans('sales::invoices.select payment account') }}</option>
                                                        @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>
                                            @if ($companyInfo->zatca_comply)
                                                <div class="row mb-half">
                                                    <div class="col-md-3">
                                                        <label>@lang('sales::invoices.reason')</label>
                                                        <span class="text-danger">*</span>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <div class='input-group'>
                                                            <textarea name="reason" rows="2" cols="450" maxlength="127" placeholder="{{ __('sales::invoices.reason_placeholder') }}" class="w-100 form-control{{ $errors->has('reason') ? ' is-invalid' : '' }}">{{ old('reason', $invoice ? $invoice->reason : null) }}</textarea>
                                                        </div>
                                                        @error('reason')
                                                            <div class="invalid-feedback text text-danger w-100 d-block"
                                                                role="alert">
                                                                <p>{{ $message }}</p>
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            @endif
                                        </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>
                                @php
                                    $returnFormInvoice = str_contains(url()->current(), 'create-invoice-debit-from-invoice');
                                @endphp
                                <input type="hidden" value="{{ $returnFormInvoice }}" name="current_url">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex">
                                            <input name="checkedItemType" type="radio" value=""
                                                id="productServices" @if (old('checkedItemType')) checked @endif />
                                            <button class="mb-1 btn btn-default w-100 filterbtn" id="productServicesBtn"
                                                type="button" data-toggle="collapse"
                                                data-target="#collapseProductServices" aria-expanded="false"
                                                aria-controls="collapseProductServices">
                                                <div class="d-flex justify-content-between">
                                                    <span>{{ __('sales::invoices.products_services') }}
                                                    </span><i class="fa fa-angle-down"></i>
                                                </div>
                                            </button>
                                        </div>
                                        <div class="collapse" id="collapseProductServices">
                                            <div class="card card-body mb-0">
                                                <invoice-product-component
                                                :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')) }}"
                                                :product="{{ json_encode(__('products::product.product service')) }}"
                                                :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('Debit Notes') }}"
                                                :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($invoice ? $invoice->taxes_status : (old() ? old('taxes_status') : \Modules\Sales\Enums\InvoiceTaxesStatusEnum::EXCLUSIVE)) }}"
                                                :zatca_comply="{{ json_encode($zatcaComply) }}"
                                                :has_parent_invoice="{{ json_encode($invoice ? true : false)}}"
                                                :is_simplified_type="{{ json_encode($isSimplifiedType) }}"
                                                :total_invoice="{{json_encode( $invoice ? array_sum($invoice->invoiceDetails->pluck('total')->toArray()) : 0 )}}"
                                                :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'),
                                                ]) }}"
                                                :products_title="{{ json_encode(__('sales::invoices.products')) }}"
                                                :services_title="{{ json_encode(__('sales::invoices.services')) }}"
                                                :recipes_title="{{ json_encode(__('sales::invoices.recipes')) }}"
                                                :loading_label="{{ json_encode(__('general.loading')) }}"
                                                >
                                            </invoice-product-component>
                                                <p class="text-danger" id="validate_minimum_quantity">@lang('sales::invoices.validate_minimum_quantity_message')</p>
                                            </div>
                                        </div>
                                        @error('products.*')
                                            <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>
                                @if (!$returnFormInvoice)
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex">
                                                <input name="checkedItemType" type="radio" value=""
                                                    id="customerInvoices"
                                                    @if (old('checkedItemType')) checked @endif />
                                                <button class="mb-1 btn btn-default w-100 filterbtn"
                                                    id="customerInvoicesBtn" type="button" data-toggle="collapse"
                                                    data-target="#collapseCustomerInvoices" aria-expanded="false"
                                                    aria-controls="collapseCustomerInvoices">
                                                    <div class="d-flex justify-content-between">
                                                        <span>{{ __('sales::invoices.customer_invoices') }}</span><i
                                                            class="fa fa-angle-down"></i>
                                                    </div>
                                                </button>
                                            </div>
                                            <div class="collapse" id="collapseCustomerInvoices">
                                                <div id="" class="table-responsive">
                                                    <debit-customer-invoices-component {{-- child invoices product --}}
                                                        :add_new_line="{{ json_encode(__('sales::estimates.add_new_line')) }}"
                                                        :productname="{{ json_encode(__('sales::estimates.product_name')) }}"
                                                        :description="{{ json_encode(__('sales::estimates.description')) }}"
                                                        :quantity="{{ json_encode(__('sales::estimates.qty')) }}"
                                                        :unitprice="{{ json_encode(__('sales::estimates.unit_price')) }}"
                                                        :discount="{{ json_encode(__('sales::estimates.discount')) }}"
                                                        :vat="{{ json_encode(__('sales::estimates.vat')) }}"
                                                        :vatvalue="{{ json_encode(__('sales::estimates.vat_value')) }}"
                                                        :actions="{{ json_encode(__('Actions')) }}"
                                                        :showing="exampleModalShowing"
                                                        @close="exampleModalShowing = false"
                                                        :lang="{{ json_encode(app()->getLocale()) }}"
                                                        :search="{{ json_encode(__('purchases::purchase_bills.search')) }}"
                                                        :query_type="{{ json_encode( $queryType ) }}"
                                                        {{-- Parent customer's invoices table --}}
                                                        :nodata="{{ json_encode(__('sales::invoices.no_available_data')) }}"
                                                        :select="{{ json_encode(__('sales::invoices.select')) }}"
                                                        :reference_id="{{ json_encode(__('sales::debit_notes.Reference ID')) }}"
                                                        :customer="{{ json_encode(__('sales::invoices.Customer')) }}"
                                                        :date="{{ json_encode(__('sales::invoices.Date')) }}"
                                                        :status="{{ json_encode(__('sales::invoices.status')) }}"
                                                        :cost_center="{{ json_encode(__('products::cost_center.Cost Center')) }}"
                                                        :amount="{{ json_encode(__('sales::estimates.amount')) }}"
                                                        :outstanding="{{ json_encode(__('sales::invoices.outstanding')) }}"
                                                        :type="{{ json_encode(__('sales::invoices.type')) }}"
                                                        :products="{{ json_encode($products) }}"
                                                        :default_parent_center="{{ json_encode(__('products::cost_center.Parent Center')) }}"
                                                        :invoice_details_route="{{ json_encode(route('company.customers.customerInvoiceDetails', [$subdomain])) }}"
                                                        :customer_invoices="{{ json_encode(__('sales::invoices.customer_invoices')) }}"
                                                        :save_changes="{{ json_encode(__('sales::invoices.save_changes')) }}"
                                                        :close="{{ json_encode(__('sales::invoices.close')) }}"
                                                        {{-- Added New Products --}}
                                                        :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')) }}"
                                                        :old="{{ json_encode(old() ? old() : ($invoice ? ['products'=>$invoice->invoiceDetails] : null)) }}"
                                                        :unit_price="{{ json_encode(__('sales::estimates.unit_price')) }}"
                                                        :qty="{{ json_encode(__('sales::estimates.qty')) }}"
                                                        :product="{{ json_encode(__('products::product.product service')) }}"
                                                        :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')) }}"
                                                        :records_max_limets="{{ json_encode(__('sales::invoices.records_max_limets')) }}"
                                                        :is_description_appear="{{ json_encode($isDescriptionAppear) }}"
                                                        :is_tax_appear="{{ json_encode($isTaxAppear) }}"
                                                        :is_discount_appear="{{ json_encode($isDiscountAppear) }}"
                                                        :company_default_tax="{{ json_encode($companyDefaultTax) }}"
                                                        :products="{{ json_encode($products) }}"
                                                        :taxes="{{ json_encode($taxes) }}"
                                                        :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) }}"
                                                        :other_fee_services="{{json_encode($otherFeeServices) }}"
                                                        :zatca_comply="{{ json_encode($zatcaComply) }}"
                                                        :currency="{{json_encode(__('settings::currencies.'.$currency))}}"
                                                        :is_simplified_type="{{ json_encode($isSimplifiedType) }}"
                                                        :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),
                                                            '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'),
                                                        ])) }}"
                                                        >
                                                    </debit-customer-invoices-component>
                                                </div>
                                            </div>
                                            @error('products.*')
                                                <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
                                        </div>
                                    </div>
                                @endif
                                <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([]) }}"
                                ></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>
        // Make country codes available globally for Vue component
        window.countryCodes = @js(\App\Enums\PhoneCode::map());

        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);
            $("#isSimplifiedType p").text("{{ __('sales::invoices.note_for_simplified_invoice_b2b_client') }}")
            $("#isSimplifiedType").removeClass('hidden')
            this.disableSaveBtn()
        })

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

        // I've removed the paragraph on the top of the page, seems to me like the following code is no longer needed, but I am too worried to
        // simply delete it, I think @Marwa worked on this so please let me know what to do with it.
        // This is not a bug not should be addressed in this PR, I Will ask for a technical debt to be created regarding this.
        window.addEventListener('show_minimum_quantity', function() {
            $("#validateMinimumQuantity p").text("{{ __('sales::invoices.validate_minimum_quantity_message') }}")
            $("#validateMinimumQuantity").removeClass('hidden')
            $("#validate_quantity_message").removeClass('hidden');
            $("#validate_minimum_quantity").removeClass('hidden')
            this.disableSaveBtn()
        })
        window.addEventListener('hide_minimum_quantity', function() {
            $("#validateMinimumQuantity").addClass('hidden')
            $("#validate_quantity_message").addClass('hidden');
            $("#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($) {
                $(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);
                })

                let isNewReturn = '1';
                let queryType = '';
                let oldInvoiceId = '{{old("invoice_id")}}';
                let oldCustomerId = '{{old("customer")}}';
                $("#payment-term option:first-child").attr("disabled", "disabled");
                $("#payment-account option:first-child").attr("disabled", "disabled");
                if (isNewReturn && oldInvoiceId && oldCustomerId) {
                    // resetOldDataForm()
                    $("#customerInvoices").prop('checked', true)
                    $("#collapseCustomerInvoices").collapse('show');
                    // Customer invoices will be loaded via the Vue component's @mounted event
                }else{
                    $("#collapseProductServices").collapse('show');
                    $("#productServices").prop('checked', true)
                }
                //Radio input toggle product / customer invoices Accordions
                $("#productServices").on('click', function() {
                    $("#collapseCustomerInvoices").collapse('hide');
                    $("#collapseProductServices").collapse('toggle');
                })
                $("#customerInvoices").on('click', function() {
                    $("#collapseProductServices").collapse('hide');
                    $("#collapseCustomerInvoices").collapse('toggle');
                })
                //Collapse button toggle product / customer invoices Accordions
                $("#productServicesBtn").on('click', function() {
                    $("#collapseCustomerInvoices").collapse('hide');
                    $("#productServices").prop('checked', true)
                    enablePopupModal(false);
                })
                $("#customerInvoicesBtn").on('click', function() {
                    $("#collapseProductServices").collapse('hide');
                    $("#customerInvoices").prop('checked', true)
                })

                $("#supply_time").val(new Date().toLocaleTimeString());
                $('#supply_time').datetimepicker({
                    format: 'hh:mm a'
                });

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

                // Customer change logic is now handled by Vue component @change event
                // See handleDebitNoteCustomerChange in app.js

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




                // TODO: unify the submission events to only the logic inside the save-actions component
                $('#continue_button').click(function() {
                    //take value from clicked btn
                    $('#action-type').val($(this).attr('action-value'));

                    const formElement = $('#invoiceForm');

                    //disabled button
                $(this).prop('disabled', true);

                    //submit form - use requestSubmit to trigger validation
                    if (formElement.requestSubmit) {
                        formElement.requestSubmit();
                    } else {
                        // Fallback for older browsers
                        $(formElement).submit();
                    }
                });

                // Unified save-actions pre-submit callback
                window.onDebitNoteBeforeSubmit = async ({ action, form }) => {
                    try {
                        $('#action-type').val(action);

                        if (isNewReturn) {
                            let isProductsSelected = $('#productServices').is(":checked");
                            if (isProductsSelected) {
                                resetInputCustomerInvoiceProductsComponent();
                                removeAllOtherFeesPayload('#invoiceProductsModal');
                            } else {
                                resetUncheckedProducts();
                                removeAllOtherFeesPayload('#collapseProductServices');
                            }
                        }

                        // Filter the other fees by removing rows with a zero captured value
                        $("#collapseProductServices input[name^='other_fees_details']").filter((index, value) => {
                            removeZeroServicesValue("#collapseProductServices", value)
                        });
                        $("#modalContainer input[name^='other_fees_details']").filter((index, value) => {
                            removeZeroServicesValue("#modalContainer", value)
                        });

                        return true;
                    } catch (e) {
                        return false;
                    }
                };

                // Save & Print is handled by the unified save-actions component

                function removeZeroServicesValue(idName, value) {
                    let nameText = value.getAttribute('name');
                    let nameIndex = (nameText.match(/\d+/g))[0];
                    if (nameText.includes("total_value") && parseFloat(value.value) == 0) {
                        $(idName + " input[name^='other_fees_details["+nameIndex+"]']").remove();
                    }
                }

                function removeAllOtherFeesPayload(containerSelector) {
                    $(containerSelector + " input[name^='other_fees_details']").remove();
                }

                function getCustomerInvoices(customerId) {
                    let routeAjax = "{{ route('company.customers.customerInvoices', [$subdomain]) }}"
                    let costCenterId = $('#cost_center_id').val() || 0;
                    if (customerId && isNewReturn) {
                        $.ajax({
                            url: routeAjax + '/' + customerId + '?type=' + queryType + '&cost_center_id=' + costCenterId,
                            type: 'GET',
                            dataType: "json",
                            success: function(response) {
                                // Reset the customer products data if the user changed the customer
                                $("#invoiceProductsModal input[name^='products']").closest('tbody').remove();
                                showInvoiceProducts(true, response);
                                $('.invoiceId'+oldInvoiceId).prop('checked', true);
                                $('.invoiceId'+oldInvoiceId).closest('tr').css('background-color', '#bff0e8');
                            },
                            error: function(xhr, status, error) {
                                console.log('error   ', xhr, status, error);
                            }
                        });
                    }
                }

                // Expose getCustomerInvoices globally for Vue component
                window.getCustomerInvoicesForDebitNote = getCustomerInvoices;

                // Add cost center change event handler
                $('#cost_center_id').on('change', function() {
                    // Get customer ID from the hidden input created by the Vue component
                    let customerId = $('input[name="customer"]').val();
                    if (customerId && isNewReturn) {
                        getCustomerInvoices(customerId);
                    }
                });
            })(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/pickadate/picker.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickadate/picker.date.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickadate/picker.time.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/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>
        window.addEventListener('DOMContentLoaded', function() {
            (function($) {
                // Customer dropdown is now a Vue component - no select2 initialization needed
                $(".addProductFilter").select2({
                    tags: false,
                    language: {
                        noResults: function() {
                            return "{{ __('No result found') }}";
                        }
                    },
                    dropdownParent: $("#addProductModal")
                });
            })(jQuery);
        });
    </script>
@endsection