@extends('layouts.reports')

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

@section('content')

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

        {{-- Header --}}
        <section class="flex-wrap px-3 d-flex justify-content-between align-items-center cardtitle oculto-impresion">

            {{-- Action & Titles --}}
            <div class="flex-wrap py-2 justify-content-between align-items-center d-flex">
                {{-- Buttons --}}
                <div class="mr-3 d-flex">
                    {{-- Go Back --}}
                    <a type="button" href="{{ route('hotel.reports') }}"
                        class="mx-1 fixed-width oculto-impresion btn return-button"
                    >
                        <img src="{{ asset('icons/arrow_inverse.svg') }}">
                    </a>

                    {{-- Print --}}
                    <button onclick="imprimir()"
                        class="px-0 mx-1 fixed-width oculto-impresion btn harsi-button"
                    >
                        <img src="{{ asset('icons/print.svg') }}">
                    </button>

                    {{-- Download as CSV --}}
                    <button onclick="print_csv()"
                        class="px-0 mx-1 btn btn-success fixed-width oculto-impresion download-csv-button"
                        title="{{ __('reports')['hotel']['common']['download'] }}"
                    >
                        <img src="{{ asset('icons/csv_white.svg') }}">
                    </button>
                </div>

                {{-- Title --}}
                <h5 class="mb-0 oculto-impresion">
                    {{ __('reports.hotel.statisticalReports.reservas.checkin_per_user_and_period') }}
                </h5>
            </div>

            {{-- Filter Form --}}
            <form id="filter_report" class="py-2 d-flex align-items-center">
                {{-- Year --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <span class="px-3 input-group-text harsi-color fw-bold">
                            {{ __('neutral_words')['year'] }}
                        </span>
                    </div>

                    <select id="year" class="form-control">
                        @for ($year = 2024; $year < ($actual_year + 3); $year++)
                            <option value="{{ $year }}">{{ $year }}</option>
                        @endfor
                    </select>
                </div>

                {{-- Month --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <span class="px-3 input-group-text harsi-color fw-bold">
                            {{ __('neutral_words')['month'] }}
                        </span>
                    </div>

                    <select id="month" class="form-control">
                        @foreach ($months as $month)
                            <option value="{{ $month['value'] }}">{{ $month['name'] }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Receptionist --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text harsi-color fw-bold">
                            {{ __('neutral_words')['recepcionista'] }}
                        </span>
                    </div>
                    <select id="receptionist" class="form-control">
                        <option value="" selected>{{ __('neutral_words')['none_2'] }}</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} {{ $user->last_name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Submit --}}
                <button type="submit" class="mx-2 btn harsi-button">
                    {{ __('common_actions')['filter'] }}
                </button>
            </form>

        </section>

        {{-- Title for Print --}}
        <section class="mb-4">
            <h2 class="text-center col-lg-12" id="uno">
                {{ __('reports.hotel.statisticalReports.reservas.checkin_per_user_and_period') }}
            </h2>
            <h3 class="mt-1 text-center col-lg-12 fw-bold" id="uno"><span id="month_of_count"></span></h3>
        </section>

        {{-- Summary Table --}}
        <section class="mt-4 mb-0 d-flex justify-content-center align-items-center">
            <div class="py-2 border col-6 card rounded-pill">
                <h6 class="mb-0 text-center harsi-color fw-bold text-uppercase">
                    {{ __('reports')['hotel']['statisticalReports']['reservations']['check_ins_completed'] }}:
                    <span id="receptionist_compute" class="text-dark"></span>
                </h6>
            </div>
        </section>

        {{-- Table --}}
        <section class="my-1 table-responsive col-12">
            <table class="table text-center cardtable" id="example">
                <thead>
                    <tr class="cardtabletr">
                        <th class="text-center" scope="col">Folio</th>
                        <th class="text-center" scope="col">{{ __('neutral_words')['month'] }}</th>
                        <th class="text-center" scope="col">Check-in</th>
                        <th class="text-center" scope="col">Check-out</th>
                        <th class="text-center" scope="col">{{ __('entity_fields')['common']['room_type'] }}</th>
                        <th class="text-center" scope="col">{{ __('entity_fields')['reservation']['room'] }}</th>
                        <th class="text-center" scope="col">{{ __('entity_fields')['common']['receptionist'] }}</th>
                    </tr>
                </thead>
            </table>
        </section>
    </div>

    <script>
        // Constants
        const months = @json($months);

        // Global Controls
        $(document).ready(function () {
          // Default Values
            $("#month").val({{ $actual_month }});
            $("#year").val({{ $actual_year }});

          // Redraw Table for Filter
            $('#filter_report').on('submit', function (e) {
                e.preventDefault();
                reportTable.ajax.reload();
            });

            // Table Controller
            const reportTable = $('#example').DataTable({
                language: getDataTableLanguageConfig(),
                order: [0, 'asc'],
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
                processing: false,
                serverSide: true,

                ajax: {
                    url: "{{ route('hotel.reports.checkinPerUserAndPeriod') }}",
                    type: "GET",
                    data: function (d) {
                        d.year = $('#year').val();
                        d.month = $('#month').val();
                        d.receptionist_id = $('#receptionist').val();
                    }
                },

                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'month' },
                    { data: 'date_entry', name: 'date_entry', type: 'date' },
                    { data: 'date_departure', name: 'date_departure' },
                    { data: 'room_type' },
                    { data: 'room_number' },
                    { data: 'user' },
                ],

                drawCallback: function (settings) {
                  //* Control Data
                    // Parsed Results
                    const json = settings.json || {};
                    const checkin_count = json.checkin_count || 0;

                    // Render Results
                    $('#receptionist_compute').text(checkin_count);
                }
            });
        });

        // Table Data Cycle
        const cargarTabla = ()=>$('#example').DataTable().ajax.reload(null, false);
        $(document).ready(() => setInterval(cargarTabla, 30000) ); //Cada 30 segundos (30 mil milisegundos)

        // Report Interactions
        function imprimir() {
            const beforePrint = function () {
                const month_number = $('#month').val();
                const receptionist_selected = $('#receptionist').val() !== null;

                const year = $('#year').val();
                const month = months.filter(m => m.value === month_number)
                .map(m=> m.name);

                const receptionist = receptionist_selected
                    ? $('#receptionist option:selected').text()
                    : translateAndReplace('neutral_words.all');

                $('#month_of_count').text(`${receptionist} - ${month}(${year})`);
            };

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

        function print_csv() {
          // Control Data
            const year = $('#year').val();
            const month = $('#month').val();
            const receptionist_id = $('#receptionist').val();

          // Build Request Params
            const params = new URLSearchParams();
                if (year) params.append('year', year);
                if (month) params.append('month', month);
                if (receptionist_id) params.append('receptionist_id', receptionist_id);

          // Download CSV
            window.location.href = `/hotel/csv/checkin-per-user-and-period?${params.toString()}`;
        }

    </script>

@endsection