@extends('dashboard.layouts.app')

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

    @php
        $jobTitleName = optional($recruitment->jobTitles)->name ?: ($recruitment->job_title ?? 'Open Position');
        $requestCode = 'REQ-' . str_pad((string) $recruitment->request_id, 4, '0', STR_PAD_LEFT);
        $vacancies = $recruitment->number_of_vacancies ?: 'N/A';
        $expectedStartDate = $recruitment->expected_start_date ?: 'Not set';
    @endphp

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

                <x-page-title
                    title="Add Applicant"
                    description="Create a new applicant record for this recruitment request using the same structured workflow found across the dashboard.">
                        <a href="{{ route('showApplicants', $recruitment->request_id) }}" class="asset-btn asset-btn--secondary">
                            Back to Applicants
                        </a>
                </x-page-title>


                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="form-section__head mb-0">
                            <div class="form-section__title mb-1">Applicant Details</div>
                            <p class="form-section__sub mb-0">
                                Fill in the fields below to create the applicant record and attach an optional resume.
                            </p>
                        </div>
                    </div>

                    <div class="applicant-create-form-wrap">
                        <div id="alertArea" class="form-alert-area"></div>

                        <form id="applicantForm" enctype="multipart/form-data" novalidate>
                            @csrf
                            <input type="hidden" name="recruitment_id" value="{{ $recruitment->id }}">

                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label class="asset-label" for="full_name">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" id="full_name" name="full_name" class="asset-input"
                                        placeholder="Enter applicant full name">
                                    <div class="field-error" data-field="full_name"></div>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label" for="email">Email <span class="text-danger">*</span></label>
                                    <input type="email" id="email" name="email" class="asset-input"
                                        placeholder="Enter applicant email">
                                    <div class="field-error" data-field="email"></div>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label" for="contact_number">Contact Number <span class="text-danger">*</span></label>
                                    <input type="tel" id="contact_number" name="contact_number" class="asset-input"
                                        inputmode="numeric" pattern="[0-9]{6,20}" placeholder="Enter contact number">
                                    <div class="field-help">Digits only, between 6 and 20 numbers.</div>
                                    <div class="field-error" data-field="contact_number"></div>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label" for="source">Source</label>
                                    <input type="text" id="source" name="source" class="asset-input"
                                        placeholder="LinkedIn, referral, website, etc.">
                                    <div class="field-error" data-field="source"></div>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label" for="years_of_experience">Years of Experience</label>
                                    <input type="number" id="years_of_experience" name="years_of_experience" class="asset-input"
                                        min="0" step="0.01" placeholder="0.00">
                                    <div class="field-error" data-field="years_of_experience"></div>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label" for="interview_date">Interview Date</label>
                                    <input type="date" id="interview_date" name="interview_date" class="asset-input">
                                    <div class="field-error" data-field="interview_date"></div>
                                </div>

                                <div class="asset-col-12">
                                    <label class="asset-label" for="qualifications">Qualifications</label>
                                    <textarea id="qualifications" name="qualifications" class="asset-input applicant-textarea"
                                        placeholder="Write qualifications, certifications, or notable skills"></textarea>
                                    <div class="field-error" data-field="qualifications"></div>
                                </div>

                                <div class="asset-col-12">
                                    <div class="upload-card">
                                        <div class="upload-card__head">
                                            <div class="upload-card__icon">
                                                <i class="fas fa-file-upload"></i>
                                            </div>
                                            <div>
                                                <div class="upload-card__title">Resume Attachment</div>
                                                <div class="upload-card__text">Optional. Accepted formats: PDF, DOC, DOCX up to 2 MB.</div>
                                            </div>
                                        </div>

                                        <label class="upload-card__field" for="resume">
                                            <span class="upload-card__button">Choose File</span>
                                            <span class="upload-card__name" id="resumeFileName">No file selected</span>
                                        </label>
                                        <input type="file" id="resume" name="resume" class="upload-card__input"
                                            accept=".pdf,.doc,.docx">
                                        <div class="field-error" data-field="resume"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="applicant-create-actions">
                                <button type="submit" class="asset-btn asset-btn--primary" id="submitApplicantBtn">
                                    <i class="fas fa-save"></i>
                                    Save Applicant
                                </button>

                                <a href="{{ route('showApplicants', $recruitment->request_id) }}" class="asset-btn asset-btn--secondary">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .applicant-create-title-actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .applicant-create-hero {
            border: 1px solid #e5e7eb;
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 32%),
                linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
        }

        .applicant-create-hero__content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1.3rem;
        }

        .applicant-create-hero__title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.35rem;
        }

        .applicant-create-hero__text {
            max-width: 760px;
            color: #6b7280;
            font-size: 0.93rem;
            line-height: 1.65;
        }

        .applicant-create-hero__meta {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .applicant-create-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .applicant-create-chip--info {
            background: #e0f2fe;
            color: #075985;
        }

        .applicant-create-chip--warn {
            background: #fff7ed;
            color: #c2410c;
        }

        .applicant-create-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .applicant-create-stat {
            padding: 1rem 1.1rem;
        }

        .applicant-create-stat__label {
            color: #6b7280;
            font-size: 0.88rem;
            margin-bottom: 0.45rem;
        }

        .applicant-create-stat__value {
            font-size: 1.1rem;
            font-weight: 800;
            line-height: 1.3;
            word-break: break-word;
        }

        .form-section__head {
            padding-bottom: 0.95rem;
            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;
        }

        .applicant-create-form-wrap {
            padding: 0 1rem 1rem;
        }

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

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

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

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

        .asset-input {
            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;
        }

        .applicant-textarea {
            min-height: 130px;
            resize: vertical;
        }

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

        .asset-invalid {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.08) !important;
        }

        .field-help {
            margin-top: 0.45rem;
            color: #6b7280;
            font-size: 0.82rem;
        }

        .field-error {
            margin-top: 0.4rem;
            color: #dc3545;
            font-size: 0.82rem;
            min-height: 1rem;
        }

        .form-alert-area:empty {
            display: none;
        }

        .form-alert-area {
            margin-bottom: 1rem;
        }

        .upload-card {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
        }

        .upload-card__head {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            margin-bottom: 0.95rem;
        }

        .upload-card__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            flex-shrink: 0;
        }

        .upload-card__title {
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.15rem;
        }

        .upload-card__text {
            color: #6b7280;
            font-size: 0.9rem;
        }

        .upload-card__field {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
            cursor: pointer;
        }

        .upload-card__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 0.7rem 1rem;
            border-radius: 0.9rem;
            background: #111827;
            color: #fff;
            font-weight: 600;
        }

        .upload-card__name {
            color: #475569;
            font-size: 0.92rem;
        }

        .upload-card__input {
            display: none;
        }

        .applicant-create-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px solid #eef2f7;
        }

        @media (min-width: 640px) {
            .applicant-create-form-wrap {
                padding: 0 1.25rem 1.25rem;
            }
        }

        @media (max-width: 991.98px) {
            .applicant-create-stats-grid {
                grid-template-columns: 1fr;
            }

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

        @media (max-width: 767.98px) {
            .applicant-create-actions {
                justify-content: stretch;
            }

            .applicant-create-actions .asset-btn {
                width: 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(function () {
            const form = $('#applicantForm');
            const submitButton = $('#submitApplicantBtn');
            const alertArea = $('#alertArea');
            const resumeInput = $('#resume');
            const resumeFileName = $('#resumeFileName');

            function clearValidationState() {
                form.find('.asset-input').removeClass('asset-invalid');
                form.find('.field-error').html('');
            }

            resumeInput.on('change', function () {
                const fileName = this.files && this.files[0] ? this.files[0].name : 'No file selected';
                resumeFileName.text(fileName);
            });

            form.on('submit', function (e) {
                e.preventDefault();

                const formData = new FormData(this);
                const originalHtml = submitButton.html();

                clearValidationState();
                alertArea.html('');

                submitButton.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>Saving...'
                );

                $.ajax({
                    url: "{{ route('applicants.store') }}",
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function () {
                        alertArea.html(`
                            <div class="alert alert-success mb-0">
                                Applicant added successfully!
                            </div>
                        `);

                        form[0].reset();
                        resumeFileName.text('No file selected');
                        clearValidationState();
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    },
                    error: function (xhr) {
                        if (xhr.status === 422 && xhr.responseJSON?.errors) {
                            const errors = xhr.responseJSON.errors;

                            $.each(errors, function (key, value) {
                                const field = form.find(`[name="${key}"]`);
                                const errorBox = form.find(`.field-error[data-field="${key}"]`);

                                field.addClass('asset-invalid');
                                errorBox.html(value[0] || 'Invalid value');
                            });

                            alertArea.html(`
                                <div class="alert alert-danger mb-0">
                                    Please review the highlighted fields and try again.
                                </div>
                            `);
                        } else {
                            let message = 'Something went wrong. Try again.';

                            if (xhr.responseJSON?.error) {
                                message = xhr.responseJSON.error;
                            } else if (xhr.responseJSON?.message) {
                                message = xhr.responseJSON.message;
                            }

                            alertArea.html(`
                                <div class="alert alert-danger mb-0">
                                    ${message}
                                </div>
                            `);
                        }

                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    },
                    complete: function () {
                        submitButton.prop('disabled', false).html(originalHtml);
                    }
                });
            });
        });
    </script>
@endpush