@extends('portal.applicant_dashboard')
@section('applicant')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="page-content">

    <!--breadcrumb-->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('portal.dashboard') }}">
                            <i class="bx bx-home-alt"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Apply for {{ $job->job_title }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    <!--end breadcrumb-->

    <div class="card">
        <div class="card-body p-4">
            <h5 class="mb-4">Apply for: {{ $job->job_title }}</h5>

            @php  
                $user = Auth::guard('applicant')->user();
            @endphp

            <form id="applyForm" method="POST" 
                  action="{{ route('portal.apply.submit', $job->id) }}" 
                  enctype="multipart/form-data" 
                  class="row g-3">

                @csrf

                <!-- FULL NAME -->
                <div class="form-group col-md-6">
                    <label class="form-label">Full Name</label>
                    <input type="text" 
                           name="full_name"
                           class="form-control"
                           value="{{ old('full_name', $user->full_name) }}"
                           required>
                </div>

                <!-- EMAIL -->
                <div class="form-group col-md-6">
                    <label class="form-label">Email</label>
                    <input type="email"
                           class="form-control"
                           value="{{ $user->email }}"
                           readonly>
                </div>

                <!-- PHONE -->
                <div class="form-group col-md-6">
                    <label class="form-label">Phone</label>
                    <input type="text"
                           name="phone"
                           class="form-control"
                           value="{{ old('phone', $user->phone) }}">
                </div>

                <!-- RESUME -->
                <div class="form-group col-md-6">
                    <label class="form-label">Upload Resume (PDF, DOC, DOCX)</label>
                    <input type="file" 
                           name="cv_file"
                           accept=".pdf,.doc,.docx"
                           class="form-control"
                           required>
                </div>

                <!-- SUBMIT BUTTON -->
                <div class="col-md-12">
                    <div class="d-md-flex d-grid align-items-center gap-3">
                        <button type="submit" class="btn btn-primary px-4">
                            Submit Application
                        </button>
                    </div>
                </div>

            </form>

        </div>
    </div>

</div>

<!-- jQuery Validation -->
<script>
$(document).ready(function () {

    $('#applyForm').validate({
        rules: {
            full_name: { required: true },
            cv_file: { required: true },
        },
        messages: {
            full_name: { required: 'Please enter your full name' },
            cv_file: { required: 'Please upload your resume' },
        },

        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },

        highlight: function (element) {
            $(element).addClass('is-invalid');
        },

        unhighlight: function (element) {
            $(element).removeClass('is-invalid');
        }
    });

    // SweetAlert2 notifications
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: '{{ session('error') }}',
            timer: 3000,
            showConfirmButton: false
        });
    @endif

});
</script>

@endsection