@extends('layouts.errors')

@section('http_error')
    503 | Service 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;
        }

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

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

            border-radius: 1rem;
        }

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

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

        .harsi-color {
            color: #0d6889 !important;
        }

        /* Spacers */
        .my-4-5 {
            margin-top: 2.3rem !important;
            margin-bottom: 2.3rem !important;
        }
    </style>
@endsection

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

@section('content')

    @php
        $service_url = str_replace(["https://", "http://"], ["", ""], config('app.url'));
        $server_image = \App\Models\User::first()->value('profile_photo') ?? asset('images/only_harsi.png');

        $header_message = str_replace(
            ':system',
            "<span class='harsi-color'>$service_url</span>",
            __('errors')['503']['system_status_description']
        )
    @endphp

    <section class="d-flex align-items-center justify-content-center h-100" >
        <div>
            {{-- Header --}}
            <h2 class="low-color">
                {!! $header_message !!}
            </h2>

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

            {{-- Apologizes --}}
            <h5 class="light-text fst-italic">
                {!! __('errors')['503']['apologizes'] !!}
            </h5>

        </div>
    </section>

@endsection

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