<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <!-- Configuración de la página -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- Token CSRF para seguridad -->
    <title>@yield('title')</title>
    <link rel="icon" href="{{ asset('favicon.ico') }}"> <!-- Favicon -->

    <!-- ===========================
        ESTILOS CSS
    ============================ -->

        <!-- Bootstrap 4 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
            integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

        <!-- FontAwesome para iconos -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" type="text/css">

        <!-- DataTables -->
        <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">

        <!-- Toastify -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

        <!-- Estilos personalizados -->
        <link href="{{ asset('css/pages/shared/master.css') }}" rel="stylesheet">
        <link href="{{ asset('css/components/custom/toastify.css') }}" rel="stylesheet">
        <link href="{{ asset('css/components/tables/report-tables.css') }}" rel="stylesheet">

        <!-- Barlow Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


        <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&display=swap" rel="stylesheet">


    <!-- ===========================
        SCRIPTS JAVASCRIPT
    ============================ -->

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- Popper -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>

        <!-- Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

        <!-- DataTables JS -->
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

        <!-- Toastify -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

        <!-- Moment.js para manejo de fechas -->
        <script src="{{ asset('js/moment.js') }}" defer></script>

        {{-- Import Hotel Settings Control --}}
        <script type="text/javascript" src="{{ asset('js/environment/hotelSettings.js') }}"></script>

        {{-- Tokens Configurations --}}
        <script src="{{ asset('js/environment/tokensManagement.js') }}"></script>

    <!-- ===========================
        ESTILOS EN LÍNEA
    ============================ -->
        <style type="text/css">
            body, html {
                font-family: 'Barlow', sans-serif !important;
            }

            th, td {
                border: 1px solid rgba(0, 0, 0, 0.068);
            }
        </style>
</head>

<body id="print-area">
    <style type="text/css" media="print">
        @page { size: landscape; }

        .dataTables_info, .dataTables_paginate, .dataTables_filter, .dataTables_length {
            display: none;
        }
    </style>

    <header class="mx-0 row">
            {{-- Logo --}}
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <a href="{{ route('home.index') }}">
                        <img class="mt-3 ml-4 oculto-impresion" src="{{asset('images/only_harsi_bigger.png')}}" alt="Logo Harsi" width="auto" height="70">
                        <img style="height: auto; width: auto; max-width: 270px; max-height: 270px;" src="{{asset('images/harsi_logo.png')}}" alt="Logo Harsi" id="uno">
                    </a>
                </div>
            </div>

            {{-- Navbar --}}
            <div class="px-0 col-lg-10 col-md-9 col-sm-9 col-xs-9">
                @include('shared.components.navbar.default-navbar', ['is_dashboard' => false, 'expand_indicators' => true])
            </div>
    </header>

    <main class="mb-3">
        @yield('content')
    </main>

    @include('shared.components.footer.basic-footer')

    {{--* Scripts *--}}
        {{-- Inactivity Control --}}
        <script src="{{ asset('js/support/inactivityControl.js') }}"></script>

    {{-- Sweet Alert --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    {{-- Shared Functions --}}
    <script>
        function isIosDevice() {
            const ua = navigator.userAgent || navigator.vendor || window.opera;

            const isIOSDevice = /iPad|iPhone|iPod/.test(ua);
            const isIpadDesktopMode = !isIOSDevice &&
                navigator.platform === 'MacIntel' &&
                navigator.maxTouchPoints > 1;

            return isIOSDevice || isIpadDesktopMode;
        }

        function openPrintWindow(beforePrint = null, areaSelector = '#print-area') {
            // Execute secondary function
            if (typeof beforePrint === 'function')
                beforePrint();

            // Get area to print
            const area = document.querySelector(areaSelector) || document.body;

            // Open new tab
            const printWindow = window.open('', '_blank');

            // Copy styles
            const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style'))
                .map(node => node.outerHTML)
                .join('\n');

            // Render view on opened tab
            printWindow.document.open();
            printWindow.document.write(`
                <!doctype html>
                <html>
                    <head>
                        <meta charset="utf-8">
                        <title>${document.title}</title>
                        ${styles}
                    </head>
                    <body>
                        ${area.outerHTML}
                        <script>
                            window.onload = function () {
                                window.print();
                                window.close();
                            };
                        <\/script>
                    </body>
                </html>
            `);

            // Print
            printWindow.document.close();
        }

        function formatDate(dateString) {
            const [year, month, day] = dateString.split("-");
            return `${year}/${month}/${day}`;
        }
    </script>

        {{-- Restrict Use of CTRL+P --}}
        <script>
            $(document).on('keydown', function(e) {
                if((e.ctrlKey || e.metaKey) && (e.key == "p" || e.charCode == 16 || e.charCode == 112 || e.keyCode == 80) ){
                    // alert("Please use the Print PDF button below for a better rendering on the document");

                    Swal.fire({
                        title: "{{ __('reports')['hotel']['not_allowed_print']['title'] }}",
                        html: `{{ __('reports')['hotel']['not_allowed_print']['message_part_1'] }} <b>{{ __('common_actions')['print'] }}</b> {{ __('reports')['hotel']['not_allowed_print']['message_part_2'] }}`,
                        icon: 'info',
                        confirmButtonText: "{{ __('reports')['hotel']['not_allowed_print']['button_message'] }}"
                    });


                    e.cancelBubble = true;
                    e.preventDefault();

                    e.stopImmediatePropagation();
                }
            });
        </script>
</body>

</html>
