@extends('layouts.app')
@section('title', 'الحقول المخصصة - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">الحقول المخصصة</h1>
        <p class="page-subtitle">إدارة الحقول الإضافية لملفات الموظفين</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('settings.custom-fields.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> إضافة حقل</a>
        <a href="{{ route('settings.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> الإعدادات</a>
    </div>
</div>

<div class="stats-grid cols-3">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary)"><i class="fas fa-th-list"></i></div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-label">إجمالي الحقول</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success)"><i class="fas fa-check-circle"></i></div>
        <div class="stat-value">{{ $stats['active'] }}</div>
        <div class="stat-label">حقول مفعّلة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning)"><i class="fas fa-asterisk"></i></div>
        <div class="stat-value">{{ $stats['required'] }}</div>
        <div class="stat-label">حقول مطلوبة</div>
    </div>
</div>

@php
    $sections = $fields->groupBy('section');
    $sectionLabels = \App\Models\CustomField::SECTION_LABELS;
    $sectionIcons = ['general' => 'fas fa-cube', 'personal' => 'fas fa-user', 'financial' => 'fas fa-money-bill', 'documents' => 'fas fa-file-alt'];
@endphp

@forelse($sections as $section => $sectionFields)
<div class="card" style="margin-bottom: 1.5rem">
    <div class="card-header">
        <h3><i class="{{ $sectionIcons[$section] ?? 'fas fa-cube' }}"></i> {{ $sectionLabels[$section] ?? $section }}</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:40px">#</th>
                    <th>اسم الحقل</th>
                    <th>المفتاح</th>
                    <th>النوع</th>
                    <th>مطلوب</th>
                    <th>الحالة</th>
                    <th>في الجدول</th>
                    <th style="width:140px">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sectionFields->sortBy('sort_order') as $field)
                <tr>
                    <td>{{ $field->sort_order }}</td>
                    <td><strong>{{ $field->name }}</strong></td>
                    <td><code class="code-badge">{{ $field->key }}</code></td>
                    <td>{{ $field->type_label }}</td>
                    <td>
                        @if($field->is_required)
                            <span class="status-badge status-active">مطلوب</span>
                        @else
                            <span style="color: var(--text-muted)">—</span>
                        @endif
                    </td>
                    <td>
                        <form method="POST" action="{{ route('settings.custom-fields.toggle', $field) }}" style="display:inline">
                            @csrf @method('PATCH')
                            <button type="submit" class="btn btn-sm {{ $field->is_active ? 'btn-success' : 'btn-ghost' }}" style="padding:2px 10px; font-size:0.75rem">
                                {{ $field->is_active ? 'مفعّل' : 'معطّل' }}
                            </button>
                        </form>
                    </td>
                    <td>
                        @if($field->show_in_table)
                            <i class="fas fa-check" style="color: var(--success)"></i>
                        @else
                            <span style="color: var(--text-muted)">—</span>
                        @endif
                    </td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('settings.custom-fields.edit', $field) }}" class="action-btn" title="تعديل"><i class="fas fa-edit"></i></a>
                            <form method="POST" action="{{ route('settings.custom-fields.destroy', $field) }}" style="display:inline" onsubmit="return confirm('هل أنت متأكد من حذف هذا الحقل وجميع بياناته؟')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn danger" title="حذف"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@empty
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <i class="fas fa-th-list"></i>
            <h3>لا توجد حقول مخصصة</h3>
            <p>أضف حقولاً إضافية لملفات الموظفين حسب احتياجات شركتك</p>
            <a href="{{ route('settings.custom-fields.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> إضافة حقل</a>
        </div>
    </div>
</div>
@endforelse
@endsection