@extends('layouts.app')

@section('title', 'قوالب الخطابات - DOTS HR Pro')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;
    }
    .page-header h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .btn-primary {
        background: #E8502F;
        color: #fff;
        border: 1px solid #E8502F;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s;
    }
    .btn-primary:hover { background: #d1441f; border-color: #d1441f; color: #fff; }
    .btn-back {
        background: #fff;
        color: #1B2A4A;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all .2s;
    }
    .btn-back:hover { background: #f8fafc; color: #1B2A4A; border-color: #cbd5e1; }
    .card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 24px;
    }
    .card-title {
        font-size: 16px;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0 0 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .alert-success {
        background: rgba(16, 185, 129, .08);
        border: 1px solid rgba(16, 185, 129, .3);
        color: #065f46;
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .alert-error {
        background: rgba(239, 68, 68, .08);
        border: 1px solid rgba(239, 68, 68, .3);
        color: #991b1b;
        padding: 14px 18px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .template-card {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 18px;
        transition: box-shadow .2s;
    }
    .template-card:hover { box-shadow: 0 2px 12px rgba(27,42,74,.07); }
    .template-name {
        font-size: 16px;
        font-weight: 700;
        color: #1B2A4A;
        margin-bottom: 6px;
    }
    .template-type {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 10px;
    }
    .template-preview {
        font-size: 13px;
        color: #94a3b8;
        line-height: 1.5;
        max-height: 60px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .badge-info { background: rgba(59, 130, 246, .12); color: #2563eb; }
    .badge-secondary { background: rgba(100, 116, 139, .12); color: #475569; }
    .form-group {
        margin-bottom: 18px;
    }
    .form-group label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #1B2A4A;
        margin-bottom: 6px;
    }
    .form-control {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 14px;
        color: #1B2A4A;
        background: #fff;
        box-sizing: border-box;
    }
    .form-control:focus {
        outline: none;
        border-color: #E8502F;
        box-shadow: 0 0 0 3px rgba(232, 80, 47, .1);
    }
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
    }
    .empty-state i {
        font-size: 42px;
        margin-bottom: 14px;
        color: #cbd5e1;
    }
    .empty-state p { font-size: 15px; margin: 0; }
    .text-danger { color: #dc2626; font-size: 13px; margin-top: 4px; }
    .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
    .stat-card-item{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;align-items:center;gap:14px}
    .stat-icon-box{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
    .stat-info-box .stat-val{font-size:22px;font-weight:700;color:#1B2A4A;line-height:1.2}
    .stat-info-box .stat-lbl{font-size:13px;color:#64748b;margin-top:2px}
    .stat-card-item[onclick]{cursor:pointer;transition:transform .15s,box-shadow .15s}
    .stat-card-item[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
    .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: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 #eee}
    .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:#666;line-height:1;padding:0 4px}
    .stat-modal-close:hover{color:#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 #eee;font-size:.9rem}
    .stat-modal-body th{background:#f9fafb;font-weight:600;font-size:.85rem;color:#666}
    .stat-modal-body tr:last-child td{border-bottom:none}
</style>
@endpush

@section('content')
@php $templates = $templates ?? collect(); @endphp

<div class="page-header">
    <h1><i class="fa-solid fa-file-contract" style="color:#E8502F;margin-left:8px;"></i> قوالب الخطابات</h1>
    <a href="{{ route('letters.index') }}" class="btn-back"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
</div>

@if(session('success'))
    <div class="alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert-error">{{ session('error') }}</div>
@endif

@php
    $typeLabels = [
        'salary_certificate' => 'شهادة راتب',
        'experience_letter' => 'شهادة خبرة',
        'employment_letter' => 'خطاب تعريف بالعمل',
        'noc' => 'عدم ممانعة',
        'warning_letter' => 'إنذار',
        'promotion_letter' => 'ترقية',
        'other' => 'أخرى',
    ];
    $typeGroups = $templates->groupBy(fn($t) => $t->letter_type ?? 'other');
@endphp

<div class="stats-row">
    <div class="stat-card-item" onclick="openStatModal('modal-total-tpl')">
        <div class="stat-icon-box" style="background:rgba(27,42,74,.1);color:#1B2A4A"><i class="fa-solid fa-file-lines"></i></div>
        <div class="stat-info-box">
            <div class="stat-val">{{ $templates->count() }}</div>
            <div class="stat-lbl">إجمالي القوالب</div>
        </div>
    </div>
    <div class="stat-card-item" onclick="openStatModal('modal-types-tpl')">
        <div class="stat-icon-box" style="background:rgba(16,185,129,.1);color:#059669"><i class="fa-solid fa-layer-group"></i></div>
        <div class="stat-info-box">
            <div class="stat-val">{{ $typeGroups->count() }}</div>
            <div class="stat-lbl">أنواع مختلفة</div>
        </div>
    </div>
</div>

@if($templates->count() > 0)
<div class="template-grid">
    @foreach($templates as $tpl)
    <div class="template-card">
        <div class="template-name">{{ $tpl->name }}</div>
        <div class="template-type">
            <span class="badge badge-info">{{ $tpl->letter_type ?? 'عام' }}</span>
        </div>
        <div class="template-preview">{{ Str::limit($tpl->content ?? '', 120) }}</div>
    </div>
    @endforeach
</div>
@else
<div class="card">
    <div class="empty-state">
        <i class="fa-solid fa-file-contract"></i>
        <p>لا توجد قوالب خطابات بعد</p>
    </div>
</div>
@endif

<div class="card">
    <div class="card-title"><i class="fa-solid fa-plus" style="color:#E8502F;"></i> إنشاء قالب جديد</div>
    <form action="{{ route('letters.templates.store') }}" method="POST">
        @csrf
        <div class="form-row">
            <div class="form-group">
                <label for="name">اسم القالب <span style="color:#dc2626;">*</span></label>
                <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}" required>
                @error('name') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label for="letter_type">نوع الخطاب <span style="color:#dc2626;">*</span></label>
                <select name="letter_type" id="letter_type" class="form-control" required>
                    <option value="">اختر النوع...</option>
                    <option value="salary_certificate" {{ old('letter_type') === 'salary_certificate' ? 'selected' : '' }}>شهادة راتب</option>
                    <option value="experience_letter" {{ old('letter_type') === 'experience_letter' ? 'selected' : '' }}>شهادة خبرة</option>
                    <option value="employment_letter" {{ old('letter_type') === 'employment_letter' ? 'selected' : '' }}>خطاب تعريف بالعمل</option>
                    <option value="noc" {{ old('letter_type') === 'noc' ? 'selected' : '' }}>عدم ممانعة</option>
                    <option value="warning_letter" {{ old('letter_type') === 'warning_letter' ? 'selected' : '' }}>إنذار</option>
                    <option value="promotion_letter" {{ old('letter_type') === 'promotion_letter' ? 'selected' : '' }}>ترقية</option>
                    <option value="other" {{ old('letter_type') === 'other' ? 'selected' : '' }}>أخرى</option>
                </select>
                @error('letter_type') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
        </div>

        <div class="form-group">
            <label for="content">محتوى القالب <span style="color:#dc2626;">*</span></label>
            <textarea name="content" id="content" class="form-control" rows="8" required placeholder="استخدم المتغيرات مثل: {employee_name}, {employee_number}, {department}, {job_title}, {hire_date}, {salary}, {date}">{{ old('content') }}</textarea>
            <span style="font-size:12px;color:#94a3b8;margin-top:4px;display:block;">المتغيرات المتاحة: {employee_name}, {employee_number}, {department}, {job_title}, {hire_date}, {salary}, {date}</span>
            @error('content') <div class="text-danger">{{ $message }}</div> @enderror
        </div>

        <button type="submit" class="btn-primary"><i class="fa-solid fa-save"></i> حفظ القالب</button>
    </form>
</div>
{{-- Modal: Total Templates --}}
<div class="stat-modal-overlay" id="modal-total-tpl" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fa-solid fa-file-lines" style="color:#1B2A4A;margin-left:6px;"></i> جميع القوالب ({{ $templates->count() }})</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if($templates->count() > 0)
            <table>
                <thead>
                    <tr>
                        <th>اسم القالب</th>
                        <th>النوع</th>
                        <th>معاينة المحتوى</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($templates as $tpl)
                    <tr>
                        <td>{{ $tpl->name }}</td>
                        <td>{{ $typeLabels[$tpl->letter_type ?? ''] ?? $tpl->letter_type ?? 'عام' }}</td>
                        <td>{{ Str::limit($tpl->content ?? '', 80) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <p style="text-align:center;color:#94a3b8;padding:20px 0;">لا توجد قوالب</p>
            @endif
        </div>
    </div>
</div>

{{-- Modal: Templates by Type --}}
<div class="stat-modal-overlay" id="modal-types-tpl" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fa-solid fa-layer-group" style="color:#059669;margin-left:6px;"></i> القوالب حسب النوع ({{ $typeGroups->count() }} أنواع)</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @forelse($typeGroups as $type => $group)
            <h4 style="font-size:15px;font-weight:700;color:#1B2A4A;margin:16px 0 8px;border-bottom:2px solid #e2e8f0;padding-bottom:6px;">
                {{ $typeLabels[$type ?? ''] ?? $type ?? 'عام' }} ({{ $group->count() }})
            </h4>
            <table>
                <thead>
                    <tr>
                        <th>اسم القالب</th>
                        <th>معاينة المحتوى</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($group as $tpl)
                    <tr>
                        <td>{{ $tpl->name }}</td>
                        <td>{{ Str::limit($tpl->content ?? '', 80) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @empty
            <p style="text-align:center;color:#94a3b8;padding:20px 0;">لا توجد قوالب</p>
            @endforelse
        </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