@extends('layouts.app')

@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('offer-letters.index') }}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-right"></i> رجوع
        </a>
    </div>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('offer-letters.store') }}">
    @csrf

    <div class="card">
        <div class="card-header">بيانات المرشح والوظيفة</div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">طلب التوظيف</label>
                    <select name="job_application_id" id="job_application_id" class="form-select" required>
                        <option value="">اختر طلب التوظيف</option>
                        @foreach($applications as $app)
                            <option value="{{ $app->id }}"
                                data-name="{{ $app->full_name ?? $app->name ?? '' }}"
                                @selected(old('job_application_id', $application->id ?? null) == $app->id)>
                                #{{ $app->id }} - {{ $app->full_name ?? $app->name ?? 'مرشح' }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-hint">سيتم استخدام بيانات هذا الطلب لتعبئة العرض</div>
                </div>

                <div class="form-group">
                    <label class="form-label required">القالب</label>
                    <select name="template_id" class="form-select">
                        <option value="">بدون قالب</option>
                        @foreach($templates as $tpl)
                            <option value="{{ $tpl->id }}" @selected($tpl->is_default)>{{ $tpl->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label required">اسم المرشح</label>
                    <input type="text" name="candidate_name" class="form-input"
                        value="{{ old('candidate_name', $application->full_name ?? $application->name ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label class="form-label required">المسمى الوظيفي</label>
                    <input type="text" name="position_title" class="form-input"
                        value="{{ old('position_title', $application->jobPosting->title ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label class="form-label">القسم</label>
                    <select name="department_id" class="form-select">
                        <option value="">بدون قسم</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" @selected(old('department_id') == $dept->id)>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">تفاصيل الراتب والبدلات</div>
        <div class="card-body">
            <div class="form-grid cols-4">
                <div class="form-group">
                    <label class="form-label required">الراتب الأساسي</label>
                    <input type="number" step="0.01" min="0" name="salary_basic" id="salary_basic" class="form-input calc-field" value="{{ old('salary_basic', 0) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">بدل السكن</label>
                    <input type="number" step="0.01" min="0" name="housing_allowance" id="housing_allowance" class="form-input calc-field" value="{{ old('housing_allowance', 0) }}">
                </div>
                <div class="form-group">
                    <label class="form-label">بدل المواصلات</label>
                    <input type="number" step="0.01" min="0" name="transportation_allowance" id="transportation_allowance" class="form-input calc-field" value="{{ old('transportation_allowance', 0) }}">
                </div>
                <div class="form-group">
                    <label class="form-label">بدلات أخرى</label>
                    <input type="number" step="0.01" min="0" name="other_allowances" id="other_allowances" class="form-input calc-field" value="{{ old('other_allowances', 0) }}">
                </div>
            </div>
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label">إجمالي الحزمة (محسوب تلقائياً)</label>
                    <input type="text" id="total_package_display" class="form-input" value="0.00" readonly>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">تفاصيل العقد</div>
        <div class="card-body">
            <div class="form-grid cols-3">
                <div class="form-group">
                    <label class="form-label required">تاريخ المباشرة</label>
                    <input type="date" name="start_date" class="form-input" value="{{ old('start_date') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">فترة التجربة (بالأشهر)</label>
                    <input type="number" min="0" name="probation_months" class="form-input" value="{{ old('probation_months', 3) }}">
                </div>
                <div class="form-group">
                    <label class="form-label required">نوع العقد</label>
                    <select name="contract_type" id="contract_type" class="form-select" required>
                        <option value="permanent" @selected(old('contract_type')=='permanent')>دائم</option>
                        <option value="temporary" @selected(old('contract_type')=='temporary')>مؤقت</option>
                        <option value="contract" @selected(old('contract_type')=='contract')>تعاقد</option>
                    </select>
                </div>
                <div class="form-group" id="duration_group" style="display:none;">
                    <label class="form-label">مدة العقد (بالأشهر)</label>
                    <input type="number" min="0" name="contract_duration_months" class="form-input" value="{{ old('contract_duration_months') }}">
                </div>
                <div class="form-group">
                    <label class="form-label">العرض ساري حتى</label>
                    <input type="date" name="valid_until" class="form-input" value="{{ old('valid_until', now()->addDays(14)->format('Y-m-d')) }}">
                </div>
            </div>

            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label">المزايا الإضافية</label>
                    <textarea name="benefits_text" class="form-textarea" rows="4">{{ old('benefits_text') }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">الشروط والأحكام</label>
                    <textarea name="terms_text" class="form-textarea" rows="4">{{ old('terms_text') }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> حفظ عرض التوظيف</button>
        <a href="{{ route('offer-letters.index') }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var fields = ['salary_basic', 'housing_allowance', 'transportation_allowance', 'other_allowances'];
    function recalc() {
        var total = 0;
        fields.forEach(function (id) {
            var el = document.getElementById(id);
            total += parseFloat(el.value || 0);
        });
        document.getElementById('total_package_display').value = total.toFixed(2);
    }
    fields.forEach(function (id) {
        document.getElementById(id).addEventListener('input', recalc);
    });
    recalc();

    var contractType = document.getElementById('contract_type');
    var durationGroup = document.getElementById('duration_group');
    function toggleDuration() {
        durationGroup.style.display = contractType.value === 'contract' ? 'block' : 'none';
    }
    contractType.addEventListener('change', toggleDuration);
    toggleDuration();
});
</script>
@endsection