@extends('layouts.errors')

@section('http_error')
    429 | Page Expired
@endsection

@section('imports')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
@endsection

@section('styles')
    <style>
      /* Text */
        .harsi-color {
            color: #0D6889 !important;
        }

      /* Cards */
        .error-card {
            background: #ffffffdc;
            border-radius: 0.75rem;
        }

        .error-card-header {
            background: #ffffff00;
            border-radius: 0.45rem !important;
        }

      /* Buttons */
        .btn-harsi {
            background-color: #0D6889 !important;
            color: #fff;
        }

        .btn-harsi:hover{
            color: #fff;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .btn-action {
            font-size: 1.5rem;

            width: 50px;
            height: 50px;

            display: flex;
            justify-content: center;
            align-items: center;
        }

      /* Resources */
        .hotel-logo {
            max-height: 355px !important;
            width: auto !important;
            object-fit: contain;

            border-radius: 1rem;
        }

    </style>
@endsection

@section('content')

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

    <section class="container px-4">
        <div class="row justify-content-center align-items-center vh-100">

            {{-- Card --}}
            <div
                class="card col-11 h-50 justify-content-center align-items-center error-card"
            >
                <div class="row col-10 justify-content-between align-items-center">

                    {{-- Logo Hotel --}}
                    <div class="col-lg-5 col-md-12 col-xs-12 d-flex align-items-center">
                        <img src="{{ $server_image }}" class="hotel-logo img-fluid rounded-start" alt="Harsi Logo">
                    </div>

                    {{-- Message --}}
                    <div class="py-2 ps-5 col-lg-7 col-md-12 col-xs-12">

                        {{-- Title --}}
                        <div class="text-center card-header error-card-header">
                            <h1 @auth class="mb-1" @endauth>{{ __('common_responses_and_messages')['welcome'] }}</h1>

                            @auth
                                <h5 class="text-uppercase"><span class="harsi-color">{{ Auth::user()->name }}</span> ({{ Auth::user()->role }})</h5>
                            @endauth
                        </div>

                        {{-- Action Buttons --}}
                        <div class="gap-5 card-body d-flex justify-content-center">

                            {{-- Go Home --}}
                            <button type="button"
                                class="rounded-circle btn btn-harsi btn-action" id="come_back"
                            >
                                <i class='fas fa-house-damage'></i>
                            </button>

                            {{-- Go to Settings --}}
                            <button type="button"
                                class="rounded-circle btn btn-secondary btn-action"
                                onclick="window.location.href = `{{ route('dashboard') }}`"
                            >
                                <i class='fa fa-cog'></i>
                            </button>

                            {{-- Log Out --}}
                            <button type="button"
                                class="rounded-circle btn btn-danger btn-action"
                                onclick="logoutUser(event)"
                            >
                                <i class='fas fa-door-open'></i>
                            </button>

                        </div>

                    </div>

                </div>
            </div>

        </div>
    </section>

@endsection

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