@extends('layouts.app')
@section('title', 'المسارات التدريبية')
@section('content')
@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.nav-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.nav-tab{padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;color:#64748b;text-decoration:none;background:#f1f5f9;border:none;cursor:pointer;transition:all .2s}
.nav-tab:hover{background:#e2e8f0;color:#1B2A4A}.nav-tab.active{background:#1B2A4A;color:#fff}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.table-wrapper{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:10px 12px;text-align:right;border-bottom:1px solid #f1f5f9;font-size:.9rem}
.data-table th{background:#f8fafc;font-weight:600;color:#64748b;font-size:.85rem}
.data-table tr:hover{background:#f8fafc}
.btn-primary{background:#E8502F;color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.btn-primary:hover{background:#d4431f}
.empty-state{text-align:center;padding:60px 20px;color:#94a3b8}
.empty-state i{font-size:3rem;margin-bottom:12px;display:block}
.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:600px;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 #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}.stat-modal-close:hover{color:#ef4444}
.stat-modal-body{padding:20px;overflow-y:auto}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.85rem;color:#374151}
.form-group input,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem}
</style>
@endpush

<div class="page-header">
    <h1><i class="fas fa-route"></i> المسارات التدريبية</h1>
    <button class="btn-primary" onclick="openStatModal('addPathModal')"><i class="fas fa-plus"></i> إضافة مسار</button>
</div>

<div class="nav-tabs">
    <a href="/training-management/my-training" class="nav-tab"><i class="fas fa-user-graduate"></i> تدريباتي</a>
    <a href="/training-management/courses" class="nav-tab"><i class="fas fa-chalkboard-teacher"></i> الدورات</a>
    <a href="/training-management/paths" class="nav-tab active"><i class="fas fa-route"></i> المسارات</a>
    <a href="/training-management/mandatory-report" class="nav-tab"><i class="fas fa-clipboard-check"></i> تقرير إلزامي</a>
</div>

<div class="card">
    <div class="table-wrapper">
        <table class="data-table">
            <thead><tr><th>#</th><th>اسم المسار</th><th>الوصف</th><th>تاريخ الإنشاء</th></tr></thead>
            <tbody>
            @forelse($paths as $i => $p)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ $p->name ?? $p->name_ar ?? '-' }}</td>
                    <td>{{ \Illuminate\Support\Str::limit($p->description ?? '-', 80) }}</td>
                    <td>{{ $p->created_at ?? '-' }}</td>
                </tr>
            @empty
                <tr><td colspan="4"><div class="empty-state"><i class="fas fa-route"></i><p>لا توجد مسارات تدريبية</p><button class="btn-primary" style="margin-top:12px" onclick="openStatModal('addPathModal')"><i class="fas fa-plus"></i> إضافة مسار جديد</button></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if(method_exists($paths, 'links')){{ $paths->links() }}@endif
</div>

<div class="stat-modal-overlay" id="addPathModal">
    <div class="stat-modal">
        <div class="stat-modal-header"><h3><i class="fas fa-plus-circle"></i> إضافة مسار تدريبي</h3><button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button></div>
        <div class="stat-modal-body">
            <form action="/training-management/paths" method="POST">@csrf
                <div class="form-group"><label>اسم المسار</label><input type="text" name="name" required></div>
                <div class="form-group"><label>الوصف</label><textarea name="description" rows="3"></textarea></div>
                <button type="submit" class="btn-primary" style="width:100%"><i class="fas fa-save"></i> حفظ المسار</button>
            </form>
        </div>
    </div>
</div>

@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
@endsection