@extends('layouts.app')

@section('title', 'قوالب العقود')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">قوالب العقود</h1>
        <p style="color: var(--color-text-secondary, #64748b); margin-top: 4px;">قوالب جاهزة لمختلف القطاعات — اختر القالب المناسب وخصّصه</p>
    </div>
    @if(Route::has('contracts.index'))
    <a href="{{ route('contracts.index') }}" class="btn btn-secondary">← العقود</a>
    @endif
</div>

<h3 style="color: var(--color-text, #1B2A4A); font-size: 1.05rem; margin-bottom: 16px;">قوالب حسب القطاع</h3>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 32px;">
    @foreach($templates as $key => $tpl)
    <div class="card" style="padding: 0; overflow: hidden; transition: box-shadow 0.15s;">
        <div style="padding: 20px;">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
                <span style="font-size: 2rem;">{{ $tpl['icon'] }}</span>
                <div>
                    <div style="font-weight: 700; color: var(--color-text, #1B2A4A); font-size: 1rem;">{{ $tpl['name'] }}</div>
                    <div style="font-size: 0.8rem; color: var(--color-text-secondary, #64748b);">{{ $tpl['sector'] }}</div>
                </div>
            </div>
            <div style="font-size: 0.85rem; color: var(--color-text-secondary, #64748b); margin-bottom: 12px;">
                {{ count($tpl['clauses']) }} بند — يشمل الراتب والبدلات، ساعات العمل، الإجازات، الإنهاء
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px;">
                @foreach(array_slice(array_keys($tpl['clauses']), 0, 4) as $clause)
                <span style="background: var(--color-surface-alt, #f1f5f9); padding: 3px 8px; border-radius: 12px; font-size: 0.7rem; color: var(--color-text-secondary, #64748b);">{{ $clause }}</span>
                @endforeach
                @if(count($tpl['clauses']) > 4)
                <span style="background: var(--color-surface-alt, #f1f5f9); padding: 3px 8px; border-radius: 12px; font-size: 0.7rem; color: var(--color-text-secondary, #64748b);">+{{ count($tpl['clauses']) - 4 }}</span>
                @endif
            </div>
            <div style="display: flex; gap: 8px;">
                @if(Route::has('contracts.template-preview'))
                <a href="{{ route('contracts.template-preview', $key) }}" class="btn btn-secondary" style="flex: 1; text-align: center; font-size: 0.85rem;">معاينة</a>
                @endif
                @if(Route::has('contracts.use-template'))
                <a href="{{ route('contracts.use-template', $key) }}" class="btn btn-primary" style="flex: 1; text-align: center; font-size: 0.85rem;">استخدام القالب</a>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

@if($customTemplates->count())
<h3 style="color: var(--color-text, #1B2A4A); font-size: 1.05rem; margin-bottom: 16px;">القوالب المخصصة</h3>
<div class="card">
    <div style="overflow-x: auto;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>اسم القالب</th>
                    <th>القطاع</th>
                    <th>تاريخ الإنشاء</th>
                </tr>
            </thead>
            <tbody>
                @foreach($customTemplates as $ct)
                <tr>
                    <td style="font-weight: 600;">{{ $ct->name }}</td>
                    <td>{{ $ct->sector ?? '—' }}</td>
                    <td>{{ isset($ct->created_at) ? \Carbon\Carbon::parse($ct->created_at)->format('Y-m-d') : '—' }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection