@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Request HR Letter"
                    description="Create a new HR letter request by selecting the employee, request date, language, reason, and any additional notes.">
                    <a href="{{ route('hr_letter.index') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="ion:arrow-back-outline"></iconify-icon>
                        <span>Cancel</span>
                    </a>
                </x-page-title>

                <form action="{{ route('hr_letter.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Request Details</h5>
                                <p class="form-section__sub mb-0">
                                    Fill in the required employee and request information to submit a new HR letter request.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label for="staff_id" class="asset-label">
                                        Employee Name <span class="text-danger d-inline">*</span>
                                    </label>
                                    <select name="staff_id" id="staff_id"
                                        class="asset-select @error('staff_id') asset-invalid @enderror" required>
                                        <option value="">Select Employee</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="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="date_of_request" class="asset-label">
                                        Date Of Request <span class="text-danger d-inline">*</span>
                                    </label>
                                    <input type="date" name="date_of_request" id="date_of_request"
                                        class="asset-input @error('date_of_request') asset-invalid @enderror"
                                        value="{{ old('date_of_request') }}" required>
                                    @error('date_of_request')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="letter_language" class="asset-label">
                                        Letter Language <span class="text-danger d-inline">*</span>
                                    </label>
                                    <select name="letter_language" id="letter_language"
                                        class="asset-select @error('letter_language') asset-invalid @enderror" required>
                                        <option value="">Select Language</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="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="reason_of_request" class="asset-label">
                                        Reason Of Request <span class="text-danger d-inline">*</span>
                                    </label>
                                    <select name="reason_of_request" id="reason_of_request"
                                        class="asset-select  @error('reason_of_request') asset-invalid @enderror" required>
                                        <option value="">Select Reason</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('reason_of_request')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="asset-col-6">
                                    <label for="attachment" class="asset-label">
                                        Attachment
                                    </label>

                                    <input type="file" name="attachment" id="attachment" style="padding: 10px;"
                                        class="asset-input @error('attachment') is-invalid @enderror"
                                        accept=".pdf,.png,.jpg,.jpeg,.webp">

                                    <p class="form-section__sub mt-2 mb-0">
                                        You can upload file (PDF, PNG, JPG). Max 10MB.
                                    </p>

                                    @error('attachment')
                                        <div class="asset-invalid">{{ $message }}</div>
                                    @enderror

                                    <div id="attachment-preview" class="mt-3"></div>
                                </div>



                                <div class="asset-col-6">
                                    <label for="additional_information" class="asset-label">
                                        Additional Information
                                    </label>
                                    <textarea name="additional_information" id="additional_information"
                                        class="asset-input @error('additional_information') asset-invalid @enderror" rows="5"
                                        placeholder="Enter any additional details related to this request"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g, '')">{{ old('additional_information') }}</textarea>
                                    @error('additional_information')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>

                            <div class="asset-actions">
                                <a href="{{ route('hr_letter.index') }}" class="asset-btn asset-btn--secondary">
                                    Cancel
                                </a>
                                <button type="submit" class="asset-btn asset-btn--primary">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-invalid {
            border-color: #dc3545 !important;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.25rem;
            flex-wrap: wrap;
        }

        @media (max-width: 991.98px) {

            .asset-col-6,
            .asset-col-12 {
                grid-column: span 12 / span 12;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.general-select').select2({
                allowClear: true,
                width: '100%',
                placeholder: 'Select'
            });

            setTimeout(() => {
                let alert = document.getElementById('successAlert');
                if (alert) {
                    let bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 10000);
        });
    </script>
@endpush