{{-- Modal --}}
<div id="reservation_ballot" role="dialog" tabindex="-1"
    class="modal fade"
>
    <div class="modal-dialog modal-xl" >
        <div class="p-0 modal-content">
            <div class="modal-body special-modal-body">

                {{-- Header --}}
                <section class="modal-header d-flex align-items-center justify-content-between">
                    {{-- Title --}}
                    <div class="d-flex align-items-center g-2 justify-content-start w-85">
                        {{-- Title --}}
                        <h3 class="mb-0">
                            {{ __('entities')['hotel']['reservation'] }} #<span id="ballot-reservation-id"></span>
                        </h3>

                        {{-- Edit Reservation --}}
                        <button type="button" id="btn-edit-reservation"
                            title="{{ __('common_actions')['edit'] }} {{ __('entities')['hotel']['reservation'] }}"
                            class="btn btn-harsi d-flex align-items-center"
                        >
                            <img src="{{ asset('icons/edit_white.svg') }}" class="img-ballot-button">
                            {{ __('common_actions')['edit'] }}
                        </button>

                        {{-- Print Ticket --}}
                        <a id="btn-print-ticket"
                            title="{{ __('common_actions')['print'] }} {{ __('neutral_words')['ticket'] }}"
                            class="btn btn-secondary d-flex align-items-center"
                        >
                            <img src="{{ asset('icons/ticket_white.svg') }}" class="img-ballot-button">
                            {{ __('neutral_words')['ticket'] }}
                        </a>
                    </div>

                    {{-- Close Modal --}}
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            <img src="{{ asset('icons/close_modal.svg') }}" alt=""/>
                        </span>
                    </button>
                </section>

                {{-- Body --}}
                <div class="py-3 modal-body">

                    {{-- Basic Reservation Data --}}
                    <div class="mb-4 row ballot-row">

                        {{--Registration Date --}}
                        <div class="pr-0 mb-3 col-sm-6 col-lg-2">
                            <div class="input-combo" title="{{ __('entity_fields')['reservation']['registration_date'] }}">
                                <div class="input-badge">
                                    <img src="{{ asset('icons/calendar.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-reservation-date"
                                    class="input-field">
                            </div>
                        </div>

                        {{-- Guest --}}
                        <div class="pl-3 mb-3 col-sm-6 col-lg-7">
                            <div class="input-combo input-badge-combo" title="{{ __('entity_fields')['reservation']['guest'] }}">
                                <span class="client-segment-input-badge text-uppercase" id="ballot-client-segment"></span>

                                <div class="input-badge">
                                    <img src="{{ asset('icons/traveling_blue.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-client-reference"
                                    class="input-field">
                            </div>
                        </div>

                        {{-- Reservation Status --}}
                        <div class="mb-3 col-sm-6 col-lg-3">
                            <div class="input-combo" title="{{ __('ballots')['normal']['status'] }}">
                                <div class="input-badge">
                                    <img src="{{ asset('icons/status_progress_cycle_blue.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-reservation-status"
                                    class="input-field">
                            </div>
                        </div>

                        {{-- Guest Status --}}
                        <div class="col-sm-6 col-lg-3">
                            <div class="input-combo" title="{{ __('ballots')['normal']['guest_status'] }}">
                                <div class="input-badge">
                                    <img src="{{ asset('icons/status_progress_cycle_blue.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-guest-status"
                                    class="input-field">
                            </div>
                        </div>

                        {{-- Source --}}
                        <div class="col-sm-6 col-lg-3">
                            <div class="input-combo" title="{{ __('entity_fields')['reservation']['source'] }}">
                                <div class="input-badge">
                                    <img src="{{ asset('icons/source.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-reservation-source"
                                    class="input-field">
                            </div>
                        </div>

                        {{-- Agency --}}
                        <div class="col-sm-6 col-lg-3">
                            <div class="input-combo" title="{{ __('ballots')['normal']['agency'] }}">
                                <div class="input-badge">
                                    <img src="{{ asset('icons/agency_blue.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-agency"
                                    class="input-field">
                            </div>
                        </div>

                        {{-- Lodging Contract --}}
                        <div class="col-sm-4 col-lg-3">
                            <div class="input-combo" title="{{ __('ballots')['normal']['lodging_contract'] }}">
                                <div class="input-badge">
                                    <img src="{{ asset('icons/contract_paper_blue.svg') }}">
                                </div>

                                <input type="text" readonly id="ballot-lodging-contract"
                                    class="input-field">
                            </div>
                        </div>

                    </div>

                    {{-- Advanced Reservation Data --}}
                    <div class="mt-2 row">

                        {{-- Details & Rates --}}
                        <div class="col-lg-6 col-sm-12">

                            {{-- Details --}}
                            <div class="pt-2">

                                {{-- Title --}}
                                <h4 class="mb-3">{{ __('ballots')['normal']['section_1'] }}</h4>

                                {{-- Periods --}}
                                <div class="mb-3 row ballot-row">

                                    {{-- Entry Date --}}
                                    <div class="col-6">
                                        <div class="input-combo" title="{{ __('entity_fields')['reservation']['date_entry_large'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/checkIn_blue.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-checkin-date"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Departure Date --}}
                                    <div class="col-6">
                                        <div class="input-combo" title="{{ __('entity_fields')['reservation']['date_departure_large'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/checkIn_inverso.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-checkout-date"
                                                class="input-field">
                                        </div>
                                    </div>

                                </div>

                                {{-- Pricing Bases --}}
                                <div class="mb-3 row ballot-row-semi-spaced">

                                    {{-- Nights--}}
                                    <div class="col" id="ballot-nights-block">
                                        <div class="input-combo" title="{{ __('entity_fields')['reservation']['number_nights_large'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/moon.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-number-nights"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Hours--}}
                                    @if ($has_control_hours)
                                        <div class="col">
                                            <div class="input-combo" title="{{ __('entity_fields')['reservation']['number_hours_large'] }}">
                                                <div class="input-badge">
                                                    <img src="{{ asset('icons/clock_blue.svg') }}">
                                                </div>
                                                <input type="text" readonly id="ballot-number-hours"
                                                    class="input-field">
                                            </div>
                                        </div>
                                    @endif

                                    {{-- Adults --}}
                                    <div class="col">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['number_adults'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/single_person_blue.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-number-adults"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Children --}}
                                    <div class="col">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['number_children'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/plushes_blue.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-number-children"
                                                class="input-field">
                                        </div>
                                    </div>

                                </div>

                                {{-- Room Selection --}}
                                <div class="row ballot-row-semi-spaced">

                                    {{-- Room Type --}}
                                    <div class="col-sm-6 col-lg-6">
                                        <div class="input-combo" title="{{ __('entity_fields')['common']['room_type'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/double_bed_blue.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-room-type"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Room Number --}}
                                    <div class="col-sm-6 col-lg-6">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['room'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/single_bed_blue.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-room-number"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Regimen --}}
                                    <div class="mt-3 col-sm-6 col-lg-6">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['regimen'] }}">
                                            <div class="input-badge">
                                                <img src="{{ asset('icons/cutlery_blue.svg') }}">
                                            </div>
                                            <input type="text" readonly id="ballot-regimen"
                                                class="input-field">
                                        </div>
                                    </div>
                                </div>

                            </div>

                            {{-- Rates --}}
                            <div class="pt-2">

                                {{-- Title --}}
                                <h4 class="my-3">{{ __('ballots')['normal']['section_2'] }}</h4>

                                {{-- Content --}}
                                <div class="mb-3 row ballot-row">

                                    {{-- Suggested Rate --}}
                                    <div class="col-sm-4 col-lg-6">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['suggested_rate'] }}">
                                            <label for="ballot-suggested-rate" class="input-text-badge">
                                                {{ __('ballots')['normal']['suggested_rate'] }}
                                            </label>
                                            <input type="text" readonly id="ballot-suggested-rate"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Assigned Rate --}}
                                    <div class="col-sm-4 col-lg-6">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['assigned_rate'] }}">
                                            <label for="ballot-selected-rate" class="input-text-badge">
                                                {{ __('ballots')['normal']['rate'] }}
                                            </label>
                                            <input type="text" readonly id="ballot-selected-rate"
                                                class="input-field">
                                        </div>
                                    </div>

                                    {{-- Lodging Rate --}}
                                    <div class="mt-3 col-sm-4 col-lg-7">
                                        <div class="input-combo" title="{{ __('ballots')['normal']['final_lodging_rate'] }}">
                                            <label for="ballot-total-price" class="input-text-badge">
                                                {{ __('ballots')['normal']['total_rate'] }}
                                            </label>
                                            <input type="text" readonly id="ballot-total-price"
                                                class="input-field">
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        {{-- Balances & Notes --}}
                        <div class="pl-5 col-lg-6 col-sm-12">
                            <div class="pt-2">

                                {{-- Title --}}
                                <h4>{{ __('ballots')['normal']['section_3'] }}</h4>

                                {{-- Content --}}
                                <div class="row ballot-row">

                                    {{-- Lodging - Extra - Total Balances --}}
                                    <div class="col-sm-12 col-lg-6">

                                        {{-- Lodging Balances --}}
                                        <div class="mb-2">

                                            {{-- Title --}}
                                            <div class="input-combo">
                                                <label for="ballot-total-per-service" class="input-text-badge">
                                                    {{ __('ballots')['normal']['lodging'] }}
                                                </label>
                                            </div>

                                            {{-- Balances --}}
                                            <div class="mt-2">
                                                <ul class="modal-balances-text">
                                                    <li>
                                                        {{ __('ballots')['normal']['total_rate'] }}: <span id="ballot-lodging-balances-total"></span>
                                                    </li>
                                                    <li>
                                                        {{ __('ballots')['normal']['payments_made'] }}: <span id="ballot-lodging-balances-paid"></span>
                                                    </li>
                                                    <li class="outstanding-balance">
                                                        {{ __('ballots')['normal']['outstanding_balance'] }}: <span id="ballot-lodging-balances-outstanding"></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        {{-- Extra Balances --}}
                                        <div class="mb-4">

                                            {{-- Title --}}
                                            <div class="input-combo">
                                                <label for="ballot-total-per-service" class="input-text-badge">
                                                    {{ __('ballots')['normal']['extras'] }}
                                                </label>
                                            </div>

                                            {{-- Balances --}}
                                            <div class="mt-2">
                                                <ul class="modal-balances-text">
                                                    <li>
                                                        {{ __('ballots')['normal']['total_rate'] }}: <span id="ballot-extra-balances-total"></span>
                                                    </li>
                                                    <li>
                                                        {{ __('ballots')['normal']['payments_made'] }}: <span id="ballot-extra-balances-paid"></span>
                                                    </li>
                                                    <li class="outstanding-balance">
                                                        {{ __('ballots')['normal']['outstanding_balance'] }}: <span id="ballot-extra-balances-outstanding"></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        {{-- Total Balances --}}
                                        <div class="pr-0">
                                            <div class="mb-2 input-combo">
                                                <label for="ballot-total-per-service" class="input-text-badge fw-semi-bold">
                                                    {{ __('ballots')['normal']['total'] }}
                                                </label>
                                                <input type="text" readonly id="ballot-total-per-service"
                                                    class="input-field fw-semi-bold disabled-fields">
                                            </div>

                                            <div class="input-combo">
                                                <label for="ballot-total-service-outstanding" class="input-text-badge fw-semi-bold">
                                                    {{ __('ballots')['normal']['total_outstanding'] }}
                                                </label>
                                                <input type="text" readonly id="ballot-total-service-outstanding"
                                                    class="input-field fw-semi-bold disabled-fields">
                                            </div>
                                        </div>

                                    </div>

                                    {{-- Consumption Balances & Notes --}}
                                    <div class="col-sm-12 col-lg-6">

                                        {{-- Consumption Balances --}}
                                        <div class="mb-2">

                                            {{-- Title --}}
                                            <div class="input-combo">
                                                <label for="ballot-total-per-service" class="input-text-badge">
                                                    {{ __('ballots')['normal']['restaurant'] }}
                                                </label>
                                            </div>

                                            {{-- Balances --}}
                                            <div class="mt-2">
                                                <ul class="modal-balances-text">
                                                    <li>
                                                        {{ __('ballots')['normal']['total_rate'] }}: <span id="ballot-consumption-balances-total"></span>
                                                    </li>
                                                    <li>
                                                        {{ __('ballots')['normal']['payments_made'] }}: <span id="ballot-consumption-balances-paid"></span>
                                                    </li>
                                                    <li class="outstanding-balance">
                                                        {{ __('ballots')['normal']['outstanding_balance'] }}: <span id="ballot-consumption-balances-outstanding"></span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        {{-- Notes & Reminders --}}
                                        <div>

                                            {{-- Title --}}
                                            <div class="input-combo">
                                                <label for="ballot-notes" class="input-text-badge">
                                                    {{ __('entity_fields')['reservation']['notes'] }}
                                                </label>
                                            </div>

                                            {{-- Inputs --}}
                                            <div class="pt-2">

                                                {{-- Notes --}}
                                                <textarea readonly disabled rows="3" cols="50"
                                                    id="ballot-notes" class="px-2 mb-3 notes-input white-fields"
                                                ></textarea>

                                                {{-- Requires Invoice --}}
                                                @if (
                                                    in_array(Auth::user()->role, ['administrador', 'gerente', 'recepcionista'])
                                                    && \App\Helpers\Environment\SystemModulesHelper::isEstablishmentTaxDataComplete()
                                                    && \App\Helpers\Environment\FacturapiHelper::isEnabled()
                                                )
                                                    <div class="d-flex justify-content-start align-items-start">
                                                        <label for="ballot-requiere-invoice" class="switch switch_label small_switch">
                                                            <input type="checkbox" readonly disabled id="ballot-requiere-invoice">
                                                            <span class="specific_slider slider round"></span>
                                                        </label>

                                                        <label for="ballot-requiere-invoice" class="pl-1 form-check-label label-for-reminders">
                                                            {{ __('entity_forms')['reservation']['requiere_invoice'] }}
                                                        </label>
                                                    </div>
                                                @endif

                                            </div>

                                        </div>

                                    </div>
                                </div>


                            </div>
                        </div>

                    </div>

                </div>

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