@extends('dashboard.partials.master')

@section('title')
    HR AI
@endsection

@section('css')
@endsection
@section('content')
    <main class="container hr-section mt-5 mb-5">
        <!-- head title -->
        <div class=" head container mt-3 mb-3">
            <div class=" d-flex justify-content-between align-items-center flex-wrap ">
                <h1 class="brain-title fw-bold" style="padding: 10px 5px;">HR AI <i data-bs-target="#Hr_info"
                        data-bs-toggle="modal" style="font-size: 20px; padding-left: 10px; cursor: pointer;"
                        class="fa-solid fa-circle-info"></i> </h1>
                <a href="{{ route('hr.create_job') }}" class="btn status-btn">Create a new job</a>
            </div>
        </div>
        <!-- dropdown -->
        <div class="dropdown-menu-jobs mb-2">
            <!-- Dropdown Button -->
            <div class="dropdown m-2">
                <a class="dropdown-toggle" href="#" role="button" id="Alldepartsments" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" style="font-size: 14px;">
                    All departments
                </a>
                <!-- Dropdown Menu -->
                <div class="dropdown-menu" aria-labelledby="Alldepartsments">
                    <a class="dropdown-item active" href="#">All departments</a>
                    <a class="dropdown-item" href="#">HR</a>
                </div>
            </div>
            <div class="dropdown m-2">
                <a class="dropdown-toggle" href="#" role="button" id="groupAppllied" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" style="font-size: 14px;">
                    No group Applied
                </a>
                <!-- Dropdown Menu -->
                <div class="dropdown-menu" aria-labelledby="groupAppllied">
                    <a class="dropdown-item active" href="#">No group Applied</a>
                </div>
            </div>
        </div>
        <!-- cards jops -->
        <div class="cards-jobs">
            <!-- Job Card 1 -->
            <div class="job-card">
                <div class="d-flex justify-content-between align-items-baseline flex-wrap">
                    <div class="col-md-6 col-12">
                        <h6 class="job-title"><a class="text-dark" href="#">Office Manager</a> <span
                                class="job-details">HR · Remote
                                ·
                                Cairo, Cairo
                                Governorate,
                                Egypt</span>
                        </h6>
                    </div>
                    <div class="col-md-6 col-12 d-flex justify-content-end align-items-baseline flex-wrap">
                        <button class="candidate-btn m-1">Find candidate</button>
                        <button class="publish-btn m-1">Published</button>
                        <div class="dropdown m-1">
                            <button class="btn btn-link text-dark" type="button" data-bs-toggle="dropdown"
                                data-boundary="window" aria-haspopup="true" aria-expanded="false"><span
                                    class="fas fa-ellipsis-v fs--1"></span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end border py-0">
                                <div class="py-2">
                                    <a class="dropdown-item" href="#">View job post</a>
                                    <a class="dropdown-item" href="#">Edit job</a>
                                    <a class="dropdown-item" href="#">Refer candidate</a>
                                    <a class="dropdown-item" href="UploadCV.html">Upload Resume</a>
                                    <a class="dropdown-item" href="#">View reports</a>
                                    <a class="dropdown-item text-danger" href="#">Leave jop</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="job-metrics">
                    <div>
                        <a href="#">
                            <span class="mb-2">Sourced</span><br>
                            <span>21</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Applied</span><br>
                            <span>8</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Phone Screen</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Assessment</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Interview</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Offer</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Hired</span><br>
                            <span>-</span>
                        </a>
                    </div>
                </div>
                <div class="d-flex justify-content-between flex-wrap times-data">
                    <p class="mt-3 mb-0"><i class="fa-solid fa-check"></i> Published on your <a href="#">careers
                            page</a> and <a href="#">6 free job boards</a></p>
                    <p class="mt-3 mb-0">Candidates: 8 total · 8 active in pipeline · Last candidate: 16 hours ago</p>
                </div>
            </div>
            <!-- Job Card 2 -->
            <div class="job-card">
                <div class="d-flex justify-content-between align-items-baseline flex-wrap">
                    <div>
                        <h6 class="job-title"><a class="text-dark" href="#">PHP / Laravel Developer</a> <span
                                class="job-details">On-site · Cairo, Cairo Governorate,
                                Egypt</span> </h6>
                    </div>
                    <div class="col-md-6 col-12 d-flex justify-content-end align-items-baseline flex-wrap">
                        <button class="candidate-btn m-1">Find candidate</button>
                        <button class="publish-btn m-1">Published</button>
                        <div class="dropdown m-1">
                            <button class="btn btn-link text-dark" type="button" data-bs-toggle="dropdown"
                                data-boundary="window" aria-haspopup="true" aria-expanded="false"><span
                                    class="fas fa-ellipsis-v fs--1"></span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end border py-0">
                                <div class="py-2">
                                    <a class="dropdown-item" href="#">View job post</a>
                                    <a class="dropdown-item" href="#">Edit job</a>
                                    <a class="dropdown-item" href="#">Refer candidate</a>
                                    <a class="dropdown-item" href="UploadCV.html">Upload Resume</a>
                                    <a class="dropdown-item" href="#">View reports</a>
                                    <a class="dropdown-item text-danger" href="#">Leave jop</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="job-metrics">
                    <div>
                        <a href="#">
                            <span class="mb-2">Sourced</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Applied</span><br>
                            <span>190</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Phone Screen</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Assessment</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Interview</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Offer</span><br>
                            <span>-</span>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span class="mb-2">Hired</span><br>
                            <span>-</span>
                        </a>
                    </div>
                </div>
                <div class="d-flex justify-content-between flex-wrap times-data">
                    <p class="mt-3 mb-0"> <i class="fa-solid fa-check"></i> Published on your <a href="#">careers
                            page</a> and <a href="#">6 free job boards</a></p>
                    <p class="mt-3 mb-0">Candidates: 8 total · 8 active in pipeline · Last candidate: 16 hours ago</p>
                </div>
            </div>
        </div>
        <!-- upload cv -->
        <div class="container mt-5">
            <div class="section-title">
                TALENT POOL
            </div>
            <div class="talent-pool-section d-flex justify-content-between flex-wrap">
                <div>
                    <a href="#" class="talent-pool-title">
                        <i class="bi bi-pin-angle-fill"></i> Talent Pool (2)
                    </a>
                    <span class="job-info" style="padding: 0 10px;"> email : <a href="#">
                            innoworx-1@jobs.workablemail.com</a></span>
                </div>
                <div>
                    <a href="{{ route('hr.uploadResume') }}" class="link-upload">Upload resumes</a>
                </div>
            </div>
        </div>

        <!-- start popup info Hr ai  -->
        {{-- <div class="modal fade" id="Hr_info" aria-hidden="true" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5">What is HR AI ? </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>
                            Brain AI is a knowledge hub that allows you to create and store snippets, websites and files.
                            You can
                            use
                            them to create your own knowledge base. You can also share them with others. You can also edit
                            them. You
                            can also delete them.
                        </p>
                    </div>
                </div>
            </div>
        </div> --}}
    </main>
@endsection

@push('js')
@endpush