@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('sales::customer_receipts.Create Customer Receipt'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/frames.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/forms/person-details.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/style-svgFont.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
<style>
    .hide {
        display: none;
    }

    .headBtns button.save-font {
        font-size: 16px;
        font-weight: 100;
        font-family: 'Arbfont', 'Changa', sans-serif;
    }
</style>
@endsection
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('company.customers.index', $subdomain)}}">@lang('companyuser::sidebar.Sales')</a></li>
            <li class="breadcrumb-item active"><a href="{{route('company.customer-receipts.index', $subdomain)}}">@lang('sales::customer_receipts.Customer Receipts')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('Create')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section id="basic-form-layouts" class="form-border add-form-section filter-section-collapse">
    <form action="{{ route('company.customer-receipts.store', $subdomain) }}" method="POST" id="customerReceiptForm" enctype="multipart/form-data">
        @csrf
        <div class="container-fluid">
            <div class="headBtns mx-1 fixed-btns">
                <div class="btn-group pull-right">
                    <a type="button" data-toggle="dropdown" aria-haspopup="true" class="bg-transparent" style="font-size: inherit; border:none;" aria-expanded="false" title="{{ __('Save')}}">
                        <span class="icon-Save action-icon"></span>
                    </a>
                    <x-save-actions
                        id="saveAndCreate"
                        form-id="customerReceiptForm"
                        action-input-id="action-type"
                        :can-save="isset($currentFiscalYearId)"
                        :support-drafts="false"
                        :show-print="true"
                        :require-type-selection="false"
                    />
                </div>
                <div class="mb-1 pull-left">
                    <a class="text-green" href="{{ route('company.customer-receipts.index', $subdomain)}}" title="{{__('Back')}}">
                        @if(LaravelLocalization::getCurrentLocale() === 'en')
                            <span class="icon-Previous action-icon back-btnIcon"></span>
                        @else
                            <span class="icon-Next action-icon back-btnIcon"></span>
                        @endif
                    </a>
                </div>
            </div>
            @if( !isset($currentFiscalYearId))
            <div class="row">
                <div class="col-md-12  col-xs-12 text-center">
                    <div class="alert alert-white settings-alert">
                        @lang('superadmin::Dashboard.Please set your ')&nbsp;
                        <a href="{{route('company.accounting-settings.index', $subdomain)}}">
                            @lang('settings::general_settings.accounting settings') </a>
                        &nbsp;
                        @lang('superadmin::Dashboard.to start adding accounting transactions')
                    </div>
                </div>
            </div>
            @endif
            <div class=" match-height">
                <div>
                    <div class="card mt-2">
                        <div>
                            @include('companyuser::errors.all')
                            @include('companyuser::errors.lists')
                            @error('remaining')
                            <div class="invalid-feedback text text-danger" role="alert">
                                <p>{{ $message }}</p> Error here
                            </div>
                            @enderror
                            @if($remaining)
                            <div class="card-block">
                                <input type="hidden" name="remaining" value="{{$remaining}}">
                                <div class="row mb-2">
                                    <div class="col-lg-7">
                                        <div class="row mb-half">
                                            <div class="col-md-3">
                                                <label>@lang('sales::customer_receipts.Reference ID')
                                                </label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" name="code" value="{{ $suggested_code ?? null }}" readonly class="w-100 form-control @if($errors->has('code')) is-invalid @endif">
                                                @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">@lang('accounting::chart_of_accounts.Description')</label>
                                                ( @lang('optional') )
                                            </div>
                                            <div class="col-md-9">
                                                <textarea name="description" id="description" cols="450" rows="5" maxlength="500" class="w-100 form-control h-45 @if($errors->has('description')) is-invalid @endif">{{ $customerReceipt ? $customerReceipt->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::customer_receipts.Customer')</label>
                                            </div>
                                            <div class="col-md-9">
                                                <div class='input-group'>
                                                    @php
                                                        $selectedCustomerId = old('customer')
                                                            ?? ($customerReceipt ? $customerReceipt->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' => 'customer-receipts']) }}'"
                                                        :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="handleCustomerReceiptCustomerChange($event)"
                                                        @php
                                                            $mountedCustomer = null;
                                                            if ($selectedCustomerId) {
                                                                $mountedCustomer = \Modules\Sales\Models\Customer::find($selectedCustomerId);
                                                            }
                                                        @endphp
                                                        @if($mountedCustomer)
                                                        @mounted="handleCustomerReceiptCustomerChange(@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::customer_receipts.Payment 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')"
                                                />
                                                <input type="hidden" name="current_fiscal_year_id" value="{{$currentFiscalYearId ?? 0}}">
                                                @error('payment_date')
                                                <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                    <p>{{ $message }}</p>
                                                </div>
                                                @enderror
                                                @error('current_fiscal_year_id')
                                                <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                    <p>{{ $message }}</p>
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row mb-half">
                                            <div class="col-md-3">
                                                <span class="custom-control-description pl-0 ml-0">
                                                    <label for="cost_center_id">@lang('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 form-control h-45 select2-tag">
                                                    @can('cost-center.main-center.create')
                                                    <option value="">
                                                        {{__('products::cost_center.main center')}}
                                                    </option>
                                                    @endcan
                                                    @foreach($costCenters as $costCenter)
                                                    @if($costCenter->parent_id)
                                                    <option @if(old('cost_center_id', $customerReceipt? $customerReceipt->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', $customerReceipt? $customerReceipt->cost_center_id: '') == $costCenter->id) selected @endif value="{{$costCenter->id}}">{{$costCenter->code}} -
                                                        {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                                    </option>
                                                    @endif
                                                    @endforeach
                                                </select>
                                                @error('cost_center_id')
                                                <span class="invalid-feedback text text-danger" role="alert">
                                                    <p>{{ $message }}</p>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="row mb-half">
                                            <div class="col-md-3">
                                                <label>@lang('sales::customer_receipts.Payment Account')</label>
                                            </div>
                                            <div class="col-md-9">
                                                <select name="payment_account" class="w-100 py-1 form-control h-45 select2-tag payment-account @if($errors->has('payment_account')) is-invalid @endif" data-current-balance="{{$paymentAccounts}}">
                                                    @forelse($paymentAccountsForDropdown as $key => $paymentAccountForDropdown)
                                                        <option @if($customerReceipt) @if($customerReceipt->payment_account_id == $key) selected @endif @else @if(old('payment_account')== $key) selected @endif @endif value="{{$key}}">{{$paymentAccountForDropdown}}</option>
                                                    @empty
                                                    @endforelse
                                                </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::customer_receipts.payment account balance')"></div>
                                        </div>

                                        <div class="row mb-half">
                                            <div class="col-md-3">
                                                <label>@lang('sales::customer_receipts.Payment Amount')</label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" name="payment_amount" id="payment_amount" class="w-100 form-control h-45 number {{$errors->has('payment_amount') ? 'is-invalid':''}}" value="{{old('payment_amount') ?? ($customerReceipt ? $customerReceipt->paid_amount : null)}}">
                                                @error('payment_amount')
                                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                        <p>{{ $message }}</p>
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="row mb-half">
                                            <div class="col-md-3">
                                                <label>@lang('sales::customer_receipts.Kind')</label>
                                            </div>
                                            <div class="col-md-9">
                                                <select name="kind" id="kind" class="select2-tag py-1 form-control h-45 @if($errors->has('kind')) is-invalid @endif">
                                                    @foreach(Modules\Purchases\Enums\PaymentReceiptTypesEnum::translatedPaymentReceiptTypesList() as $key => $type)
                                                        @php $customerKind = $customerReceipt ? $customerReceipt->kind : ''; @endphp
                                                        <option {{ ($key == $customerKind) ? "selected" : ($key == Modules\Purchases\Enums\PaymentReceiptTypesEnum::RECEIVED ? "selected" : "") }}
                                                            value="{{$key}}">{{$type}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('kind')
                                                <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                                    <p>{{ $message }}</p>
                                                </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-5 rounded">
                                        <div class="card frame-gray" style="background-color: rgb(245, 247, 250) !important; margin: auto;">
                                            <div class="card-header border-bottom-gray p-1" style="background-color: rgb(245, 247, 250) !important;">
                                                <h3>@lang('sales::customer_receipts.Customer Details'):</h3>
                                            </div>
                                            <div class="card-body">
                                                <table class="table table-borderless person-details">
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row"><b>@lang('sales::customer_receipts.Phone'):</b>
                                                            </th>
                                                            <td>
                                                                <a id="customer-phone"></a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row"><b>@lang('sales::customer_receipts.Email'):</b>
                                                            </th>
                                                            <td>
                                                                <a target="_top" id="customer-email"></a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row"><b>@lang('sales::customer_receipts.Outstanding Balance'):</b></th>
                                                            <td>
                                                                <a target="_top" id="customer-balance"></a>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-1">
                                    <div class="col-md-12">
                                        @if( $customFields->count() )
                                        <button class="mb-1 btn btn-default w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                            <div class="d-flex justify-content-between">
                                                <span>{{ __('sales::customer_receipts.additional_fields') }} </span><i class="fa fa-angle-down"></i>
                                            </div>
                                        </button>
                                        <div class="collapse" id="collapseExample">
                                            <div class="card card-body mb-0">
                                                @foreach($customFields as $key=>$field)
                                                <div class="row mb-1">
                                                    <div class="col-md-4">
                                                        <label for="{{$field->name_en}}">
                                                            {{ $field->{'name_'.app()->getLocale()} }}
                                                        </label>
                                                    </div>
                                                    <div class="col-md-8">
                                                        @if($field['type']=='checkbox')
                                                        <input id="{{$field->name_en}}" type="checkbox" name="custom_fields[{{($key+1)}}][value]" @isset(old('custom_fields')[$key+1]['value']) checked @endisset>
                                                        @else
                                                        <input class="w-100 py-1 form-control @if($field->type=='date') singledate @endif" placeholder="{{ $field->{'name_'.app()->getLocale()} }}" name="custom_fields[{{($key+1)}}][value]" type="{{ ($field->type=='date')?'text':(($field->type=='check_box')?'checkbox':$field->type) }}" id="{{$field->name_en}}" value="{{old('custom_fields') ? old('custom_fields')[$key+1]['value'] : null}}">
                                                        @endif
                                                        <input type="hidden" value="{{$field->name_ar}}" name="custom_fields[{{ ($key+1) }}][name_ar]">
                                                        <input type="hidden" value="{{$field->name_en}}" name="custom_fields[{{ ($key+1) }}][name_en]">
                                                        <input type="hidden" value="{{$field->type}}" name="custom_fields[{{ ($key+1) }}][type]">
                                                        <input type="hidden" value="{{$field->module}}" name="custom_fields[{{ ($key+1) }}][module]">
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif
                                    </div>

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

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


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



                                    <attachments-component
                                    :translations="{{ json_encode([
                                        'attachments' => __('general.attachments'),
                                        'attachments_validation' => __('general.attachments_validation'),
                                        'attachments_max_size' => __('general.attachments_max_size'),
                                        'selected_files' => __('general.selected_files'),
                                    ]) }}"
                                    :errors="{{ json_encode($errors->get('attachments.*')) }}"
                                    :preloaded-files="{{ json_encode($customerReceipt->attachments ?? []) }}"
                                ></attachments-component>
                                </div>
                            </div>
                            @else
                            @include('info.limit_reached')
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="request-reference" hidden>{{old('code')}}</p>
        <p class="request-amount" hidden>{{old('payment_amount')}}</p>
        <p class="request-kind" hidden>{{old('kind')}}</p>
        <p class="request-customer" hidden>{{old('customer')}}</p>
        <p class="request-route" hidden>{{route('company.customer-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}</p>
    </form>
</section>



@endsection

@section('extra_scripts')
    <script>
        // Make country codes available globally for Vue component
        window.countryCodes = @js(\App\Enums\PhoneCode::map());

        gtag('event', 'web_sales_customer_receipt_create');
        console.log('web_sales_customer_receipt_create event');
    </script>
<script>
    // Keep reference to the latest in-flight request to avoid race conditions
    window.currentCustomerReceiptRequest = null;

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

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

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

    // Expose prepareCurrentReceiptInvoices globally for Vue component
    window.prepareCurrentReceiptInvoicesGlobal = function(customerId = null) {
        const url = '{{route('company.customer-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}';
        prepareCurrentReceiptInvoices(url, customerId);
    };

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

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

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

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

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

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

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

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

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

            // Add event listeners for kind and payment_amount changes
            $('#kind').on('change', function() {
                const url = '{{route('company.customer-receipts.current-receipt-invoice', ['subdomain' => $subdomain])}}';
                prepareCurrentReceiptInvoices(url);
            });

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

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

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

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