{{-- 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>

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

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

                {{-- Suggested Rate --}}
                <div class="input-group">
                    <div class="input-group-prepend">
                        <label for="tarifaSugerida" class="disabled-fields input-group-text">
                            {{ __('entity_forms')['reservation']['suggested_rate'] }}
                        </label>
                    </div>

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

                {{-- Tarifa --}}
                <div class="input-group">
                    <div class="input-group-prepend">
                        <label for="tarifa" class="disabled-fields input-group-text">
                            {{ __('entity_forms')['reservation']['rate'] }}
                        </label>
                    </div>

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

                {{-- Tarifa Total --}}
                <div class="input-group">
                    <div class="input-group-prepend">
                        <label for="tarifaTotal" class="disabled-fields input-group-text">
                            {{ __('entity_forms')['reservation']['total_rate'] }}
                        </label>
                    </div>

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

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

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

            </div>

            {{-- Complementary Data --}}
            <div class="d-flex g-1 justify-content-between align-items-center">

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

                    <input type="text" id="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-4 w-90">

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

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

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

                    {{-- Receptionist --}}
                    <input type="hidden" id="lodging_payment_receptionist" name="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="lodging_payment_date" class="external-label fw-normal">
                            {{ __('entity_fields')['common']['date'] }}
                        </label>

                        <input type="datetime-local" id="lodging_payment_date" name="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="lodging_payment_concept" class="external-label fw-normal">
                            {{ __('entity_fields')['common']['concept'] }}
                        </label>

                        <input type="text" id="lodging_payment_concept" name="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="lodging_payment_method" class="external-label fw-normal">
                            {{ __('entity_fields')['common']['payment_method'] }}
                        </label>

                        <select name="lodging_payment_method" id="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="lodging_payment_amount" class="external-label fw-normal">
                            {{ __('entity_fields')['charges_and_payments']['amount'] }}
                        </label>

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

                    {{-- Submit --}}
                    <input type="submit" name="add_lodgingP" id="add_lodgingP" class="py-1 mt-4 btn btn-harsi text-uppercase"
                        value="{{ __('entity_forms')['reservation']['register_payment'] }}"/>
                </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="lodgingResume" class="text-center"></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="lodging_payment" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance_paid'] }}
                        </label>

                        <input type="text" id="lodging_payment" readonly
                            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="lodging_left" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance_outstanding'] }}
                        </label>

                        <input type="text" id="lodging_left" readonly
                            class="pending-balance-input form-control input-for-count">
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>