{{-- Pestaña --}}
<hr><div class="tabbable">
    <div class="container px-2">
        {{-- Resumen de Tarifas --}}
        <div class="my-4 row justify-content-center align-items-center">

            {{-- Title --}}
            <div class="col-2">
                <h5 class="pt-2 sanserif harsi-color">
                    {{ __('entity_forms')['reservation']['subsections']['rate'] }}
                </h5>
            </div>

            {{-- Tarifa Diaria --}}
            <div class="col-3">
                <div class="input-group">

                    <div class="input-group-prepend">
                        <label for="special_daily_rate_reference" class="input-group-text disabled-element secondary-left-label">
                            {{ __('entity_forms')['reservation']['rate'] }}
                        </label>
                    </div>

                    <input type="number" id="special_daily_rate_reference" readonly disabled
                        class="form-control disabled-element"
                        placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}">

                </div>
            </div>

            {{-- Tarifa Total --}}
            <div class="col-3">
                <div class="input-group">

                    <div class="input-group-prepend">
                        <label for="special_total_rate_reference" class="input-group-text disabled-element secondary-left-label">
                            {{ __('entity_forms')['reservation']['total_rate'] }}
                        </label>
                    </div>

                    <input type="number" id="special_total_rate_reference" readonly disabled
                        class="form-control disabled-element"
                        placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}">

                </div>
            </div>

            {{-- Contrato de Hospedaje --}}
            <div class="col-3">
                <div class="input-group">

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

                    <input type="text" id="special_lodging_contract_reference" readonly disabled
                        class="form-control disabled-element"
                        placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}">

                </div>
            </div>

        </div>

        {{-- Payments --}}
            {{-- Title --}}
            <div class="mt-4 mb-3 row justify-content-start align-items-center">
                <div class="text-center col-2">
                    <h5 class="pl-2 sanserif harsi-color">
                        {{ __('entity_forms')['reservation']['subsections']['payments'] }}
                    </h5>
                </div>
            </div>

            {{-- Formulario de Pagos --}}
            <div class="mb-4 row justify-content-center align-items-center">
                <div class="col-11">

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

                                {{-- Hidden Values --}}
                                <input type="hidden" id="special_lodging_payment_id" name="special_lodging_payment_id">
                                <input type="hidden" id="special_lodging_payment_reservation" name="special_lodging_payment_reservation">
                                <input type="hidden" id="special_lodging_payment_receptionist" name="special_lodging_payment_receptionist" value="{{ auth()->user()->name }}">

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

                                    <input type="date" id="special_lodging_payment_date" name="special_lodging_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_lodging_payment_concept" class="form-label external-label">
                                        {{ __('entity_fields')['common']['concept'] }}
                                    </label>

                                    <input type="text" id="special_lodging_payment_concept" name="special_lodging_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_lodging_payment_method" class="form-label external-label">
                                        {{ __('entity_fields')['common']['payment_method'] }}
                                    </label>

                                    <select name="special_lodging_payment_method" id="special_lodging_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_lodging_payment_amount" class="form-label external-label">
                                        {{ __('entity_fields')['charges_and_payments']['amount'] }}
                                    </label>

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

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

                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Resumen de Pagos --}}
            <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_lodging_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="25%" 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_lodging_resume" class="text-center"></tbody>
                        </table>
                    </div>
                </div>

                {{-- Statistics --}}
                <div class="py-3 pl-5 col-3">
                    {{-- Pagos Realizados --}}
                        <label for="special_lodging_paid" class="form-label label-for-count">
                            {{ __('entity_forms')['reservation']['balance_paid'] }}
                        </label>

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

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

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

            </div>

    </div>
</div>