@extends('job.layout.web')
@section('title', 'Add Job')
@section('content')
<style>
    .error {
        color: red
    }

    .custom-joined {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
</style>
<section class="form-shared padding-top-100px padding-bottom-100px">
    <div class="container">
        <div class="row d-flex justify-content-end">
            <div class="col-12 col-md-2">
                <form action="{{ route('company.logout') }}" method="POST">
                    @csrf
                    <button class="theme-btn bg-6 border-0 w-100" type="submit">
                        Logout
                    </button>
                </form>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-lg-12">
                <div class="billing-form-item">
                    <div class="billing-title-wrap">
                        <h3 class="widget-title pb-0">Add a Job</h3>
                        <div class="title-shape margin-top-10px"></div>
                    </div>
                    <div class="billing-content">
                        <div class="contact-form-action">
                            <form method="POST" action="{{ route('job.store') }}" id="add_job">
                                @csrf
                                <input type="hidden" value={{$id}} name="company_id" id="company_id">
                                <div class="row">
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Job Title</label>
                                            <div class="form-group">
                                                <span class="la la-briefcase form-icon"></span>
                                                <input
                                                    class="form-control"
                                                    type="text"
                                                    name="title"
                                                    placeholder="Enter job title" />
                                                <span class="error title_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Job Type</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="type">
                                                    <option value>Select Job Type</option>
                                                    <option value="1">Full Time</option>
                                                    <option value="2">Part Time</option>
                                                    <option value="3">Temporary</option>
                                                    <option value="4">Internship</option>
                                                    <option value="5">Permanent</option>
                                                    <option value="6">Freelance</option>
                                                </select>
                                                <span class="error type_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Career Level</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="career_level">
                                                    <option value>Choose One</option>
                                                    <option value="1">Manager</option>
                                                    <option value="2">Officer</option>
                                                    <option value="3">Mobile Designer</option>
                                                    <option value="4">Web Designer</option>
                                                    <option value="5">Product Designer</option>
                                                    <option value="6">Creative Director</option>
                                                    <option value="7">Art Director</option>
                                                    <option value="8">Interaction Designer</option>
                                                    <option value="9">Motion Designer</option>
                                                    <option value="10">Illustrator</option>
                                                    <option value="11">Animator</option>
                                                    <option value="12">Student</option>
                                                    <option value="13">Executive</option>
                                                    <option value="14">Brand Designer</option>
                                                    <option value="15">Mobile Developer</option>
                                                    <option value="16">Front-end Developer</option>
                                                    <option value="17">Content Writer</option>
                                                    <option value="18">Other</option>
                                                </select>
                                                <span class="error career_level_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">category</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="category">
                                                    <option value>Select a category</option>
                                                    <option value="1">All Category</option>
                                                    <option value="2">Accounting / Finance</option>
                                                    <option value="3">Education</option>
                                                    <option value="4">Design & Creative</option>
                                                    <option value="5">Health Care</option>
                                                    <option value="6">Engineer & Architects</option>
                                                    <option value="7">Marketing & Sales</option>
                                                    <option value="8">Garments / Textile</option>
                                                    <option value="9">Customer Support</option>
                                                    <option value="10">Digital Media</option>
                                                    <option value="11">Telecommunication</option>
                                                </select>
                                                <span class="error category_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Offered Salary</label>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <span
                                                            class="la la-rupee-sign form-icon"></span>
                                                        <input
                                                            class="form-control"
                                                            type="number"
                                                            name="min_salary"
                                                            placeholder="Min" />
                                                        <span class="error min_salary_error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <span
                                                            class="la la-rupee-sign form-icon"></span>
                                                        <input
                                                            class="form-control"
                                                            type="number"
                                                            name="max_salary"
                                                            placeholder="Max" />
                                                        <span class="error max_salary_error"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Experience</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="experience">
                                                    <option value>Choose Experience</option>
                                                    <option value="1">No Experience</option>
                                                    <option value="2">Less than 1 Year</option>
                                                    <option value="3">1 to 2 Year(s)</option>
                                                    <option value="4">2 to 4 Year(s)</option>
                                                    <option value="5">3 to 5 Year(s)</option>
                                                    <option value="3">2 Years</option>
                                                    <option value="4">3 Years</option>
                                                    <option value="5">4 Years</option>
                                                    <option value="6">Over 5 Years</option>
                                                </select>
                                                <span class="error experience_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Qualification</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="qualification">
                                                    <option value>Choose Qualification</option>
                                                    <option value="1">No Experience</option>
                                                    <option value="2">Matriculation</option>
                                                    <option value="3">Intermediate</option>
                                                    <option value="4">Diploma</option>
                                                    <option value="5">Graduate</option>
                                                    <option value="6">Certificate</option>
                                                    <option value="7">Associate Degree</option>
                                                    <option value="8">Bachelor's Degree</option>
                                                    <option value="9">Master's Degree</option>
                                                    <option value="10">Doctorate Degree</option>
                                                </select>
                                                <span class="error qualification_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Industry</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="industry">
                                                    <option value>Select industry</option>
                                                    <option value="1">IT Contractor</option>
                                                    <option value="2">Accountancy</option>
                                                    <option value="3">Banking</option>
                                                    <option value="4">Charity & Voluntary</option>
                                                    <option value="5">Digital & Creative</option>
                                                    <option value="6">Legal jobs</option>
                                                    <option value="7">Leisure & Tourism</option>
                                                    <option value="8">Media</option>
                                                    <option value="9">Marketing & PR</option>
                                                    <option value="0">Motoring & Automotive</option>
                                                    <option value="10">Retail</option>
                                                    <option value="11">Sales & Marketing</option>
                                                </select>
                                                <span class="error industry_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">Skill Requirement</label>
                                            <div class="form-group user-chosen-select-container">
                                                <select name="skill" class="user-chosen-select" multiple>
                                                    <option value>Select Skill Required</option>
                                                    <option value="1">HTML5</option>
                                                    <option value="2">CSS3</option>
                                                    <option value="3">PHP</option>
                                                    <option value="4">Javascript</option>
                                                    <option value="5">Laravel</option>
                                                    <option value="6">Photoshop</option>
                                                    <option value="7">WordPress</option>
                                                    <option value="8">Vuejs</option>
                                                    <option value="9">React</option>
                                                </select>
                                                <span class="error skill_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 column-lg-full">
                                        <div class="input-box">
                                            <label class="label-text">No. Of Vacancy</label>
                                            <div
                                                class="form-group user-chosen-select-container">
                                                <select class="user-chosen-select" name="vacancy">
                                                    <option value="1" selected>1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                    <option value="7">7</option>
                                                    <option value="8">8</option>
                                                    <option value="9">9</option>
                                                    <option value="10">10</option>
                                                </select>
                                                <span class="error vacancy_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="input-box">
                                            <label class="label-text">Job Description</label>
                                            <div class="form-group mb-0">
                                                <textarea
                                                    class="message-control form-control user-text-editor"
                                                    name="job_description"></textarea>
                                            </div>
                                            <span class="error job_description_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-box mt-4">
                                    <button type="submit" id="submit" class="theme-btn border-0">
                                        Submit
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
@section('script')
<script>
    $(document).ready(function() {
        $('#add_job').on('submit', function() {
            event.preventDefault();
            $(".title_error").text("");
            $(".type_error").text("");
            $(".career_level_error").text("");
            $(".category_error").text("");
            $(".min_salary_error").text("");
            $(".max_salary_error").text("");
            $(".experience_error").text("");
            $(".qualification_error").text("");
            $(".industry_error").text("");
            $(".skill_error").text("");
            $(".job_description_error").text("");
            $('#submit').prop('disabled', true);

            const formData = new FormData($('#add_job')[0]);
            const dataAsObject={}
            for (const [key, value] of formData.entries()) {
                if (key in dataAsObject) {
                    if (!Array.isArray(dataAsObject[key])) {
                    dataAsObject[key] = [dataAsObject[key]];
                    }
                    dataAsObject[key].push(value);
                } else {
                    dataAsObject[key] = value;
                }
            }
            const response = fetch("{{ route('job.store') }}", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(dataAsObject)
            }).then(response => {
                if (!response.ok) {
                    return response.json()
                        .then(response => {
                            if (response.errors) {
                                for (field in response.errors) {
                                    if (field == 'exception') {
                                        Swal.fire({
                                            title: "Error!",
                                            text: response.errors[field][0],
                                            icon: "error"
                                        });
                                        break;
                                    }
                                    response.errors[field].forEach(function(item) {
                                        console.log('.' + field + '_error')
                                        $('.' + field + '_error').text(item);
                                    })
                                }
                                $('#submit').prop('disabled', false);
                                window.scrollTo(0, 0);
                            }
                        })
                } else {
                    return response.json()
                        .then(response => {
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            }).then(function() {
                                location.reload();
                            })
                            $('#submit').prop('disabled', false);
                        })
                }
            }).catch(err => {

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