@extends('layouts.reports')

@section('title')
Hotel | {{ __('reports.hotel.statisticalReports.reservas.reservation_history_changes') }} #{{ $folio }}
@endsection

@section('content')

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

    <style>
        td, th {
            vertical-align: middle !important;
        }
    </style>

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

        {{-- Header --}}
        <div class="mb-4 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({{ $folio }})"
                    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_changes') }}
            </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="2026-07-01">

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

                {{-- 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_changes') }}
        </h2>
        <h3 class="mt-3 text-center col-lg-12" id="uno"><span id="period_of_changes"></span></h3>

        {{-- Table --}}
        <div class="mb-5 row justify-content-center align-items-center g-2">
            <div class="table-responsive col-11">
                <table class="table text-center cardtable" id="example">
                    <thead>
                        <tr class="cardtabletr">
                            <th class="text-center" width="10%" scope="col">{{ __('entity_fields')['common']['date'] }}</th>
                            <th class="text-center" width="10%" scope="col">{{ __('entity_fields')['reservation_history']['time'] }}</th>
                            <th class="text-center" width="5%"  scope="col">{{ __('entity_fields')['reservation_history']['reservation'] }}</th>
                            <th class="text-center" width="20%" scope="col">{{ __('entity_fields')['reservation_history']['guest'] }}</th>
                            <th class="text-center" width="10%" scope="col">{{ __('entity_fields')['reservation_history']['editor'] }}</th>
                            <th class="text-center" width="45%" scope="col">{{ __('entity_fields')['reservation_history']['changes'] }}</th>
                        </tr>
                    </thead>
                </table>
            </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.bookingUpdateHistory',[$folio]) }}",
                },
                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: 'changes',
                        data: 'changes',
                        type: 'html',
                    },
                ]
            });

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

        // 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_changes').text(`${formatDate(from)} - ${formatDate(to)}`);
            };

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

        function print_csv(folio) {
            window.location = `/hotel/csv/booking-update-history/${folio}`
        }

    </script>

@endsection