@extends('job.layout.web')
@section('title', 'Register Yourself')
<style>
    #fileName {
        color: #797f87;
        font-size: 15px;
        display: block;
        margin-bottom: 0;
        cursor: pointer;
        padding-left: 4px;
        margin-top: 0.4rem;
    }

    /* candidate-resume-area */
    @media (max-width: 768px) {
        .candidate-resume-area {
            padding-top: 1rem !important;
        }
    }

    /* remove arrow buttons from no. input*/
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
@section('content')

    <section class="candidate-resume-area padding-top-100px padding-bottom-100px">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="candidate-resume-wrap">
                        <div class="billing-form-item">
                            <div class="billing-title-wrap">
                                <h3 class="widget-title pb-0">Basic Information</h3>
                                <div class="title-shape margin-top-10px"></div>
                            </div>
                            <!-- billing-title-wrap -->
                            <div class="billing-content">
                                <div class="contact-form-action">
                                    <form id='emp-form'>
                                        <div class="row">
                                            <!-- Full Name -->
                                            <div class="col-lg-6">
                                                <div class="input-box">
                                                    <label class="label-text" for="name">Full Name <span
                                                            class="text-danger">*</span></label>
                                                    <div class="form-group">
                                                        <span class="la la-user form-icon"></span>
                                                        <input class="form-control" type="text" id="name"
                                                            name="name" placeholder="Your name" />
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Email -->
                                            <div class="col-lg-6">
                                                <div class="input-box">
                                                    <label class="label-text" for="email">Your Email <span
                                                            class="text-danger">*</span></label>
                                                    <div class="form-group">
                                                        <span class="la la-envelope-o form-icon"></span>
                                                        <input class="form-control" type="text" id="email"
                                                            name="email" placeholder="Email address" />
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Password -->
                                            <div class="col-lg-6">
                                                <div class="input-box">
                                                    <label class="label-text" for="password">Set Password <span
                                                            class="text-danger">*</span></label>
                                                    <div class="form-group">
                                                        <span class="la la-lock form-icon"></span>
                                                        <input class="form-control" type="password" id="password"
                                                            name="password" placeholder="Password" />
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Confirm Password -->
                                            <div class="col-lg-6">
                                                <div class="input-box">
                                                    <label class="label-text" for="password_confirmation">Confirm Password
                                                        <span class="text-danger">*</span></label>
                                                    <div class="form-group">
                                                        <span class="la la-lock form-icon"></span>
                                                        <input class="form-control" type="password"
                                                            id="password_confirmation" name="password_confirmation"
                                                            placeholder="Confirm Password" required />
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Mobile Number -->
                                            <div class="col-lg-6">
                                                <div class="input-box">
                                                    <label class="label-text" for="mobile">Mobile Number <span
                                                            class="text-danger">*</span></label>
                                                    <div class="form-group">
                                                        <span class="la la-phone form-icon"></span>
                                                        <input class="form-control" type="text" id="mobile"
                                                            name="mobile" placeholder="Mobile number" />
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Resume Upload -->
                                            <div class="col-lg-6">
                                                <div class="input-box">
                                                    <label class="label-text" for="resume">Upload Resume <span
                                                            class="text-danger">*</span></label>
                                                    <div class="form-group">
                                                        <span class="la la-file form-icon"></span>
                                                        <input class="form-control" type="file" id="resume"
                                                            name="resume" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end row -->
                                    </form>
                                </div>
                                <!-- end contact-form-action -->
                            </div>
                            <!-- end billing-content -->
                        </div>

                        <!-- end billing-form-item -->
                        <div class="resume-submit-wrap">
                            <div class="form-group">
                                <div class="custom-checkbox me-0">
                                    <div>
                                        <input type="checkbox" class="form-check-input" name='declaration' id="chb1" />
                                        <label for="chb1" id='declar-label'>By Submitting Resume You Confirm That You
                                            Accept The
                                            <a href="terms-and-condition.html" class="color-text">Terms &amp; Conditions</a>
                                            And <a href="#" class="color-text">Privacy Policy</a>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-box mt-4">
                                <button type="submit" id="form-submit" class="theme-btn border-0">
                                    <i class="la la-plus"></i> Submit Your Resume
                                </button>
                            </div>
                            <!-- end btn-box -->
                        </div>
                        <!-- end resume-submit-wrap -->
                    </div>
                    <!-- end candidate-resume-wrap -->
                </div>
                <!-- end col-lg-8 -->
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>
    <script>
        // handel submit event
        const btnSubmit = document.querySelector('#form-submit');
        btnSubmit.addEventListener('click', async (e) => {
            try {
                const empForm = document.querySelector('#emp-form');
                // append education and experience form
                const form = new FormData(empForm);

                const checkbox = document.querySelector('[name="declaration"]');
                form.append('declaration', checkbox.checked ? '1' : '');

                const data = await formSubmit('{{ route('job.create.register') }}', form); //submit form

                Swal.fire({
                    title: data.status,
                    text: data.message,
                    timer: 2000, // 2 seconds
                    icon: "success",
                    didClose: () => {
                        location.reload();
                    }
                });
            } catch (error) {
                const errData = await error.json();
                await handelFormErrors(error, document.querySelector('#emp-form'), errData);

                // Handle declaration box --remove for other projects
                const checkbox = document.querySelector('[name="declaration"]');
                if (checkbox && errData.errors?.declaration) {
                    const feedback = document.querySelector('#chb1 ~ .invalid-feedback');
                    if (feedback) feedback.remove();

                    const span = document.createElement('span');
                    span.className = 'invalid-feedback';
                    span.setAttribute('role', 'alert');

                    const strong = document.createElement('strong');
                    strong.textContent = errData.errors.declaration;
                    span.appendChild(strong);

                    const input = document.querySelector(`#declar-label`);
                    input.classList.add('is-invalid');
                    input.insertAdjacentElement('afterend', span);
                    return;
                };
            }
        });
    </script>
@endsection