@extends('layouts.app')

@section('title', 'مركز التقارير')

@push('styles')
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 16px;
    }
    .page-header h1 {
        font-size: 1.5rem;
        color: #1B2A4A;
        margin: 0 0 4px 0;
    }
    .page-header h1 i {
        margin-left: 8px;
    }
    .page-header p {
        color: #6b7280;
        margin: 0;
        font-size: 0.9rem;
    }
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .stat-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .stat-icon.navy { background: rgba(27,42,74,0.1); color: #1B2A4A; }
    .stat-icon.green { background: rgba(16,185,129,0.1); color: #10b981; }
    .stat-icon.yellow { background: rgba(245,158,11,0.1); color: #f59e0b; }
    .stat-icon.blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
    .stat-icon.red { background: rgba(239,68,68,0.1); color: #ef4444; }
    .stat-info {
        display: flex;
        flex-direction: column;
    }
    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B2A4A;
    }
    .stat-label {
        font-size: 0.85rem;
        color: #6b7280;
    }
    .reports-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .report-card {
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        border: 2px solid transparent;
    }
    .report-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        border-color: #E8502F;
    }
    .report-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        flex-shrink: 0;
    }
    .report-icon.navy { background: rgba(27,42,74,0.1); color: #1B2A4A; }
    .report-icon.green { background: rgba(16,185,129,0.1); color: #10b981; }
    .report-icon.yellow { background: rgba(245,158,11,0.1); color: #f59e0b; }
    .report-icon.blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
    .report-icon.red { background: rgba(239,68,68,0.1); color: #ef4444; }
    .report-info {
        flex: 1;
    }
    .report-info h3 {
        margin: 0 0 6px 0;
        color: #1B2A4A;
        font-size: 1.05rem;
    }
    .report-info p {
        margin: 0;
        color: #6b7280;
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .report-arrow {
        color: #d1d5db;
        font-size: 1rem;
        flex-shrink: 0;
        transition: color 0.2s;
    }
    .report-card:hover .report-arrow {
        color: #E8502F;
    }
    .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:#fff;border-radius:12px;width:92%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
    .stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}
    .stat-modal-header h3{margin:0;font-size:1.05rem;color:#1B2A4A}
    .stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#64748b;line-height:1;padding:0 4px}
    .stat-modal-close:hover{color:#ef4444}
    .stat-modal-body{padding:20px;overflow-y:auto}
    @media (max-width: 768px) {
        .stats-row {
            grid-template-columns: repeat(2, 1fr);
        }
        .reports-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1><i class="fas fa-chart-bar"></i> مركز التقارير</h1>
        <p>الوصول السريع لجميع التقارير</p>
    </div>
</div>

<div class="stats-row">
    <div class="stat-card" onclick="openStatModal('reportsStatModal')">
        <div class="stat-icon navy"><i class="fas fa-folder-open"></i></div>
        <div class="stat-info">
            <span class="stat-number">5</span>
            <span class="stat-label">أنواع التقارير</span>
        </div>
    </div>
</div>

<div class="reports-grid">
    <a href="/reports/employees" class="report-card">
        <div class="report-icon navy">
            <i class="fas fa-users"></i>
        </div>
        <div class="report-info">
            <h3>تقارير الموظفين</h3>
            <p>عرض بيانات الموظفين وتصديرها مع خيارات فلترة متعددة</p>
        </div>
        <div class="report-arrow">
            <i class="fas fa-arrow-left"></i>
        </div>
    </a>

    <a href="/reports/attendance" class="report-card">
        <div class="report-icon green">
            <i class="fas fa-fingerprint"></i>
        </div>
        <div class="report-info">
            <h3>تقارير الحضور</h3>
            <p>تقارير تفصيلية عن الحضور والانصراف اليومي للموظفين</p>
        </div>
        <div class="report-arrow">
            <i class="fas fa-arrow-left"></i>
        </div>
    </a>

    <a href="/reports/payroll" class="report-card">
        <div class="report-icon yellow">
            <i class="fas fa-money-bill-wave"></i>
        </div>
        <div class="report-info">
            <h3>تقارير الرواتب</h3>
            <p>كشوف الرواتب والمستحقات والخصومات الشهرية</p>
        </div>
        <div class="report-arrow">
            <i class="fas fa-arrow-left"></i>
        </div>
    </a>

    <a href="/reports/leaves" class="report-card">
        <div class="report-icon blue">
            <i class="fas fa-umbrella-beach"></i>
        </div>
        <div class="report-info">
            <h3>تقارير الإجازات</h3>
            <p>ملخص الإجازات المستخدمة والمتبقية لكل موظف</p>
        </div>
        <div class="report-arrow">
            <i class="fas fa-arrow-left"></i>
        </div>
    </a>

    <a href="/reports/contracts" class="report-card">
        <div class="report-icon red">
            <i class="fas fa-file-contract"></i>
        </div>
        <div class="report-info">
            <h3>تقارير العقود</h3>
            <p>تقارير العقود النشطة والمنتهية وتواريخ التجديد</p>
        </div>
        <div class="report-arrow">
            <i class="fas fa-arrow-left"></i>
        </div>
    </a>
</div>

{{-- Stat Modal --}}
<div class="stat-modal-overlay" id="reportsStatModal">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-folder-open"></i> أنواع التقارير المتاحة</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <div style="text-align:center;padding:20px 0">
                <span style="font-size:2.5rem;font-weight:700;color:#1B2A4A;">5</span><br>
                <span style="color:#6b7280;margin-top:8px;display:inline-block">الموظفين، الحضور، الرواتب، الإجازات، العقود</span>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<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>
@endpush