@extends('errors::layout')

@section('title', __('Not Found this page'))
@section('code', '404')
@section('css')
<style>
body {
    background-color: #f8f9fa;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.error-container {
    text-align: center;
}

.error-container h1 {
    font-size: 10rem;
    color: #4A90E2;
    margin: 0;
    font-weight: bold;
}

.error-container h2 {
    font-size: 2rem;
    color: #4d7679;
    margin-bottom: 1.5rem;
}

.error-container img {
    width: 50%;
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.error-container p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 2rem;
}

.btn-back-home {
    background-color: #4A90E2;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-back-home:hover {
    background-color: #357ABD;
}

@media (max-width: 700px) {
    .error-container h1 {
        font-size: 5rem;
    }

    .error-container h2 {
        font-size: 1.5rem;
    }

    .error-container img {
        width: 80%;
    }
}
</style>
@endsection

@section('content')
<div class="error-container text-center">
    <h1>404</h1>
    <h2>عذراً , هذه الصفحه غير متوفرة</h2>
    {{-- <img src="{{asset('assets/errors/404.png')}}" alt="Page not found"> --}}
    <p class="text-center">الصفحة التي تبحث عنها قد تكون غير متوفرة أو تم نقلها.</p>
    <a href="{{ url('/') }}" class="btn-back-home">
        <i class="fas fa-home"></i> العودة إلى الصفحة الرئيسية
    </a>
</div>
<script>
            var am = "{{ __('main.am') }}";
            var pm = "{{ __('main.pm') }}";
    function updateTime() {
            const currentTimeElement = document.getElementById('current-time');
            const now = new Date();
            const options = {
                hour12: true,
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            let timeString = now.toLocaleTimeString('en', options);
            const dateString = now.toLocaleDateString('en');
            timeString = timeString.replace(/AM|PM/, '').trim();
            const amPmString = now.getHours() >= 12 ? pm : am;
            currentTimeElement.innerHTML = `${dateString} ${timeString} ${amPmString}`;
        }
        setInterval(updateTime, 1000);
        updateTime();
</script>
@endsection