@extends('layouts.app')
@section('title', 'طلب مالي جديد')

@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('financial-requests.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> العودة</a>
    </div>
</div>

@if(session('error'))
    <div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>
@endif

<form action="{{ route('financial-requests.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="card">
        <div class="card-header"><h3 class="card-title"><i class="fas fa-file-alt"></i> بيانات الطلب</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label required">نوع الطلب</label>
                    <select name="type" id="requestType" class="form-select" required onchange="toggleFields()">
                        <option value="">اختر...</option>
                        <option value="advance">سلفة مالية</option>
                        <option value="business_trip">انتداب</option>
                        <option value="expense">تعويض مصاريف</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label required">المبلغ</label>
                    <input type="number" name="amount" class="form-input" step="0.01" min="0.01" required>
                </div>
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label required">الموضوع</label>
                    <input type="text" name="subject" class="form-input" required placeholder="وصف مختصر للطلب">
                </div>
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">التفاصيل</label>
                    <textarea name="description" class="form-textarea" rows="3" placeholder="تفاصيل إضافية..."></textarea>
                </div>
            </div>

            {{-- حقول الانتداب --}}
            <div id="tripFields" style="display: none; margin-top: 1rem;">
                <h4 style="margin-bottom: 1rem; color: var(--primary);"><i class="fas fa-plane"></i> بيانات الانتداب</h4>
                <div class="form-grid cols-3">
                    <div class="form-group">
                        <label class="form-label">الوجهة</label>
                        <input type="text" name="trip_destination" class="form-input" placeholder="مدينة / دولة">
                    </div>
                    <div class="form-group">
                        <label class="form-label">من تاريخ</label>
                        <input type="date" name="trip_start_date" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date" name="trip_end_date" class="form-input">
                    </div>
                </div>
            </div>

            {{-- حقول التعويض --}}
            <div id="expenseFields" style="display: none; margin-top: 1rem;">
                <h4 style="margin-bottom: 1rem; color: var(--primary);"><i class="fas fa-receipt"></i> بيانات المصروف</h4>
                <div class="form-grid cols-3">
                    <div class="form-group">
                        <label class="form-label">فئة المصروف</label>
                        <select name="expense_category" class="form-select">
                            <option value="">اختر...</option>
                            <option value="transport">مواصلات</option>
                            <option value="meals">وجبات</option>
                            <option value="accommodation">إقامة</option>
                            <option value="supplies">مستلزمات</option>
                            <option value="other">أخرى</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">تاريخ المصروف</label>
                        <input type="date" name="expense_date" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">إيصال / مرفق</label>
                        <input type="file" name="receipt_attachment" class="form-input" accept="image/*,.pdf">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions" style="margin-top: 1rem;">
        <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> إرسال الطلب</button>
        <a href="{{ route('financial-requests.index') }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>

<script>
function toggleFields() {
    var type = document.getElementById('requestType').value;
    document.getElementById('tripFields').style.display = type === 'business_trip' ? 'block' : 'none';
    document.getElementById('expenseFields').style.display = type === 'expense' ? 'block' : 'none';
}
</script>
@endsection