@extends('layouts.app')

@section('title', 'إدارة تذكيرات الوثائق')

@push('styles')
<style>
    .drm-wrapper { padding: 0; }
    .drm-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .drm-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .drm-btn {
        background: #1B2A4A;
        color: #fff !important;
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }
    .drm-btn:hover { background: #2a3f6a; transform: translateY(-1px); }
    .drm-btn-accent {
        background: #E8502F;
        color: #fff !important;
        border: none;
        padding: 0.4rem 1rem;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        text-decoration: none;
    }
    .drm-btn-accent:hover { background: #d4431f; }

    /* Stats Grid - 4 columns */
    .drm-stats {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem;
    }
    @media (max-width: 900px) {
        .drm-stats { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 500px) {
        .drm-stats { grid-template-columns: 1fr !important; }
    }
    .drm-stat-card {
        background: #fff !important;
        border-radius: 12px !important;
        padding: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        border: 1px solid #f0f0f0;
        text-decoration: none;
        color: inherit;
    }
    .drm-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    }
    .drm-stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
    }
    .drm-stat-icon.is-red { background: rgba(232,80,47,0.12); color: #E8502F; }
    .drm-stat-icon.is-yellow { background: rgba(245,158,11,0.12); color: #F59E0B; }
    .drm-stat-icon.is-green { background: rgba(16,185,129,0.12); color: #10B981; }
    .drm-stat-icon.is-navy { background: rgba(27,42,74,0.12); color: #1B2A4A; }
    .drm-stat-label {
        font-size: 0.8rem;
        color: #6b7280;
        margin: 0 0 0.2rem;
        font-weight: 500;
    }
    .drm-stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B2A4A;
    }

    /* Dashboard Grid */
    .drm-dashboard {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        margin-bottom: 1.5rem;
    }
    @media (max-width: 768px) {
        .drm-dashboard { grid-template-columns: 1fr !important; }
    }
    .drm-card {
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        overflow: hidden;
        border: 1px solid #f0f0f0;
    }
    .drm-card-head {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafbfc;
    }
    .drm-card-head h2 {
        font-size: 1rem;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .drm-card-body { padding: 1.25rem; }

    /* Type/Dept items */
    .drm-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0;
    }
    .drm-item + .drm-item { border-top: 1px solid #f5f5f5; }
    .drm-item-label {
        font-size: 0.9rem;
        color: #374151;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .drm-item-count {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1B2A4A;
        background: #f0f2f5;
        padding: 0.15rem 0.6rem;
        border-radius: 6px;
        min-width: 28px;
        text-align: center;
    }
    .drm-progress {
        width: 100%;
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 0.4rem;
        margin-bottom: 0.4rem;
    }
    .drm-progress-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    /* Empty state */
    .drm-empty {
        text-align: center;
        padding: 2rem 1rem;
        color: #9ca3af;
    }
    .drm-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; opacity: 0.5; }
    .drm-empty p { font-size: 0.9rem; margin: 0; }

    /* Recent documents table */
    .drm-table-wrap { overflow-x: auto; }
    .drm-table {
        width: 100%;
        border-collapse: collapse;
    }
    .drm-table th,
    .drm-table td {
        padding: 0.65rem 0.75rem;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .drm-table th {
        background: #fafbfc;
        font-weight: 600;
        color: #1B2A4A;
    }
    .drm-table tr:hover td { background: #fafbfc; }
    .drm-badge {
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        font-size: 0.72rem;
        font-weight: 600;
        display: inline-block;
    }
    .drm-badge-danger { background: rgba(232,80,47,0.12); color: #DC2626; }
    .drm-badge-warning { background: rgba(245,158,11,0.12); color: #D97706; }
    .drm-badge-success { background: rgba(16,185,129,0.12); color: #059669; }

    /* Stat Modal */
    .drm-modal-bg {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }
    .drm-modal-bg.active { display: flex; }
    .drm-modal-box {
        background: #fff;
        border-radius: 16px;
        padding: 2rem;
        min-width: 280px;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        animation: drm-modal-in 0.2s ease;
    }
    @keyframes drm-modal-in {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .drm-modal-box .close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #9ca3af;
        float: left;
        line-height: 1;
        padding: 0;
    }
    .drm-modal-box .close-btn:hover { color: #374151; }
    .drm-modal-box .title {
        font-size: 1rem;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 0.5rem;
        clear: both;
    }
    .drm-modal-box .value {
        font-size: 2.5rem;
        font-weight: 800;
        color: #1B2A4A;
    }
</style>
@endpush

@section('content')
<div class="drm-wrapper">
    <div class="drm-header">
        <h1><i class="fas fa-bell" style="color:#E8502F;margin-left:0.5rem;"></i> إدارة تذكيرات الوثائق</h1>
        <div style="display:flex;gap:0.75rem;flex-wrap:wrap;">
            <a href="{{ url('/document-reminders') }}" class="drm-btn">
                <i class="fas fa-list"></i> إدارة التذكيرات
            </a>
        </div>
    </div>

    {{-- Stats --}}
    <div class="drm-stats">
        <div class="drm-stat-card" onclick="openStatModal('منتهية', '{{ $stats->expired ?? 0 }}', 'red')">
            <div class="drm-stat-icon is-red"><i class="fas fa-times-circle"></i></div>
            <div>
                <div class="drm-stat-label">منتهية</div>
                <div class="drm-stat-number">{{ $stats->expired ?? 0 }}</div>
            </div>
        </div>
        <div class="drm-stat-card" onclick="openStatModal('تنتهي قريباً', '{{ $stats->expiring_30 ?? 0 }}', 'yellow')">
            <div class="drm-stat-icon is-yellow"><i class="fas fa-exclamation-triangle"></i></div>
            <div>
                <div class="drm-stat-label">تنتهي قريباً (30 يوم)</div>
                <div class="drm-stat-number">{{ $stats->expiring_30 ?? 0 }}</div>
            </div>
        </div>
        <div class="drm-stat-card" onclick="openStatModal('نشطة', '{{ $stats->valid ?? 0 }}', 'green')">
            <div class="drm-stat-icon is-green"><i class="fas fa-check-circle"></i></div>
            <div>
                <div class="drm-stat-label">نشطة</div>
                <div class="drm-stat-number">{{ $stats->valid ?? 0 }}</div>
            </div>
        </div>
        <div class="drm-stat-card" onclick="openStatModal('الإجمالي', '{{ $stats->total ?? 0 }}', 'navy')">
            <div class="drm-stat-icon is-navy"><i class="fas fa-file-alt"></i></div>
            <div>
                <div class="drm-stat-label">الإجمالي</div>
                <div class="drm-stat-number">{{ $stats->total ?? 0 }}</div>
            </div>
        </div>
    </div>

    {{-- Dashboard --}}
    <div class="drm-dashboard">
        {{-- By Document Type --}}
        <div class="drm-card">
            <div class="drm-card-head">
                <h2><i class="fas fa-file-invoice" style="color:#1B2A4A;"></i> حسب نوع الوثيقة</h2>
                <span class="drm-badge drm-badge-success" style="font-size:0.75rem;">{{ isset($byType) ? count($byType) : 0 }} أنواع</span>
            </div>
            <div class="drm-card-body">
                @if(isset($byType) && count($byType) > 0)
                    @foreach($byType as $type)
                    <div class="drm-item">
                        <span class="drm-item-label">
                            <i class="fas fa-file-alt" style="color:#1B2A4A;font-size:0.8rem;"></i>
                            {{ $type->document_type ?? $type->name ?? '-' }}
                        </span>
                        <span class="drm-item-count">{{ $type->count ?? 0 }}</span>
                    </div>
                    <div class="drm-progress">
                        <div class="drm-progress-fill" style="width: {{ ($stats->total ?? 0) > 0 ? round(($type->count ?? 0) / $stats->total * 100) : 0 }}%; background: #1B2A4A;"></div>
                    </div>
                    @endforeach
                @else
                    <div class="drm-empty">
                        <i class="fas fa-folder-open"></i>
                        <p>لا توجد بيانات</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- By Department --}}
        <div class="drm-card">
            <div class="drm-card-head">
                <h2><i class="fas fa-building" style="color:#E8502F;"></i> حسب القسم</h2>
                <span class="drm-badge drm-badge-warning" style="font-size:0.75rem;">{{ isset($departmentBreakdown) ? count($departmentBreakdown) : 0 }} أقسام</span>
            </div>
            <div class="drm-card-body">
                @if(isset($departmentBreakdown) && count($departmentBreakdown) > 0)
                    @foreach($departmentBreakdown as $dept)
                    <div class="drm-item">
                        <span class="drm-item-label">
                            <i class="fas fa-building" style="color:#E8502F;font-size:0.8rem;"></i>
                            {{ $dept->department_name ?? '-' }}
                        </span>
                        <span class="drm-item-count">{{ $dept->total ?? 0 }}</span>
                    </div>
                    <div class="drm-progress">
                        <div class="drm-progress-fill" style="width: {{ ($stats->total ?? 0) > 0 ? round(($dept->total ?? 0) / $stats->total * 100) : 0 }}%; background: #E8502F;"></div>
                    </div>
                    @endforeach
                @else
                    <div class="drm-empty">
                        <i class="fas fa-building"></i>
                        <p>لا توجد بيانات</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Recent Documents Table --}}
    <div class="drm-card">
        <div class="drm-card-head">
            <h2><i class="fas fa-clock" style="color:#6366F1;"></i> آخر الوثائق</h2>
            <a href="{{ url('/document-reminders') }}" class="drm-btn-accent">
                <i class="fas fa-eye"></i> عرض الكل
            </a>
        </div>
        <div class="drm-card-body" style="padding:0;">
            @if(isset($recentDocs) && count($recentDocs) > 0)
            <div class="drm-table-wrap">
                <table class="drm-table">
                    <thead>
                        <tr>
                            <th>الموظف</th>
                            <th>نوع الوثيقة</th>
                            <th>تاريخ الانتهاء</th>
                            <th>الحالة</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentDocs as $doc)
                        <tr>
                            <td>{{ $doc->employee_name ?? '-' }}</td>
                            <td>{{ $doc->document_type ?? '-' }}</td>
                            <td>{{ $doc->expiry_date ?? '-' }}</td>
                            <td>
                                @php
                                    $today = now()->toDateString();
                                    $status = 'نشطة';
                                    $badgeClass = 'drm-badge-success';
                                    if(isset($doc->expiry_date)) {
                                        if($doc->expiry_date < $today) {
                                            $status = 'منتهية';
                                            $badgeClass = 'drm-badge-danger';
                                        } elseif($doc->expiry_date <= now()->addDays(30)->toDateString()) {
                                            $status = 'تنتهي قريباً';
                                            $badgeClass = 'drm-badge-warning';
                                        }
                                    }
                                @endphp
                                <span class="drm-badge {{ $badgeClass }}">{{ $status }}</span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="drm-empty">
                <i class="fas fa-inbox"></i>
                <p>لا توجد وثائق حديثة</p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Stat Modal --}}
<div class="drm-modal-bg" id="statModal">
    <div class="drm-modal-box">
        <button class="close-btn" onclick="closeStatModal()">&times;</button>
        <div class="title" id="statModalTitle"></div>
        <div class="value" id="statModalValue"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openStatModal(title, value, color) {
        document.getElementById('statModalTitle').textContent = title;
        document.getElementById('statModalValue').textContent = value;
        var colors = { red: '#E8502F', yellow: '#F59E0B', green: '#10B981', navy: '#1B2A4A' };
        document.getElementById('statModalValue').style.color = colors[color] || '#1B2A4A';
        document.getElementById('statModal').classList.add('active');
    }
    function closeStatModal() {
        document.getElementById('statModal').classList.remove('active');
    }
    document.getElementById('statModal').addEventListener('click', function(e) {
        if (e.target === this) closeStatModal();
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeStatModal();
    });
</script>
@endpush