@extends('layouts.app')
@section('title', 'إدارة المستندات - DOTS HR Pro')

@push('styles')
<style>
    .doc-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
    .doc-icon.pdf { background: #fce8e8; color: #c62828; }
    .doc-icon.img { background: #e8f0fe; color: #1a56db; }
    .doc-icon.doc { background: #e6f9ee; color: #1a7a3a; }
    .doc-icon.xls { background: #e6f9ee; color: #0d7c3f; }
    .doc-icon.other { background: #f3f4f6; color: #6b7280; }
    .doc-title { font-weight: 600; color: #1B2A4A; }
    .doc-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
    .expiry-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
    .expiry-badge.expired { background: #fce8e8; color: #c62828; }
    .expiry-badge.expiring { background: #fff3cd; color: #856404; }
    .expiry-badge.valid { background: #e6f9ee; color: #1a7a3a; }
    .expiry-badge.none { background: #f3f4f6; color: #6b7280; }
    .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>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-folder-open" style="color: #E8502F;"></i> إدارة المستندات</h1>
        <p class="page-subtitle">{{ $documents->total() }} مستند</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('documents.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> رفع مستند جديد</a>
    </div>
</div>

{{-- Stats --}}
@php
    $expiredDocs = $documents->filter(fn($d) => $d->expiry_date && $d->is_expired);
    $expiringDocs = $documents->filter(fn($d) => $d->expiry_date && $d->is_expiring_soon && !$d->is_expired);
@endphp
<div class="stats-grid cols-3" style="margin-bottom: 20px;">
    <div class="stat-card" onclick="openStatModal('modal-total-docs')">
        <div class="stat-icon" style="background: #e8f0fe;"><i class="fas fa-file-alt" style="color: #1a56db;"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $totalDocs }}</div>
            <div class="stat-label">إجمالي المستندات</div>
        </div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-expired-docs')">
        <div class="stat-icon" style="background: #fce8e8;"><i class="fas fa-exclamation-triangle" style="color: #c62828;"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $expiredCount }}</div>
            <div class="stat-label">منتهية الصلاحية</div>
        </div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-expiring-docs')">
        <div class="stat-icon" style="background: #fff3cd;"><i class="fas fa-clock" style="color: #856404;"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $expiringSoonCount }}</div>
            <div class="stat-label">تنتهي قريباً (30 يوم)</div>
        </div>
    </div>
</div>

{{-- Filters --}}
<div class="filter-bar">
    <form method="GET" class="filter-form">
        <div class="filter-group">
            <select name="employee_id" class="form-select">
                <option value="">كل الموظفين</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}" {{ ($filters['employee_id'] ?? '') == $emp->id ? 'selected' : '' }}>{{ $emp->full_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <select name="type" class="form-select">
                <option value="">كل الأنواع</option>
                @foreach($typeLabels as $key => $label)
                    <option value="{{ $key }}" {{ ($filters['type'] ?? '') == $key ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <select name="status" class="form-select">
                <option value="">كل الحالات</option>
                <option value="valid" {{ ($filters['status'] ?? '') == 'valid' ? 'selected' : '' }}>سارية</option>
                <option value="expiring_soon" {{ ($filters['status'] ?? '') == 'expiring_soon' ? 'selected' : '' }}>تنتهي قريباً</option>
                <option value="expired" {{ ($filters['status'] ?? '') == 'expired' ? 'selected' : '' }}>منتهية</option>
            </select>
        </div>
        <div class="filter-group">
            <input type="text" name="search" class="form-input" placeholder="بحث بالعنوان..." value="{{ $filters['search'] ?? '' }}">
        </div>
        <button type="submit" class="btn btn-secondary"><i class="fas fa-filter"></i> تصفية</button>
        @if(array_filter($filters))
            <a href="{{ route('documents.index') }}" style="color: #6b7280; font-size: 13px; text-decoration: none; align-self: center; padding: 8px;"><i class="fas fa-times"></i> إعادة ضبط</a>
        @endif
    </form>
</div>

{{-- Table --}}
<div class="card">
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>المستند</th>
                    <th>الموظف</th>
                    <th>النوع</th>
                    <th>تاريخ الانتهاء</th>
                    <th>الحالة</th>
                    <th>تاريخ الرفع</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($documents as $doc)
                <tr>
                    <td>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            @php
                                $ext = strtolower(pathinfo($doc->file_name ?? '', PATHINFO_EXTENSION));
                                $iconClass = match(true) {
                                    $ext === 'pdf' => 'pdf',
                                    in_array($ext, ['jpg','jpeg','png']) => 'img',
                                    in_array($ext, ['doc','docx']) => 'doc',
                                    in_array($ext, ['xls','xlsx']) => 'xls',
                                    default => 'other',
                                };
                                $iconName = match($iconClass) {
                                    'pdf' => 'fa-file-pdf',
                                    'img' => 'fa-file-image',
                                    'doc' => 'fa-file-word',
                                    'xls' => 'fa-file-excel',
                                    default => 'fa-file',
                                };
                            @endphp
                            <div class="doc-icon {{ $iconClass }}"><i class="fas {{ $iconName }}"></i></div>
                            <div>
                                <div class="doc-title">{{ $doc->title }}</div>
                                <div class="doc-meta">{{ $doc->file_name }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar-sm">{{ mb_substr($doc->employee->first_name ?? '?', 0, 1) }}</div>
                            <span>{{ $doc->employee->full_name ?? '—' }}</span>
                        </div>
                    </td>
                    <td>{{ $typeLabels[$doc->type] ?? $doc->type }}</td>
                    <td>{{ $doc->expiry_date ? $doc->expiry_date->format('Y/m/d') : '—' }}</td>
                    <td>
                        @if(!$doc->expiry_date)
                            <span class="expiry-badge none">بدون انتهاء</span>
                        @elseif($doc->is_expired)
                            <span class="expiry-badge expired"><i class="fas fa-times-circle"></i> منتهية</span>
                        @elseif($doc->is_expiring_soon)
                            <span class="expiry-badge expiring"><i class="fas fa-exclamation-circle"></i> تنتهي قريباً</span>
                        @else
                            <span class="expiry-badge valid"><i class="fas fa-check-circle"></i> سارية</span>
                        @endif
                    </td>
                    <td>{{ $doc->created_at->format('Y/m/d') }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('documents.show', $doc) }}" class="action-btn" title="عرض"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('documents.download', $doc) }}" class="action-btn" title="تحميل"><i class="fas fa-download"></i></a>
                            <a href="{{ route('documents.edit', $doc) }}" class="action-btn" title="تعديل"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('documents.destroy', $doc) }}" style="display:inline" onsubmit="return confirm('هل أنت متأكد من حذف هذا المستند؟')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn danger" title="حذف"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7">
                        <div class="empty-state">
                            <i class="fas fa-folder-open"></i>
                            <h3>لا توجد مستندات</h3>
                            <p>ابدأ برفع مستندات الموظفين</p>
                            <a href="{{ route('documents.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> رفع مستند</a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($documents->hasPages())
        <div class="pagination-wrap">{{ $documents->links() }}</div>
    @endif
</div>
{{-- Stat Card Modals --}}
<div class="stat-modal-overlay" id="modal-total-docs" onclick="if(event.target===this)closeStatModal(this)">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-file-alt" style="color: #1a56db; margin-left: 8px;"></i> إجمالي المستندات</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <p style="font-size: .8rem; color: #6b7280; margin: 0 0 12px;">يعرض بيانات الصفحة الحالية</p>
            <table>
                <thead>
                    <tr>
                        <th>المستند</th>
                        <th>الموظف</th>
                        <th>النوع</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($documents as $doc)
                    <tr>
                        <td>{{ $doc->title }}</td>
                        <td>{{ $doc->employee->full_name ?? '—' }}</td>
                        <td>{{ $typeLabels[$doc->type] ?? $doc->type }}</td>
                        <td>
                            @if(!$doc->expiry_date)
                                <span class="expiry-badge none">بدون انتهاء</span>
                            @elseif($doc->is_expired)
                                <span class="expiry-badge expired">منتهية</span>
                            @elseif($doc->is_expiring_soon)
                                <span class="expiry-badge expiring">تنتهي قريباً</span>
                            @else
                                <span class="expiry-badge valid">سارية</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="4" style="text-align:center;color:#6b7280;">لا توجد مستندات</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="stat-modal-overlay" id="modal-expired-docs" onclick="if(event.target===this)closeStatModal(this)">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-exclamation-triangle" style="color: #c62828; margin-left: 8px;"></i> مستندات منتهية الصلاحية</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <p style="font-size: .8rem; color: #6b7280; margin: 0 0 12px;">يعرض بيانات الصفحة الحالية</p>
            <table>
                <thead>
                    <tr>
                        <th>المستند</th>
                        <th>الموظف</th>
                        <th>تاريخ الانتهاء</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expiredDocs as $doc)
                    <tr>
                        <td>{{ $doc->title }}</td>
                        <td>{{ $doc->employee->full_name ?? '—' }}</td>
                        <td>{{ $doc->expiry_date->format('Y/m/d') }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="3" style="text-align:center;color:#6b7280;">لا توجد مستندات منتهية</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="stat-modal-overlay" id="modal-expiring-docs" onclick="if(event.target===this)closeStatModal(this)">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-clock" style="color: #856404; margin-left: 8px;"></i> مستندات تنتهي قريباً</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <p style="font-size: .8rem; color: #6b7280; margin: 0 0 12px;">يعرض بيانات الصفحة الحالية</p>
            <table>
                <thead>
                    <tr>
                        <th>المستند</th>
                        <th>الموظف</th>
                        <th>تاريخ الانتهاء</th>
                        <th>الأيام المتبقية</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expiringDocs as $doc)
                    <tr>
                        <td>{{ $doc->title }}</td>
                        <td>{{ $doc->employee->full_name ?? '—' }}</td>
                        <td>{{ $doc->expiry_date->format('Y/m/d') }}</td>
                        <td>{{ \Carbon\Carbon::parse($doc->expiry_date)->diffInDays(now()) }} يوم</td>
                    </tr>
                    @empty
                    <tr><td colspan="4" style="text-align:center;color:#6b7280;">لا توجد مستندات تنتهي قريباً</td></tr>
                    @endforelse
                </tbody>
            </table>
        </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