@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>

                                        <!-- Job Position -->
                                        <div class="col-lg-4 column-lg-full">
                                            <div class="input-box">
                                                <label class="label-text">Job Position</label>
                                                <div class="form-group user-chosen-select-container">
                                                    <select class="user-chosen-select" name="job_position">
                                                        <option value="">Select a job position</option>
                                                        <option value="1">All Positions</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 job_position_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-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("");
                $(".job_position_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