@extends('dashboard.layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-lg border-0 rounded-3">
        <div class="card-header py-3">
            <div class="mb-0"><i class="fas fa-plus-circle me-2"></i>Request Hr Letter</div>
        </div>
        <div class="card-body">
            <form action="{{ route('hr_letter.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="staff_id" class="form-label fw-bold">Emplylee Name</label>
                        <select name="staff_id" id="staff_id" class="form-select rounded-3 select2" required>
                            <option value="">Select</option>
                            @foreach ($staffs as $staff)
                            <option value="{{ $staff->id }}" {{ old('staff_id') == $staff->id ? 'selected' : '' }}>
                                {{ $staff->first_name . $staff->last_name }}
                            </option>

                            @endforeach
                        </select>
                        @error('staff_id')
                        <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="date_of_request" class="form-label fw-bold">Date Of Request</label>
                        <input type="date" name="date_of_request" id="date_of_request" class="form-control rounded-3" value="{{ old('date_of_request') }}"
                            required>
                        @error('date_of_request')
                        <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="letter_language" class="form-label fw-bold">Letter Language</label>
                        <select name="letter_language" id="letter_language" class="form-select rounded-3 select2"
                            required>
                            <option value="">Select</option>
                            <option value="en" {{ old('letter_language') == 'en' ? 'selected' : '' }}>English</option>
                            <option value="ar" {{ old('letter_language') == 'ar' ? 'selected' : '' }}>Arabic</option>
                        </select>
                        @error('letter_language')
                        <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="reason_of_request" class="form-label fw-bold">Reason Of Request</label>
                        <select name="reason_of_request" id="reason_of_request" class="form-select rounded-3 select2"
                            required>
                            <option value="">Select</option>
                            <option value="bank" {{ old('reason_of_request') == 'bank' ? 'selected' : '' }}>Bank</option>
                            <option value="visa" {{ old('reason_of_request') == 'visa' ? 'selected' : '' }}>Visa</option>
                            <option value="others" {{ old('reason_of_request') == 'others' ? 'selected' : '' }}>Others</option>
                        </select>
                        @error('letter_language')
                        <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <label for="additional_information" class="form-label fw-bold">Additional Information</label>
                        <textarea name="additional_information" id="additional_information" class="form-control rounded-3" rows="4"
                            oninput="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g, '')">{{ old('additional_information') }}</textarea>
                        @error('additional_information')
                        <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>



                </div>
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary px-4"><i class="fas fa-save me-2"></i>Submit</button>
                    <a href="{{ route('hr_letter.index') }}" class="btn btn-secondary px-4 ms-2"><i
                            class="fas fa-arrow-left me-2"></i>Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2({
            allowClear: true,
            width: '100%'
        });
    });
</script>
@endpush