@extends('layouts.app')

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

@push('styles')
<style>
    .page-header {
        background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
        color: white;
        border-radius: 1rem;
        padding: 1.5rem 2rem;
        margin-bottom: 1.5rem;
    }
    .page-header h4 {
        color: white;
        margin-bottom: 0.25rem;
    }
    .page-header p {
        color: rgba(255,255,255,0.8);
        margin-bottom: 0;
    }
    .form-card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        overflow: hidden;
    }
    .form-card .card-header {
        background: white;
        border-bottom: 1px solid #e9ecef;
        padding: 1.25rem 1.5rem;
    }
    .section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: #333;
        font-size: 1rem;
        margin-bottom: 0;
    }
    .section-title i {
        color: #4CAF50;
        font-size: 1.25rem;
    }
    .form-card .card-body {
        padding: 1.5rem;
    }
    .form-section {
        background: #f8f9fa;
        border-radius: 0.75rem;
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .form-section-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: #566a7f;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .form-section-title i {
        color: #4CAF50;
    }
    .form-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #566a7f;
        margin-bottom: 0.5rem;
    }
    .form-label .required {
        color: #ff3e1d;
    }
    .form-control, .form-select {
        border-radius: 0.5rem;
        border: 1px solid #d9dee3;
        padding: 0.625rem 1rem;
        transition: all 0.2s ease;
    }
    .form-control:focus, .form-select:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }
    .input-group-text {
        background: #f8f9fa;
        border-color: #d9dee3;
        color: #697a8d;
    }
    .date-section {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, rgba(129, 199, 132, 0.05) 100%);
        border: 1px solid rgba(76, 175, 80, 0.1);
    }
    .action-bar {
        background: #f8f9fa;
        border-radius: 0 0 1rem 1rem;
        padding: 1.25rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .btn-submit {
        padding: 0.625rem 2rem;
        font-weight: 500;
    }
    .current-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: rgba(76, 175, 80, 0.08);
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .current-info-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 1.25rem;
    }
    .current-info-details h6 {
        margin-bottom: 0.25rem;
        color: #333;
    }
    .current-info-details small {
        color: #697a8d;
    }
    .btn-primary {
        background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
        border: none;
    }
    .btn-primary:hover {
        background: linear-gradient(135deg, #388E3C 0%, #4CAF50 100%);
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <h4><i class='bx bx-edit me-2'></i>تعديل سجل السعودة</h4>
                <p>تعديل بيانات السعودة</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('saudizations.show', $saudization) }}" class="btn btn-light">
                    <i class='bx bx-show'></i> عرض
                </a>
                <a href="{{ route('saudizations.index') }}" class="btn btn-light">
                    <i class='bx bx-arrow-back'></i> العودة للقائمة
                </a>
            </div>
        </div>
    </div>

    <form action="{{ route('saudizations.update', $saudization) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-lg-8">
                <!-- بطاقة البيانات الأساسية -->
                <div class="card form-card mb-4">
                    <div class="card-header">
                        <h6 class="section-title">
                            <i class='bx bx-user'></i>
                            البيانات الأساسية
                        </h6>
                    </div>
                    <div class="card-body">
                        <!-- معلومات السعودة الحالية -->
                        <div class="current-info">
                            <div class="current-info-avatar">
                                {{ mb_substr($saudization->saudi_name, 0, 1) }}
                            </div>
                            <div class="current-info-details">
                                <h6>{{ $saudization->saudi_name }}</h6>
                                <small><i class='bx bx-id-card'></i> {{ $saudization->id_number }}</small>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="saudi_name">اسم السعودي <span class="required">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-user'></i></span>
                                    <input type="text" class="form-control @error('saudi_name') is-invalid @enderror" id="saudi_name" name="saudi_name" value="{{ old('saudi_name', $saudization->saudi_name) }}" placeholder="أدخل اسم السعودي" required>
                                </div>
                                @error('saudi_name')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="id_number">رقم الهوية</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-id-card'></i></span>
                                    <input type="text" class="form-control @error('id_number') is-invalid @enderror" id="id_number" name="id_number" value="{{ old('id_number', $saudization->id_number) }}" placeholder="أدخل رقم الهوية">
                                </div>
                                @error('id_number')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- بطاقة معلومات العمل -->
                <div class="card form-card mb-4">
                    <div class="card-header">
                        <h6 class="section-title">
                            <i class='bx bx-briefcase'></i>
                            معلومات العمل
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="institution">المؤسسة</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-building'></i></span>
                                    <input type="text" class="form-control @error('institution') is-invalid @enderror" id="institution" name="institution" value="{{ old('institution', $saudization->institution) }}" list="institutionsList" placeholder="اختر أو أدخل المؤسسة">
                                </div>
                                <datalist id="institutionsList">
                                    @foreach($institutions as $inst)
                                        <option value="{{ $inst }}">
                                    @endforeach
                                </datalist>
                                @error('institution')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="saudization_type">نوع السعودة</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-category'></i></span>
                                    <input type="text" class="form-control @error('saudization_type') is-invalid @enderror" id="saudization_type" name="saudization_type" value="{{ old('saudization_type', $saudization->saudization_type) }}" list="typesList" placeholder="اختر أو أدخل النوع">
                                </div>
                                <datalist id="typesList">
                                    @foreach($saudizationTypes as $type)
                                        <option value="{{ $type }}">
                                    @endforeach
                                </datalist>
                                @error('saudization_type')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="insurance">التأمينات</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-shield'></i></span>
                                    <input type="text" class="form-control @error('insurance') is-invalid @enderror" id="insurance" name="insurance" value="{{ old('insurance', $saudization->insurance) }}" placeholder="حالة التأمينات">
                                </div>
                                @error('insurance')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="fawa">فوى</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-check-shield'></i></span>
                                    <input type="text" class="form-control @error('fawa') is-invalid @enderror" id="fawa" name="fawa" value="{{ old('fawa', $saudization->fawa) }}" placeholder="حالة فوى">
                                </div>
                                @error('fawa')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="labor_office">مكتب العمل</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-building-house'></i></span>
                                    <input type="text" class="form-control @error('labor_office') is-invalid @enderror" id="labor_office" name="labor_office" value="{{ old('labor_office', $saudization->labor_office) }}" placeholder="مكتب العمل">
                                </div>
                                @error('labor_office')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="notes">ملاحظات</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class='bx bx-note'></i></span>
                                    <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="2" placeholder="أي ملاحظات إضافية">{{ old('notes', $saudization->notes) }}</textarea>
                                </div>
                                @error('notes')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- بطاقة التواريخ -->
                <div class="card form-card mb-4">
                    <div class="card-header">
                        <h6 class="section-title">
                            <i class='bx bx-calendar'></i>
                            التواريخ
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="form-section date-section">
                            <div class="form-section-title">
                                <i class='bx bx-calendar-star'></i>
                                <span>تواريخ السعودة</span>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">تاريخ السعودة</label>
                                <input type="text" class="form-control @error('saudization_date') is-invalid @enderror" name="saudization_date" value="{{ old('saudization_date', $saudization->saudization_date) }}" placeholder="مثال: 1446-01-15">
                                @error('saudization_date')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div>
                                <label class="form-label">تاريخ الفصل</label>
                                <input type="text" class="form-control @error('termination_date') is-invalid @enderror" name="termination_date" value="{{ old('termination_date', $saudization->termination_date) }}" placeholder="مثال: 1447-06-20">
                                @error('termination_date')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- بطاقة المعلومات المالية -->
                <div class="card form-card mb-4">
                    <div class="card-header">
                        <h6 class="section-title">
                            <i class='bx bx-money'></i>
                            المعلومات المالية
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label" for="mediator">الوسيط</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class='bx bx-user-voice'></i></span>
                                <input type="text" class="form-control @error('mediator') is-invalid @enderror" id="mediator" name="mediator" value="{{ old('mediator', $saudization->mediator) }}" list="mediatorsList" placeholder="اسم الوسيط">
                            </div>
                            <datalist id="mediatorsList">
                                @foreach($mediators as $mediator)
                                    <option value="{{ $mediator }}">
                                @endforeach
                            </datalist>
                            @error('mediator')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label class="form-label" for="agreed_amount">المبلغ المتفق عليه (ريال)</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class='bx bx-dollar'></i></span>
                                <input type="number" step="0.01" class="form-control @error('agreed_amount') is-invalid @enderror" id="agreed_amount" name="agreed_amount" value="{{ old('agreed_amount', $saudization->agreed_amount) }}" placeholder="0.00">
                            </div>
                            @error('agreed_amount')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- بطاقة معلومات السجل -->
                <div class="card form-card">
                    <div class="card-header">
                        <h6 class="section-title">
                            <i class='bx bx-info-circle'></i>
                            معلومات السجل
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-column gap-2">
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">تاريخ الإضافة:</small>
                                <small>{{ $saudization->created_at->format('Y-m-d H:i') }}</small>
                            </div>
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">آخر تعديل:</small>
                                <small>{{ $saudization->updated_at->format('Y-m-d H:i') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- شريط الإجراءات -->
        <div class="card form-card">
            <div class="action-bar">
                <div>
                    <a href="{{ route('saudizations.index') }}" class="btn btn-label-secondary">
                        <i class='bx bx-x me-1'></i> إلغاء
                    </a>
                </div>
                <div class="d-flex gap-2">
                    <button type="reset" class="btn btn-label-warning">
                        <i class='bx bx-reset me-1'></i> إعادة تعيين
                    </button>
                    <button type="submit" class="btn btn-primary btn-submit">
                        <i class='bx bx-save me-1'></i> حفظ التغييرات
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection