@extends('dashboard.partials.master')

@section('title')
    Create New Job
@endsection

@section('css')
@endsection
@section('content')
    <header class="Hr-header">
        <!-- head -->
        <div class=" head container">
            <div class="head-data">
                <div class="col-12 d-flex justify-content-between align-items-baseline flex-wrap">
                    <div class="col-md-6 ">
                        <h1>New Job
                        </h1>
                    </div>
                    <div class="col-md-6 d-flex justify-content-end align-items-baseline flex-wrap">
                        <a href="#" class="btn status-btn">Save & Continue</a>
                    </div>
                </div>
                <!-- links data head -->
                <div class="row">
                    <div class="complete-info-link d-flex flex-wrap">
                        <div class="col-md-3 col-md-6 data-link">
                            <div class="content-wrapper">
                                <a class="text-dark" href="Create_new_job.html">Job info</a>
                                <br>
                                <small class="active">Tell applicants about this role, including job title, location and
                                    requirements.</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-md-6 data-link">
                            <div class="content-wrapper">
                                <a class="text-dark" href="Application_form.html">Application form</a>
                                <br>
                                <small>Design the application form for this role.</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-md-6 data-link">
                            <div class="content-wrapper">
                                <a class="text-dark" href="Team_member.html">Team members</a>
                                <br>
                                <small>Invite or add co-workers to collaborate on this job.</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-md-6 data-link">
                            <div class="content-wrapper">
                                <a class="text-dark" href="Workflow.html">Workflow</a>
                                <br>
                                <small>Create a kit or assessment test for a structured interview process.</small>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </header>
    <!-- content of page and add data -->
    <main class="container hr-section mt-5 mb-5">
        <!-- start breadcrumb -->
        <nav aria-label="breadcrumb mb-5">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Home</a></li>
                <li><a href="{{ route('hr.index') }}">HR</a></li>
                <li class="active" aria-current="page">Create New Job</li>
            </ol>
        </nav>
        <!-- end breadcrumb -->
        <div class="row">
            <div class="col-12 col-md-8 col-lg-8">
                <div class="job-details-data">
                    <p>Job title and department </p>
                    <form action="#">
                        <!-- job title -->
                        <div class="mb-3">
                            <label class="form-label">Job title</label>
                            <input type="text" name="job_title" class="form-control">
                            <div class="form-text">80 characters left. No special characters. </div>
                        </div>
                        <!-- department , job code -->
                        <div class="row g-3 mt-3">
                            <div class="col-auto col-md-4 col-6">
                                <label class="visually-hidden">Department</label>
                                <select name="department" class="form-select">
                                    <option selected>Choose </option>
                                    <option>HR</option>
                                    <option>Programming</option>
                                </select>
                            </div>
                            <div class="col-auto col-md-4 col-6">
                                <label class="visually-hidden">Job Code</label>
                                <input class="form-control" type="text" name="job_code" placeholder="code">
                            </div>
                        </div>
                        <!-- location -->
                        <div class="mb-3 mt-4">
                            <label class="form-label">Workplace</label>
                            <select name="location" id="location" class="form-select">
                                <option selected> Choose Workplace</option>
                                <option> on-site</option>
                                <option> Hybrid</option>
                                <option> Remote</option>
                            </select>
                        </div>
                        <!--offline location -->
                        <div class="mb-3">
                            <label class="form-label">offline location</label>
                            <input type="text" name="job_title" class="form-control" placeholder="Enter location">
                        </div>
                        <hr style=" padding: 0 20px; color: #999; margin: 30px auto;">
                        <!-- description -->
                        <div class="mb-3">
                            <div class="d-flex justify-content-end align-items-baseline m-2">
                                <a href="#" class="btn-clear m-1"> Clear All </a>
                                <a href="#" class="btn-generate m-1"> <i class="fa-solid fa-star fa-2xs"
                                        style="color: #FFD43B;"></i>
                                    Generate with ai </a>
                            </div>
                            <label class="form-label"> About the role</label>
                            <textarea name="job_description" class="form-control" rows="20"></textarea>
                        </div>
                        <!-- Company industry and Job functions -->
                        <div class="row g-3 mt-3">
                            <h6 class="mt-3">Company industry and Job functions </h6>
                            <div class="col-md-6">
                                <label>Company industry</label>
                                <select name="Company-industry" class="form-select">
                                    <option selected>Choose Company industry </option>
                                    <option>Hardware</option>
                                    <option>Programming</option>
                                    <option>Software</option>
                                    <option>Finance</option>
                                    <option>Industry</option>
                                    <option>Other</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>Job function</label>
                                <select name="Job-function" class="form-select">
                                    <option selected>Choose Job function </option>
                                    <option>Hardware</option>
                                    <option>Programming</option>
                                    <option>Software</option>
                                    <option>Finance</option>
                                    <option>Industry</option>
                                    <option>Other</option>
                                </select>
                            </div>
                        </div>
                        <!-- Employment details -->
                        <div class="row g-3 mt-3">
                            <h6 class="mt-3">Employment details </h6>
                            <div class="col-md-6">
                                <label>Employment type</label>
                                <select name="Employment-type" class="form-select">
                                    <option selected>Choose Employment type </option>
                                    <option>Full-Time</option>
                                    <option>Part-Time</option>
                                    <option>Contract</option>
                                    <option>Other</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>Experience</label>
                                <select name="Experience" class="form-select">
                                    <option selected>Choose Experience </option>
                                    <option>Mid-level</option>
                                    <option>Fresh</option>
                                    <option>Senior</option>
                                    <option>Entry Level</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>Education</label>
                                <select name="Experience" class="form-select">
                                    <option selected>Choose Education </option>
                                    <option>College</option>
                                    <option>High School</option>
                                    <option>Bachelor`s Degree</option>
                                    <option>Master`s Degree</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="keyword-input">Keywords</label>
                                <div class="form-control d-flex flex-wrap align-items-center" id="keyword-container">
                                    <div id="tags-container" class="d-flex flex-wrap"></div>
                                    <input type="text" id="keyword-input" class="border-0 flex-grow-1"
                                        style="outline: none; min-width: 60px;" placeholder="Enter keywords">
                                </div>
                                <input type="hidden" name="job_keywords" id="job_keywords">
                            </div>
                        </div>
                        <!-- Annual salary -->
                        <div class="row g-3 mt-3">
                            <h6>Annual salary </h6>
                            <div class="row align-items-center ">
                                <div class="col-md-3">
                                    <label for="from">From</label>
                                    <input type="number" id="from" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label for="to">To</label>
                                    <input type="number" id="to" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="currency">Currency</label>
                                    <select id="currency" name="Currency" class="form-select">
                                        <option selected>Choose Currency</option>
                                        <option>Egyptian Pound</option>
                                        <option>US Dollar</option>
                                        <option>Indian Rupee</option>
                                        <option>Japanese Yen</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <hr style="width: 95%; color: #999; margin: 30px auto;">
                        <!-- Buttons -->
                        <div class="col-12 d-flex justify-content-between align-items-baseline flex-wrap">
                            <div class="col-md-6 d-flex justify-content-start align-items-baseline flex-wrap">
                                <a href="#" class="btn status-btn">Save & Continue</a>
                                <a href="#" class="candidate-btn m-1 ">Save Draft</a>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end align-items-baseline flex-wrap mt-2 mb-2">
                                <a href="#" class="text-danger ">Delete job</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-4">
                <aside class="team-members sticky-top" style="top: 2rem;">
                    <small class="mb-4">Tips</small>
                    <br>
                    <small>Use common job titles for searchability
                        Advertise for just one job eg: 'Nurse', not 'nurses'
                        No general opportunities or events</small>
                </aside>
            </div>
        </div>
    </main>
@endsection

@push('js')
@endpush