@props(['jobPosition' => null, 'formId' => 'application-form', 'redirectBackTo' => null,])

<div class="form-wrapper py-6 px-4 sm:px-6 lg:px-8">
    <div class=" mx-auto">
        <form id="{{ $formId }}" data-ignore="true" data-bricks-form="false" method="POST"
            action="{{ route('careers.apply.store', ['jobPosition' => $jobPosition ? $jobPosition->id : (isset($jobPositions) ? $jobPositions->first()->id : 1)]) }}"
            enctype="multipart/form-data" class="premium-form-card overflow-hidden">

            @csrf
            <input type="hidden" name="redirect_back_to"  value="{{ $redirectBackTo }}">
            <input type="hidden" name="job_position_id"
                value="{{ $jobPosition ? $jobPosition->id : (isset($jobPositions) ? $jobPositions->first()->id : '') }}"
                id="job_position_id_field">
            <input type="hidden" name="job_position_id_dynamic" value="" id="job_position_id_dynamic">

            <div class="form-header text-start pb-8 pt-4">
                <h2 class=" font-extrabold from-blue-600 to-indigo-600 mb-2">
                    Gửi Hồ Sơ Ứng Tuyển
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 application-form-grid">
                {{-- Họ & Tên --}}
                <div class="form-group">
                    <label class="premium-label required">Họ của bạn</label>
                    <div class="relative">
                        <input type="text" name="first_name" value="{{ old('first_name') }}" placeholder="Ví dụ: Nguyễn"
                            class="premium-input pl-4" required pattern=".*\S.*" title="Vui lòng nhập họ">
                    </div>
                    @error('first_name')
                        <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="premium-label required">Tên của bạn</label>
                    <div class="relative">
                        <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder="Ví dụ: Văn An"
                            class="premium-input pl-4" required pattern=".*\S.*" title="Vui lòng nhập tên">
                    </div>
                    @error('last_name')
                        <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Email & Phone --}}
                <div class="form-group">
                    <label class="premium-label required">Email liên hệ</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="far fa-envelope"></i>
                        </span>
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="email@example.com"
                            class="premium-input pl-11" required
                            pattern="^(?!.*\.con$)[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$"
                            title="Vui lòng nhập email hợp lệ (ví dụ: name@gmail.com)">
                    </div>
                    @error('email')
                        <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="premium-label required">Số điện thoại</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="fas fa-phone-alt"></i>
                        </span>
                        <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="09xx xxx xxx"
                            class="premium-input pl-11" required pattern="[0-9]{1,20}" maxlength="20"
                            inputmode="numeric" title="Chỉ nhập số, tối đa 20 chữ số"
                            oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                    </div>
                    @error('phone')
                        <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Giới tính & Ngày sinh --}}
                <div class="form-group">
                    <label class="premium-label required">Giới tính</label>
                    <select name="gender"
                        class="premium-input text-[14px] appearance-none bg-no-repeat bg-[right_1rem_center] bg-[length:1em_1em]"
                        style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');"
                        required>
                        <option value="">Chọn giới tính</option>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Nam</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Nữ</option>
                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Khác</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="premium-label required">Ngày sinh</label>
                    <input type="date" name="birth_date" value="{{ old('birth_date') }}" class="premium-input px-4"
                        required max="{{ now()->format('Y-m-d') }}" title="Ngày sinh không được lớn hơn ngày hiện tại."
                        oninput="if (this.value && this.value > '{{ now()->format('Y-m-d') }}') { this.setCustomValidity('Ngày sinh không được lớn hơn ngày hiện tại.'); this.reportValidity(); } else { this.setCustomValidity(''); }"
                        onchange="if (this.value && this.value > '{{ now()->format('Y-m-d') }}') { this.setCustomValidity('Ngày sinh không được lớn hơn ngày hiện tại.'); this.reportValidity(); } else { this.setCustomValidity(''); }">
                </div>

                {{-- Địa chỉ --}}
                <div class="md:col-span-2 form-group">
                    <label class="premium-label required">Địa chỉ thường trú</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="fas fa-map-marker-alt"></i>
                        </span>
                        <input type="text" name="address" value="{{ old('address') }}"
                            placeholder="Số nhà, tên đường, quận/tỉnh..." class="premium-input pl-11" required>
                    </div>
                </div>

                {{-- Lương & Công ty hiện tại --}}
                <div class="form-group">
                    <label class="premium-label">Mức lương mong muốn</label>
                    <div class="relative">
                        <input type="text" id="format_number_{{ $formId ?? uniqid() }}" class="premium-input pl-4 pr-16 format-salary-input"
                            value="{{ old('expected_salary') }}" placeholder="Ví dụ: 20,000,000" inputmode="numeric">
                        <input type="hidden" name="expected_salary" value="{{ old('expected_salary') }}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="premium-label">Công ty hiện tại</label>
                    <input type="text" name="current_company" value="{{ old('current_company') }}"
                        placeholder="Tên công ty" class="premium-input px-4">
                </div>

                {{-- LinkedIn & Vị trí hiện tại --}}
                <div class="form-group">
                    <label class="premium-label">Link Github / Hồ sơ năng lực</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="fab fa-github"></i>
                        </span>
                        <input type="url" name="linkedin_url" value="{{ old('linkedin_url') }}"
                            placeholder="https://github.com/..." class="premium-input pl-11" pattern="https?://.+"
                            title="Vui lòng nhập đường dẫn hợp lệ, bắt đầu bằng http:// hoặc https://">
                    </div>
                </div>

                <div class="form-group">
                    <label class="premium-label">Vị trí hiện tại</label>
                    <input type="text" name="current_position" value="{{ old('current_position') }}"
                        placeholder="Ví dụ: Senior Developer" class="premium-input px-4">
                </div>

                {{-- CV --}}
                <div class="md:col-span-2 form-group">
                    <label class="premium-label required">Tải lên CV (PDF, DOC, DOCX)</label>
                    <div class="resume-upload mt-1" id="{{ $formId }}-resume-upload">
                        <input type="hidden" name="resume_temp_path" value="{{ old('resume_temp_path') }}"
                            data-resume-temp-path>
                        <input type="hidden" name="resume_original_name" value="{{ old('resume_original_name') }}"
                            data-resume-original-name>
                        <input id="{{ $formId }}-resume-upload-input" data-resume-input name="resume" type="file"
                            class="sr-only" style="display:none;" accept=".pdf,.doc,.docx">
                        <label for="{{ $formId }}-resume-upload-input" class="resume-dropzone">
                            <span class="resume-icon" aria-hidden="true">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                                    <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"
                                        stroke="currentColor" stroke-width="1.6" />
                                    <path d="M14 3v5h5" stroke="currentColor" stroke-width="1.6" />
                                    <path d="M12 17v-6m0 0-2 2m2-2 2 2" stroke="currentColor" stroke-width="1.6"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </span>
                            <span class="resume-title">Chọn hoặc kéo thả CV vào đây</span>
                            <span class="resume-subtitle">Hỗ trợ PDF, DOC, DOCX · Tối đa 10MB</span>
                            <span class="resume-file-name"
                                data-resume-filename>{{ old('resume_original_name', 'Chưa chọn tệp') }}</span>
                        </label>
                    </div>
                    <span class="error-text" data-resume-required-error style="display:none;">Vui lòng tải lên
                        CV.</span>
                    @error('resume')
                        <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Cover Letter --}}
                <div class="md:col-span-2 form-group mb-3">
                    <label class="premium-label">Thư xin việc (Tùy chọn)</label>
                    <textarea name="cover_letter" rows="4"
                        placeholder="Hãy chia sẻ lý do bạn quan tâm đến vị trí này và những giá trị bạn có thể mang lại..."
                        class="premium-input px-4 py-3 resize-none">{{ old('cover_letter') }}</textarea>
                </div>
            </div>

            {{-- Submit Button --}}
            <div class="pt-10 pb-4 text-center">
                <button type="submit" class="premium-submit-btn">
                    Gửi Hồ Sơ Ngay
                    <svg class="ml-2 w-5 h-5 inline-block animate-bounce-x" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    </svg>
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    /* Premium Form Styling */
    .premium-form-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 2rem;
        padding: 2.5rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    }

    .premium-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 0.5rem;
        letter-spacing: 0.025em;
    }

    .premium-label.required::after {
        content: " *";
        color: #ef4444;
    }

    .premium-input {
        display: block;
        width: 100%;
        background-color: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 0.875rem;
        font-size: 16px;
        /* 16px prevents iOS auto-zoom on focus */
        color: #334155;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
        box-sizing: border-box;
    }

    .premium-input:focus {
        background-color: #fff;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        transform: translateY(-1px);
    }

    /* ensure textarea font-size matches larger placeholder */
    textarea.premium-input {
        font-size: 1.55rem;
        /* bigger input text for better readability */
        line-height: 1.6;
    }

    .premium-input::placeholder {
        color: #94a3b8;
        font-size: 14px;
        /* larger placeholder text for readability */
    }

    /* make select text same size as other inputs */
    select.premium-input {
        font-size: 16px;
    }

    select.premium-input option {
        font-size: 16px;
    }

    .premium-submit-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
        color: white;
        font-weight: 700;
        font-size: 1.125rem;
        padding: 1rem 3rem;
        border-radius: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
        border: none;
        cursor: pointer;
        white-space: nowrap;
    }

    .premium-submit-btn:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
        filter: brightness(1.1);
    }

    .premium-submit-btn:active {
        transform: translateY(0);
    }

    .error-text {
        color: #ef4444;
        font-size: 1.5rem;
        font-weight: 600;
        margin-top: 0.25rem;
    }

    @keyframes bounce-x {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(5px);
        }
    }

    .animate-bounce-x {
        animation: bounce-x 1s infinite;
    }

    @media (max-width: 640px) {
        .premium-form-card {
            padding: 1.5rem;
            border-radius: 1.5rem;
        }

        /* Ensure date inputs behave on mobile */
        input[type="date"].premium-input {
            min-height: 2.75rem;
            -webkit-appearance: none;
            display: flex;
            align-items: center;
        }

        .premium-submit-btn {
            width: 100%;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }


    /* explicit horizontal gap for two-column layout (10px) */
    .application-form-grid {
        column-gap: 10px;
    }

    .resume-dropzone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: 130px;
        border: 2px dashed #bfdbfe;
        border-radius: 1rem;
        background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
        color: #1e3a8a;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 1rem;
    }

    .resume-dropzone:hover {
        border-color: #60a5fa;
        background: linear-gradient(180deg, #dbeafe 0%, #f8fafc 100%);
        transform: translateY(-1px);
    }

    .resume-upload.is-active .resume-dropzone {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .resume-icon {
        width: 2.7rem;
        height: 2.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
    }

    .resume-title {
        font-size: 14px;
        font-weight: 700;
        color: #1e3a8a;
        text-align: center;
    }

    .resume-subtitle {
        font-size: 14px;
        color: #475569;
        text-align: center;
    }

    .resume-file-name {
        margin-top: 0.35rem;
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: #dbeafe;
        color: #1d4ed8;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Format salary inputs
        const salaryInputs = document.querySelectorAll('.format-salary-input');
        salaryInputs.forEach(function(salaryInput) {
            const hiddenInput = salaryInput.closest('.relative').querySelector('input[name="expected_salary"]');

            if (salaryInput.value) {
                let raw = salaryInput.value.replace(/[^0-9]/g, '');
                if (raw) {
                    salaryInput.value = Number(raw).toLocaleString('en-US');
                    if (hiddenInput) hiddenInput.value = raw;
                }
            }

            salaryInput.addEventListener('input', function(e) {
                let raw = this.value.replace(/[^0-9]/g, '');
                if (hiddenInput) hiddenInput.value = raw;
                
                if (raw) {
                    this.value = Number(raw).toLocaleString('en-US');
                } else {
                    this.value = '';
                }
            });
        });

        const uploadWrap = document.getElementById('{{ $formId }}-resume-upload');
        if (!uploadWrap) return;

        const form = uploadWrap.closest('form');
        const input = uploadWrap.querySelector('[data-resume-input]');
        const fileName = uploadWrap.querySelector('[data-resume-filename]');
        const tempPathInput = uploadWrap.querySelector('[data-resume-temp-path]');
        const originalNameInput = uploadWrap.querySelector('[data-resume-original-name]');
        const requiredError = uploadWrap.parentElement.querySelector('[data-resume-required-error]');
        if (!input || !fileName) return;

        const validateResumeRequired = function () {
            const hasFile = !!(input.files && input.files.length);
            const hasTempPath = !!(tempPathInput && tempPathInput.value && tempPathInput.value.trim());
            const isValid = hasFile || hasTempPath;
            if (requiredError) {
                requiredError.style.display = isValid ? 'none' : 'block';
            }

            return isValid;
        };

        if (originalNameInput && originalNameInput.value) {
            uploadWrap.classList.add('is-active');
            fileName.textContent = originalNameInput.value;
        }

        input.addEventListener('change', function () {
            const name = this.files && this.files[0] ? this.files[0].name : 'Chưa chọn tệp';
            fileName.textContent = name;
            const hasFile = !!(this.files && this.files.length);
            uploadWrap.classList.toggle('is-active', hasFile);

            if (hasFile) {
                if (originalNameInput) originalNameInput.value = name;
                if (tempPathInput) tempPathInput.value = '';
            }

            validateResumeRequired();
        });

        if (form) {
            form.addEventListener('submit', function (e) {
                if (!validateResumeRequired()) {
                    e.preventDefault();
                    uploadWrap.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });
        }
    });
</script>