@extends('layouts.fullscreen-layout')

@section('content')
@php
    $currentYear = date('Y');
@endphp
  <div class="relative flex flex-col items-center justify-center min-h-screen p-6 overflow-hidden z-1">
      {{-- common grid shape --}}
      <x-common.common-grid-shape />
      <!-- Centered Content -->
      <div class="mx-auto w-full max-w-[320px] text-center sm:max-w-[500px]">
          <h1 class="mb-4 font-bold text-gray-800 text-title-md dark:text-white/90 xl:text-title-2xl">
              403
          </h1>
          
          <div class="mb-8">
              {{-- Lock Icon --}}
              <svg class="mx-auto w-24 h-24 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
              </svg>
          </div>

          <h2 class="mb-4 text-xl font-semibold text-gray-800 dark:text-white/90">
              Akses Ditolak
          </h2>

          <p class="mb-2 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
              Anda tidak memiliki akses ke halaman ini.
          </p>
          
          <p class="mb-6 text-sm text-gray-500 dark:text-gray-500">
              Silakan hubungi administrator jika Anda yakin ini adalah kesalahan.
          </p>

          {{-- Countdown Timer --}}
          <div class="mb-6 p-4 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
              <p class="text-sm text-gray-600 dark:text-gray-400">
                  Anda akan dialihkan ke Dashboard dalam
              </p>
              <p class="text-3xl font-bold text-primary mt-2" id="countdown">5</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">detik</p>
          </div>

          <div class="flex flex-col sm:flex-row gap-3 justify-center">
              <a href="{{ route('dashboard') }}"
                  class="inline-flex items-center justify-center rounded-lg bg-primary px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs hover:bg-primary-dark transition-colors">
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                  </svg>
                  Ke Dashboard Sekarang
              </a>
              <button onclick="history.back()"
                  class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 transition-colors">
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                  </svg>
                  Kembali
              </button>
          </div>
      </div>
      <!-- Footer -->
      <p class="absolute text-sm text-center text-gray-500 -translate-x-1/2 bottom-6 left-1/2 dark:text-gray-400">
          &copy; {{ $currentYear }} - TailAdmin
      </p>
  </div>
@endsection

@push('scripts')
<script>
    (function() {
        let countdown = 5;
        const countdownElement = document.getElementById('countdown');
        
        const timer = setInterval(function() {
            countdown--;
            if (countdownElement) {
                countdownElement.textContent = countdown;
                
                // Add animation effect
                countdownElement.classList.add('scale-110');
                setTimeout(() => {
                    countdownElement.classList.remove('scale-110');
                }, 200);
            }
            
            if (countdown <= 0) {
                clearInterval(timer);
                window.location.href = "{{ route('dashboard') }}";
            }
        }, 1000);
    })();
</script>
@endpush