@extends('dashboard.layouts.app')

@section('content')
    <div class="container ">
        <div class="mb-1">Add Applicant for: {{ $recruitment->job_title ?? 'Recruitment' }}</div>
        <a href="{{ route('showApplicants', $recruitment->request_id) }}"
            class="btn btn-outline-primary btn-sm px-3 my-3 ms-2">Back</a>

        <div id="alertArea" class="mt-3"></div>

        <form id="applicantForm" enctype="multipart/form-data" class="card p-3 shadow-sm">
            @csrf
            <input type="hidden" name="recruitment_id" value="{{ $recruitment->id }}">

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Full Name</label>
                    <input type="text" name="full_name" class="form-control">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Contact Number</label>
                    <input type="number" name="contact_number" class="form-control">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Source</label>
                    <input type="text" name="source" class="form-control">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Resume (optional)</label>
                <input type="file" name="resume" class="form-control">
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-outline-primary btn-sm px-3">
                    <i class="fas fa-save me-2"></i>Submit
                </button>
                <a href="{{ route('showApplicants', $recruitment->request_id) }}"
                    class="btn btn-outline-secondary btn-sm px-3 ms-2">Cancel</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')

    <script>
        $('#applicantForm').on('submit', function (e) {
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('applicants.store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $("#alertArea").html("");
                },
                success: function (response) {
                    $("#alertArea").html(`
                                    <div class="alert alert-success">
                                        Applicant added successfully!
                                    </div>
                                `);
                    $('#applicantForm')[0].reset();
                },
                error: function (xhr) {
                    // Validation errors
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorHtml = '<div class="alert alert-danger"><ul>';
                        $.each(errors, function (key, value) {
                            errorHtml += '<li>' + value[0] + '</li>';
                        });
                        errorHtml += '</ul></div>';
                        $("#alertArea").html(errorHtml);

                    } else {
                        // Other errors (500, 403, etc.)
                        let message = "Something went wrong. Try again.";

                        // If Laravel sent JSON response with 'error'
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            message = xhr.responseJSON.error;
                        } else if (xhr.responseText) {
                            // If response is HTML, try to extract plain text
                            message = xhr.responseText;
                        }

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

            });
        });
    </script>
@endpush