{{-- Pestaña --}}
<hr><div class="tabbable">

    {{-- Tabs --}}
    <ul class="nav nav-tabs">
        <li class="nav-item active col-6" style="max-width: 45%;">
            <a class="p-0 nav-link sanserif nav-rounded active" href="#special_extra_charges" data-toggle="tab">
                {{ __('entity_forms')['reservation']['subsections']['charges'] }}
            </a>
        </li>
        &nbsp;&nbsp;
        <li class="col-6" style="max-width: 45%;">
            <a class="p-0 nav-link sanserif nav-rounded" href="#special_extra_payments" data-toggle="tab">
                {{ __('entity_forms')['reservation']['subsections']['payments'] }}
            </a>
        </li>
    </ul>

    {{--Contenido--}}
    <div class="tab-content">

        {{-- Consumo --}}
        <div class="tab-pane tabbable active" id="special_extra_charges">
            <div class="container px-2">

                {{-- Form --}}
                <div class="mb-4 row justify-content-start align-items-center g-2">
                    <div class="pl-4 col-10">

                        {{-- Fields --}}
                        <form method="post" id="special_extra_charge_form" enctype="multipart/form-data">
                            <div class="container">
                                <div class="row justify-content-center align-items-center g-2">
                                    @csrf

                                    {{-- Hidden Fields --}}
                                    <input type="hidden" id="special_extra_charge_id" name="special_extra_charge_id">
                                    <input type="hidden" id="special_extra_charges_reservation" name="special_extra_charges_reservation">
                                    <input type="hidden" id="special_extra_charges_receptionist" name="special_extra_charges_receptionist" value="{{ auth()->user()->name }}">

                                    {{-- Fecha --}}
                                    <div class="col-3">
                                        <label for="special_extra_charge_date" class="form-label external-label">
                                            {{ __('entity_fields')['common']['date'] }}
                                        </label>

                                        <input type="date" id="special_extra_charge_date" name="special_extra_charge_date"
                                            value="2026-07-03" max="2100-12-31" step="1" required
                                            class="shadows form-control input-harsi">
                                    </div>

                                    {{-- Concepto --}}
                                    <div class="col-3">
                                        <label for="special_extra_charge_concept" class="form-label external-label">
                                            {{ __('entity_fields')['common']['concept'] }}
                                        </label>

                                        <input type="text" id="special_extra_charge_concept" name="special_extra_charge_concept"
                                            placeholder="{{ __('entity_forms')['reservation']['charge_concept'] }}"
                                            class="shadows form-control input-harsi" required>
                                    </div>

                                    {{-- Monto --}}
                                    <div class="col-3">
                                        <label for="special_extra_charge_amount" class="form-label external-label">
                                            {{ __('entity_fields')['charges_and_payments']['amount'] }}
                                        </label>

                                        <input type="number" id="special_extra_charge_amount" name="special_extra_charge_amount"
                                            step="0.01" placeholder="0.00" required
                                            class="shadows form-control input-harsi"
                                            onchange="redondearDecimales('special_extra_charge_amount')">
                                    </div>

                                    {{-- Button --}}
                                    <div class="col-3">
                                        <input type="submit" name="add_special_extra_charge" id="add_special_extra_charge" class="mt-4 btn btn-harsi text-uppercase"
                                            value="{{ __('common_actions')['register'] }}"/>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Resumen de Cargos --}}
                <div class="mb-4 row justify-content-center align-items-top g-2">

                    {{-- Table --}}
                    <div class="py-3 col-7 card bg-light">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover table-sm" id="special_extra_charges_table">
                                <thead>
                                    <tr class="cardtabletr">
                                        <th class="text-center" width="25%" scope="col">{{ __('entity_fields')['common']['date'] }}</th>
                                        <th class="text-center" width="25%" scope="col">{{ __('entity_fields')['common']['concept'] }}</th>
                                        <th class="text-center" width="25%" scope="col">{{ __('entity_fields')['charges_and_payments']['amount'] }}</th>
                                        <th class="text-center" width="25%" scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                                    </tr>
                                </thead>
                                <tbody id="special_extra_charges_resume" class="text-center"></tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Statistics --}}
                    <div class="pl-5 col-4">

                        {{-- Contract --}}
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="special_extra_contract" class="input-group-text disabled-element secondary-left-label">
                                        {{ __('entity_fields')['reservation']['contract'] }}
                                    </label>
                                </div>

                                <select name="special_extra_contract" id="special_extra_contract"
                                    class="form-control input-harsi">
                                    <option value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>

                                    <option value="Pago en Destino">{{ __('neutral_words')['on_destiny'] }}</option>
                                    <option value="Cortesia">{{ __('neutral_words')['courtesy'] }}</option>
                                    <option value="Credito">{{ __('neutral_words')['credit'] }}</option>
                                </select>
                            </div>

                        {{-- Monto Total --}}
                            <label for="special_extra_total" class="form-label label-for-count">
                                {{ __('entity_forms')['reservation']['balance'] }}
                            </label>

                            <input type="text" id="special_extra_total" readonly
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                class="total-balance-input shadows form-control input-for-count">

                        {{-- Pagos Realizados --}}
                            <label for="special_extra_paid" class="form-label label-for-count">
                                {{ __('entity_forms')['reservation']['balance_paid'] }}
                            </label>

                            <input type="text" id="special_extra_paid" readonly
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                class="paid-balance-input shadows form-control input-for-count">

                        {{-- Saldo Pendiente --}}
                            <label for="special_extra_pending" class="form-label label-for-count">
                                {{ __('entity_forms')['reservation']['balance_outstanding'] }}
                            </label>

                            <input type="text" id="special_extra_pending" readonly
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                class="pending-balance-input shadows form-control input-for-count">
                    </div>
                </div>

            </div>
        </div>

        {{-- Pagos --}}
        <div class="tab-pane tabbable" id="special_extra_payments">
            <div class="container px-2 py-0">

                {{-- Form --}}
                <div class="mb-4 row justify-content-center align-items-center g-2">
                    <div class="col-11">

                        {{-- Fields --}}
                        <form method="post" id="special_extra_payment_form" enctype="multipart/form-data">
                            <div class="container">
                                <div class="row justify-content-center align-items-center g-2">
                                    @csrf

                                    {{-- Hidden Fields --}}
                                    <input type="hidden" id="special_extra_payment_id" name="special_extra_payment_id">
                                    <input type="hidden" id="special_extra_payment_reservation" name="special_extra_payment_reservation">
                                    <input type="hidden" id="special_extra_payment_receptionist" name="special_extra_payment_receptionist" value="{{ auth()->user()->name }}">

                                    {{-- Fecha --}}
                                    <div class="col">
                                        <label for="special_extra_payment_date" class="form-label external-label">
                                            {{ __('entity_fields')['common']['date'] }}
                                        </label>

                                        <input type="date" id="special_extra_payment_date" name="special_extra_payment_date"
                                            value="2026-07-03" max="2100-12-31" step="1" required
                                            class="shadows form-control input-harsi">
                                    </div>

                                    {{-- Concepto --}}
                                    <div class="col">
                                        <label for="special_extra_payment_concept" class="form-label external-label">
                                            {{ __('entity_fields')['common']['concept'] }}
                                        </label>

                                        <input type="text" id="special_extra_payment_concept" name="special_extra_payment_concept"
                                            placeholder="{{ __('entity_forms')['reservation']['payment_concept'] }}"
                                            class="shadows form-control input-harsi" required>
                                    </div>

                                    {{-- Método de Pago --}}
                                    <div class="col">
                                        <label for="special_extra_payment_method" class="form-label external-label">
                                            {{ __('entity_fields')['common']['payment_method'] }}
                                        </label>

                                        <select name="special_extra_payment_method" id="special_extra_payment_method"
                                            class="shadows form-control input-harsi" required
                                        >
                                            <option value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>

                                            @foreach ($paymentMethods as $paymentMethod)
                                                <option value="{{ $paymentMethod->method_name }}">{{ $paymentMethod->method_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Monto --}}
                                    <div class="col">
                                        <label for="special_extra_payment_amount" class="form-label external-label">
                                            {{ __('entity_fields')['charges_and_payments']['amount'] }}
                                        </label>

                                        <input type="number" id="special_extra_payment_amount" name="special_extra_payment_amount"
                                            step="0.01" placeholder="0.00" required
                                            class="shadows form-control input-harsi"
                                            onchange="redondearDecimales('special_extra_payment_amount')">
                                    </div>

                                    {{-- Buttons --}}
                                    <div class="col">
                                        <input type="submit" name="add_special_extra_payment" id="add_special_extra_payment" class="mt-4 btn btn-harsi"
                                            value="{{ __('entity_forms')['reservation']['register_payment'] }}"/>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Resumen de Cargos --}}
                <div class="px-2 mb-4 row justify-content-center align-items-center">

                    {{-- Table --}}
                    <div class="py-3 col-9 card bg-light">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover table-sm" id="special_extra_payments_table">
                                <thead>
                                    <tr class="cardtabletr">
                                        <th class="text-center" width="15%" scope="col">{{ __('entity_fields')['common']['date'] }}</th>
                                        <th class="text-center" width="25%" scope="col">{{ __('entity_fields')['common']['concept'] }}</th>
                                        <th class="text-center" width="30%" scope="col">{{ __('entity_fields')['common']['payment_method'] }}</th>
                                        <th class="text-center" width="15%" scope="col">{{ __('entity_fields')['charges_and_payments']['amount'] }}</th>
                                        <th class="text-center" width="20%" scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                                    </tr>
                                </thead>
                                <tbody id="special_extra_payments_resume" class="text-center"></tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Statistics --}}
                    <div class="py-3 pl-4 col-3">

                        {{-- Contract --}}
                            <div class="mb-3 input-group">
                                <div class="input-group-prepend">
                                    <label for="special_extra_contract" class="input-group-text disabled-element secondary-left-label">
                                        {{ __('entity_fields')['reservation']['contract'] }}
                                    </label>
                                </div>

                                <select name="special_extra_contract_2" id="special_extra_contract_2"
                                    class="form-control input-harsi">
                                    <option value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>

                                    <option value="Pago en Destino">{{ __('neutral_words')['on_destiny'] }}</option>
                                    <option value="Cortesia">{{ __('neutral_words')['courtesy'] }}</option>
                                    <option value="Credito">{{ __('neutral_words')['credit'] }}</option>
                                </select>
                            </div>

                        {{-- Monto Total --}}
                            <label for="special_extra_total" class="form-label label-for-count">
                                {{ __('entity_forms')['reservation']['balance'] }}
                            </label>

                            <input type="text" id="special_extra_total_2" readonly
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                class="shadows form-control input-for-count total-balance-input">

                        {{-- Pagos Realizados --}}
                            <label for="special_extra_paid" class="form-label label-for-count">
                                {{ __('entity_forms')['reservation']['balance_paid'] }}
                            </label>

                            <input type="text" id="special_extra_paid_2" readonly
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                class="shadows form-control input-for-count paid-balance-input">

                        {{-- Saldo Pendiente --}}
                            <label for="special_extra_pending" class="form-label label-for-count">
                                {{ __('entity_forms')['reservation']['balance_outstanding'] }}
                            </label>

                            <input type="text" id="special_extra_pending_2" readonly
                                placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"
                                class="shadows form-control input-for-count pending-balance-input">
                    </div>

                </div>

            </div>
        </div>

    </div>

</div>