@extends('admin.layouts.adminpanel')

@section('page_header')
    @php
        $doc_type = $type == 'invoices' ? 'Invoice' : 'Credit Note';
        $page_title = empty($invoice->id) ? __('Create new ' . $doc_type) : __('Edit ' . $doc_type);
    @endphp

    @include('admin.partials.page_header')
@endsection

@section('content')
    <div class="container-fluid">
        <form id="invoice-form" method="post"
            action="{{ empty($invoice->id) ? route('sales-documents.store', ['type' => $type]) : route('sales-documents.update', ['type' => $type, 'id' => $invoice->id]) }}">
            <input type="hidden" name="_method" id="hidden-method" value="{{ empty($invoice->id) ? 'POST' : 'PATCH' }}">
            <input type="hidden" name="type" id="type" value="{{ $type }}">
            <div class="row">
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-body">
                            <div class="alert alert-danger" style="display:none"></div>
                            <div class="alert alert-success" style="display:none"></div>

                            <div class="notes">(*) Datos obligatorios.</div>
                            <div class="form-group">
                                <label for="invoice_date">*{{ __('Date') }}</label>
                                <select class="form-control" name="invoice_date_type" id="invoice_date_type">
                                    <option value="1">Timbrar con fecha actual</option>
                                    <option value="2" @if (!empty($invoice->id) && $invoice->invoice_date_type == '2') selected @endif>Timbrar con
                                        fecha de ayer</option>
                                    <option value="3" @if (!empty($invoice->id) && $invoice->invoice_date_type == '3') selected @endif>Timbrar con
                                        fecha de hace dos días</option>
                                    <option value="4" @if (!empty($invoice->id) && $invoice->invoice_date_type == '4') selected @endif>Timbrar con
                                        fecha de hace tres días</option>
                                </select>
                                <span id="invoice_date_type-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            @if ($type == 'invoices')
                                <div class="form-group">
                                    <label for="payment_date">*Fecha programada de pago</label>
                                    <div class="input-group date" id="calendar" data-target-input="nearest">
                                        <div class="input-group-prepend" data-target="#calendar"
                                            data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                        <input id="payment_date" name="payment_date" type="text"
                                            class="form-control datetimepicker-input" data-target="#calendar"
                                            value="{{ $invoice->payment_date_formatted ?? now()->format('d/m/Y') }}">
                                    </div>
                                    <span id="payment_date-error" class="invalid-feedback" style="font-weight:bold"
                                        role="alert"></span>
                                </div>
                                <div class="form-group">
                                    <label for="reminder">{{ __('Reminder') }}</label>
                                    <select class="form-control" name="reminder" id="reminder">
                                        <option value="" @if (empty($invoice->id) || $invoice->reminder == '') selected @endif>Sin
                                            recordatorio</option>
                                        <option value="Mismo Día" @if ($invoice->reminder == 'Mismo Día') selected @endif>Mismo
                                            Día
                                        </option>
                                        <option value="1 Día antes" @if ($invoice->reminder == '1 Día antes') selected @endif>1 Día
                                            antes</option>
                                        <option value="2 Días antes" @if ($invoice->reminder == '2 Días antes') selected @endif>2
                                            Días
                                            antes</option>
                                        <option value="3 Días antes" @if ($invoice->reminder == '3 Días antes') selected @endif>3
                                            Días
                                            antes</option>
                                    </select>
                                </div>
                                <div class="form-group row" id="remind_until_paid_section"
                                    style="padding-top:5px;  @if (empty($invoice->id) || $invoice->reminder == '') display:none; @endif">
                                    <div class="col d-flex align-items-center">
                                        <div class="custom-control custom-switch" style="margin-left: 10px">
                                            <input type="checkbox" class="custom-control-input" id="remind_until_paid"
                                                name="remind_until_paid"
                                                {{ !empty($invoice->id) && $invoice->remind_until_paid ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="remind_until_paid"
                                                style="font-weight:normal">{{ __('Remind until paid') }}</label>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="form-group">
                                <label for="subclient_id">*{{ __('Client') }}</label>
                                <div class="row">
                                    <div class="col-12">
                                        <select class="form-control" name="subclient_id" id="subclient_id"
                                            onChange="getContactsProjectsAndQuotes()">
                                            <option value="">{{ __('-- Select client --') }}</option>
                                            @foreach ($subclients as $subclient)
                                                <option value="{{ $subclient->id }}"
                                                    @if ($subclient->id == $invoice->subclient_id) selected @endif>
                                                    {{ $subclient->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span id="subclient_id-error" class="invalid-feedback" style="font-weight:bold"
                                            role="alert"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                @if ($type == 'invoices')
                                    <label for="quote_id">{{ __('Reference') }}</label>
                                    <select class="form-control" id="quote_id" name="quote_id" onchange="getQuoteData()">
                                        <option value="">{{ __('-- Select quote --') }}</option>
                                        @if (!empty($invoice->subclient_id))
                                            @foreach ($client_quotes as $quote)
                                                <option value="{{ $quote->id }}"
                                                    @if ($quote->id == $invoice->quote_id) selected @endif>
                                                    {{ $quote->quote_number }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                @else
                                    <label for="ref_invoice_id">*{{ __('Reference') }}</label>
                                    <select class="form-control" id="ref_invoice_id" name="ref_invoice_id"
                                        onchange="getInvoiceData()">
                                        <option value="">{{ __('-- Select invoice --') }}</option>
                                        @if (!empty($invoice->subclient_id))
                                            @foreach ($client_invoices as $c_invoice)
                                                <option value="{{ $c_invoice->id }}"
                                                    @if ($c_invoice->id == $invoice->ref_invoice_id) selected @endif>
                                                    {{ $c_invoice->serie_folio }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <span id="ref_invoice_id-error" class="invalid-feedback" style="font-weight:bold"
                                        role="alert"></span>
                                @endif
                            </div>
                            <div class="form-group">
                                <label for="contact_id">*{{ __('Contacto') }}</label>
                                <div class="row">
                                    <div class="col-11">
                                        <select class="form-control" name="contact_id" id="contact_id">
                                            <option value="">{{ __('-- Select contact --') }}</option>
                                            @foreach ($contacts as $contact)
                                                <option value="{{ $contact->id }}"
                                                    @if ($contact->id == $invoice->contact_id) selected @endif>
                                                    {{ $contact->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span id="contact_id-error" class="invalid-feedback" style="font-weight:bold"
                                            role="alert"></span>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-default" id="addContactButton"
                                            onclick="openContactModal()" style="width: 100%;"
                                            @if (empty($invoice->id)) disabled @endif><i
                                                class="fa-solid fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @if ($type == 'invoices')
                                <div class="form-group">
                                    <label for="project_id">*{{ __('Project') }}</label>
                                    <div class="row">
                                        <div class="col-11">
                                            <select class="form-control" name="project_id" id="project_id">
                                                <option value="">{{ __('-- Select project --') }}</option>
                                                @foreach ($projects as $project)
                                                    <option value="{{ $project->id }}"
                                                        @if ($project->id == $invoice->project_id) selected @endif>
                                                        {{ $project->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span id="project_id-error" class="invalid-feedback" style="font-weight:bold"
                                                role="alert"></span>
                                        </div>
                                        <div class="col-1">
                                            <button type="button" class="btn btn-default" id="addProjectButton"
                                                onclick="openProjectModal()" style="width: 100%;"
                                                @if (empty($invoice->id)) disabled @endif><i
                                                    class="fa-solid fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="form-group">
                                <label for="metodo_pago">*Metodo de pago</label>
                                <select class="form-control" name="metodo_pago" id="metodo_pago">
                                    <option value="">-- Selecciona metodo de pago --</option>
                                    <option value="PUE" @if ($invoice->metodo_pago == 'PUE') selected @endif>PUE - Pago
                                        en
                                        una
                                        sola exhibición</option>
                                    <option value="PPD" @if ($invoice->metodo_pago == 'PPD') selected @endif>PPD - Pago
                                        en
                                        parcialidades o diferido</option>
                                </select>
                                <span id="metodo_pago-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="forma_pago">*Forma de pago</label>
                                <select class="form-control" name="forma_pago" id="forma_pago">
                                    <option value="">-- Selecciona forma de pago --</option>
                                    @foreach ($formas_pago as $forma_pago)
                                        <option value="{{ $forma_pago->clave }}"
                                            @if ($invoice->forma_pago == $forma_pago->clave) selected @endif>
                                            {{ $forma_pago->clave }} - {{ $forma_pago->descripcion }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="forma_pago-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="uso_cfdi">*Uso del CFDi</label>
                                <select class="form-control" name="uso_cfdi" id="uso_cfdi">
                                    <option value="">-- Selecciona uso del CFDi --</option>
                                    @foreach ($usos as $uso)
                                        <option value="{{ $uso->clave }}"
                                            @if ($invoice->uso_cfdi == $uso->clave) selected @endif>
                                            {{ $uso->clave }} - {{ $uso->descripcion }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="uso_cfdi-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="moneda">*{{ __('Currency') }}</label>
                                <select class="form-control" name="moneda" id="moneda">
                                    <option value="">{{ __('-- Select currency --') }}</option>
                                    <option value="Pesos" @if (empty($invoice->id) || $invoice->moneda == 'Pesos') selected @endif>
                                        Pesos
                                    </option>
                                    <option value="Dólares" @if ($invoice->moneda == 'Dólares') selected @endif>
                                        Dólares
                                    </option>
                                    <option value="Euros" @if ($invoice->moneda == 'Euros') selected @endif>
                                        Euros
                                    </option>
                                </select>
                                <span id="moneda-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="tipo_cambio">*{{ __('Exchange Rate') }}</label>
                                <input class="form-control" id="tipo_cambio" name="tipo_cambio"
                                    value="{{ $invoice->tipo_cambio ?? '' }}"
                                    @if (empty($invoice->id) || $invoice->moneda == 'Pesos') disabled @endif>
                                <span id="tipo_cambio-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                            <div class="form-group">
                                <label for="notes">{{ __('Notes') }}</label>
                                <textarea class="form-control" name="notes" id="notes">{{ $invoice->notes ?? '' }}</textarea>
                                <span id="notes-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    @can('consultar facturas')
                        <div class="card">
                            <div class="card-body">
                                @can('crear facturas')
                                    <a href="javascript:openConceptModal()" class="btn btn-info">
                                        <i class="fas fa-plus-circle" style="padding-right: 5px;"></i>
                                        {{ __('New Item') }}
                                    </a>
                                @endcan
                                <div class="table-responsive">
                                    <table id="invoice-concepts-table" class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th style="text-align: right">{{ __('Quantity') }}</th>
                                                <th style="text-align: left">{{ __('Description') }}</th>
                                                <th style="text-align: left">{{ __('Unit') }}</th>
                                                <th style="text-align: right">{{ __('Selling Price') }}</th>
                                                <th style="text-align: right">{{ __('Total') }}</th>

                                                <th style="width:100px">{{ __('Actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $concepts = $invoice->concepts->isNotEmpty()
                                                    ? $invoice->concepts
                                                    : $invoice->getTemporaryConcepts();
                                            @endphp
                                            @if ($concepts->isNotEmpty())
                                                @foreach ($concepts as $concept)
                                                    <tr id="row{{ $loop->index }}">
                                                        <input type="hidden" name="concepts[{{ $loop->index }}][id]"
                                                            value="{{ $concept->id ?? $concept['id'] }}">
                                                        <input type="hidden"
                                                            name="concepts[{{ $loop->index }}][no_identificacion]"
                                                            value="{{ $concept->no_identificacion ?? $concept['no_identificacion'] }}">
                                                        <input type="hidden" name="concepts[{{ $loop->index }}][cantidad]"
                                                            value="{{ $concept->cantidad ?? $concept['cantidad'] }}">
                                                        <input type="hidden"
                                                            name="concepts[{{ $loop->index }}][descripcion]"
                                                            value="{{ $concept->descripcion ?? $concept['descripcion'] }}">
                                                        <input type="hidden"
                                                            name="concepts[{{ $loop->index }}][clave_prod_serv]"
                                                            value="{{ $concept->clave_prod_serv ?? $concept['clave_prod_serv'] }}">
                                                        <input type="hidden"
                                                            name="concepts[{{ $loop->index }}][sat_key_desc]"
                                                            value="{{ is_object($concept) ? $concept->satKeyDesc() : $concept['sat_key_desc'] }}">
                                                        <input type="hidden" name="concepts[{{ $loop->index }}][unit]"
                                                            value="{{ is_object($concept)
                                                                ? $concept->clave_unidad . ' - ' . $concept->unidad
                                                                : $concept['clave_unidad'] . ' - ' . $concept['unidad'] }}">
                                                        <input type="hidden"
                                                            name="concepts[{{ $loop->index }}][valor_unitario]"
                                                            value="{{ $concept->valor_unitario ?? $concept['valor_unitario'] }}">
                                                        <input type="hidden" name="concepts[{{ $loop->index }}][importe]"
                                                            value="{{ $concept->importe ?? $concept['importe'] }}">
                                                        <td style="text-align: right">
                                                            {{ $concept->cantidad ?? $concept['cantidad'] }}</td>
                                                        <td style="text-align: left">{!! $concept->descripcion ?? $concept['descripcion'] !!}</td>
                                                        <td style="text-align: left">
                                                            {{ is_object($concept)
                                                                ? $concept->clave_unidad . ' - ' . $concept->unidad
                                                                : $concept['clave_unidad'] . ' - ' . $concept['unidad'] }}
                                                        </td>

                                                        <td style="text-align: right">
                                                            ${{ number_format($concept->valor_unitario ?? $concept['valor_unitario'], 2) }}
                                                        </td>
                                                        <td style="text-align: right">
                                                            ${{ number_format($concept->importe ?? $concept['importe'], 2) }}
                                                        </td>
                                                        <td style="width:100px">
                                                            @can('editar facturas')
                                                                <button class="btn btn-default btn-sm" type="button"
                                                                    style="margin-left: 5px;"
                                                                    onclick="openConceptModal('{{ $loop->index }}')"><i
                                                                        class="far fa-edit"></i></button>
                                                            @endcan
                                                            @can('borrar facturas')
                                                                <button class="btn btn-default btn-sm" type="button"
                                                                    style="margin-left: 5px;" data-index="{{ $loop->index }}"
                                                                    data-id="{{ addslashes($concept->id ?? $concept['id']) }}"
                                                                    data-description="{{ addslashes($concept->descripcion ?? $concept['descripcion']) }}"
                                                                    onclick="removeConceptRow(this)">
                                                                    <i class="far fa-trash-alt"></i>
                                                                </button>
                                                            @endcan
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif
                                            <tr id="noconcept"
                                                @if ($concepts->isNotEmpty()) style="display:none;" @endif>
                                                <td colspan="11" class="td-noconcept">
                                                    {{ __('No items added') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endcan
                </div>

                {{-- Right panel --}}
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            {{-- controls --}}

                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="iva"
                                            {{ (empty($invoice->id) && $iva_switch_default) || $invoice->iva_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="iva">IVA</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="iva_pct" id="iva_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ empty($invoice->id) ? ($iva_pct_default ?? 0) . '%' : ($invoice->iva_pct ?? 0) . '%' }}"
                                            disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="retiene_iva"
                                            {{ !empty($invoice->id) && $invoice->retiene_iva_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="retiene_iva">Retiene IVA</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="retiene_iva_pct" id="retiene_iva_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ $invoice->retiene_iva_pct > 0 ? $invoice->retiene_iva_pct . '%' : '0%' }}"
                                            disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="retiene_isr"
                                            {{ $invoice->retiene_isr_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="retiene_isr">Retiene ISR</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="retiene_isr_pct" id="retiene_isr_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ $invoice->retiene_isr_pct > 0 ? $invoice->retiene_isr_pct . '%' : '0%' }}"
                                            disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="discount"
                                            {{ $invoice->discount_pct > 0 ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="discount">{{ __('Discount') }}</label>
                                    </div>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="discount_pct" id="discount_pct"
                                            class="form-control form-control-sm text-right"
                                            value="{{ $invoice->discount_pct > 0 ? $invoice->discount_pct . '%' : '0%' }}">
                                    </div>
                                </div>
                            </div>
                            <hr class="separator" style="margin: 15px 0;">
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <label for="subtotal" class="mr-auto mb-0">{{ __('Subtotal') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="subtotal" id="subtotal"
                                            class="input-nooutline text-right" readonly
                                            value="${{ number_format($invoice->subtotal, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="discount_row">
                                <div class="col d-flex align-items-center">
                                    <label for="discount_amount" class="mr-auto mb-0">{{ __('Discount') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="discount_amount" id="discount_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($invoice->discount_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="iva_row">
                                <div class="col d-flex align-items-center">
                                    <label for="iva_amount" class="mr-auto mb-0">IVA</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="iva_amount" id="iva_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($invoice->iva_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="retiene_iva_row">
                                <div class="col d-flex align-items-center">
                                    <label for="retiene_iva_amount" class="mr-auto mb-0">Retiene IVA</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="retiene_iva_amount" id="retiene_iva_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($invoice->retiene_iva_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="retiene_isr_row">
                                <div class="col d-flex align-items-center">
                                    <label for="retiene_isr_amount" class="mr-auto mb-0">Retiene ISR</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="retiene_isr_amount" id="retiene_isr_amount"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($invoice->retiene_isr_amount, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <hr class="separator" style="margin: 15px 0;">
                            <div class="form-group row">
                                <div class="col d-flex align-items-center">
                                    <label for="total" class="mr-auto mb-0">{{ __('Total') }}</label>
                                    <div class="ml-auto" style="width: 50%;">
                                        <input type="text" name="total" id="total"
                                            class="input-nooutline text-right"
                                            value="${{ number_format($invoice->total, 2) ?? '0' }}">
                                    </div>
                                </div>
                            </div>
                            <br>
                            {{-- buttons --}}

                            <div class="form-group row">
                                <button onclick="saveAndPreview(event)"
                                    class="btn btn-default w-100">{{ __('Preview') }}</button>
                            </div>
                            <div class="form-group row">
                                <button onclick="saveAndGenerate(event)"
                                    class="btn btn-default w-100">{{ __('Generate ' . ($type == 'invoices' ? 'Invoice' : 'Credit Note')) }}</button>
                            </div>
                            <div class="form-group row">
                                <div class="col-6" style="padding-left: 0px;">
                                    <a href="javascript:loadContent('{{ route('sales-documents.index', ['type' => $type]) }}')"
                                        id="cancel" name="cancel"
                                        class="btn btn-default w-100">{{ __('Cancel') }}</a>
                                </div>
                                <div class="col-6" style="padding-right: 0px;">
                                    <button type="submit" id="saveInvoiceButton"
                                        class="btn btn-info w-100 text-end">{{ __('Save') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <!-- Contact Modal -->
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contactModalLabel">{{ __('Create Contact') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="invoice-contact-form" method="post" action="{{ route('contacts.store') }}">
                    <div class="modal-body" id="contact">
                        <input type="hidden" id="subclient_id" name="subclient_id" value="" />
                        <input type="hidden" id="modal_view" name="modal_view" value="1" />
                        <div class="form-group row">
                            <label for="contact_name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-name" id="contact_name" name="contact_name">
                                <span id="contact_name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_title" class="col-md-2 col-form-label">{{ __('Title') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-title" id="contact_title" name="contact_title">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_phone" class="col-md-2 col-form-label">*{{ __('Phone') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-phone" id="contact_phone" name="contact_phone">
                                <span id="contact_phone-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_email" class="col-md-2 col-form-label">{{ __('Email') }}</label>
                            <div class="col-md-10">
                                <input class="form-control contact-email" id="contact_email" name="contact_email">
                                <span id="contact_email-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-info" id="saveContactButton">
                            {{ __('Add') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Project Modal -->
    <div class="modal fade" id="projectModal" tabindex="-1" role="dialog" aria-labelledby="projectModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="projectModalLabel">{{ __('Create Project') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="invoice-project-form" method="post" action="{{ route('projects.store') }}">
                    <div class="modal-body" id="project">
                        <input type="hidden" id="subclient_id" name="subclient_id" value="" />
                        <input type="hidden" id="modal_view" name="modal_view" value="1" />
                        <div class="form-group row">
                            <label for="name" class="col-md-2 col-form-label">*{{ __('Name') }}</label>
                            <div class="col-md-10">
                                <input class="form-control name" id="name" name="name">
                                <span id="name-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-info" id="saveProjectButton">
                            {{ __('Add') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Concept Modal -->
    <div class="modal fade" id="conceptModal" tabindex="-1" role="dialog" aria-labelledby="conceptModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="conceptModalLabel">{{ __('Edit Item') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="invoice-concept-form" method="post">
                    <div class="modal-body" id="concept">
                        <input type="hidden" id="concept_id" name="concept_id" value="" />
                        <div class="form-group row">
                            <label for="concept_no_identificacion" class="col-md-2 col-form-label">No
                                Identificación</label>
                            <div class="col-md-10" id="concept_no_identificacion_select">
                                <select class="form-control select2bs4 concept-no_identificacion"
                                    name="concept_no_identificacion" id="concept_no_identificacion">
                                    <option value="no_key">{{ __('No Key') }}</option>
                                    @foreach ($service_keys as $key)
                                        <option value="{{ $key['key'] }}"
                                            data-descripcion="{{ $key['description'] }}"
                                            data-clave_prod_serv="{{ $key['sat_key'] }}"
                                            data-unit="{{ $key['unit'] }}" data-valor_unitario="{{ $key['price'] }}">
                                            {{ $key['key_name'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="concept_no_identificacion-error" class="invalid-feedback"
                                    style="font-weight:bold" role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="concept_cantidad" class="col-md-2 col-form-label">*{{ __('Quantity') }}</label>
                            <div class="col-md-10">
                                <input class="form-control concept-cantidad" id="concept_cantidad"
                                    name="concept_cantidad">
                                <span id="concept_cantidad-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="concept_descripcion"
                                class="col-md-2 col-form-label">*{{ __('Description') }}</label>
                            <div class="col-md-10">
                                <textarea class="form-control concept-descripcion" id="concept_descripcion" name="concept_descripcion"></textarea>
                                <span id="concept_descripcion-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="concept_clave_prod_serv"
                                class="col-md-2 col-form-label">{{ __('SAT Key') }}</label>
                            <div class="col-md-10" id="concept_clave_prod_serv_select">
                                <select class="form-control select2bs4 concept-clave_prod_serv"
                                    name="concept_clave_prod_serv" id="concept_clave_prod_serv"></select>
                                <span id="concept_clave_prod_serv-error" class="invalid-feedback"
                                    style="font-weight:bold" role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="concept_unit" class="col-md-2 col-form-label">*{{ __('Unit') }}</label>
                            <div class="col-md-10" id="concept_unit_select">
                                <select class="form-control select2bs4 concept-unit" name="concept_unit"
                                    id="concept_unit"></select>
                                <span id="concept_unit-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="concept_valor_unitario"
                                class="col-md-2 col-form-label">*{{ __('Selling Price') }}</label>
                            <div class="col-md-10">
                                <input class="form-control concept-valor_unitario" id="concept_valor_unitario"
                                    name="concept_valor_unitario">
                                <span id="concept_valor_unitario-error" class="invalid-feedback" style="font-weight:bold"
                                    role="alert"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="concept_importe" class="col-md-2 col-form-label">{{ __('Total') }}</label>
                            <div class="col-md-10">
                                <input class="form-control concept-importe" id="concept_importe" name="concept_importe"
                                    disabled>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ __('Cancel') }}</button>
                        <button type="button" class="btn btn-info" id="saveConceptButton">
                            {{ __('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
        .table-responsive {
            margin-top: 15px;
            width: 100%;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        #concepts-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }

        #concepts-table th,
        #concepts-table td {
            white-space: nowrap;
        }

        .td-noconcept {
            background-color: #f3f3f3;
            text-align: center;
        }

        .input-nooutline {
            background: transparent;
            border: none;
            outline: none;
            width: 100%;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            text-align: right;
            appearance: none;
        }

        .close-icon i {
            font-size: 12px;
            color: grey;
            cursor: pointer;
        }

        .close-icon i:hover {
            color: black;
        }
    </style>
    <script>
        toggleDiscountEnabled();
        toggleIvaEnabled();
        toggleRetieneIvaEnabled();
        toggleRetieneIsrEnabled();
        toggleExchangeRateEnabled();

        $('#calendar').datetimepicker({
            format: 'DD/MM/YYYY',
            locale: 'es',
            widgetPositioning: {
                horizontal: 'auto',
                vertical: 'bottom'
            },
        });

        $('#payment_date').on('focus', function() {
            $('#calendar').datetimepicker('show');
        });

        var hasDraft = {{ $invoice->status == 'Borrador' && !empty($invoice->invoice_uid) ? 'true' : 'false' }};

        function saveAndGenerate(e) {
            e.preventDefault();

            handleInvoiceAction(null, '{{ $type }}');
        }

        function getContactsProjectsAndQuotes() {
            handleSelectChange('#invoice-form #subclient_id', 'contacts', '#invoice-form #contact_id',
                '{{ route('getContactsBySubclient') }}');

            handleSelectChange('#invoice-form #subclient_id', 'projects', '#invoice-form #project_id',
                '{{ route('getProjectsBySubclient') }}');

            @if ($type == 'invoices')
                handleSelectChange('#invoice-form #subclient_id', 'quotes', '#invoice-form #quote_id',
                    '{{ route('getQuotesBySubclient') }}');
            @else
                handleSelectChange('#invoice-form #subclient_id', 'invoices', '#invoice-form #ref_invoice_id',
                    '{{ route('getInvoicesBySubclient') }}');
            @endif

            if ($('#invoice-form #subclient_id').val() != '') {
                $('#addContactButton').prop('disabled', false);
                $('#addProjectButton').prop('disabled', false);
            } else {
                $('#addContactButton').prop('disabled', true);
                $('#addProjectButton').prop('disabled', true);
            }
        }

        function getQuoteData() {
            var quote_id = $('#invoice-form #quote_id').val();

            if (quote_id != '') {
                $.ajax({
                        url: "/admin/sales/invoices/quote/" + quote_id,
                        type: 'GET',
                        success: function(response) {
                            const invoice = response.invoice;

                            const discount_pct = invoice.discount_pct > 0 ? invoice.discount_pct + '%' : '0%';
                            const iva_pct = invoice.iva_pct > 0 ? invoice.iva_pct + '%' : '0%';
                            const iva_amount = invoice.iva_amount > 0 ? currencyFormat(invoice
                                .iva_amount) : '$0';
                            const discount_amount = invoice.discount_amount > 0 ? currencyFormat(invoice
                                .discount_amount) : '$0';
                            const subtotal = invoice.subtotal > 0 ? currencyFormat(invoice
                                .subtotal) : '$0';
                            const total = invoice.total > 0 ? currencyFormat(invoice
                                .total) : '$0';

                            $('#invoice-form #subclient_id').val(invoice.subclient_id);
                            $('#invoice-form #contact_id').val(invoice.contact_id);
                            $('#invoice-form #project_id').val(invoice.project_id);
                            $('#invoice-form #moneda').val(invoice.moneda);
                            $('#invoice-form #tipo_cambio').val(invoice.tipo_cambio);
                            $('#invoice-form #discount_pct').val(discount_pct);
                            $('#invoice-form #discount_amount').val(discount_amount);
                            $('#invoice-form #iva_pct').val(iva_pct);
                            $('#invoice-form #iva_amount').val(iva_amount);
                            $('#invoice-form #subtotal').val(subtotal);
                            $('#invoice-form #total').val(total);
                            $("#discount").prop("checked", invoice.discount_pct > 0);
                            $("#iva").prop("checked", invoice.iva_pct > 0);

                            toggleExchangeRateEnabled();
                            toggleDiscountEnabled();
                            toggleIvaEnabled();

                            clearConcepts();

                            const concepts = response.concepts;
                            console.log(concepts);
                            concepts.forEach((concept, index) => {
                                addConcept(concept);
                            });
                        },
                        error: function(xhr) {
                            alert('{{ __('Failed to retrieve quote data.') }}');
                        }
                    })
                    .fail(function(xhr) {
                        if (xhr.status === 401 || xhr.status === 419) {
                            window.location.href = "/login";
                        } else {
                            console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                            alert('{{ __('Failed to retrieve quote data.') }}');
                        }
                    });
            } else {
                // clear form from quote data
                $('#invoice-form')[0].reset();
            }
        }

        function getInvoiceData() {
            var invoice_id = $('#invoice-form #ref_invoice_id').val();
            if (invoice_id != '') {
                $.ajax({
                        url: "/admin/sales/creditnotes/invoice/" + invoice_id,
                        type: 'GET',
                        success: function(response) {
                            const invoice = response.invoice;
                            const discount_pct = invoice.discount_pct > 0 ? invoice.discount_pct + '%' : '0%';
                            const iva_pct = invoice.iva_pct > 0 ? invoice.iva_pct + '%' : '0%';
                            const retiene_iva_pct = invoice.retiene_iva_pct > 0 ? invoice.retiene_iva_pct + '%' :
                                '0%';
                            const retiene_isr_pct = invoice.retiene_isr_pct > 0 ? invoice.retiene_isr_pct + '%' :
                                '0%';
                            const iva_amount = invoice.iva_amount > 0 ? currencyFormat(invoice
                                .iva_amount) : '$0';
                            const retiene_iva_amount = invoice.retiene_iva_amount > 0 ? currencyFormat(invoice
                                .retiene_iva_amount) : '$0';
                            const retiene_isr_amount = invoice.retiene_isr_amount > 0 ? currencyFormat(invoice
                                .retiene_isr_amount) : '$0';
                            const discount_amount = invoice.discount_amount > 0 ? currencyFormat(invoice
                                .discount_amount) : '$0';
                            const subtotal = invoice.subtotal > 0 ? currencyFormat(invoice
                                .subtotal) : '$0';
                            const total = invoice.total > 0 ? currencyFormat(invoice
                                .total) : '$0';

                            if (invoice.invoice_date_type != null) {
                                $('#invoice-form #invoice_date_type').val(invoice.invoice_date_type);
                            }
                            $('#invoice-form #subclient_id').val(invoice.subclient_id);
                            $('#invoice-form #contact_id').val(invoice.contact_id);
                            $('#invoice-form #project_id').val(invoice.project_id);
                            $('#invoice-form #metodo_pago').val(invoice.metodo_pago);
                            $('#invoice-form #forma_pago').val(invoice.forma_pago);
                            $('#invoice-form #uso_cfdi').val(invoice.uso_cfdi);
                            $('#invoice-form #moneda').val(invoice.moneda);
                            $('#invoice-form #tipo_cambio').val(invoice.tipo_cambio);
                            $('#invoice-form #notes').val(invoice.notes);
                            $('#invoice-form #discount_pct').val(discount_pct);
                            $('#invoice-form #discount_amount').val(discount_amount);
                            $('#invoice-form #iva_pct').val(iva_pct);
                            $('#invoice-form #iva_amount').val(iva_amount);
                            $('#invoice-form #retiene_iva_pct').val(retiene_iva_pct);
                            $('#invoice-form #retiene_iva_amount').val(retiene_iva_amount);
                            $('#invoice-form #retiene_isr_pct').val(retiene_isr_pct);
                            $('#invoice-form #retiene_isr_amount').val(retiene_isr_amount);
                            $('#invoice-form #subtotal').val(subtotal);
                            $('#invoice-form #total').val(total);
                            $("#discount").prop("checked", invoice.discount_pct > 0);
                            $("#iva").prop("checked", invoice.iva_pct > 0);
                            $("#retiene_iva").prop("checked", invoice.retiene_iva_pct > 0);
                            $("#retiene_isr").prop("checked", invoice.retiene_isr_pct > 0);

                            toggleExchangeRateEnabled();
                            toggleDiscountEnabled();
                            toggleIvaEnabled();
                            toggleRetieneIvaEnabled();
                            toggleRetieneIsrEnabled();

                            clearConcepts();

                            const concepts = response.concepts;
                            console.log(concepts);
                            concepts.forEach((concept, index) => {
                                addConcept(concept);
                            });
                        },
                        error: function(xhr) {
                            alert('{{ __('Failed to retrieve invoice data.') }}');
                        }
                    })
                    .fail(function(xhr) {
                        if (xhr.status === 401 || xhr.status === 419) {
                            window.location.href = "/login";
                        } else {
                            console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
                            alert('{{ __('Failed to retrieve invoice data.') }}');
                        }
                    });
            } else {
                // clear form from invoice data
                $('#invoice-form')[0].reset();
            }
        }

        function saveAndPreview(e) {

            e.preventDefault();

            if (!hasDraft) {
                const userConfirmed = confirm(
                    '{{ __('You are about to generate a draft. Do you want to continue?') }}'
                );
                if (!userConfirmed) {
                    return;
                }
            }

            generateInvoice = 1;
            isInvoiceDraft = 1;

            submitForm($('#invoice-form'));
        }

        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        $('#concept_no_identificacion').select2({
            theme: 'bootstrap4', // Use the Bootstrap 4 styling for Select2
            placeholder: "{{ __('No Key') }}", // Placeholder text
            allowClear: true, // Enable clear button
            dropdownParent: $('#concept_no_identificacion_select'),
            minimumResultsForSearch: 0
        });

        $('#concept_no_identificacion').on('select2:select', function(e) {
            const selectedOption = $(this).find(':selected');
            const value = selectedOption.val();
            const descripcion = selectedOption.data('descripcion');
            const clave_prod_serv = selectedOption.data('clave_prod_serv');
            const unit = selectedOption.data('unit');
            const valor_unitario = selectedOption.data('valor_unitario') > 0 ? currencyFormat(selectedOption
                .data(
                    'valor_unitario')) : '$0.00';

            // Reset fields if 'No Key' is selected
            if (value === 'no_key') {
                $('#concept_descripcion').val('');
                $('#concept_clave_prod_serv').val(null).trigger('change');
                $('#concept_unit').val(null).trigger('change');
                $('#concept_valor_unitario').val('$0.00');
            } else {
                $('#concept_descripcion').val(descripcion);

                let option_sat = new Option(clave_prod_serv, clave_prod_serv, true, true);
                $('#concept_clave_prod_serv').append(option_sat).trigger('change');

                let option_unit = new Option(unit, unit, true, true);
                $('#concept_unit').append(option_unit).trigger('change');

                $('#concept_valor_unitario').val(valor_unitario);
            }
        });

        $('#concept_unit').select2({
            theme: 'bootstrap4',
            placeholder: "{{ __('-- Select unit --') }}",
            minimumInputLength: 3,
            language: {
                inputTooShort: function(args) {
                    var remainingChars = args.minimum - args.input.length;
                    return "{{ __('Please enter') }} " + remainingChars +
                        " {{ __('or more characters') }}";
                },
                searching: function() {
                    return "{{ __('Searching...') }}";
                },
                noResults: function() {
                    return "{{ __('No results found') }}";
                }
            },
            ajax: {
                url: "{{ route('sat_units.search') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(unit) {
                            return {
                                id: unit.clave + ' - ' + unit.descripcion,
                                text: unit.clave + ' - ' + unit.descripcion
                            };
                        })
                    };
                },
                cache: true
            },
            dropdownParent: $('#concept_unit_select')
        });

        $('#concept_clave_prod_serv').select2({
            theme: 'bootstrap4',
            placeholder: "{{ __('-- Select SAT key --') }}",
            minimumInputLength: 3,
            language: {
                inputTooShort: function(args) {
                    var remainingChars = args.minimum - args.input.length;
                    return "{{ __('Please enter') }} " + remainingChars +
                        " {{ __('or more characters') }}";
                },
                searching: function() {
                    return "{{ __('Searching...') }}";
                },
                noResults: function() {
                    return "{{ __('No results found') }}";
                }
            },
            ajax: {
                url: "{{ route('sat_keys.search') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(concept) {
                            return {
                                id: concept.clave,
                                text: concept.clave + ' - ' + concept.descripcion
                            };
                        })
                    };
                },
                cache: true
            },
            dropdownParent: $('#concept_clave_prod_serv_select')
        });

        $("#discount").on("click", function() {
            toggleDiscountEnabled();
        });

        $("#iva").on("click", function() {
            toggleIvaEnabled();
        });

        $("#retiene_iva").on("click", function() {
            toggleRetieneIvaEnabled();
        });

        $("#retiene_isr").on("click", function() {
            toggleRetieneIsrEnabled();
        });

        document.getElementById('reminder').addEventListener('change', function() {
            toggleRemindUntilPaid();
        });

        $('#concept_cantidad, #concept_valor_unitario').on('focus', function() {
            $(this).select();
        });

        $('#concept_cantidad, #concept_valor_unitario').on('input', function() {
            calculateConceptTotal();
        });

        $('#concept_valor_unitario').on('blur', function() {
            var price = parseFloat($("#concept_valor_unitario").val().replace(/[^0-9.]/g, '')) || 0;
            $('#concept_valor_unitario').val(currencyFormat(price));
        });

        $('#discount_pct, #iva_pct, #retiene_iva_pct, #retiene_isr_pct').on('input', function() {
            calculateTotal();
        });

        document.getElementById('moneda').addEventListener('change', function() {
            toggleExchangeRateEnabled();
        });

        document.getElementById('saveConceptButton').addEventListener('click', function() {

            $('.invalid-feedback').text('').css('display', 'none');

            let isValid = true;

            const conceptQuantity = $('#concept_cantidad').val() ? $('#concept_cantidad').val().trim() : '';
            const conceptDescription = $('#concept_descripcion').val() ? $('#concept_descripcion').val()
                .trim() :
                '';
            const conceptUnit = $('#concept_unit').val() ? $('#concept_unit').val().trim() : '';
            const conceptPrice = $('#concept_valor_unitario').val() ? $('#concept_valor_unitario').val()
                .trim() :
                '';

            if (!conceptQuantity) {
                isValid = false;
                $('#concept_cantidad-error').text('{{ __('Quantity is required.') }}').css('display',
                    'block');
            }

            if (!conceptDescription) {
                isValid = false;
                $('#concept_descripcion-error').text('{{ __('Description is required.') }}').css(
                    'display',
                    'block');
            }

            if (!conceptUnit) {
                isValid = false;
                $('#concept_unit-error').text('{{ __('Unit is required.') }}').css('display',
                    'block');
            }

            if (!conceptPrice) {
                isValid = false;
                $('#concept_valor_unitario-error').text('{{ __('Price is required.') }}').css('display',
                    'block');
            }

            if (isValid) {
                addConcept();
            }
        });

        function toggleDiscountEnabled() {
            if ($("#discount").is(":checked")) {
                $("#discount_pct").prop("disabled", false);
                $("#discount_row").show();
            } else {
                $("#discount_pct").prop("disabled", true);
                $("#discount_row").hide();
            }

            calculateTotal();
        }

        function toggleIvaEnabled() {
            if ($("#iva").is(":checked")) {
                $("#iva_pct").prop("disabled", false);
                $("#iva_row").show();
            } else {
                $("#iva_pct").prop("disabled", true);
                $("#iva_row").hide();
            }

            calculateTotal();
        }

        function toggleRetieneIvaEnabled() {
            if ($("#retiene_iva").is(":checked")) {
                $("#retiene_iva_pct").prop("disabled", false);
                $("#retiene_iva_row").show();
            } else {
                $("#retiene_iva_pct").prop("disabled", true);
                $("#retiene_iva_row").hide();
            }

            calculateTotal();
        }

        function toggleRetieneIsrEnabled() {
            if ($("#retiene_isr").is(":checked")) {
                $("#retiene_isr_pct").prop("disabled", false);
                $("#retiene_isr_row").show();
            } else {
                $("#retiene_isr_pct").prop("disabled", true);
                $("#retiene_isr_row").hide();
            }

            calculateTotal();
        }

        function toggleExchangeRateEnabled() {
            var selectedCurrency = $('#moneda').val();

            if (selectedCurrency === 'Pesos') {
                $('#tipo_cambio').prop('disabled', true);
            } else {
                $('#tipo_cambio').prop('disabled', false);
            }
        }

        function toggleRemindUntilPaid() {
            var reminder = $('#reminder').val();

            if (reminder != '') {
                $('#remind_until_paid_section').show();
            } else {
                $('#remind_until_paid').prop('checked', false);
                $('#remind_until_paid_section').hide();
            }
        }

        function calculateTotal() {
            var subtotal = parseFloat($("#subtotal").val().replace(/[^0-9.]/g, '')) || 0;
            var iva_amount = 0;
            var retiene_iva_amount = 0;
            var retiene_isr_amount = 0;
            var discount_amount = 0;

            if ($("#discount").is(":checked")) {
                var discount_pct = $("#discount_pct").val().replace(/[^0-9.]/g, '');
                discount_amount = discount_pct * subtotal / 100;
                subtotal -= discount_amount;
            }

            if ($("#iva").is(":checked")) {
                var iva_pct = parseFloat($("#iva_pct").val().replace(/[^0-9.]/g, '')) || 0;
                iva_amount = iva_pct * subtotal / 100;
            }

            if ($("#retiene_iva").is(":checked")) {
                var retiene_iva_pct = parseFloat($("#retiene_iva_pct").val().replace(/[^0-9.]/g, '')) || 0;
                retiene_iva_amount = retiene_iva_pct * subtotal / 100;
            }

            if ($("#retiene_isr").is(":checked")) {
                var retiene_isr_pct = parseFloat($("#retiene_isr_pct").val().replace(/[^0-9.]/g, '')) || 0;
                retiene_isr_amount = retiene_isr_pct * subtotal / 100;
            }

            var total = subtotal + iva_amount - retiene_iva_amount - retiene_isr_amount;

            $("#iva_amount").val(currencyFormat(iva_amount));
            $("#retiene_iva_amount").val(currencyFormat(retiene_iva_amount));
            $("#retiene_isr_amount").val(currencyFormat(retiene_isr_amount));
            $("#discount_amount").val(currencyFormat(discount_amount));
            $("#total").val(currencyFormat(total));
        }

        function calculateConceptTotal() {
            var conceptQuantity = $('#concept_cantidad').val().replace(/[^0-9.]/g, '');
            var conceptPrice = $('#concept_valor_unitario').val().replace(/[^0-9.]/g, '');

            var conceptAmount = 0;

            if (!isNaN(conceptQuantity) && conceptQuantity !== '' && !isNaN(conceptPrice) && conceptPrice !== '') {
                conceptAmount = conceptQuantity * conceptPrice;
            }

            $('#concept_importe').val(currencyFormat(conceptAmount));
        }

        function openConceptModal(index = null) {
            $('.invalid-feedback').text('').css('display', 'none');

            let conceptData = null;

            if (index != null) {
                conceptData = {
                    id: $(`input[name="concepts[${index}][id]"]`).val(),
                    no_identificacion: $(`input[name="concepts[${index}][no_identificacion]"]`).val(),
                    cantidad: $(`input[name="concepts[${index}][cantidad]"]`).val(),
                    descripcion: $(`input[name="concepts[${index}][descripcion]"]`).val(),
                    clave_prod_serv: $(`input[name="concepts[${index}][clave_prod_serv]"]`).val(),
                    sat_key_desc: $(`input[name="concepts[${index}][sat_key_desc]"]`).length ?
                        $(`input[name="concepts[${index}][sat_key_desc]"]`).val() : null,
                    unit: $(`input[name="concepts[${index}][unit]"]`).val(),
                    valor_unitario: $(`input[name="concepts[${index}][valor_unitario]"]`).val(),
                    importe: $(`input[name="concepts[${index}][importe]"]`).val(),
                };
            }

            if (conceptData !== null) {
                $('#concept_id').val(conceptData.id);
                $('#concept_no_identificacion').val(conceptData.no_identificacion).trigger('change');
                $('#concept_cantidad').val(conceptData.cantidad);
                $('#concept_descripcion').val(conceptData.descripcion);

                let option_sat = new Option(conceptData.sat_key_desc !== null ? conceptData.sat_key_desc : conceptData
                    .clave_prod_serv, conceptData.clave_prod_serv, true, true);
                $('#concept_clave_prod_serv').append(option_sat).trigger('change');

                let option_unit = new Option(conceptData.unit, conceptData.unit, true, true);
                $('#concept_unit').append(option_unit).trigger('change');

                $('#concept_valor_unitario').val(currencyFormat(conceptData.valor_unitario));
                $('#concept_importe').val(currencyFormat(conceptData.importe));
                $('#conceptModalLabel').text('{{ __('Edit Item') }}');
                $('#saveConceptButton').text('{{ __('Save') }}');
            } else {
                $('#concept_id').val('');
                $('#concept_no_identificacion').val(null).trigger('change');
                $('#concept_cantidad').val('');
                $('#concept_descripcion').val('');
                $('#concept_clave_prod_serv').val(null).trigger('change');
                $('#concept_unit').val(null).trigger('change');
                $('#concept_valor_unitario').val('$0.00');
                $('#concept_importe').val('$0.00');
                $('#conceptModalLabel').text('{{ __('New Item') }}');
                $('#saveConceptButton').text('{{ __('Add') }}');
            }

            $('#conceptModal').modal('show');
        }

        function openSubclientModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            $('#subclientModal #name').val('');
            $('#subclientModal #executive_id').val('{{ auth()->id() }}');

            $('#subclientModal').modal('show');
        }

        function openContactModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            const subclientId = $('#invoice-form #subclient_id').val();

            $('#contactModal #subclient_id').val(subclientId);
            $('#contactModal #contact_name').val('');
            $('#contactModal #contact_title').val('');
            $('#contactModal #contact_phone').val('');
            $('#contactModal #contact_email').val('');
            $('#contactModal').modal('show');
        }

        function openProjectModal() {

            $('.invalid-feedback').text('').css('display', 'none');

            const subclientId = $('#invoice-form #subclient_id').val();

            $('#projectModal #subclient_id').val(subclientId);
            $('#projectModal #name').val('');
            $('#projectModal').modal('show');
        }

        function addConcept(concept = null) {

            let newConcept;
            if (concept == null) {
                // Step 1: Copy new data from another form (invoice-concept-form)
                newConcept = {
                    id: $('#concept_id').val() || Math.random().toString(36).substr(2, 9),
                    no_identificacion: $('#concept_no_identificacion').val(),
                    cantidad: $('#concept_cantidad').val(),
                    descripcion: $('#concept_descripcion').val(),
                    clave_prod_serv: $('#concept_clave_prod_serv').val(),
                    sat_key_desc: $('#concept_clave_prod_serv option:selected').text(),
                    unit: $('#concept_unit').val(),
                    valor_unitario: $("#concept_valor_unitario").val().replace(/[^0-9.]/g, ''),
                    importe: $("#concept_importe").val().replace(/[^0-9.]/g, ''),
                };
            } else {
                newConcept = {
                    id: concept.id,
                    no_identificacion: concept.no_identificacion,
                    cantidad: concept.cantidad,
                    descripcion: concept.descripcion,
                    clave_prod_serv: concept.clave_prod_serv,
                    sat_key_desc: concept.sat_key_desc,
                    unit: concept.unit,
                    valor_unitario: concept.valor_unitario,
                    importe: concept.importe,
                };
            }

            // Step 2: Clear the form inputs for the new concept
            $('#invoice-concept-form input').val('');

            // Step 3: Get initial concepts
            const concepts = getInitialConcepts();
            const updatedConcepts = [...concepts];

            let existingConceptIndex = updatedConcepts.findIndex(concept => concept.id === newConcept.id);

            if (existingConceptIndex !== -1) {
                updatedConcepts[existingConceptIndex] = newConcept;
            } else {
                updatedConcepts.push(newConcept);
            }

            rebuildHiddenInputs(updatedConcepts);
        }

        function addContact() {
            let newContact = {
                id: $('#contactModal #contact_id').val() || Math.random().toString(36).substr(2, 9),
                name: $('#contactModal #contact_name').val(),
                title: $('#contactModal #contact_title').val(),
                phone: $('#contactModal #contact_phone').val(),
                email: $('#contactModal #contact_email').val(),
            };

            $('#invoice-contact-form input').val('');

        }

        function rebuildConceptTableRows(concepts) {

            let tableRows = '';

            concepts.forEach((concept, index) => {

                const conceptDescription = concept.descripcion;

                tableRows += `
    <tr id="row${index}">
        <td style="text-align: right">${concept.cantidad}</td>
        <td style="text-align: left">${concept.descripcion}</td>
        <td style="text-align: left">${concept.unit}</td>
        <td style="text-align: right">${currencyFormat(concept.valor_unitario)}</td>
        <td style="text-align: right">${currencyFormat(concept.importe)}</td>
        <td style="width:100px">
            @can('editar facturas')
                <button class="btn btn-default btn-sm" type="button" style="margin-left: 5px;" onclick="openConceptModal('${index}')">
                    <i class="far fa-edit"></i>
                </button>
            @endcan
            @can('borrar facturas')
              <button class="btn btn-default btn-sm" type="button" style="margin-left: 5px;" data-index="${index}" data-id="${concept.id}" data-description="${conceptDescription}" onclick="removeConceptRow(this)">
    <i class="far fa-trash-alt"></i>
</button>
            @endcan
        </td>
    </tr>
`;
            });

            tableRows +=
                `<tr id="noconcept"><td colspan="10" class="td-noconcept">{{ __('No items added') }}</td></tr>`;

            calculateSubtotal();

            $('#invoice-concepts-table tbody').html(tableRows);
            $('#noconcept').hide();
            $('#conceptModal').modal('hide');
        }

        function removeConceptRow(button) {

            const index = button.dataset.index;
            const id = button.dataset.id;
            const description = button.dataset.description;

            if (confirm(`¿Estás seguro de eliminar Partida ${description}?`)) {

                $(`#row${index}`).remove();

                $(`input[name^="concepts[${index}]"]`).remove();

                calculateSubtotal();

                if ($('input[name^="concepts"]').length === 0) {
                    $("#noconcept").show();
                } else {
                    $("#noconcept").hide();
                }
            }
        }

        function getInitialConcepts() {
            let concepts = [];

            $('#invoice-form input[name^="concepts"]').each(function() {
                let matches = $(this).attr('name').match(/^concepts\[(\d+)]\[(\w+)]$/);
                if (matches) {
                    let index = matches[1];
                    let key = matches[2];

                    if (!concepts[index]) {
                        concepts[index] = {};
                    }

                    concepts[index][key] = $(this).val();
                }
            });

            return concepts;
        }

        function rebuildHiddenInputs(concepts) {
            let hiddenInputs = '';
            let fileInputs = '';

            concepts.forEach((concept, index) => {
                Object.keys(concept).forEach(key => {
                    hiddenInputs +=
                        `<input type="hidden" name="concepts[${index}][${key}]" value="${concept[key]}">`;
                });
            });

            clearConcepts();

            $('#invoice-form').append(hiddenInputs);
            $('#invoice-form').append(fileInputs);

            rebuildConceptTableRows(concepts);
        }

        function calculateSubtotal() {
            let rowTotal = 0; // Initialize the total as a number

            // Iterate through all 'amount' inputs in the form
            $('#invoice-form input[name^="concepts["][name$="[importe]"]').each(function() {
                const amount = parseFloat($(this).val()) || 0; // Convert value to a number or default to 0
                rowTotal += amount; // Add the numeric value to the total
            });

            $('#subtotal').val(currencyFormat(rowTotal));

            calculateTotal();
        }

        function debounce(callback, delay) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => callback.apply(this, args), delay);
            };
        }

        function buildSubclientsList(subclients, selectedId) {
            var select = $('#subclient_id');

            select.find('option').not(':first').remove();

            subclients.forEach(function(subclient) {
                var option = $('<option></option>')
                    .val(subclient.id)
                    .text(subclient.name);
                select.append(option);
            });

            select.val(selectedId);
            select.change();
        }

        function buildContactsList(contacts, selectedId) {
            var select = $('#contact_id');

            select.find('option').not(':first').remove();

            contacts.forEach(function(contact) {
                var option = $('<option></option>')
                    .val(contact.id)
                    .text(contact.name);
                select.append(option);
            });

            select.val(selectedId);
        }

        function buildProjectsList(projects, selectedId) {
            var select = $('#project_id');

            select.find('option').not(':first').remove();

            projects.forEach(function(project) {
                var option = $('<option></option>')
                    .val(project.id)
                    .text(project.name);
                select.append(option);
            });

            select.val(selectedId);
        }

        function setFormToUpdate(invoice) {
            $("#hidden-method").val("PATCH");

            let updateUrl = '{{ route('sales-documents.update', ['type' => '__TYPE__', 'id' => '__ID__']) }}'
                .replace('__TYPE__', '{{ $type }}')
                .replace('__ID__', invoice.id);

            invoice.conceptIds.forEach((id, index) => {
                const hiddenInput = $(`input[name="concepts[${index}][id]"]`);
                hiddenInput.val(id);
            });

            $("#invoice-form").attr("action", updateUrl);

            $("#pageTitle").text("{{ __('Edit ' . ($type == 'invoices' ? 'Invoice' : 'Credit Note')) }}");
        }

        function clearConcepts() {
            $('#invoice-concepts-table tbody').find('tr[id^="row"]').remove();
            $('#invoice-form').find('input[type="hidden"][name^="concepts"]').remove();
        }

        function startPolling(invoiceId) {
            pollingInterval = setInterval(() => checkPaymentStatus(invoiceId), 3000);
        }

        function stopPolling() {
            clearInterval(pollingInterval);
        }

        function checkPaymentStatus(invoiceId) {
            console.log('polling for invoice ' + invoiceId);
            fetch(`/admin/check-invoice-payment-status?invoice_id=${invoiceId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'completed') {
                        stopPolling();
                        let redirectUrl = "{{ route('sales-documents.index', ['type' => $type]) }}";
                        generate(
                            invoiceId,
                            null,
                            redirectUrl,
                            0,
                            '{{ $type }}'
                        );
                    } else if (data.status === 'pending') {
                        console.log('Payment is still pending.');
                    } else if (data.status === 'error') {
                        stopPolling();
                        console.error(data.message);
                        $(".overlay").hide();
                    }
                }).catch(error => {
                    console.error('Fetch error:', error);
                    stopPolling();
                });
        }
    </script>
@endsection