@extends('layout.layout')

@php
    $title = '403 Forbidden';
    $subTitle = 'Akses Ditolak';
@endphp

@section('content')
    <div class="row justify-content-center min-vh-100 align-items-center">
        <div class="col-lg-6 col-md-8 col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5 text-center">
                    <!-- Error Icon -->
                    <div class="mb-4">
                        <div class="error-icon-wrapper d-inline-block position-relative">
                            <iconify-icon icon="lucide:shield-x" class="error-icon text-danger"></iconify-icon>
                            <div class="pulse-ring"></div>
                            <div class="pulse-ring-2"></div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="mb-4">
                        <h1 class="display-1 fw-bold text-danger mb-3">403</h1>
                        <h3 class="fw-semibold mb-3 text-dark">Akses Ditolak</h3>
                        <p class="text-muted mb-2">Anda tidak memiliki izin untuk mengakses halaman ini.</p>
                        <p class="text-muted small">Silakan hubungi administrator jika diperlukan.</p>
                    </div>

                    <!-- Action Button -->
                    <div class="d-flex flex-row justify-content-center">
                        <a href="{{ route('dashboard.index') }}" class="btn btn-primary px-4 py-2 d-flex align-items-center justify-content-center">
                            <iconify-icon icon="lucide:home" class="me-2"></iconify-icon>
                            <span>Kembali ke Dashboard</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

@push('css')
    <style>
        .error-icon-wrapper {
            position: relative;
            display: inline-block;
        }

        .error-icon {
            font-size: 64px;
            animation: shake 2s ease-in-out infinite;
            position: relative;
            z-index: 2;
        }

        .pulse-ring, .pulse-ring-2 {
            width: 100px;
            height: 100px;
            border: 2px solid #dc3545;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: pulsate 2s ease-out infinite;
            opacity: 0;
        }

        .pulse-ring-2 {
            animation-delay: 1s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
            20%, 40%, 60%, 80% { transform: translateX(3px); }
        }

        @keyframes pulsate {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.7;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.4);
                opacity: 0;
            }
        }

        .card {
            border-radius: 12px;
        }

        .btn {
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .error-icon {
                font-size: 48px;
            }

            .pulse-ring, .pulse-ring-2 {
                width: 80px;
                height: 80px;
            }

            .display-1 {
                font-size: 4rem;
            }
        }
    </style>
@endpush
@endsection