@extends('layouts.reports')

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

@section('content')

    {{-- 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()"
                    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-4 col-md-3">
                {{ __('reports.hotel.statisticalReports.reservas.common_reservation_sources') }}
            </h5>
        </div>

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

        {{-- Table --}}
        <div class="mb-5 row justify-content-center align-items-center g-2">
            <div class="table-responsive col-10">
                <table class="table text-center cardtable" id="example">
                    <thead>
                        <tr class="cardtabletr">
                            <th class="text-center" scope="col">{{ __('entity_fields')['reservation']['source'] }}</th>
                            <th class="text-center" scope="col">{{ __('reports')['hotel']['common']['quantity'] }}</th>
                            <th class="text-center" scope="col">{{ __('reports')['hotel']['common']['percentage'] }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            // Table Controller
            $('#example').DataTable({
                "order": [1, 'desc'],

                lengthMenu: [
                    [-1, 5, 10, 25, 50, 100],
                    ['All', 5, 10, 25, 50, 100]
                ],

                language: getDataTableLanguageConfig(),
                ajax: {
                    url: "{{ route('hotel.reports.commonSources') }}",
                },
                columns: [
                    {
                        data: 'source_name',
                        name: 'source_name',
                    },
                    {
                        data: 'source_quantity',
                        name: 'source_quantity',
                    },
                    {
                        data: 'source_percentage',
                        name: 'source_percentage',
                    },
                ]
            });
        });

        // 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() {
            if (isIosDevice()) {
                openPrintWindow();
            } else {
                window.print();
            }
        }

        function print_csv() {
            window.location = `/hotel/csv/common-sources`
        }

    </script>

@endsection