@extends('layouts.app')
@section('title', 'رفع مستند جديد - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <a href="{{ route('documents.index') }}" style="color: #6b7280; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px;"><i class="fas fa-arrow-right"></i> رجوع للمستندات</a>
        <h1 class="page-title" style="margin-top: 8px;"><i class="fas fa-cloud-upload-alt" style="color: #E8502F;"></i> رفع مستند جديد</h1>
    </div>
</div>

<div class="card" style="padding: 24px;">
    <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="form-grid cols-2">
            {{-- Employee --}}
            <div class="form-group">
                <label class="form-label">الموظف <span style="color: #E8502F;">*</span></label>
                <select name="employee_id" class="form-select" required>
                    <option value="">اختر الموظف</option>
                    @foreach($employees as $emp)
                        <option value="{{ $emp->id }}" {{ (old('employee_id', $selectedEmployee ?? '') == $emp->id) ? 'selected' : '' }}>{{ $emp->full_name }}</option>
                    @endforeach
                </select>
                @error('employee_id') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Type --}}
            <div class="form-group">
                <label class="form-label">نوع المستند <span style="color: #E8502F;">*</span></label>
                <select name="type" class="form-select" required>
                    <option value="">اختر النوع</option>
                    @foreach($typeLabels as $key => $label)
                        <option value="{{ $key }}" {{ old('type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                @error('type') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Title --}}
            <div class="form-group">
                <label class="form-label">عنوان المستند <span style="color: #E8502F;">*</span></label>
                <input type="text" name="title" class="form-input" value="{{ old('title') }}" placeholder="مثال: جواز سفر أحمد محمد" required>
                @error('title') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Expiry Date --}}
            <div class="form-group">
                <label class="form-label">تاريخ الانتهاء</label>
                <input type="date" name="expiry_date" class="form-input" value="{{ old('expiry_date') }}">
                @error('expiry_date') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- File Upload --}}
            <div class="form-group" style="grid-column: 1 / -1;">
                <label class="form-label">الملف <span style="color: #E8502F;">*</span></label>
                <input type="file" name="file" class="form-input" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx" required>
                <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">الصيغ المسموحة: PDF, JPG, PNG, DOC, DOCX, XLS, XLSX — الحد الأقصى: 10 ميجابايت</small>
                @error('file') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Notes --}}
            <div class="form-group" style="grid-column: 1 / -1;">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-textarea" rows="3" placeholder="ملاحظات إضافية...">{{ old('notes') }}</textarea>
                @error('notes') <span class="form-error">{{ $message }}</span> @enderror
            </div>
        </div>

        <div style="display: flex; gap: 12px; margin-top: 24px;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i> رفع المستند</button>
            <a href="{{ route('documents.index') }}" class="btn btn-secondary">إلغاء</a>
        </div>
    </form>
</div>
@endsection