@extends('layouts.errors')

@section('http_error')
    403 | Module Unavailable
@endsection

@section('imports')
    {{-- Bootstrap JS --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous">
    </script>

    {{-- 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">
@endsection()

@section('styles')
    <style>
      /* Tags */
        html, body {
            background: none !important;
        }

        h2 {
            font-weight:650 !important;
        }

        strong {
            color: #0d6889 !important;
        }

      /* Customs Clases */
        /* Images */
        .floating-mark-top {
            top: 4%;
            opacity: 0.9;
            max-width: 11rem !important;
        }

        .hotel-logo {
            max-height: 170px !important;
            width: auto !important;

            border-radius: 1rem;
        }

        /* Text */
        .light-text {
            font-weight: 400;
        }

        .low-color {
            color: #000000bb !important;
        }

        /* Spacers */
        .my-4-5 {
            margin-top: 2.3rem !important;
            margin-bottom: 2.3rem !important;
        }

        /* Buttons */
        .btn-harsi {
            background-color: #0D6889 !important;
            color: #ffffff !important;
            box-shadow: 5px 5px 5px 1px rgba(20, 20, 20, 0.2) !important;
        }
        .btn-harsi:focus,
        .btn-harsi:hover,
        .btn-outline-harsi:focus,
        .btn-outline-harsi:hover {
            color: #fff !important;
            background-color: #094f69 !important;
        }
    </style>
@endsection

@section('floating-mark')
    <img src="{{ asset('images/harsi_logo.png') }}" alt="Harsi Logo" class="floating-mark-top">
@endsection

@section('content')

    @php
        $server_image = \App\Models\User::first()->value('profile_photo') ?? asset('images/only_harsi.png');
        $is_admin = Auth::user()->role === "administrador";
    @endphp

    <section class="d-flex align-items-center justify-content-center h-100" >
        <div>
            {{-- Header --}}
            <h2 class="low-color">
                {!!
                    str_replace(
                        [':module', ':entry_hour'],
                        [__('modules')['dashboard']['invoicing']['title']],
                        __('errors')['503-modular']['title']
                    )
                !!}
            </h2>

            {{-- Hotel Logo --}}
            <img src="{{ $server_image }}" class="my-4-5 hotel-logo img-fluid" alt="Module Unavailable"/>

            {{-- Message --}}
            @php
                $is_mex_hotel = \App\Helpers\Environment\SystemEnvHelper::areCurrentCountries(['MEX']);
                $reason = str_replace(
                    [ ':entity' ],
                    [
                        $is_mex_hotel ? __('neutral_words')['hotel'] : __('neutral_words')['region'],
                    ],
                    __('errors')['503-modular']['reason']
                );
            @endphp
            <h5 class="mb-4 light-text">
                {!! $reason !!}
            </h5>

            <h5 class="mb-4 light-text">
                {!! __('errors')['503-modular']['solution'] !!}
            </h5>

            <button type="button" class="mx-4 mt-5 btn btn-secondary col-5" onclick="window.history.back()">
                {{ __('redirection_actions')['go_back'] }}
            </button>

        </div>
    </section>

@endsection

@section('footer')
    @include('shared.components.footer.oposite-footer', ["display_social_media" => false])
@endsection