@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(280px, 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-desc {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 10px;
        line-height: 1.5;
    }
    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .badge-success { background: rgba(16, 185, 129, .12); color: #059669; }
    .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; }
</style>
@endpush

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

<div class="page-header">
    <h1><i class="fa-solid fa-file-lines" style="color:#E8502F;margin-left:8px;"></i> قوالب التهيئة</h1>
    <a href="{{ route('onboarding.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

@if($templates->count() > 0)
<div class="template-grid">
    @foreach($templates as $tpl)
    <div class="template-card">
        <div class="template-name">{{ $tpl->name_ar ?? $tpl->name }}</div>
        <div class="template-desc">{{ $tpl->description ?? 'بدون وصف' }}</div>
        <span class="badge {{ ($tpl->is_active ?? false) ? 'badge-success' : 'badge-secondary' }}">
            {{ ($tpl->is_active ?? false) ? 'نشط' : 'غير نشط' }}
        </span>
    </div>
    @endforeach
</div>
@else
<div class="card">
    <div class="empty-state">
        <i class="fa-solid fa-file-lines"></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('onboarding.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>
            </div>
            <div class="form-group">
                <label for="name_ar">اسم القالب (عربي)</label>
                <input type="text" name="name_ar" id="name_ar" class="form-control" value="{{ old('name_ar') }}">
            </div>
        </div>
        <div class="form-group">
            <label for="description">الوصف</label>
            <textarea name="description" id="description" class="form-control" rows="3">{{ old('description') }}</textarea>
        </div>
        <button type="submit" class="btn-primary"><i class="fa-solid fa-save"></i> إنشاء القالب</button>
    </form>
</div>
@endsection