{{-- 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-2 w-50 nav-item active">
            <a class="p-1 nav-link sanserif nav-rounded active" href="#gr_consumption_charges" data-toggle="tab">
                {{ __('entity_forms')['reservation']['subsections']['consumption'] }}
            </a>
        </li>
        <li class="px-2 w-50">
            <a class="p-1 nav-link sanserif nav-rounded" href="#gr_consumption_payments" data-toggle="tab">
                {{ __('entity_forms')['reservation']['subsections']['payments'] }}
            </a>
        </li>
    </ul>

    {{-- Consumption Payments --}}
    <div class="px-4 pt-4_3 tab-content">

        {{-- Consumption --}}
        <div class="tab-pane active" id="gr_consumption_charges">

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

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

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

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

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

                        <input type="text" id="gr_consumption_charge_concept" name="gr_consumption_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="gr_consumption_charge_amount" class="external-label fw-normal">
                            {{ __('entity_fields')['charges_and_payments']['amount'] }}
                        </label>

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

                    {{-- Submit --}}
                    <button type="submit" id="gr_add_consumption_charge" class="py-1 mt-4 w-15 btn btn-harsi text-uppercase">
                        {{ __('common_actions')['register'] }}
                    </button>
                </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="gr_consumption_charges_summary" class="text-center">
                                <tr><td colspan="4">{{ __('data_tables')['sEmptyTable'] }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Statistics --}}
                <div class="pt-1 pl-5 w-25">
                    @include('shared.utils.reservation-form.basic-group.components.grouped_consumption_context')
                </div>

            </div>

        </div>

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

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

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

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

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

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

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

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

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

                    {{-- Submit --}}
                    <button type="submit" id="gr_add_consumption_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-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="gr_consumption_payments_summary" class="text-center">
                                <tr><td colspan="5">{{ __('data_tables')['sEmptyTable'] }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Statistics --}}
                <div class="pt-1 pl-5 w-25">
                    @include('shared.utils.reservation-form.basic-group.components.grouped_consumption_context')
                </div>

            </div>

        </div>

    </div>

</div>