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

    {{-- Tabs --}}
    <ul class="nav nav-tabs d-flex justify-content-between align-items-center">
        <li class="px-3 w-50 nav-item active">
            <a class="p-1 nav-link sanserif nav-rounded active" href="#extra_charges" data-toggle="tab">
                {{ __('entity_forms')['reservation']['subsections']['charges'] }}
            </a>
        </li>
        <li class="px-3 w-50">
            <a class="p-1 nav-link sanserif nav-rounded" href="#extra_payments" data-toggle="tab">
                {{ __('entity_forms')['reservation']['subsections']['payments'] }}
            </a>
        </li>
    </ul>

    {{-- Lodging Payments --}}
    <div class="px-5 pt-5 tab-content">

        {{-- Charges --}}
        <div class="tab-pane active" id="extra_charges">

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

                {{-- Hidden Inputs --}}
                <div class="d-none">
                    {{-- Consumption Charge --}}
                    <input type="hidden" id="extra_charge_id" name="extra_charge_id">

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

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

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

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

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

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

                    {{-- Submit --}}
                    <input type="submit" name="add_extraC" id="add_extraC" class="px-4 py-1 mt-4 btn btn-harsi text-uppercase"
                        value="{{ __('common_actions')['register'] }}"/>
                </div>

            </form>

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

                {{-- Table --}}
                <div class="w-75 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="25%" scope="col">{{ __('entity_fields')['common']['date'] }}</th>
                                    <th class="text-center" width="32.5%" 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="17.5%" scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                                </tr>
                            </thead>
                            <tbody id="ExtraChargesResume" class="text-center"></tbody>
                        </table>
                    </div>
                </div>

                {{-- Statistics --}}
                <div class="pt-1 pl-5 w-25">

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

                        <select name="extraContract" id="extraContract" class="form-control">
                            <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>

                    {{-- Total Amount --}}
                    <div class="d-flex flex-column align-items-start w-90">
                        <label for="extra_final" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance'] }}
                        </label>

                        <input type="text" id="extra_final" readonly
                            class="mb-2 total-balance-input form-control input-for-count">
                    </div>

                    {{-- Amount Paid --}}
                    <div class="d-flex flex-column align-items-start w-90">
                        <label for="extra_payment" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance_paid'] }}
                        </label>

                        <input type="text" id="extra_payment" readonly
                            class="mb-2 paid-balance-input form-control input-for-count">
                    </div>

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

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

            </div>

        </div>

        {{-- Payments --}}
        <div class="tab-pane" id="extra_payments">

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

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

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

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

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

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

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

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

                    {{-- Submit --}}
                    <input type="submit" name="add_extraP" id="add_extraP" class="px-4 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-75 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="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="ExtraPaymentsResume" class="text-center"></tbody>
                        </table>
                    </div>
                </div>

                {{-- Statistics --}}
                <div class="pt-1 pl-5 w-25">

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

                        <select name="extraContract_2" id="extraContract_2" class="form-control">
                            <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>

                    {{-- Total Amount --}}
                    <div class="d-flex flex-column align-items-start w-90">
                        <label for="extra_final_2" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance'] }}
                        </label>

                        <input type="text" id="extra_final_2" readonly
                            class="mb-2 total-balance-input form-control input-for-count">
                    </div>

                    {{-- Amount Paid --}}
                    <div class="d-flex flex-column align-items-start w-90">
                        <label for="extra_payment_2" class="form-label label-for-count statistical-data">
                            {{ __('entity_forms')['reservation']['balance_paid'] }}
                        </label>

                        <input type="text" id="extra_payment_2" readonly
                            class="mb-2 paid-balance-input form-control input-for-count">
                    </div>

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

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

            </div>

        </div>

    </div>

</div>