@extends('HR.layout')

@section('content')

<div class="d-flex align-items-center">

    <h5 class="mb-0">

        <button
            type="button"
            class="btn btn-icon bg-white waves-effect me-2"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">

            <a href="{{ route('candidates') }}">

                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">

                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                    <path d="M15 6l-6 6l6 6" />

                </svg>

            </a>

        </button>

        Candidates Form

    </h5>

</div>


<div class="card p-3 mt-3">

    <form
        action="{{ route('store_candidates') }}"
        method="post"
        id="candidate_form"
        enctype="multipart/form-data">

        @csrf


        {{-- ===================================================== --}}
        {{-- BASIC DETAILS --}}
        {{-- ===================================================== --}}

        <h6>Basic Details</h6>

        <p>
            <span class="text-danger">*</span>
            indicates required fields
        </p>


        <div class="row g-2">


            {{-- CATEGORY --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">
                    Category
                    <span class="text-danger">*</span>
                </label>

                <select
                    name="category"
                    id="candidate_category"
                    class="form-select @error('category') is-invalid @enderror">

                    <option value="">
                        Select Category
                    </option>

                    <option
                        value="frontend"
                        {{ old('category') == 'frontend' ? 'selected' : '' }}>
                        Front-end
                    </option>

                    <option
                        value="backend"
                        {{ old('category') == 'backend' ? 'selected' : '' }}>
                        Back-end
                    </option>

                    <option
                        value="app"
                        {{ old('category') == 'app' ? 'selected' : '' }}>
                        App Developer
                    </option>

                    <option
                        value="Design"
                        {{ old('category') == 'Design' ? 'selected' : '' }}>
                        UI/UX
                    </option>

                    <option
                        value="Testing"
                        {{ old('category') == 'Testing' ? 'selected' : '' }}>
                        Tester
                    </option>

                    <option
                        value="Sales"
                        {{ old('category') == 'Sales' ? 'selected' : '' }}>
                        Sales
                    </option>

                    <option
                        value="Marketing"
                        {{ old('category') == 'Marketing' ? 'selected' : '' }}>
                        Marketing
                    </option>

                    <option
                        value="HR"
                        {{ old('category') == 'HR' ? 'selected' : '' }}>
                        HR
                    </option>

                    <option
                        value="Account"
                        {{ old('category') == 'Account' ? 'selected' : '' }}>
                        Account
                    </option>

                    <option
                        value="Operation"
                        {{ old('category') == 'Operation' ? 'selected' : '' }}>
                        Operation
                    </option>

                    <option
                        value="Administration"
                        {{ old('category') == 'Administration' ? 'selected' : '' }}>
                        Administration
                    </option>

                </select>


                @error('category')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- CANDIDATE NAME --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Candidate Name
                    <span class="text-danger">*</span>

                </label>

                <input
                    type="text"
                    name="candidate_name"
                    id="candidate_name"
                    value="{{ old('candidate_name') }}"
                    class="form-control @error('candidate_name') is-invalid @enderror"
                    placeholder="Enter candidate name">


                @error('candidate_name')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- ===================================================== --}}
            {{-- TECHNOLOGY --}}
            {{-- ===================================================== --}}

            @php

                $technologies = [

                    'Laravel',
                    'PHP',
                    'Java',
                    'Spring Boot',
                    'Node.js',
                    'React',
                    'Angular',
                    'Vue.js',
                    'Flutter',
                    'Dart',
                    'HTML',
                    'CSS',
                    'Bootstrap',
                    'Tailwind CSS',
                    'JavaScript',
                    'TypeScript',
                    'MySQL',
                    'MongoDB',
                    'PostgreSQL',
                    'Python',
                    'C',
                    'C++',
                    'Git',
                    'GitHub',
                    'Docker',
                    'AWS',
                    'Figma',
                    'UI/UX',
                    'Testing',
                    'Manual Testing',
                    'Automation Testing',
                    'Sales',
                    'Marketing',
                    'Communication',
                    'Data Analysis',
                    'Machine Learning',

                ];

                $selectedTechnologies =
                    old('technology', []);

            @endphp


            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Technology / Skills

                    <span class="text-danger">*</span>

                </label>


                <div class="dropdown w-100 position-relative">


                    <button
                        class="btn btn-outline-secondary w-100 text-start d-flex justify-content-between align-items-center"
                        type="button"
                        id="technologyDropdownBtn"
                        aria-expanded="false">

                        <span id="technologySelectedText">
                            Select Technology / Skills
                        </span>

                        <span>
                            &#9662;
                        </span>

                    </button>


                    <div
                        class="dropdown-menu w-100 p-2 shadow"
                        id="technologyDropdownMenu">


                        <input
                            type="text"
                            class="form-control form-control-sm mb-2"
                            id="technologySearch"
                            placeholder="Search technology...">


                        <div class="form-check border-bottom pb-2 mb-2">

                            <input
                                class="form-check-input"
                                type="checkbox"
                                id="selectAllTechnologies">

                            <label
                                class="form-check-label fw-bold"
                                for="selectAllTechnologies">

                                Select All

                            </label>

                        </div>


                        <div
                            class="overflow-auto"
                            style="max-height: 220px;">


                            @foreach ($technologies as $index => $technology)

                                <div class="form-check technology-option">

                                    <input
                                        class="form-check-input technology-checkbox"
                                        type="checkbox"
                                        name="technology[]"
                                        value="{{ $technology }}"
                                        id="technology_{{ $index }}"
                                        {{ in_array($technology, $selectedTechnologies) ? 'checked' : '' }}>


                                    <label
                                        class="form-check-label"
                                        for="technology_{{ $index }}">

                                        {{ $technology }}

                                    </label>

                                </div>

                            @endforeach


                        </div>

                    </div>

                </div>


                @error('technology')

                    <div class="text-danger small mt-1">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- WORK STATUS --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Work Status
                    <span class="text-danger">*</span>

                </label>


                <select
                    name="work_status"
                    id="candidate_work_status"
                    class="form-select @error('work_status') is-invalid @enderror">

                    <option value="">
                        Select Work Status
                    </option>

                    <option
                        value="Experienced"
                        {{ old('work_status') == 'Experienced' ? 'selected' : '' }}>

                        Experienced

                    </option>

                    <option
                        value="Freshers"
                        {{ old('work_status') == 'Freshers' ? 'selected' : '' }}>

                        Freshers

                    </option>

                </select>


                @error('work_status')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- WORK PREFERENCE --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Work Preference
                    <span class="text-danger">*</span>

                </label>


                <select
                    name="work_preference"
                    id="candidate_work_preference"
                    class="form-select @error('work_preference') is-invalid @enderror">


                    <option value="">
                        Select Work Preference
                    </option>


                    <option
                        value="Full Time WFH"
                        {{ old('work_preference') == 'Full Time WFH' ? 'selected' : '' }}>

                        Full Time WFH

                    </option>


                    <option
                        value="Full Time WFO"
                        {{ old('work_preference') == 'Full Time WFO' ? 'selected' : '' }}>

                        Full Time WFO

                    </option>


                    <option
                        value="Hybrid WFH"
                        {{ old('work_preference') == 'Hybrid WFH' ? 'selected' : '' }}>

                        Hybrid WFH

                    </option>


                    <option
                        value="Hybrid WFO"
                        {{ old('work_preference') == 'Hybrid WFO' ? 'selected' : '' }}>

                        Hybrid WFO

                    </option>


                </select>


                @error('work_preference')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- EXPERIENCE --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Experience
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="number"
                    name="experience"
                    id="candidate_experience"
                    value="{{ old('experience') }}"
                    class="form-control @error('experience') is-invalid @enderror">


                @error('experience')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>


        </div>



        {{-- ===================================================== --}}
        {{-- PROJECT EXPERIENCE --}}
        {{-- ===================================================== --}}

        <hr>

        <h6>
            Project Experience
        </h6>


        <p class="text-muted">

            Share details about your previous projects, roles,
            responsibilities, technologies used, and achievements.

        </p>


        <div class="row g-2">

            <div class="col-12 mb-3">


                <label class="form-label">

                    Previous Project Experience

                    <span class="text-danger">*</span>

                </label>


                {{-- QUILL EDITOR --}}

                <div
                    id="project_experience_editor"
                    style="min-height: 250px;">
                </div>


                {{-- ACTUAL FIELD SENT TO LARAVEL --}}

                <textarea
                    name="project_experience"
                    id="project_experience"
                    class="d-none">{{ old('project_experience') }}</textarea>


                @error('project_experience')

                    <div class="text-danger small mt-1">
                        {{ $message }}
                    </div>

                @enderror


            </div>

        </div>



        {{-- ===================================================== --}}
        {{-- EMPLOYMENT INFO --}}
        {{-- ===================================================== --}}

        <hr>

        <h6>
            Employment Info & Resume
        </h6>


        <div class="row g-2">


            {{-- RESUME --}}

            <div class="col-lg-3 mb-3">

                <label class="form-label">

                    Resume
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="file"
                    name="resume"
                    id="resume"
                    class="form-control @error('resume') is-invalid @enderror">


                @error('resume')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- NOTICE PERIOD --}}

            <div class="col-lg-3 mb-3">

                <label class="form-label">

                    Notice Period(month)
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="number"
                    name="notice_period"
                    id="notice_period"
                    value="{{ old('notice_period') }}"
                    class="form-control @error('notice_period') is-invalid @enderror"
                    placeholder="Enter Notice Period in days">


                @error('notice_period')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- CURRENT SALARY --}}

            <div class="col-lg-3 mb-3">

                <label class="form-label">

                    Current Salary
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="number"
                    name="current_salary"
                    id="current_salary"
                    value="{{ old('current_salary') }}"
                    class="form-control @error('current_salary') is-invalid @enderror"
                    placeholder="Enter Current Salary">


                @error('current_salary')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- EXPECTED SALARY --}}

            <div class="col-lg-3 mb-3">

                <label class="form-label">

                    Expected Salary
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="number"
                    name="expected_salary"
                    id="expected_salary"
                    value="{{ old('expected_salary') }}"
                    class="form-control @error('expected_salary') is-invalid @enderror"
                    placeholder="Enter Expected Salary">


                @error('expected_salary')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>


        </div>



        {{-- ===================================================== --}}
        {{-- CONTACT INFO --}}
        {{-- ===================================================== --}}

        <hr>

        <h6>
            Contact Info
        </h6>


        <div class="row g-2">


            {{-- PHONE --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Phone Number
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="tel"
                    name="phone_number"
                    id="phone_number"
                    value="{{ old('phone_number') }}"
                    class="form-control @error('phone_number') is-invalid @enderror"
                    minlength="10"
                    maxlength="10"
                    placeholder="Enter Phone Number">


                @error('phone_number')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- ALTERNATE PHONE --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Alternate Phone Number

                </label>


                <input
                    type="tel"
                    name="alternate_phone_number"
                    id="alternate_phone_number"
                    value="{{ old('alternate_phone_number') }}"
                    class="form-control @error('alternate_phone_number') is-invalid @enderror"
                    minlength="10"
                    maxlength="10"
                    placeholder="Enter Alternate Phone Number">


                @error('alternate_phone_number')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- EMAIL --}}

            <div class="col-lg-4 mb-3">

                <label class="form-label">

                    Email Address
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="email"
                    name="email"
                    id="email"
                    value="{{ old('email') }}"
                    class="form-control @error('email') is-invalid @enderror"
                    placeholder="Enter Email Address">


                @error('email')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>


        </div>



        {{-- ===================================================== --}}
        {{-- LOCATION INFO --}}
        {{-- ===================================================== --}}

        <hr>

        <h6>
            Location Info
        </h6>


        <div class="row g-2">


            {{-- STATE --}}

            <div class="col-lg-6 mb-3">

                <label class="form-label">

                    State
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="text"
                    name="state"
                    id="state"
                    value="{{ old('state') }}"
                    class="form-control @error('state') is-invalid @enderror"
                    placeholder="Enter or Select state"
                    list="stateList">


                <datalist id="stateList">

                    <option value="Tamil Nadu">
                    <option value="Karnataka">
                    <option value="Telangana">

                </datalist>


                @error('state')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>



            {{-- CITY --}}

            <div class="col-lg-6 mb-3">

                <label class="form-label">

                    City
                    <span class="text-danger">*</span>

                </label>


                <input
                    type="text"
                    name="city"
                    id="city"
                    value="{{ old('city') }}"
                    class="form-control @error('city') is-invalid @enderror"
                    placeholder="Enter or Select City"
                    list="cityList">


                <datalist id="cityList">

                    <option value="Chennai">
                    <option value="Bangalore">
                    <option value="Hyderabad">

                </datalist>


                @error('city')

                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>

                @enderror

            </div>


        </div>



        {{-- ===================================================== --}}
        {{-- BUTTONS --}}
        {{-- ===================================================== --}}

        <hr>


        <div class="form-actions d-flex justify-content-center mt-3">

            <button
                type="submit"
                class="btn btn-primary me-3"
                id="candidate_submit">

                Submit

            </button>


            <button
                type="reset"
                class="btn btn-label-secondary">

                Reset

            </button>

        </div>


    </form>

