@extends('layouts.site')

@section('title', 'تقديم طلب توظيف | XRD LAB')

@push('styles')
<style>
    .hiring-application-page .hiring-application-box {
        margin-top: 10px;
        background: var(--theme-surface);
        border-radius: 12px;
        box-shadow: var(--theme-shadow);
        padding: 22px;
    }

    .hiring-form-label {
        font-weight: 600;
        margin-bottom: 6px;
    }

    .hiring-form-control {
        border-radius: 8px;
        min-height: 44px;
    }

    .cv-dropzone {
        border: 1px dashed #c9ced6;
        background: #fafbfc;
        border-radius: 10px;
        padding: 16px;
        text-align: center;
        transition: border-color .2s ease, background-color .2s ease;
        cursor: pointer;
    }

    .cv-dropzone:hover,
    .cv-dropzone.is-active {
        border-color: var(--theme-primary);
        background: color-mix(in srgb, var(--theme-primary) 10%, #ffffff);
    }

    .cv-dropzone small {
        color: var(--theme-text-muted);
    }

    .cv-file-name {
        margin-top: 8px;
        font-size: .9rem;
        color: #1f2937;
        font-weight: 600;
    }

    .hiring-btn {
        display: inline-block;
        padding: 11px 24px;
        border-radius: 999px;
        background: var(--theme-primary);
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        border: 0;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .hiring-btn:hover {
        background: var(--theme-primary-dark);
        color: #fff;
        transform: translateY(-1px);
    }

    .field-error {
        color: #dc3545;
        font-size: .85rem;
        margin-top: 4px;
    }

    .consent-switch-row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
    }

    .consent-text {
        margin: 0;
        color: #374151;
    }

    .consent-toggle {
        position: relative;
        width: 50px;
        height: 28px;
        flex: 0 0 auto;
    }

    .consent-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .consent-slider {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: #d1d5db;
        border: 1px solid #c4c9d1;
        transition: all .2s ease;
        cursor: pointer;
    }

    .consent-slider::before {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        right: 2px;
        top: 2px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s ease;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
    }

    .consent-toggle input:checked + .consent-slider {
        background: var(--theme-primary);
        border-color: var(--theme-primary-dark);
    }

    .consent-toggle input:checked + .consent-slider::before {
        transform: translateX(-22px);
    }

    .feedback-modal-content {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
    }

    .feedback-modal-content .btn-close {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 3;
    }

    .feedback-modal-header-success,
    .feedback-modal-header-error {
        color: #fff;
    }

    .feedback-modal-header-success {
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    }

    .feedback-modal-header-error {
        background: linear-gradient(135deg, #dc3545, #b02a37);
    }
</style>
@endpush

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'title' => 'تقديم طلب توظيف',
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            ['label' => 'التوظيف', 'url' => route('hiring')],
            ['label' => 'تقديم طلب توظيف'],
        ],
    ])

    @php
        $feedbackTitle = null;
        $feedbackType = null;
        $feedbackBodyHtml = '';

        if (session('status')) {
            $feedbackTitle = 'تم استلام طلبك';
            $feedbackType = 'success';
            $feedbackBodyHtml = e(session('status'));
        } elseif ($errors->any()) {
            $feedbackTitle = 'يرجى التحقق من البيانات';
            $feedbackType = 'error';
            $feedbackBodyHtml = '<ul class="mb-0 text-end">';
            foreach ($errors->all() as $error) {
                $feedbackBodyHtml .= '<li>' . e($error) . '</li>';
            }
            $feedbackBodyHtml .= '</ul>';
        }
    @endphp

    <section class="services hiring-application-page" dir="rtl">
        <div class="container">
            <div class="hiring-application-box">
                <div class="mb-3">
                    <a href="{{ route('hiring') }}" class="text-decoration-none">&larr; العودة إلى صفحة التوظيف</a>
                </div>

                @if(session('hiring_notice'))
                    <div class="alert alert-warning text-end">
                        {{ session('hiring_notice') }}
                    </div>
                @endif

                <form action="{{ route('hiring.apply') }}" method="POST" enctype="multipart/form-data" id="hiringApplicationForm" novalidate>
                    @csrf

                    <div style="position:absolute;left:-9999px;opacity:0;pointer-events:none;">
                        <label for="website">Website</label>
                        <input type="text" id="website" name="website" value="{{ old('website') }}" tabindex="-1" autocomplete="off">
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="full_name">الاسم الكامل</label>
                            <input id="full_name" type="text" name="full_name" value="{{ old('full_name') }}" class="form-control hiring-form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="email">البريد الإلكتروني</label>
                            <input id="email" type="email" name="email" value="{{ old('email') }}" class="form-control hiring-form-control" required>
                            <div id="emailClientError" class="field-error d-none"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="hiring-form-label" for="phone">رقم الهاتف (اختياري)</label>
                            <input id="phone" type="text" name="phone" value="{{ old('phone') }}" class="form-control hiring-form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="hiring-form-label" for="city">المدينة (اختياري)</label>
                            <input id="city" type="text" name="city" value="{{ old('city') }}" class="form-control hiring-form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="hiring-form-label" for="experience_years">سنوات الخبرة (اختياري)</label>
                            <input id="experience_years" type="number" min="0" max="60" name="experience_years" value="{{ old('experience_years') }}" class="form-control hiring-form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="education_level">المستوى التعليمي (اختياري)</label>
                            <select id="education_level" name="education_level" class="form-select hiring-form-control">
                                <option value="">اختر المستوى التعليمي</option>
                                <option value="ثانوي" {{ old('education_level') === 'ثانوي' ? 'selected' : '' }}>ثانوي</option>
                                <option value="دبلوم" {{ old('education_level') === 'دبلوم' ? 'selected' : '' }}>دبلوم</option>
                                <option value="بكالوريوس" {{ old('education_level') === 'بكالوريوس' ? 'selected' : '' }}>بكالوريوس</option>
                                <option value="ماجستير" {{ old('education_level') === 'ماجستير' ? 'selected' : '' }}>ماجستير</option>
                                <option value="دكتوراه" {{ old('education_level') === 'دكتوراه' ? 'selected' : '' }}>دكتوراه</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="major">التخصص (اختياري)</label>
                            <input id="major" type="text" name="major" value="{{ old('major') }}" class="form-control hiring-form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="linkedin_url">حساب LinkedIn (اختياري)</label>
                            <input id="linkedin_url" type="url" name="linkedin_url" value="{{ old('linkedin_url') }}" class="form-control hiring-form-control" placeholder="https://">
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="portfolio_url">رابط الأعمال/الموقع (اختياري)</label>
                            <input id="portfolio_url" type="url" name="portfolio_url" value="{{ old('portfolio_url') }}" class="form-control hiring-form-control" placeholder="https://">
                        </div>
                        <div class="col-12">
                            <label class="hiring-form-label" for="cover_letter">نبذة تعريفية</label>
                            <textarea id="cover_letter" name="cover_letter" rows="5" class="form-control hiring-form-control" required>{{ old('cover_letter') }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="cv_file">السيرة الذاتية (PDF فقط) <span class="text-danger">*</span></label>
                            <div id="cvDropzone" class="cv-dropzone">
                                <div><i class="bi bi-cloud-arrow-up fs-4"></i></div>
                                <div>اسحب الملف هنا أو اضغط للاختيار</div>
                                <small>الحد الأقصى 5MB</small>
                                <div id="cvFileName" class="cv-file-name d-none"></div>
                            </div>
                            <input id="cv_file" type="file" name="cv_file" accept="application/pdf,.pdf" class="d-none" required>
                        </div>
                        <div class="col-md-6">
                            <label class="hiring-form-label" for="captcha_answer">تحقق أمني: {{ $captchaQuestion }}</label>
                            <input id="captcha_answer" type="number" name="captcha_answer" class="form-control hiring-form-control" required>
                        </div>
                        <div class="col-12">
                            <div class="consent-switch-row">
                                <label class="consent-toggle" for="consent">
                                    <input type="checkbox" value="1" id="consent" name="consent" {{ old('consent') ? 'checked' : '' }} required>
                                    <span class="consent-slider"></span>
                                </label>
                                <p class="consent-text">
                                    أوافق على معالجة بياناتي لأغراض التوظيف وفق <a href="{{ route('privacy.policy') }}">سياسة الخصوصية</a>.
                                </p>
                            </div>
                            <div id="consentClientError" class="field-error d-none"></div>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="hiring-btn">إرسال طلب التوظيف</button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    @if($feedbackTitle)
        <div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true" dir="rtl" data-feedback-type="{{ $feedbackType }}">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow feedback-modal-content">
                    <div class="modal-header {{ $feedbackType === 'success' ? 'feedback-modal-header-success' : 'feedback-modal-header-error' }}">
                        <h5 class="modal-title">{{ $feedbackTitle }}</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-end">{!! $feedbackBodyHtml !!}</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm hiring-btn" data-bs-dismiss="modal">إغلاق</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var dropzone = document.getElementById('cvDropzone');
    var fileInput = document.getElementById('cv_file');
    var fileName = document.getElementById('cvFileName');

    if (dropzone && fileInput) {
        function updateFileLabel(file) {
            if (!fileName) return;
            if (!file) {
                fileName.textContent = '';
                fileName.classList.add('d-none');
                return;
            }

            fileName.textContent = 'تم اختيار الملف: ' + file.name;
            fileName.classList.remove('d-none');
        }

        dropzone.addEventListener('click', function () {
            fileInput.click();
        });

        fileInput.addEventListener('change', function () {
            updateFileLabel(fileInput.files && fileInput.files[0] ? fileInput.files[0] : null);
        });

        ['dragenter', 'dragover'].forEach(function (eventName) {
            dropzone.addEventListener(eventName, function (event) {
                event.preventDefault();
                event.stopPropagation();
                dropzone.classList.add('is-active');
            });
        });

        ['dragleave', 'drop'].forEach(function (eventName) {
            dropzone.addEventListener(eventName, function (event) {
                event.preventDefault();
                event.stopPropagation();
                dropzone.classList.remove('is-active');
            });
        });

        dropzone.addEventListener('drop', function (event) {
            var files = event.dataTransfer ? event.dataTransfer.files : null;
            if (!files || !files.length) return;
            var dataTransfer = new DataTransfer();
            dataTransfer.items.add(files[0]);
            fileInput.files = dataTransfer.files;
            updateFileLabel(files[0]);
        });
    }

    var formElement = document.getElementById('hiringApplicationForm');
    var emailInput = document.getElementById('email');
    var consentInput = document.getElementById('consent');
    var emailClientError = document.getElementById('emailClientError');
    var consentClientError = document.getElementById('consentClientError');

    if (emailInput) {
        emailInput.addEventListener('input', function () {
            emailInput.setCustomValidity('');
            if (emailClientError) {
                emailClientError.textContent = '';
                emailClientError.classList.add('d-none');
            }
        });
    }

    if (consentInput) {
        consentInput.addEventListener('change', function () {
            consentInput.setCustomValidity('');
            if (consentClientError) {
                consentClientError.textContent = '';
                consentClientError.classList.add('d-none');
            }
        });
    }

    if (formElement) {
        formElement.addEventListener('submit', function (event) {
            var formValid = true;

            if (emailInput) {
                emailInput.setCustomValidity('');

                var emailValue = (emailInput.value || '').trim();
                var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

                if (!emailValue) {
                    emailInput.setCustomValidity('يرجى إدخال البريد الإلكتروني.');
                    if (emailClientError) {
                        emailClientError.textContent = 'يرجى إدخال البريد الإلكتروني.';
                        emailClientError.classList.remove('d-none');
                    }
                    formValid = false;
                } else if (!emailPattern.test(emailValue)) {
                    emailInput.setCustomValidity('يرجى إدخال بريد إلكتروني صحيح.');
                    if (emailClientError) {
                        emailClientError.textContent = 'يرجى إدخال بريد إلكتروني صحيح.';
                        emailClientError.classList.remove('d-none');
                    }
                    formValid = false;
                }
            }

            if (consentInput && !consentInput.checked) {
                consentInput.setCustomValidity('يرجى الموافقة على سياسة الخصوصية.');
                if (consentClientError) {
                    consentClientError.textContent = 'يرجى الموافقة على سياسة الخصوصية قبل الإرسال.';
                    consentClientError.classList.remove('d-none');
                }
                formValid = false;
            } else if (consentInput) {
                consentInput.setCustomValidity('');
            }

            if (!formValid) {
                event.preventDefault();
                event.stopPropagation();

                if (emailInput && emailInput.validationMessage) {
                    emailInput.reportValidity();
                } else if (consentInput && consentInput.validationMessage) {
                    consentInput.reportValidity();
                }
            }
        });
    }

    var feedbackElement = document.getElementById('feedbackModal');
    if (feedbackElement && window.bootstrap) {
        var feedbackModal = new bootstrap.Modal(feedbackElement);
        var feedbackType = feedbackElement.getAttribute('data-feedback-type');
        feedbackModal.show();

        feedbackElement.addEventListener('hidden.bs.modal', function () {
            if (feedbackType === 'success') {
                window.location.href = "{{ route('hiring') }}";
            }
        });
    }
});
</script>
@endpush