{{-- Pestaña: Lodging--}}
<div class="px-3 pt-4 pb-3">

    {{-- Rate Summary --}}
    <div class="mb-3 d-flex">

        {{-- Title --}}
        <div class="w-10">
            <h4 class="text-right alinear-titulo">
                {{ __('entity_forms')['reservation']['subsections']['rate'] }}
            </h4>
        </div>

        {{-- Summary Fields --}}
        <div class="pl-2 w-90">

            {{-- Lodging Context Summary --}}
            <div class="d-flex g-1 justify-content-between align-items-center input-block-spacing">

                {{-- Tarifa Total --}}
                <div class="w-30 input-group">
                    <div class="input-group-prepend">
                        <label for="gr_global_total_reference" class="disabled-fields input-group-text">
                            {{ __('entity_fields')['reservation']['general_rate'] }}
                        </label>
                    </div>

                    <input type="text" id="gr_global_total_reference" required readonly
                        value="0.00" class="form-control disabled-fields">
                </div>

                {{-- Contract --}}
                <div class="w-25 input-group">
                    <div class="input-group-prepend">
                        <label for="gr_lodging_contract_reference" class="disabled-fields input-group-text">
                            {{ __('entity_fields')['reservation']['contract'] }}
                        </label>
                    </div>

                    <input type="text" id="gr_lodging_contract_reference" required readonly
                        placeholder="{{ __('entity_fields')['reservation']['contract'] }}"
                        class="form-control disabled-fields">
                </div>

                {{-- Invoice UUID --}}
                <div class="w-45 input-group" id="gr_invoice_uuid_reference_block">
                    <div class="input-group-prepend">
                        <label for="gr_reference_invoice_uuid" class="input-group-text white-fields">
                            {{ __('entity_fields')['common']['fiscal_folio'] }}
                        </label>
                    </div>

                    <input type="text" id="gr_reference_invoice_uuid" max="36" min="36"
                        placeholder="{{ __('entities')['invoicing']['invoice'] }} (UUID)"
                        class="form-control white-fields">

                    {{-- Support Reference --}}
                    <button type="button" class="px-2 pt-2 ml-2 info-icon btn rounded-circle"
                        data-container="body"
                        data-toggle="popover"
                        data-trigger="focus"
                        data-placement="right"
                        data-content="{{ __('common_responses_and_messages')['not_automatic_field'] }}">
                        <i class="fas fa-info-circle"></i>
                    </button>
                </div>

            </div>

        </div>

    </div>

    {{-- Lodging Payments --}}
    <div class="mb-3 d-flex">

        {{-- Title --}}
        <div class="w-10">
            <h4 class="text-right alinear-titulo">
                {{ __('entity_forms')['reservation']['subsections']['payments'] }}
            </h4>
        </div>

        {{-- Content --}}
        <div class="pt-3_5 w-90">

            {{-- Form --}}
            <form method="post" id="gr_lodging_payment_form" enctype="multipart/form-data">
                @csrf {{-- CSRF Token --}}

                {{-- Hidden Inputs --}}
                <div class="d-none">
                    {{-- Lodging Payment --}}
                    <input type="hidden" id="gr_lodging_payment_id" name="gr_lodging_payment_id">

                    {{-- Reservation ID  --}}
                    <input type="hidden" id="gr_lodging_payment_reservation" name="gr_lodging_payment_reservation">

                    {{-- Receptionist --}}
                    <input type="hidden" id="gr_lodging_payment_receptionist" name="gr_lodging_payment_receptionist"
                        value="{{ auth()->user()->name }}">
                </div>

                {{-- Visible Inputs --}}
                <div class="px-1 mt-1 d-flex g-1 justify-content-start align-items-center input-block-spacing">

                    {{-- Date --}}
                    <div class="d-flex flex-column align-items-start w-25">
                        <label for="gr_lodging_payment_date" class="external-label fw-normal">
                            {{ __('entity_fields')['common']['date'] }}
                        </label>

                        <input type="datetime-local" id="gr_lodging_payment_date" name="gr_lodging_payment_date"
                            max="2100-12-31" required
                            class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}">
                    </div>

                    {{-- Concept --}}
                    <div class="d-flex flex-column align-items-start">
                        <label for="gr_lodging_payment_concept" class="external-label fw-normal">
                            {{ __('entity_fields')['common']['concept'] }}
                        </label>

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

                    {{-- Payment Method --}}
                    <div class="d-flex flex-column align-items-start w-25">
                        <label for="gr_lodging_payment_method" class="external-label fw-normal">
                            {{ __('entity_fields')['common']['payment_method'] }}
                        </label>

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

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

                    {{-- Amount --}}
                    <div class="d-flex flex-column align-items-start">
                        <label for="gr_lodging_payment_amount" class="external-label fw-normal">
                            {{ __('entity_fields')['charges_and_payments']['amount'] }}
                        </label>

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

                    {{-- Submit --}}
                    <button type="submit" id="gr_add_lodging_payment" class="w-20 py-1 mt-4 btn btn-harsi text-uppercase">
                        {{ __('entity_forms')['reservation']['register_payment'] }}
                    </button>
                </div>

            </form>

            {{-- Payment Summary --}}
            <div class="pt-2 d-flex justify-content-center align-items-start">

                {{-- Table --}}
                <div class="w-80 card bg-light d-flex justify-content-center align-items-start">
                    <div class="table p-3 mb-0 balance-table-limits">
                        <table class="table mb-0 table-striped table-hover table-sm">
                            <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="gr_lodging_summary" class="text-center">
                                <tr><td colspan="5">{{ __('data_tables')['sEmptyTable'] }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Statistics --}}
                <div class="w-20 pt-1 pl-5">
                    {{-- Pagos Realizados --}}
                    <div class="d-flex flex-column align-items-start w-100">
                        <label for="gr_lodging_paid" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance_paid'] }}
                        </label>

                        <input type="text" data-sync="gr_lodging_paid" readonly value="0.00"
                            class="mb-2 paid-balance-input form-control input-for-count">
                    </div>

                    {{-- Saldo Pendiente --}}
                    <div class="d-flex flex-column align-items-start w-100">
                        <label for="gr_lodging_remaining" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance_outstanding'] }}
                        </label>

                        <input type="text" data-sync="gr_lodging_remaining" readonly value="0.00"
                            class="pending-balance-input form-control input-for-count">
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>