@php
    // Set by bootstrap/app.php. Every diagnostic below is developer-only: the stack
    // trace, request input, headers, session and SQL log all leak data that must not
    // reach a browser in production. The operator reads them from storage/logs instead,
    // keyed by the same error id shown to the user.
    $isDebug = (bool) ($debug ?? false);
@endphp
<!DOCTYPE html>
<html dir="rtl" lang="ar" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>خطأ في النظام</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    @if($isDebug)
        {{-- Local debugging only. This page renders when the app is broken, so it cannot
             rely on the Vite bundle; the CDN is acceptable here and never ships to a user. --}}
        <script src="https://cdn.tailwindcss.com"></script>
    @endif
    <style>
        body { font-family: 'Cairo', sans-serif; }
        .stack-frame { transition: all 0.2s; }
        .stack-frame:hover { background: #fef3c7; }
        pre { white-space: pre-wrap; word-break: break-word; }
        /* Self-contained so the production page needs no external stylesheet. */
        .ec-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #f8fafc; color: #0f172a; }
        .ec-card { max-width: 30rem; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px 32px; text-align: center; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
        .ec-badge { width: 56px; height: 56px; border-radius: 9999px; background: #fef2f2; color: #dc2626; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
        .ec-title { font-size: 1.375rem; font-weight: 700; margin: 0 0 8px; }
        .ec-body { color: #475569; line-height: 1.7; margin: 0 0 24px; }
        .ec-id { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; direction: ltr; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 14px; color: #334155; margin-bottom: 24px; user-select: all; }
        .ec-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .ec-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-size: .875rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
        .ec-btn-primary { background: #1d4ed8; color: #fff; }
        .ec-btn-secondary { background: #fff; color: #334155; border-color: #cbd5e1; }
    </style>
</head>
@unless($isDebug)
<body class="h-full">
    <div class="ec-wrap">
        <div class="ec-card">
            <div class="ec-badge" aria-hidden="true">
                <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            </div>
            <h1 class="ec-title">حدث خطأ غير متوقع</h1>
            <p class="ec-body">حصلت مشكلة أثناء تنفيذ طلبك، وتم تسجيلها تلقائيًا. لو المشكلة اتكررت، ابعت الرقم ده للدعم الفني.</p>
            <div class="ec-id" dir="ltr">{{ $errorId ?? 'N/A' }}</div>
            <div class="ec-actions">
                <a href="{{ url('/') }}" class="ec-btn ec-btn-primary">الصفحة الرئيسية</a>
                <a href="{{ url()->previous() }}" class="ec-btn ec-btn-secondary">العودة</a>
            </div>
        </div>
    </div>
</body>
</html>
@else
<body class="h-full bg-gray-50">
    <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
            {{-- Header --}}
            <div class="bg-red-600 rounded-t-xl p-6 text-white">
                <div class="flex items-center gap-4">
                    <div class="shrink-0">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold">خطأ في النظام</h1>
                        <p class="text-red-100 mt-1">حدث خطأ أثناء معالجة طلبك</p>
                    </div>
                    <div class="ms-auto text-end">
                        <p class="text-sm text-red-200">{{ now()->format('Y-m-d H:i:s') }}</p>
                        <p class="text-xs text-red-300 font-mono">ID: {{ $errorId ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>

            {{-- Error Summary --}}
            <div class="bg-white border-x border-gray-200 p-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {{-- Exception Info --}}
                    <div>
                        <h2 class="text-sm font-semibold text-gray-500 uppercase mb-2">الاستثناء</h2>
                        <p class="text-lg font-bold text-red-700 font-mono break-all" dir="ltr">{{ $exceptionClass ?? 'Unknown' }}</p>
                        <p class="mt-2 text-gray-800 text-base">{{ $message ?? 'خطأ غير معروف' }}</p>
                    </div>

                    {{-- Request Info --}}
                    <div class="border-t lg:border-t-0 lg:border-s border-gray-200 pt-4 lg:pt-0 lg:ps-6">
                        <h2 class="text-sm font-semibold text-gray-500 uppercase mb-2">تفاصيل الطلب</h2>
                        <dl class="space-y-1 text-sm">
                            <div class="flex gap-2">
                                <dt class="font-medium text-gray-600 shrink-0">URL:</dt>
                                <dd class="text-gray-800 font-mono text-xs break-all" dir="ltr">{{ $url ?? 'N/A' }}</dd>
                            </div>
                            <div class="flex gap-2">
                                <dt class="font-medium text-gray-600 shrink-0">Method:</dt>
                                <dd class="text-gray-800 font-mono" dir="ltr">{{ $method ?? 'N/A' }}</dd>
                            </div>
                            <div class="flex gap-2">
                                <dt class="font-medium text-gray-600 shrink-0">Route:</dt>
                                <dd class="text-gray-800 font-mono text-xs break-all" dir="ltr">{{ $routeName ?? 'N/A' }}</dd>
                            </div>
                            <div class="flex gap-2">
                                <dt class="font-medium text-gray-600 shrink-0">المستخدم:</dt>
                                <dd class="text-gray-800">{{ $userName ?? 'زائر' }} (ID: {{ $userId ?? '-' }})</dd>
                            </div>
                            <div class="flex gap-2">
                                <dt class="font-medium text-gray-600 shrink-0">IP:</dt>
                                <dd class="text-gray-800 font-mono" dir="ltr">{{ $ip ?? 'N/A' }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>

            {{-- File & Line --}}
            @if(!empty($file))
            <div class="bg-amber-50 border-x border-t border-amber-200 p-4">
                <div class="flex items-center gap-2">
                    <svg class="w-5 h-5 text-amber-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    <code class="text-sm text-amber-900 font-mono break-all" dir="ltr">{{ $file }}:{{ $line ?? '?' }}</code>
                </div>
            </div>
            @endif

            {{-- Stack Trace --}}
            @if(!empty($trace))
            <div class="bg-white border border-gray-200 rounded-b-xl overflow-hidden">
                <div class="bg-gray-100 px-6 py-3 border-b border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700">Stack Trace</h2>
                </div>
                <div class="max-h-[500px] overflow-y-auto">
                    <table class="w-full text-xs" dir="ltr">
                        <tbody>
                            @foreach($trace as $i => $frame)
                            <tr class="stack-frame border-b border-gray-100 {{ $i === 0 ? 'bg-red-50' : '' }}">
                                <td class="py-2 px-3 text-gray-400 align-top text-end w-8">{{ $i }}</td>
                                <td class="py-2 px-3 font-mono">
                                    <span class="text-blue-700">{{ $frame['file'] ?? '(internal)' }}</span>@if(!empty($frame['line'])):<span class="text-red-600 font-bold">{{ $frame['line'] }}</span>@endif
                                    <br>
                                    <span class="text-gray-600">{{ $frame['class'] ?? '' }}{{ $frame['type'] ?? '' }}{{ $frame['function'] ?? '' }}()</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

            {{-- Input Data --}}
            @if(!empty($inputData))
            <div class="bg-white border border-gray-200 rounded-xl mt-4 overflow-hidden">
                <div class="bg-gray-100 px-6 py-3 border-b border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700">بيانات الإدخال (Request Input)</h2>
                </div>
                <div class="p-4 max-h-64 overflow-y-auto">
                    <pre class="text-xs font-mono text-gray-700 bg-gray-50 p-4 rounded-lg" dir="ltr">{{ $inputData }}</pre>
                </div>
            </div>
            @endif

            {{-- Headers --}}
            @if(!empty($headers))
            <div class="bg-white border border-gray-200 rounded-xl mt-4 overflow-hidden">
                <div class="bg-gray-100 px-6 py-3 border-b border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700">Headers</h2>
                </div>
                <div class="p-4 max-h-48 overflow-y-auto">
                    <pre class="text-xs font-mono text-gray-700 bg-gray-50 p-4 rounded-lg" dir="ltr">{{ $headers }}</pre>
                </div>
            </div>
            @endif

            {{-- Session Data --}}
            @if(!empty($sessionData))
            <div class="bg-white border border-gray-200 rounded-xl mt-4 overflow-hidden">
                <div class="bg-gray-100 px-6 py-3 border-b border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700">بيانات الجلسة (Session)</h2>
                </div>
                <div class="p-4 max-h-48 overflow-y-auto">
                    <pre class="text-xs font-mono text-gray-700 bg-gray-50 p-4 rounded-lg" dir="ltr">{{ $sessionData }}</pre>
                </div>
            </div>
            @endif

            {{-- Query Log --}}
            @if(!empty($queries))
            <div class="bg-white border border-gray-200 rounded-xl mt-4 overflow-hidden">
                <div class="bg-gray-100 px-6 py-3 border-b border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700">آخر استعلامات SQL</h2>
                </div>
                <div class="p-4 max-h-64 overflow-y-auto">
                    @foreach($queries as $query)
                    <div class="mb-2 p-2 bg-gray-50 rounded text-xs font-mono" dir="ltr">
                        <span class="text-purple-700">{{ $query['query'] ?? '' }}</span>
                        @if(!empty($query['time']))
                        <span class="text-gray-400 ms-2">({{ $query['time'] }}ms)</span>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Copy All Button --}}
            <div class="mt-6">
                <button onclick="copyErrorReport()" id="copyBtn"
                    class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 bg-gray-900 text-white rounded-xl hover:bg-gray-800 text-base font-bold shadow-lg hover:shadow-xl transition-all">
                    <svg id="copyIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                    <svg id="checkIcon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    <span id="copyText">نسخ كل تفاصيل الخطأ</span>
                </button>
            </div>

            {{-- Navigation --}}
            <div class="mt-4 flex items-center gap-4">
                <a href="{{ url()->previous() }}" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 text-sm font-medium">
                    <svg class="w-4 h-4" 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>
                    العودة
                </a>
                <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
                    <svg class="w-4 h-4" 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>
                    الصفحة الرئيسية
                </a>
            </div>
        </div>
    </div>
<textarea id="errorReportData" class="hidden">
=== ERROR REPORT ===
Time: {{ now()->format('Y-m-d H:i:s') }}
Error ID: {{ $errorId ?? 'N/A' }}

--- Exception ---
Class: {{ $exceptionClass ?? 'Unknown' }}
Message: {{ $message ?? 'Unknown error' }}
File: {{ $file ?? 'N/A' }}:{{ $line ?? '?' }}

--- Request ---
URL: {{ $url ?? 'N/A' }}
Method: {{ $method ?? 'N/A' }}
Route: {{ $routeName ?? 'N/A' }}
User: {{ $userName ?? 'Guest' }} (ID: {{ $userId ?? '-' }})
IP: {{ $ip ?? 'N/A' }}
@if(!empty($trace))

--- Stack Trace ---
@foreach($trace as $i => $frame)
#{{ $i }} {{ $frame['file'] ?? '(internal)' }}:{{ $frame['line'] ?? '?' }} {{ ($frame['class'] ?? '') . ($frame['type'] ?? '') . ($frame['function'] ?? '') }}()
@endforeach
@endif
@if(!empty($inputData))

--- Input Data ---
{{ $inputData }}
@endif
@if(!empty($queries))

--- SQL Queries ---
@foreach($queries as $query)
{{ $query['query'] ?? '' }} ({{ $query['time'] ?? '?' }}ms)
@endforeach
@endif
@if(!empty($headers))

--- Headers ---
{{ $headers }}
@endif
@if(!empty($sessionData))

--- Session ---
{{ $sessionData }}
@endif
</textarea>
<script>
function copyErrorReport() {
    const text = document.getElementById('errorReportData').value.trim();
    navigator.clipboard.writeText(text).then(() => {
        document.getElementById('copyIcon').classList.add('hidden');
        document.getElementById('checkIcon').classList.remove('hidden');
        document.getElementById('copyText').textContent = 'تم النسخ!';
        document.getElementById('copyBtn').classList.remove('bg-gray-900', 'hover:bg-gray-800');
        document.getElementById('copyBtn').classList.add('bg-emerald-600', 'hover:bg-emerald-700');
        setTimeout(() => {
            document.getElementById('copyIcon').classList.remove('hidden');
            document.getElementById('checkIcon').classList.add('hidden');
            document.getElementById('copyText').textContent = 'نسخ كل تفاصيل الخطأ';
            document.getElementById('copyBtn').classList.remove('bg-emerald-600', 'hover:bg-emerald-700');
            document.getElementById('copyBtn').classList.add('bg-gray-900', 'hover:bg-gray-800');
        }, 3000);
    });
}
</script>
</body>
</html>
@endunless