</div>



{{-- ========================================================= --}}
{{-- QUILL CSS --}}
{{-- ========================================================= --}}

<link
    href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"
    rel="stylesheet">



{{-- ========================================================= --}}
{{-- JQUERY --}}
{{-- ========================================================= --}}

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>



{{-- ========================================================= --}}
{{-- BOOTSTRAP --}}
{{-- ========================================================= --}}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>



{{-- ========================================================= --}}
{{-- BOOTSTRAP MULTISELECT --}}
{{-- ========================================================= --}}

<script src="https://cdn.jsdelivr.net/npm/bootstrap-multiselect@1.1.2/dist/js/bootstrap-multiselect.min.js"></script>



{{-- ========================================================= --}}
{{-- TECHNOLOGY DROPDOWN --}}
{{-- ========================================================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    const btn =
        document.getElementById('technologyDropdownBtn');

    const menu =
        document.getElementById('technologyDropdownMenu');

    const search =
        document.getElementById('technologySearch');

    const selectAll =
        document.getElementById('selectAllTechnologies');

    const selectedText =
        document.getElementById('technologySelectedText');


    /*
    |--------------------------------------------------------------------------
    | Open / Close Dropdown
    |--------------------------------------------------------------------------
    */

    btn.addEventListener('click', function () {

        menu.classList.toggle('show');

        btn.setAttribute(
            'aria-expanded',
            menu.classList.contains('show')
        );

    });


    /*
    |--------------------------------------------------------------------------
    | Prevent dropdown from closing
    |--------------------------------------------------------------------------
    */

    menu.addEventListener('click', function (e) {

        e.stopPropagation();

    });


    /*
    |--------------------------------------------------------------------------
    | Close when clicking outside
    |--------------------------------------------------------------------------
    */

    document.addEventListener('click', function (e) {

        if (
            !e.target.closest('#technologyDropdownMenu') &&
            !e.target.closest('#technologyDropdownBtn')
        ) {

            menu.classList.remove('show');

            btn.setAttribute(
                'aria-expanded',
                'false'
            );

        }

    });


    /*
    |--------------------------------------------------------------------------
    | Update Selected Count
    |--------------------------------------------------------------------------
    */

    function updateCount() {

        const boxes =
            document.querySelectorAll(
                '.technology-checkbox'
            );

        const checked =
            document.querySelectorAll(
                '.technology-checkbox:checked'
            ).length;


        selectedText.textContent =
            checked > 0
                ? checked + ' technologies selected'
                : 'Select Technology / Skills';


        selectAll.checked =
            checked === boxes.length;


        selectAll.indeterminate =
            checked > 0 &&
            checked < boxes.length;

    }


    /*
    |--------------------------------------------------------------------------
    | Individual Technology Checkbox
    |--------------------------------------------------------------------------
    */

    document
        .querySelectorAll('.technology-checkbox')
        .forEach(function (checkbox) {

            checkbox.addEventListener(
                'change',
                updateCount
            );

        });


    /*
    |--------------------------------------------------------------------------
    | Select All
    |--------------------------------------------------------------------------
    */

    selectAll.addEventListener(
        'change',
        function () {

            document
                .querySelectorAll('.technology-checkbox')
                .forEach(function (checkbox) {

                    if (
                        checkbox
                            .closest('.technology-option')
                            .style.display !== 'none'
                    ) {

                        checkbox.checked =
                            selectAll.checked;

                    }

                });


            updateCount();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Search Technology
    |--------------------------------------------------------------------------
    */

    search.addEventListener(
        'input',
        function () {

            const value =
                this.value.toLowerCase();


            document
                .querySelectorAll('.technology-option')
                .forEach(function (option) {

                    option.classList.toggle(
                        'd-none',
                        !option.textContent
                            .toLowerCase()
                            .includes(value)
                    );

                });

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Initial Count
    |--------------------------------------------------------------------------
    */

    updateCount();

});

</script>



{{-- ========================================================= --}}
{{-- QUILL --}}
{{-- ========================================================= --}}

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>


<script>

document.addEventListener('DOMContentLoaded', function () {


    /*
    |--------------------------------------------------------------------------
    | Initialize Quill
    |--------------------------------------------------------------------------
    */

    const projectExperienceEditor =
        new Quill(
            '#project_experience_editor',
            {
                theme: 'snow'
            }
        );


    /*
    |--------------------------------------------------------------------------
    | Get textarea
    |--------------------------------------------------------------------------
    */

    const projectExperienceTextarea =
        document.getElementById(
            'project_experience'
        );


    /*
    |--------------------------------------------------------------------------
    | Get form
    |--------------------------------------------------------------------------
    */

    const candidateForm =
        document.getElementById(
            'candidate_form'
        );


    /*
    |--------------------------------------------------------------------------
    | Get submit button
    |--------------------------------------------------------------------------
    */

    const submitButton =
        document.getElementById(
            'candidate_submit'
        );


    /*
    |--------------------------------------------------------------------------
    | Restore old project experience
    |--------------------------------------------------------------------------
    */

    const oldProjectExperience =
        projectExperienceTextarea.value;


    if (
        oldProjectExperience &&
        oldProjectExperience.trim() !== ''
    ) {

        projectExperienceEditor.root.innerHTML =
            oldProjectExperience;

    }


    /*
    |--------------------------------------------------------------------------
    | FORM SUBMIT
    |--------------------------------------------------------------------------
    |
    | IMPORTANT:
    | Do NOT use:
    |
    | document.getElementById('candidate_form').submit();
    |
    | because that bypasses this submit event.
    |
    */

    candidateForm.addEventListener(
        'submit',
        function (event) {


            /*
            |--------------------------------------------------------------------------
            | Copy Quill HTML to textarea
            |--------------------------------------------------------------------------
            */

            projectExperienceTextarea.value =
                projectExperienceEditor.root.innerHTML;


            /*
            |--------------------------------------------------------------------------
            | Disable submit button
            |--------------------------------------------------------------------------
            */

            if (submitButton) {

                submitButton.disabled = true;

                submitButton.innerText =
                    'Processing...';

            }


        }
    );


});

</script>

@endsection