@extends('companyuser::layouts.master')
@section('title', __('sales::proforma_invoices.create_invoice'))
@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;
            }
        </style>
    @else
        <style>
            input[type='time']::-webkit-calendar-picker-indicator {
                opacity: 1;
                position: absolute;
                width: 10%;
                left: 1%;
            }

            input[type='time'] {
                text-align: right;
            }
        </style>
    @endif
@endsection
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('company.customers.index', $subdomain) }}">@lang('companyuser::sidebar.Sales')</a></li>
                <li class="breadcrumb-item active"><a href="{{ route('company.proforma-invoices.index', $subdomain) }}">@lang('companyuser::sidebar.Proforma Invoices')</a></li>
                <li class="breadcrumb-item active"><a href="#">@lang('Create') @lang('sales::proforma_invoices.proforma_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.proforma-invoices.store', $subdomain) }}" method="POST" id="proformaInvoiceForm" 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="proformaInvoiceForm"

                            action-input-id="action-type"

                            :can-save="isset($currentFiscalYearId)"

                            :support-drafts="false"

                            :show-print="true"

                            date-field-name="issue_date"

                            :require-type-selection="false"
                        />
                                        </div>
                    <div class="mb-1 pull-left">
                        <a class="text-green" href="{{ route('company.proforma-invoices.index', $subdomain) }}" title="{{ __('Back') }}">
                            @if (LaravelLocalization::getCurrentLocale() === 'en')
                                <span class="icon-Previous action-icon back-btnIcon"></span>
                            @else
                                <span class="icon-Next action-icon back-btnIcon"></span>
                            @endif
                        </a>
                    </div>
                </div>
                <div class="match-height">
                    <div>
                        <div class="card mt-2">
                            <div>
                                @include('companyuser::errors.operation-locked')
                                @include('companyuser::errors.lists')
                                <div class="card-block">
                                    <div class="row mb-2">
                                        <div class="col-lg-7">
                                            <input hidden type="number" name="estimate_id" value="{{ $proformaInvoice->estimate_id ?? '' }}">
                                            <div class="row mb-half">
                                                <div class="col-md-3">
                                                    <label>@lang('sales::invoices.Reference ID')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <input type="text" name="code" value="{{ $suggested_code ?? '' }}" readonly class="w-100 form-control h-45{{ $errors->has('code') ? ' is-invalid' : '' }}">
                                                    @error('code')
                                                        <div class="invalid-feedback text text-danger" role="alert">
                                                            <p>{{ $message }}</p>
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-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" class="w-100 form-control{{ $errors->has('description') ? ' is-invalid' : '' }}">{{ $proformaInvoice ? $proformaInvoice->description : '' }}</textarea>
                                                    @error('description')
                                                        <span class="invalid-feedback text text-danger" role="alert">
                                                            <p>{{ $message }}</p>
                                                        </span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="row mb-half">
                                                <div class="col-md-3">
                                                    <label>@lang('sales::invoices.Customer')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class='input-group'>
                                                        @php $selectedCustomerId = old('customer') ?? request('customer_id') ?? ($proformaInvoice ? $proformaInvoice->customer_id : null); @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'=>'proforma-invoices','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="handleCustomerChange({customer:$event,countryCodes:@js(\App\Enums\PhoneCode::map())})"
                                                            @php
                                                                $mountedCustomer = null;
                                                                if ($selectedCustomerId) {
                                                                    $mountedCustomer = \Modules\Sales\Models\Customer::find($selectedCustomerId);
                                                                }
                                                            @endphp
                                                            @if($mountedCustomer)
                                                            @mounted="handleCustomerChange({customer:@js($mountedCustomer->toArray()),countryCodes:@js(\App\Enums\PhoneCode::map())})"
                                                            @endif
                                                        />
                                                    </div>
                                                    @error('customer')
                                                        <div class="invalid-feedback text text-danger w-100 d-block"
                                                            role="alert">
                                                            <p>{{ $message }}
                                                                @if ($errors->first('customer_vat_error') == '' && old('customer'))
                                                                    <a href="{{ route('company.customers.edit', ['subdomain' => $subdomain, 'customer' => old('customer')]) }}" target="_blank" id="edit_url">{{ __('Edit') }}</a>
                                                                @endif
                                                            </p>
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="row mb-half">
                                                <div class="col-md-3">
                                                    <label>@lang('sales::estimates.issue_date')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <x-date-picker 
                                                        name="issue_date" 
                                                        id="issue_date"
                                                        :default-today="true"
                                                        :value="old('issue_date')"
                                                        input-class="h-45"
                                                        :is-invalid="$errors->has('issue_date')"
                                                    />
                                                    @error('issue_date')
                                                        <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::estimates.due_date')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <x-date-picker 
                                                        name="due_date" 
                                                        id="due_date"
                                                        :default-today="true"
                                                        :value="old('due_date')"
                                                        input-class="h-45"
                                                        :is-invalid="$errors->has('due_date')"
                                                    />
                                                    @error('due_date')
                                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                            <p>{{ $message }}</p>
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5 rounded">
                                            <div class="card frame-gray" style="background-color: rgb(245, 247, 250) !important; margin: auto;">
                                                <div class="card-header border-bottom-gray p-1" style="background-color: rgb(245, 247, 250) !important;">
                                                    <h3>@lang('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>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-12">
                                        <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() : ($proformaInvoice ? ['products' => $proformaInvoice->proformaInvoiceDetails] : null)) }}"
                                        :qty="{{ json_encode(__('sales::estimates.qty')) }}"
                                        :products_title="{{ json_encode(__('sales::invoices.products')) }}"
                                        :services_title="{{ json_encode(__('sales::invoices.services')) }}"
                                        :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($proformaInvoice ? ($proformaInvoice->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 : ($proformaInvoice && $proformaInvoice->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('Proforma Invoices') }}"
                                        :other_fees_can_create="{{ json_encode(auth()->user() && auth()->user()->can('settings.other-fees.create')) }}"
                                        :other_fees_quick_create_url="{{ json_encode(route('company.other-fees.store', $subdomain)) }}"
                                        :other_fees_quick_create_data_url="{{ json_encode(route('company.other-fees.quick-create-data', $subdomain)) }}"
                                        :fee_services_lang="{{ json_encode(array_merge(__('settings::other_fees.component'), [
                                            'fees_lang' => __('settings::other_fees.other_fees'),
                                            'fees_settings_url' => route('company.other-fees.index', $subdomain),
                                            'fee_warrning_message' => __('settings::other_fees.redirect_to_fees_settings_to_update'),
                                            'name_en' => __('settings::other_fees.name_en'),
                                            'name_ar' => __('settings::other_fees.name_ar'),
                                            'fee_value_label' => __('settings::other_fees.fee_value_label'),
                                            'tax' => __('settings::other_fees.tax'),
                                            'account' => __('settings::other_fees.account'),
                                            'please_select_tax' => __('settings::other_fees.please_select_tax'),
                                            'please_select_account' => __('settings::other_fees.please_select_account'),
                                            'reference_id' => __('settings::other_fees.reference_id'),
                                        ])) }}"
                                        :currency="{{json_encode(__('settings::currencies.'.$currency))}}"
                                        :invoice_tax_status="{{ json_encode(old() ? old('taxes_status') : ($proformaInvoice ? $proformaInvoice->taxes_status : \Modules\Sales\Enums\InvoiceTaxesStatusEnum::EXCLUSIVE)) }}"
                                        :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'),
                                        ]) }}"
                                        :loading_label="{{ json_encode(__('general.loading')) }}"
                                        ></invoice-product-component>
                                        <br>
                                        @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>
                                <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>
                                    <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">
                                                <rich-text-editor-component :lang="{{ json_encode(app()->getLocale()) }}"
                                                    :path="{{ json_encode('sales/proforma_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">
                                                <rich-text-editor-component :lang="{{ json_encode(app()->getLocale()) }}"
                                                    :path="{{ json_encode('sales/proforma_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>
                                    <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($proformaInvoice->attachments ?? []) }}"
                                ></attachments-component>

                                </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 ($proformaInvoice && $proformaInvoice->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 ($proformaInvoice->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>
                    </div>
                </div>
            </div>
            </div>
        </form>
    </section>
@endsection

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

    <script>
        gtag('event', 'web_sales_proforma_invoices_create');
        console.log('web_sales_proforma_invoices_create event');
    </script>
    <script src="{{ asset('/assets/js/plugins/input-dropdown/input-dropdown.js') }}" defer></script>
    <script src="{{ asset('js/validation/quantity-messages.js') }}" defer></script>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            (function($) {
                $(".printClick").on("click", function() {
                    $('[name=is_print]').prop('checked', true);
                })

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

                $('#continue_button').click(function() {
                    //take value from clicked btn
                    $('#action-type').val($(this).attr('action-value'));

                    const formElement = $('#proformaInvoiceForm');

                    //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();
                    }
                });
                //on change select type
                $('#select-type').on('change', function(e) {
                    if ($('#select-type').val() !== null) {
                        $('#type-error').addClass('d-none');
                    }
                });
                //adjust submit buttons
                $('.form-submit-button').click(function() {
                    //check select type
                    if ($('#select-type').val() === null) {
                        $('#type-error').removeClass('d-none');
                        return false;
                    }

                    //take value from clicked btn
                    const action = $(this).attr('action-value');
                    $('#action-type').val(action);
                    const formElement = $('#proformaInvoiceForm');

                    let date = $('input[name="issue_date"]');
                    let paymentDate = date.val();

                    paymentDate = paymentDate.split('-').reverse().join('-');
                    //disabled button
                    document.querySelectorAll('.form-submit-button').forEach(function(item) {
                        $(item).prop('disabled', true);
                    });

                    // Filter the fee services by remove services left with zero amount
                    $("input[name^='other_fees_details']").filter((index, value) => {
                        let nameText = value.getAttribute('name');
                        let nameIndex = (nameText.match(/\d+/g))[0];
                        if (nameText.includes("total_value") && parseFloat(value.value) == 0) {
                            $("input[name^='other_fees_details["+nameIndex+"]']").remove();
                        }
                    });

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

                // open show with print in new tab
                const isPrint = document.getElementById('is_print').value;
                if (isPrint) {
                    const showLineOfCreatedItem = document.getElementById('item_created_link').value;
                    if (showLineOfCreatedItem) {
                        const win = window.open(showLineOfCreatedItem, '_blank');
                        win.focus();
                    }
                }

            })(jQuery);
        });
    </script>
    <script src="{{ url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/pickadate/picker.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/pickadate/picker.date.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/pickadate/picker.time.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/pickadate/legacy.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/daterange/daterangepicker.js') }}" defer></script>
    <script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
    <script src="{{ url('assets/js/vendors/js/pickers/dateTime/picker-date-time.js') }}" defer></script>
    <script>
        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