@extends('layouts.reports')

@section('title')
Hotel | {{ __('reports.hotel.statisticalReports.reservas.reservation_history') }}
@endsection

@section('content')

    {{-- Special Styles --}}
    <link href="{{ asset('css/components/forms/custom-forms.css') }}" rel="stylesheet">
    <link href="{{ asset('css/components/custom/specialElements.css') }}" rel="stylesheet">

    {{-- Content --}}
    <div class="mt-4 container-fluid">

        {{-- Header --}}
        <div class="row cardtitle oculto-impresion">

            {{-- Buttons --}}
            <div class="boton">

                {{-- Go Back --}}
                <a type="button" style=" background-color: #fff !important;" class="oculto-impresion btn "
                    href="{{ route('hotel.reports') }}">
                    <img src="{{ asset('icons/arrow_inverse.svg') }}">
                </a>
                &nbsp;

                {{-- Print --}}
                <button style=" background-color: #0D6889 !important;" class="oculto-impresion btn" onclick="imprimir()">
                    <img src="{{ asset('icons/print.svg') }}">
                </button>
                &nbsp;

                {{-- Download as CSV --}}
                <button
                    style="color: #f5f5f5 !important;"
                    onclick="print_csv()"
                    class="btn btn-success oculto-impresion"
                    title="{{ __('reports')['hotel']['common']['download'] }}"
                >
                    <img src="{{ asset('icons/csv_white.svg') }}">
                </button>

            </div>

            {{-- Title --}}
            <h5 class="mr-5 oculto-impresion col-lg-3 col-md-3">
                {{ __('reports.hotel.statisticalReports.reservas.reservation_history') }}
            </h5>

            {{-- Filter Form --}}
                {{-- From --}}
                <p> {{ __('reports')['hotel']['common']['from'] }} </p>&nbsp;
                <input type="date" id="txtMin" class="mr-3 col-lg-2 col-md-2" value="<?php echo date("Y-m-d");?>">

                {{-- To --}}
                <p> {{ __('reports')['hotel']['common']['to'] }} </p> &nbsp;
                <input type="date" id="txtMax" class="mr-3 col-lg-2 col-md-2" value="<?php echo date("Y-m-d");?>">

                {{-- Submit --}}
                <div align="right">
                    <button id="btnGo" align="center" type="button" class="mt-1 btn"
                        style=" background-color: #0D6889 !important">
                        {{ __('common_actions')['filter'] }}
                    </button>
                </div>
        </div>

        {{-- Title for Print --}}
        <h2 class="text-center col-lg-12" id="uno">
            {{ __('reports.hotel.statisticalReports.reservas.reservation_history') }}
        </h2>
        <h3 class="mt-3 text-center col-lg-12" id="uno"><span id="period_of_histories"></span></h3>

        {{-- Table --}}
        <div class="mb-5 row justify-content-center align-items-center g-2">
            <div class="table-responsive col-9">

                <table class="table text-center cardtable" id="example">
                    <br>
                    <thead>
                        <tr class="cardtabletr">
                            <th class="text-center" scope="col">{{ __('entity_fields')['common']['date'] }}</th>
                            <th class="text-center" scope="col">{{ __('entity_fields')['reservation_history']['time'] }}</th>
                            <th class="text-center" scope="col">{{ __('entity_fields')['reservation_history']['reservation'] }}</th>
                            <th class="text-center" scope="col">{{ __('entity_fields')['reservation_history']['guest'] }}</th>
                            <th class="text-center" scope="col">{{ __('entity_fields')['reservation_history']['editor'] }}</th>
                            <th class="text-center" scope="col">{{ __('entity_fields')['common']['actions'] }}</th>
                        </tr>
                    </thead>
                </table>
                <br>
            </div>
        </div>


        {{-- Ballot Modal --}}
        <div id="historyData" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body special-modal-body">

                            {{-- Header --}}
                            <div class="modal-header">

                                {{-- Title --}}
                                <h3 class="pt-1 ml-2 modal-title" id="modal-title"></h3>

                                {{-- Close Button --}}
                                <button type="button" title="cerrar" class="close" data-dismiss="modal" aria-label="Close">
                                    <img src="{{ asset('icons/close_modal.svg') }}">
                                </button>

                            </div>

                            {{-- Basic Reservation Details --}}
                            <div class="card-body">
                                <div class="row">

                                    {{-- Action - Responsible --}}
                                    <div class="col-sm-6 col-lg-5" style="margin-top:10px">
                                        <div class="input-group" title="{{ __('ballots')['history']['action_responsible'] }}">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/calendar.svg') }}">
                                                </i>
                                            </div>
                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" id="action" class="form-control rounded-input" step="1">
                                        </div>
                                    </div>

                                    {{-- Guest --}}
                                    <div class="col-sm-6 col-lg-4" style="margin-top:10px">
                                        <div title="{{ __('entity_fields')['reservation_history']['guest'] }}" class="input-group">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/traveling_blue.svg') }}">
                                                </i>
                                            </div>

                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" class="form-control rounded-input" id="client">
                                        </div>
                                    </div>

                                    {{-- Progress Status --}}
                                    <div class="col-sm-6 col-lg-3" style="margin-top:10px">
                                        <div class="input-group" title="{{ __('ballots')['history']['progress_status'] }}">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/status_progress_cycle_blue.svg') }}">
                                                </i>
                                            </div>

                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" class="form-control rounded-input" id="guest_status">
                                        </div>
                                    </div>

                                    {{-- Reservation Status --}}
                                    <div class="col-sm-6 col-lg-3" style="margin-top:10px">
                                        <div class="input-group" title="{{ __('ballots')['history']['reservation_status'] }}">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/status_progress_cycle_blue.svg') }}">
                                                </i>
                                            </div>

                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" class="form-control rounded-input" id="status">
                                        </div>
                                    </div>

                                    {{-- Reservation Source --}}
                                    <div class="col-sm-6 col-lg-3" style="margin-top:10px">
                                        <div class="input-group" title="{{ __('entity_fields')['reservation']['source'] }}">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/source.svg') }}">
                                                </i>
                                            </div>
                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" class="form-control rounded-input" id="source" step="1">
                                        </div>
                                    </div>

                                    {{-- Agency --}}
                                    <div class="col-sm-6 col-lg-3" style="margin-top:10px">
                                        <div class="input-group" title="{{ __('ballots')['history']['agency'] }}">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/agency_blue.svg') }}">
                                                </i>
                                            </div>
                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" class="form-control rounded-input" id="agency" step="1">
                                        </div>
                                    </div>

                                    {{-- Lodging Contract --}}
                                    <div class="col-sm-4 col-lg-3" style="margin-top:10px">
                                        <div class="input-group" title="{{ __('ballots')['history']['lodging_contract'] }}">
                                            <div class="input-group-prepend">
                                                <i>
                                                    <img src="{{ asset('icons/contract_paper_blue.svg') }}">
                                                </i>

                                            </div>
                                            <input readonly="readonly" style="background-color:#f9f9f9;cursor: no-drop;"
                                                type="text" class="form-control rounded-input" id="lodg_contract">
                                        </div>
                                    </div>

                                </div>
                            </div>

                            {{-- Advanced Reservation Details --}}
                            <div class="row">

                                {{-- Reservation Data --}}
                                <div class="col-lg-6">

                                    {{-- Details --}}
                                    <section>
                                        <div class="card-body">

                                            {{-- Title --}}
                                            <h4>{{ __('ballots')['history']['section_1'] }}</h3>

                                            {{-- Content --}}
                                            <div class="row">
                                                    @php
                                                        $has_control_hours = \App\Helpers\Environment\SystemFeaturesHelper::getFeatureStatus("control_hours");
                                                        $date_type = $has_control_hours
                                                            ? "datetime-local"
                                                            : "date";
                                                    @endphp

                                                {{-- Date Entry --}}
                                                <div class="col-sm-6 col-md-5 col-lg-5" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('entity_fields')['reservation']['date_entry'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img
                                                                    src="{{ asset('icons/checkIn_blue.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly" type="{{ $date_type }}"
                                                            style="background-color:#f9f9f9;cursor: no-drop;"
                                                            class="form-control rounded-input" id="checkin">
                                                    </div>
                                                </div>

                                                {{-- Date Departure --}}
                                                <div class="col-sm-6 col-md-5 col-lg-5" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('entity_fields')['reservation']['date_departure'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img
                                                                    src="{{ asset('icons/checkIn_inverso.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly" type="{{ $date_type }}"
                                                            style="background-color:#f9f9f9;cursor: no-drop;"
                                                            class="form-control rounded-input" id="checkout">
                                                    </div>
                                                </div>

                                                {{-- Nights --}}
                                                <div class="col" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('entity_fields')['reservation']['number_nights'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img src="{{ asset('icons/moon.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="nights">
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="row">
                                                {{-- Adults --}}
                                                <div class="col-sm-4 col-lg-3" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('entity_fields')['reservation']['number_adults'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img src="{{ asset('icons/single_person_blue.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="number"
                                                            class="form-control rounded-input" id="adults">
                                                    </div>
                                                </div>

                                                {{-- Children --}}
                                                <div class="col-sm-4 col-lg-3" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('entity_fields')['reservation']['number_children'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img src="{{ asset('icons/plushes_blue.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="number"
                                                            class="form-control rounded-input" id="children">
                                                    </div>
                                                </div>

                                                {{-- Regimen --}}
                                                <div class="col-sm-4 col-lg-6" style="margin-top:10px">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend" title="{{ __('ballots')['history']['regimen'] }}">
                                                            <i>
                                                                <img src="{{ asset('icons/cutlery_blue.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text" id="regimen"
                                                            class="form-control rounded-input">
                                                    </div>
                                                </div>

                                                {{-- Room Type --}}
                                                <div class="col-sm-6 col-lg-6" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('entity_fields')['common']['room_type'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img
                                                                    src="{{ asset('icons/double_bed_blue.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="room_type">
                                                    </div>
                                                </div>

                                                {{-- Room --}}
                                                <div class="col-sm-6 col-lg-6" style="margin-top:10px">
                                                    <div class="input-group" title="{{ __('ballots')['history']['room'] }}">
                                                        <div class="input-group-prepend">
                                                            <i>
                                                                <img
                                                                    src="{{ asset('icons/single_bed_blue.svg') }}">
                                                            </i>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="room">
                                                    </div>
                                                </div>

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

                                    {{-- Rates --}}
                                    <section>
                                        <div class="card-body">

                                            {{-- Title --}}
                                            <h4>{{ __('ballots')['history']['section_2'] }}</h3>

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

                                                {{-- Lodging Rate --}}
                                                <div class="col-sm-6 col-lg-6" style="margin-top:10px; ">
                                                    <div class="input-group" title="{{ __('ballots')['history']['lodging_rate'] }}">
                                                        <div class="input-group-prepend">
                                                            <label for="room_price"
                                                                class="input-group-text">{{ __('ballots')['history']['lodging'] }}</label>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="lodging_cost">
                                                    </div>
                                                </div>

                                                {{-- Extra Rate --}}
                                                <div class="col-sm-6 col-lg-6" style="margin-top:10px;">
                                                    <div class="input-group" id="multiplicar" title="{{ __('ballots')['history']['extra_rate'] }}">
                                                        <div class="input-group-prepend">
                                                            <label for="total"
                                                            class="input-group-text">{{ __('ballots')['history']['extras'] }}</label>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="extra_cost">
                                                    </div>
                                                </div>

                                                {{-- Consumption Rate --}}
                                                <div class="col-sm-6 col-lg-6" style="margin-top:10px; ">
                                                    <div class="input-group" title="{{ __('ballots')['history']['consumption_rate'] }}">
                                                        <div class="input-group-prepend">
                                                            <label class="input-group-text">{{ __('ballots')['history']['consumption'] }}</label>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="consumption_cost">
                                                    </div>
                                                </div>

                                                {{-- Total Rate --}}
                                                <div class="col-sm-6 col-lg-6" style="margin-top:10px;">
                                                    <div class="input-group" id="multiplicar" title="{{ __('ballots')['history']['total_rate'] }}">
                                                        <div class="input-group-prepend">
                                                            <label for="total"
                                                                class="input-group-text">Total</label>
                                                        </div>
                                                        <input readonly="readonly"
                                                            style="background-color:#f9f9f9;cursor: no-drop;" type="text"
                                                            class="form-control rounded-input" id="total_cost">
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </section>

                                </div>

                                {{-- Balances --}}
                                <div class="col-lg-6" style="padding-left: 0%; padding-right: 0%">
                                    <div class="card-body">

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

                                        {{-- Botones --}}
                                        <ul class="nav nav-tabs" id="tabContent">
                                            <li>
                                                <a class="nav-link lodging active" href="#lodging" data-toggle="tab">{{ __('ballots')['history']['lodging'] }}</a>
                                            </li>
                                            &nbsp;&nbsp;
                                            <li>
                                                <a class="nav-link consume" href="#consume" data-toggle="tab">{{ __('ballots')['history']['consumption'] }}</a>
                                            </li>
                                            &nbsp;&nbsp;
                                            <li>
                                                <a class="nav-link extras" href="#extras" data-toggle="tab">{{ __('ballots')['history']['extras'] }}</a>
                                            </li>
                                        </ul>

                                        {{--Contenido--}}
                                        <div class="row justify-content-center col-12">
                                            <div class="p-0 tab-content" style="width: 100%;">

                                                {{-- Hospedaje --}}
                                                <div class="p-0 tab-pane fade show active" id="lodging">
                                                    <div class="mt-3 table-responsive col-12" style="max-height: 230px; overflow-x:hidden;">
                                                        <table class="table text-center table-bordered">
                                                            <thead style="background-color: #dee2e6">
                                                                <tr class="cardtabletr">
                                                                    <th colspan="4" style="padding: 3px;">{{ __('ballots')['history']['payments'] }}</th>
                                                                </tr>
                                                                <tr class="cardtabletr">
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['date'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['concept'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['method'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['charges_and_payments']['payment'] }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="lodg_payment" style="background-color: #ffffff">
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>

                                                {{-- Consumo --}}
                                                <div class="tab-pane fade" id="consume">

                                                    <div class="mt-3 table-responsive col-12" style="max-height: 120px; overflow-x:hidden;">
                                                        <table class="table text-center table-bordered">
                                                            <thead style="background-color: #dee2e6">
                                                                <tr class="cardtabletr">
                                                                    <th colspan="4" style="padding: 3px;">{{ __('ballots')['history']['charges'] }}</th>
                                                                </tr>
                                                                <tr class="cardtabletr">
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['date'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['concept'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['charges_and_payments']['payment'] }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="consumption_charges" style="background-color: #ffffff">
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <div class="mt-3 table-responsive col-12" style="max-height: 120px; overflow-x:hidden;">
                                                        <table class="table text-center table-bordered">
                                                            <thead style="background-color: #dee2e6">
                                                                <tr class="cardtabletr">
                                                                    <th colspan="4" style="padding: 3px;">{{ __('ballots')['history']['payments'] }}</th>
                                                                </tr>
                                                                <tr class="cardtabletr">
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['date'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['concept'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['method'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['charges_and_payments']['payment'] }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="consumption_payment" style="background-color: #ffffff">
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>

                                                {{-- Extra --}}
                                                <div class="tab-pane fade" id="extras">

                                                    <div class="mt-3 table-responsive col-12" style="max-height: 120px; overflow-x:hidden;">
                                                        <table class="table text-center table-bordered">
                                                            <thead style="background-color: #dee2e6">
                                                                <tr class="cardtabletr">
                                                                    <th colspan="4" style="padding: 3px;">{{ __('ballots')['history']['charges'] }}</th>
                                                                </tr>
                                                                <tr class="cardtabletr">
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['date'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['concept'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['charges_and_payments']['payment'] }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="extra_charges" style="background-color: #ffffff">
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <div class="mt-3 table-responsive col-12" style="max-height: 120px; overflow-x:hidden;">
                                                        <table class="table text-center table-bordered">
                                                            <thead style="background-color: #dee2e6">
                                                                <tr class="cardtabletr">
                                                                    <th colspan="4" style="padding: 3px;">{{ __('ballots')['history']['payments'] }}</th>
                                                                </tr>
                                                                <tr class="cardtabletr">
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['date'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['concept'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['common']['method'] }}</th>
                                                                    <th scope="col" style="padding: 3px;">{{ __('entity_fields')['charges_and_payments']['payment'] }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="extra_payment" style="background-color: #ffffff">
                                                            </tbody>
                                                        </table>
                                                    </div>

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

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

    </div>

    <script>
        // Filter Executor
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var valid = true;
                var min = moment($("#txtMin").val());
                if (!min.isValid()) {
                    min = null;
                }

                var max = moment($("#txtMax").val());
                if (!max.isValid()) {
                    max = null;
                }

                if (min === null && max === null) {
                    // no filter applied or no date columns
                    valid = true;
                } else {

                    $.each(settings.aoColumns, function (i, col) {

                        if (col.type == 'date') {
                            var cDate = moment(data[i]);

                            if (cDate.isValid()) {
                                if (max !== null && max.isBefore(cDate)) {
                                    valid = false;
                                }
                                if (min !== null && cDate.isBefore(min)) {
                                    valid = false;
                                }
                            } else {
                                valid = false;
                            }
                        }
                    });
                }
                return valid;
            }
        );

        $(document).ready(function () {

            // Redraw Table for Filter
            $("#btnGo").click(function () {
                $('#example').DataTable().draw();
            });

            // Table Controller
            var table = $('#example').DataTable({
                "order": [0, 'desc'],
                language: getDataTableLanguageConfig(),
                pageLength : 5,
                lengthMenu: [[5, 10, 25, 50, 100/*, -1*/], [5, 10, 25, 50, 100/*, 'Todos'*/]],
                ajax: {
                    url: "{{ route('hotel.reports.bookingHistory') }}",
                },
                columns: [{
                        data: 'creation',
                        name: 'creation',
                        type: 'date',
                    },
                    {
                        data: 'time',
                        name: 'time',
                    },
                    {
                        data: 'id',
                        name: 'id',
                    },
                    {
                        data: 'client',
                        name: 'client',
                    },
                    {
                        data: 'editor_name',
                        name: 'editor_name',
                    },
                    {
                        name: 'history',
                        data: 'history',
                    },
                ]
            });

            $('.dataTables_filter input')
                .off()
                .on( 'keyup', function () {
                    table.column(3).search( this.value ).draw();
            } );

            // Open Ballot Modal
            $(document).on('click', '.activeHistory', function () {
                var id = $(this).attr('id');

                $.ajax({
                    url: `/hotel/reports/booking-history/${id}`,

                    dataType: "json",
                    success: function (html) {
                        data = html.data;
                        action = data.reservation_data.action;

                        // Traslate Action
                        switch (action) {
                            case "Create":
                                action = "{{ __('reports')['hotel']['statisticalReports']['reservations']['Create'] }}";
                                break;

                            case "Update":
                                action = "{{ __('reports')['hotel']['statisticalReports']['reservations']['Update'] }}";
                                break;

                            case "Delete":
                                action = "{{ __('reports')['hotel']['statisticalReports']['reservations']['Delete'] }}";
                                break;

                            default:
                                action = "{{ __('reports')['hotel']['statisticalReports']['reservations']['Update'] }}";
                                break;
                        }

                        $('#modal-title').text(`{{ __('entities')['hotel']['reservation'] }} #${data.reservation_data.id} [${data.created_at}]`);

                        $('#action').val(action.toUpperCase() + " ({{ __('neutral_words')['by'] }} " + data.editor_name.toUpperCase() + ")");
                        $('#client').val(data.reservation_data.client);
                        $('#status').val( translateAndReplace(`seeders.statuses.${data.reservation_data.status}`) );
                        $('#guest_status').val( translateAndReplace(`seeders.statuses.${data.reservation_data.guest_status}`) );
                        $('#source').val(data.reservation_data.source);
                        $('#agency').val(data.reservation_data.agency);
                        $('#lodg_contract').val(data.reservation_data.lodging_contract);

                        if (getFeatureStatus('control_hours')) {
                            $('#checkin').val(`${data.reservation_data.checkin}T${data.reservation_data.checkin_time}`);
                            $('#checkout').val(`${data.reservation_data.checkout}T${data.reservation_data.checkout_time}`);
                        } else {
                            $('#checkin').val(data.reservation_data.checkin);
                            $('#checkout').val(data.reservation_data.checkout);
                        }

                        $('#nights').val(data.reservation_data.nights);
                        $('#adults').val(data.reservation_data.adults);
                        $('#children').val(data.reservation_data.children);
                        $('#regimen').val(data.reservation_data.regimen);
                        $('#room_type').val(data.reservation_data.room_type);
                        $('#room').val(data.reservation_data.room_name);

                        $('#lodging_cost').val(data.reservation_data.lodging_cost);
                        $('#consumption_cost').val(data.reservation_data.consumption_cost);
                        $('#extra_cost').val(data.reservation_data.extra_cost);
                        $('#total_cost').val((data.reservation_data.total_cost).toFixed(2));

                        $("#lodg_payment").empty();
                        $("#consumption_payment").empty();
                        $("#consumption_charges").empty();
                        $("#extra_payment").empty();
                        $("#extra_charges").empty();

                        // Hospedaje
                        data = html.data.reservation_data.lodging_payments;
                        var rows ="";
                        for (let i = 0; i < data.length; i++) {
                            if(data[i].status === 'Activo'){
                                rows += `
                                    <tr>
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].payment_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_concept}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_method}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].payment_price}</td>
                                    </tr>
                                `
                            }else{
                                rows += `
                                    <tr style="background-color: #0000001a;">
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].payment_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_concept}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_method}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].payment_price}</td>
                                    </tr>
                                `
                            }
                        }
                        $('#lodg_payment').html(rows);

                        // Consumo Pagos
                        data = html.data.reservation_data.consumption_payments;
                        var rows ="";
                        for (let i = 0; i < data.length; i++) {
                            if(data[i].status === 'Activo'){
                                rows += `
                                    <tr>
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].payment_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_concept}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_method}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].payment_price}</td>
                                    </tr>
                                `
                            }else{
                                rows += `
                                    <tr style="background-color: #0000001a;">
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].payment_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_concept}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_method}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].payment_price}</td>
                                    </tr>
                                `
                            }
                        }
                        $('#consumption_payment').html(rows);

                        // Consumo Cargos
                        data = html.data.reservation_data.consumption_charges;
                        var rows ="";
                        for (let i = 0; i < data.length; i++) {
                            if(data[i].status === 'Activo'){
                                rows += `
                                    <tr>
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].consumption_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].consumption_concept}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].consumption_price}</td>
                                    </tr>
                                `
                            }else{
                                rows += `
                                    <tr style="background-color: #0000001a;">
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].consumption_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].consumption_concept}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].consumption_price}</td>
                                    </tr>
                                `
                            }
                        }
                        $('#consumption_charges').html(rows);

                        // Extra Pagos
                        data = html.data.reservation_data.extra_payments;
                        var rows ="";
                        for (let i = 0; i < data.length; i++) {
                            if(data[i].status === 'Activo'){
                                rows += `
                                    <tr>
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].payment_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_concept}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_method}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].payment_price}</td>
                                    </tr>
                                `
                            }else{
                                rows += `
                                    <tr style="background-color: #0000001a;">
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].payment_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_concept}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].payment_method}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].payment_price}</td>
                                    </tr>
                                `
                            }
                        }
                        $('#extra_payment').html(rows);

                        // Extra Cargos
                        data = html.data.reservation_data.extra_charges;
                        var rows ="";
                        for (let i = 0; i < data.length; i++) {
                            if(data[i].status === 'Activo'){
                                rows += `
                                    <tr>
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].extras_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].extras_concept}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].extras_price}</td>
                                    </tr>
                                `
                            }else{
                                rows += `
                                    <tr style="background-color: #0000001a;">
                                        <td scope="col" width="20%" class="p-1">${parseDateTime(data[i].extras_date)}</td>
                                        <td scope="col" width="30%" class="p-1">${data[i].extras_concept}</td>
                                        <td scope="col" width="20%" class="p-1">${data[i].extras_price}</td>
                                    </tr>
                                `
                            }
                        }
                        $('#extra_charges').html(rows);

                        $('#historyData').modal('show');

                    }
                })
            });

        });

        // Table Data Cycle
        function cargarTabla() {
            $('#example').DataTable().ajax.reload(null, false);
        }

        $(document).ready(function () {
            setInterval(cargarTabla, 30000); //Cada 30 segundos (30 mil milisegundos)
        });

        // Report Interactions
        function imprimir() {
            const beforePrint = function () {
                const from = $('#txtMin').val();
                const to = $('#txtMax').val();

                $('#period_of_histories').text(`${formatDate(from)} - ${formatDate(to)}`);
            };

            if (isIosDevice()) {
                openPrintWindow(beforePrint);
            } else {
                beforePrint();
                window.print();
            }
        }

        function print_csv() {
            var start = $("#txtMin").val();
            var end = $("#txtMax").val();

            window.location = `/hotel/csv/booking-history/${start}/${end}`
        }

        // Support Functions
        const parseDateTime = (date) => moment(date).format('YYYY-MM-DD HH:mm');

    </script>

@endsection
