@extends('layouts.app')

@section('title', 'إضافة سجل سعودة جديد')

@push('styles')
<style>
    .page-header-compact {
        background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        color: white;
    }
    .page-header-compact h5 { margin: 0; font-size: 1.1rem; font-weight: 600; }
    .page-header-compact p { margin: 0; font-size: 0.8rem; opacity: 0.9; }
    
    .form-card-compact {
        background: white;
        border-radius: 0.75rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        border: none;
        margin-bottom: 0.75rem;
    }
    .form-card-compact .card-header {
        background: transparent;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.75rem 1rem;
    }
    .form-card-compact .card-header h6 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #4CAF50;
    }
    .form-card-compact .card-body { padding: 1rem; }
    
    .form-label-sm { font-size: 0.8rem; font-weight: 600; color: #566a7f; margin-bottom: 0.25rem; }
    .form-control-sm, .form-select-sm { font-size: 0.85rem; padding: 0.4rem 0.75rem; }
    .form-control-sm:focus, .form-select-sm:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 0 0.15rem rgba(76, 175, 80, 0.15);
    }
    
    .g-compact { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.75rem; }
    
    .input-group-text-sm {
        padding: 0.4rem 0.65rem;
        font-size: 0.85rem;
        background: linear-gradient(135deg, #4CAF50, #81C784);
        color: white;
        border: none;
    }
    
    .btn-compact { padding: 0.5rem 1.25rem; font-size: 0.85rem; }
    
    .tips-card-compact {
        background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
        border: 1px solid #A5D6A7;
        border-radius: 0.75rem;
        padding: 1rem;
    }
    .tips-card-compact h6 { font-size: 0.85rem; color: #2E7D32; margin-bottom: 0.5rem; }
    .tips-card-compact ul { margin: 0; padding-right: 1rem; font-size: 0.8rem; color: #388E3C; }
    .tips-card-compact li { margin-bottom: 0.25rem; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Compact Header -->
    <div class="page-header-compact">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5><i class="bx bx-user-check"></i> إضافة سجل سعودة جديد</h5>
                <p>إضافة سجل سعودة جديد للنظام</p>
            </div>
            <a href="{{ route('saudizations.index') }}" class="btn btn-light btn-sm">
                <i class="bx bx-arrow-back"></i> العودة
            </a>
        </div>
    </div>

    <form action="{{ route('saudizations.store') }}" method="POST">
        @csrf
        <div class="row g-3">
            <!-- Main Form Column -->
            <div class="col-lg-9">
                <!-- Basic Info Card -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-user"></i> المعلومات الأساسية</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-compact">
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">اسم السعودي <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-user"></i></span>
                                    <input type="text" name="saudi_name" class="form-control form-control-sm @error('saudi_name') is-invalid @enderror" value="{{ old('saudi_name') }}" required>
                                </div>
                                @error('saudi_name')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">رقم الهوية</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-id-card"></i></span>
                                    <input type="text" name="id_number" class="form-control form-control-sm @error('id_number') is-invalid @enderror" value="{{ old('id_number') }}">
                                </div>
                                @error('id_number')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">المؤسسة</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-buildings"></i></span>
                                    <input type="text" name="institution" class="form-control form-control-sm @error('institution') is-invalid @enderror" value="{{ old('institution') }}" list="institutionsList">
                                    <datalist id="institutionsList">
                                        @foreach($institutions as $inst)
                                            <option value="{{ $inst }}">
                                        @endforeach
                                    </datalist>
                                </div>
                                @error('institution')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">نوع السعودة</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-category"></i></span>
                                    <input type="text" name="saudization_type" class="form-control form-control-sm @error('saudization_type') is-invalid @enderror" value="{{ old('saudization_type') }}" list="typesList">
                                    <datalist id="typesList">
                                        @foreach($saudizationTypes as $type)
                                            <option value="{{ $type }}">
                                        @endforeach
                                    </datalist>
                                </div>
                                @error('saudization_type')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dates & Insurance Card -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-calendar"></i> التواريخ والتأمينات</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-compact">
                            <div class="col-md-3 mb-2">
                                <label class="form-label-sm">تاريخ السعودة</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-calendar-plus"></i></span>
                                    <input type="text" name="saudization_date" class="form-control form-control-sm @error('saudization_date') is-invalid @enderror" value="{{ old('saudization_date') }}" placeholder="1446/01/15">
                                </div>
                                @error('saudization_date')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label-sm">تاريخ الفصل</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-calendar-x"></i></span>
                                    <input type="text" name="termination_date" class="form-control form-control-sm @error('termination_date') is-invalid @enderror" value="{{ old('termination_date') }}" placeholder="1446/06/15">
                                </div>
                                @error('termination_date')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label-sm">تأمينات</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-shield-quarter"></i></span>
                                    <input type="text" name="insurance" class="form-control form-control-sm @error('insurance') is-invalid @enderror" value="{{ old('insurance') }}">
                                </div>
                                @error('insurance')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label-sm">فوى</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-file"></i></span>
                                    <input type="text" name="fawa" class="form-control form-control-sm @error('fawa') is-invalid @enderror" value="{{ old('fawa') }}">
                                </div>
                                @error('fawa')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label-sm">مكتب العمل</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-building-house"></i></span>
                                    <input type="text" name="labor_office" class="form-control form-control-sm @error('labor_office') is-invalid @enderror" value="{{ old('labor_office') }}">
                                </div>
                                @error('labor_office')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Financial Info Card -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-money"></i> المعلومات المالية والملاحظات</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-compact">
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">الوسيط</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-user-voice"></i></span>
                                    <input type="text" name="mediator" class="form-control form-control-sm @error('mediator') is-invalid @enderror" value="{{ old('mediator') }}" list="mediatorsList">
                                    <datalist id="mediatorsList">
                                        @foreach($mediators as $mediator)
                                            <option value="{{ $mediator }}">
                                        @endforeach
                                    </datalist>
                                </div>
                                @error('mediator')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">المبلغ المتفق عليه (ريال)</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-dollar"></i></span>
                                    <input type="number" step="0.01" name="agreed_amount" class="form-control form-control-sm @error('agreed_amount') is-invalid @enderror" value="{{ old('agreed_amount') }}">
                                </div>
                                @error('agreed_amount')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-2">
                                <label class="form-label-sm">ملاحظات</label>
                                <textarea name="notes" class="form-control form-control-sm @error('notes') is-invalid @enderror" rows="2" placeholder="ملاحظات إضافية...">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex gap-2 justify-content-end mt-2">
                    <a href="{{ route('saudizations.index') }}" class="btn btn-outline-secondary btn-compact">
                        <i class="bx bx-x"></i> إلغاء
                    </a>
                    <button type="submit" class="btn btn-success btn-compact">
                        <i class="bx bx-save"></i> حفظ
                    </button>
                </div>
            </div>

            <!-- Tips Sidebar -->
            <div class="col-lg-3">
                <div class="tips-card-compact">
                    <h6><i class="bx bx-bulb"></i> نصائح سريعة</h6>
                    <ul>
                        <li>اسم السعودي حقل إلزامي</li>
                        <li>التاريخ بالصيغة الهجرية: 1446/01/15</li>
                        <li>يمكن اختيار المؤسسة من القائمة</li>
                        <li>أضف ملاحظات لتتبع المعاملة</li>
                    </ul>
                </div>

                <div class="tips-card-compact mt-3" style="background: linear-gradient(135deg, #FFF8E1, #FFECB3); border-color: #FFD54F;">
                    <h6 style="color: #F57F17;"><i class="bx bx-info-circle"></i> معلومات</h6>
                    <ul style="color: #F57C00;">
                        <li>الوسيط: الشخص المسؤول عن الترتيب</li>
                        <li>المبلغ المتفق: قيمة الاتفاق بالريال</li>
                        <li>فوى: فاتورة الدفع أو الوثيقة</li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection