@extends('layouts.app')

@section('title', 'الخطابات الرسمية')

@section('content')
<style>
.stat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.stat-modal-overlay.active{opacity:1;pointer-events:auto}
.stat-modal{background:var(--card-bg,#fff);border-radius:12px;width:92%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.stat-modal-overlay.active .stat-modal{transform:translateY(0)}
.stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#eee)}
.stat-modal-header h3{margin:0;font-size:1.05rem}
.stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary,#666);line-height:1;padding:0 4px}
.stat-modal-close:hover{color:var(--danger,#ef4444)}
.stat-modal-body{padding:20px;overflow-y:auto}
.stat-modal-body table{width:100%;border-collapse:collapse}
.stat-modal-body th,.stat-modal-body td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border,#eee);font-size:.9rem}
.stat-modal-body th{background:var(--bg,#f9fafb);font-weight:600;font-size:.85rem;color:var(--text-secondary,#666)}
.stat-modal-body tr:last-child td{border-bottom:none}
.stat-card[onclick]{cursor:pointer;transition:transform .15s,box-shadow .15s}
.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
</style>

<div class="page-header">
    <h1 class="page-title">📄 الخطابات الرسمية</h1>
    <a href="{{ route('letters.create') }}" class="btn btn-primary">+ طلب خطاب</a>
</div>

@php
    $pendingLetters = $letters->where('status', 'pending');
    $approvedLetters = $letters->where('status', 'approved');
    $letterTypes = [
        'salary_certificate' => 'شهادة راتب',
        'employment_certificate' => 'شهادة عمل',
        'experience_certificate' => 'شهادة خبرة',
        'recommendation' => 'خطاب توصية',
        'warning' => 'إنذار',
        'termination' => 'إنهاء خدمات',
    ];
@endphp

<div class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card" onclick="openStatModal('modal-total-letters')">
        <div class="stat-number">{{ $letters instanceof \Illuminate\Pagination\LengthAwarePaginator ? $letters->total() : $letters->count() }}</div>
        <div class="stat-label">إجمالي الطلبات</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-pending-letters')">
        <div class="stat-number">{{ $letters->where('status', 'pending')->count() }}</div>
        <div class="stat-label">قيد الانتظار</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-approved-letters')">
        <div class="stat-number">{{ $letters->where('status', 'approved')->count() }}</div>
        <div class="stat-label">معتمدة</div>
    </div>
</div>

<div class="card">
    <div class="card-header"><h3>قائمة الطلبات</h3></div>
    @if($letters->count())
    <div style="overflow-x: auto;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>الموظف</th>
                    <th>نوع الخطاب</th>
                    <th>اللغة</th>
                    <th>الحالة</th>
                    <th>التاريخ</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($letters as $letter)
                <tr>
                    <td>{{ $letter->id }}</td>
                    <td style="font-weight: 600;">{{ $letter->employee_name ?? 'غير محدد' }}</td>
                    <td>
                        @php
                            $types = [
                                'salary_certificate' => 'شهادة راتب',
                                'employment_certificate' => 'شهادة عمل',
                                'experience_certificate' => 'شهادة خبرة',
                                'recommendation' => 'خطاب توصية',
                                'warning' => 'إنذار',
                                'termination' => 'إنهاء خدمات',
                            ];
                        @endphp
                        {{ $types[$letter->letter_type ?? ''] ?? ($letter->letter_type ?? '—') }}
                    </td>
                    <td>{{ ($letter->language ?? 'ar') === 'ar' ? 'عربي' : 'English' }}</td>
                    <td>
                        @php
                            $statusMap = ['pending' => 'في الانتظار', 'approved' => 'معتمد', 'rejected' => 'مرفوض'];
                            $statusClass = ['pending' => 'warning', 'approved' => 'active', 'rejected' => 'inactive'];
                        @endphp
                        <span class="status-badge status-{{ $statusClass[$letter->status] ?? 'warning' }}">
                            {{ $statusMap[$letter->status] ?? $letter->status }}
                        </span>
                    </td>
                    <td>{{ isset($letter->created_at) ? \Carbon\Carbon::parse($letter->created_at)->format('Y-m-d') : '—' }}</td>
                    <td>
                        <a href="{{ route('letters.show', $letter->id) }}" class="btn btn-secondary" style="font-size: 0.75rem; padding: 4px 10px;">عرض</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($letters instanceof \Illuminate\Pagination\LengthAwarePaginator)
        <div style="padding: 16px; display: flex; justify-content: center;">
            {{ $letters->links() }}
        </div>
    @endif
    @else
    <div style="padding: 48px 20px; text-align: center;">
        <div style="font-size: 2.5rem; margin-bottom: 12px;">📄</div>
        <h3 style="color: var(--color-text, #1B2A4A); margin-bottom: 8px;">لا توجد طلبات خطابات</h3>
        <p style="color: var(--color-text-secondary, #64748b);">أنشئ طلب خطاب رسمي للموظفين</p>
        <a href="{{ route('letters.create') }}" class="btn btn-primary" style="margin-top: 12px;">طلب خطاب جديد</a>
    </div>
    @endif
</div>

{{-- Modal: Total Letters --}}
<div class="stat-modal-overlay" id="modal-total-letters" onclick="if(event.target===this)closeStatModal(this)">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-file-alt"></i> إجمالي الطلبات</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($letters->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>نوع الخطاب</th>
                        <th>اللغة</th>
                        <th>الحالة</th>
                        <th>التاريخ</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($letters as $letter)
                    <tr>
                        <td>{{ $letter->employee_name ?? 'غير محدد' }}</td>
                        <td>{{ $letterTypes[$letter->letter_type ?? ''] ?? ($letter->letter_type ?? '—') }}</td>
                        <td>{{ ($letter->language ?? 'ar') === 'ar' ? 'عربي' : 'English' }}</td>
                        <td>
                            @php
                                $sMap = ['pending' => 'في الانتظار', 'approved' => 'معتمد', 'rejected' => 'مرفوض'];
                                $sClass = ['pending' => 'warning', 'approved' => 'active', 'rejected' => 'inactive'];
                            @endphp
                            <span class="status-badge status-{{ $sClass[$letter->status] ?? 'warning' }}">
                                {{ $sMap[$letter->status] ?? $letter->status }}
                            </span>
                        </td>
                        <td>{{ isset($letter->created_at) ? \Carbon\Carbon::parse($letter->created_at)->format('Y-m-d') : '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <p style="text-align:center;color:var(--text-secondary,#666);padding:24px 0;">لا توجد طلبات</p>
            @endif
        </div>
    </div>
</div>

{{-- Modal: Pending Letters --}}
<div class="stat-modal-overlay" id="modal-pending-letters" onclick="if(event.target===this)closeStatModal(this)">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-clock"></i> طلبات قيد الانتظار</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($pendingLetters->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>نوع الخطاب</th>
                        <th>اللغة</th>
                        <th>التاريخ</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingLetters as $letter)
                    <tr>
                        <td>{{ $letter->employee_name ?? 'غير محدد' }}</td>
                        <td>{{ $letterTypes[$letter->letter_type ?? ''] ?? ($letter->letter_type ?? '—') }}</td>
                        <td>{{ ($letter->language ?? 'ar') === 'ar' ? 'عربي' : 'English' }}</td>
                        <td>{{ isset($letter->created_at) ? \Carbon\Carbon::parse($letter->created_at)->format('Y-m-d') : '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <p style="text-align:center;color:var(--text-secondary,#666);padding:24px 0;">لا توجد طلبات قيد الانتظار</p>
            @endif
        </div>
    </div>
</div>

{{-- Modal: Approved Letters --}}
<div class="stat-modal-overlay" id="modal-approved-letters" onclick="if(event.target===this)closeStatModal(this)">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-check-circle"></i> طلبات معتمدة</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($approvedLetters->count())
            <table>
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>نوع الخطاب</th>
                        <th>اللغة</th>
                        <th>التاريخ</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($approvedLetters as $letter)
                    <tr>
                        <td>{{ $letter->employee_name ?? 'غير محدد' }}</td>
                        <td>{{ $letterTypes[$letter->letter_type ?? ''] ?? ($letter->letter_type ?? '—') }}</td>
                        <td>{{ ($letter->language ?? 'ar') === 'ar' ? 'عربي' : 'English' }}</td>
                        <td>{{ isset($letter->created_at) ? \Carbon\Carbon::parse($letter->created_at)->format('Y-m-d') : '—' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <p style="text-align:center;color:var(--text-secondary,#666);padding:24px 0;">لا توجد طلبات معتمدة</p>
            @endif
        </div>
    </div>
</div>

<script>
function openStatModal(id){document.getElementById(id).classList.add('active')}
function closeStatModal(el){el.closest('.stat-modal-overlay').classList.remove('active')}
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.stat-modal-overlay.active').forEach(function(m){m.classList.remove('active')})}});
</script>
@endsection