@extends('backend.master')

@section('title', '403 - Access Denied')

@section('backend_content')
    <div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: 80vh;">
        <div class="row w-100 justify-content-center">
            <div class="col-md-8 col-lg-5 text-center">
                <div class="card border-0 shadow-lg p-4 p-md-5" style="border-radius: 16px; background: #ffffff;">
                    <div class="card-body">

                        <!-- Icon Badge (Pure SVG - Guaranteed to render) -->
                        <div class="mb-4">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle shadow-sm"
                                style="width: 100px; height: 100px; background-color: #fff0f1; border: 2px solid #ffe1e3;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"
                                    fill="none" stroke="#dc3545" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                                    <line x1="1" y1="1" x2="23" y2="23"></line>
                                </svg>
                            </div>
                        </div>

                        <!-- Error Code & Title -->
                        <h1 class="display-3 font-weight-bold text-dark mb-0" style="letter-spacing: 2px;">403</h1>
                        <h3 class="font-weight-bold text-danger mb-3">Access Denied! 🚫</h3>

                        <!-- Message -->
                        <p class="text-muted mb-4 lead" style="font-size: 0.95rem; line-height: 1.6;">
                            Sorry, you don't have permission to access or perform actions on this page. If you believe this
                            is an error, please contact your system administrator.
                        </p>

                        <hr class="my-4" style="border-top: 1px dashed #e9ecef;">

                        <!-- Action Buttons -->
                        <div class="d-flex flex-column flex-sm-row justify-content-center align-items-center gap-2">
                            <!-- Go Back Button -->
                            <button onclick="window.history.back()"
                                class="btn btn-outline-secondary btn-md rounded-pill px-4 mb-2 mb-sm-0 mr-sm-2 shadow-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="mr-1">
                                    <line x1="19" y1="12" x2="5" y2="12"></line>
                                    <polyline points="12 19 5 12 12 5"></polyline>
                                </svg>
                                Go Back
                            </button>

                            <!-- Dashboard Button -->
                            <a href="{{ route('dashboard') }}" class="btn btn-primary btn-md rounded-pill px-4 shadow-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="mr-1">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                                Dashboard
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Feather Icons Reload Script (যদি টেমপ্লেটে Feather JS থাকে) -->
    @push('backend_scripts')
        <script>
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        </script>
    @endpush

@endsection