@extends('layouts.reports')

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

@section('content')
    {{-- Imports --}}
    @php
        use \App\Helpers\Environment\SystemFeaturesHelper;

        $has_express_reservations = SystemFeaturesHelper::getFeatureStatus('express_reservations');
    @endphp

    {{-- 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.occupation_per_month') }}
                </h5>
            </div>

            {{-- Filter Form --}}
            <form id="filter_report" class="py-2 d-flex align-items-center" style="width: 70%">

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

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

                {{-- Year --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <label for="year" class="px-3 input-group-text harsi-color fw-bold">
                            {{ __('reports')['hotel']['common']['filter_by_year'] }}
                        </label>
                    </div>

                    <input type="number" id="year" class="form-control"
                        min="2020" max="{{ $actualYear + 7 }}" step="1"
                        onkeydown="return event.key === 'ArrowUp' || event.key === 'ArrowDown'"
                        value="{{ now()->format('Y') }}">
                </div>

                {{-- Room Stay Type --}}
                <div class="mx-1 input-group">
                    <div class="input-group-prepend">
                        <label for="analyze_express" class="px-3 input-group-text harsi-color fw-bold">
                            {{ __('entity_fields')['reservation']['reservation_type'] }}
                        </label>
                    </div>

                    <select class="form-control" id="analyze_express">
                        <option value="0" selected>{{ __('neutral_words')['nights'] }}</option>
                        @if ($has_express_reservations)
                            <option value="1">{{ __('neutral_words')['express'] }}</option>
                        @endif
                    </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">
            <h3 class="text-center col-lg-12" id="uno">
                {{ __('reports.hotel.statisticalReports.reservas.occupation_per_month') }}
                (<span class="harsi-color" id="month_of_occupancy"></span>)
            </h3>
        </section>

        {{-- Table --}}
        <section class="mx-auto my-1 table-responsive col-10">
            <table class="table text-center cardtable" id="example">
                <thead>
                    <tr class="cardtabletr">
                        <th class="text-center" scope="col">{{ __('entity_fields')['common']['room_type'] }}</th>
                        <th class="text-center" scope="col">{{ __('entity_fields')['reservation']['number_nights'] }}</th>
                        <th class="text-center" scope="col">{{ __('reports')['hotel']['common']['percentage'] }} %</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </section>

    </div>

    <script>
        // Global Controls
        $(document).ready(function () {
          // Redraw Table for Filter
            $('#filter_report').on('submit', function (e) {
                e.preventDefault();
                reportTable.ajax.reload();
            });

           // Table Controller
            const reportTable =  $('#example').DataTable({
                language: getDataTableLanguageConfig(),
                order: [2, 'desc'],

                paging: false,
                processing: false,
                serverSide: true,

                ajax: {
                    url: `{{ route('hotel.reports.occupationPerMonth') }}`,
                    type: "GET",
                    data: function (d) {
                        d.year = $('#year').val();
                        d.month = $('#month').val();
                        d.analyze_express = Boolean(Number($('#analyze_express').val()));
                    }
                },
                columns: [
                    { data: 'room_type', name: 'room_type' },
                    { data: 'nights', name: 'nights' },
                    { data: 'occupation', name: 'occupation' },
                ]
            });
        });

        // Report Interactions
        function imprimir() {
            const beforePrint = function () {
                const month = $('#month option:selected').text();
                const year = $('#year').val();

                $('#month_of_occupancy').text(`${month} | ${year}`);
            };

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

        function print_csv() {
            const year = $("#year").val();
            const month = $("#month").val();
            const analyze_express = Boolean(Number($('#analyze_express').val()));

            window.location = `/hotel/csv/occupation-per-month?year=${year}&month=${month}&analyze_express=${analyze_express}`
        }

    </script>

@endsection