@extends('webFront.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link href="{{ asset('webFront/select2/dist/css/select2-bootstrap5.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('admin/select2/dist/css/select2.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('admin/select2/dist/css/select2-bootstrap5.min.css') }}" rel="stylesheet"/>
@endpush
@section('content')
    <div class="card text-bg-dark job-banner mt-3">
        <div class="dark-image">
            <img src="{{asset('webFront/images/career-banner.jpg')}}" class="card-img" alt="...">
        </div>
        <div class="card-img-overlay">
            <h5 class="card-title">Find the job you've always wanted</h5>
            <p class="card-text">Join Us</p>
        </div>
    </div>
    {{-- Jobs Area--}}
    <div class="row">
        {{-- Jobs Area--}}
        <div class="col-lg-8">
            <div class="mt-3">
                <form action="{{route('main')}}" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-12">
                            <div class="row gy-2 gx-3 align-items-center">
                                <div class="col-md-4 mb-1 mb-md-0">
                                    <select class="form-control form-select select2-department"
                                            name="department"></select>
                                </div>
                                <div class="col-md-4 mb-1 mb-md-0">
                                    <select class="form-control form-select select2-qualification"
                                            name="qualification"></select>
                                </div>
                                <div class="col-md-4 mb-1 mb-md-0">
                                    <select class="form-control form-select select2-location" name="location"></select>
                                </div>
                            </div>
                            <div class="row d-flex justify-content-end mt-2">
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-sm btn-dark">
                                        Search
                                    </button>
                                    <a href="{{route('main')}}" class="btn btn-sm btn-dark text-white">
                                        Reset
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            @if(count($openPosition) > 0)
                <div class="row">
                    @foreach($openPosition as $position)
                        <div class="col-lg-12 card-event-list">
                            <div class="card rounded-0 rounded-bottom mt-3">
                                <div class="row g-0">
                                    <div class="col-md-12 ps-md-1 application-card-box">
                                        <div class="card-body">
                                            <h4 class="card-details-heading">{{$position->title}}</h4>
                                            <p class="card-text my-1">
                                                {{$position->description}}
                                            </p>
                                            <p class="card-text mb-0">
                                                <small class="text-dark"><b>Designation: </b>{{$position->designation}}
                                                </small>
                                            </p>
{{--                                            <p class="card-text mb-0">--}}
{{--                                                <small class="text-dark"><b>Salary: </b>{{$position->salary}}</small>--}}
{{--                                            </p>--}}
                                            <p class="card-text mb-0">
                                                <small class="text-dark"><b>No of Seats: </b>{{$position->seats}}
                                                </small>
                                            </p>
                                            <p class="card-text mb-0">
                                                <small class="text-dark"><b>Job Nature: </b>{{$position->shift}}</small>
                                            </p>
                                            <p class="card-text mb-0">
                                                <small class="text-dark"><b>Location: </b>{{$position->location}}
                                                </small>
                                            </p>
                                            <p class="card-text mb-0">
                                                <small class="text-dark"><b>Gender: </b>{{$position->gender}}</small>
                                            </p>
                                            <p class="card-text mb-0">
                                                <small class="text-dark"><b>Deadline: </b>{{$position->closing_date}}
                                                </small>
                                            </p>
                                            <div class="flex justify-content-end text-end">
                                                <a href="{{route('job.job-details', $position->job_id)}}"
                                                   type="button"
                                                   class="btn btn-dark btn-sm mb-2">
                                                    Detail
                                                </a>
                                                <a href="{{route('user.get.open.position.detail', $position->job_id)}}"
                                                   type="button"
                                                   class="btn btn-dark btn-sm mb-2">
                                                    Apply
                                                </a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="pagination-wrapper d-flex justify-content-end mt-3">
                    {{ $openPosition->withQueryString()->links() }}
                </div>
            @else
                <div class="card text-bg-dark job-banner my-3">
                    <div class="dark-image">
                        <img src="{{asset('webFront/images/no-jobs.jpg')}}" class="card-img" alt="...">
                    </div>
                    <div class="card-img-overlay">
                        <div class="row align-items-center">
                            <div class="col-md-10">
                                <p class="card-text mb-0 text-start">Currently, there are no <b class="text-warning">open
                                        positions</b> available. However, we encourage you to submit your <b
                                        class="text-warning">application</b> for future opportunities. Thank you for
                                    your interest!</p>
                            </div>
                            <div class="col-md-2">
                                <a href="{{route('register')}}"
                                   type="button"
                                   class="btn btn-warning btn-sm btn-application-apply float-end mb-2">
                                    Sign Up
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        {{-- Jobs Sidebar--}}
        <div class="col-lg-4 my-3">
            {{--Card Box--}}
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="card text-center rounded-0 h-100">
                        <div class="card-body">
                            <h3>25+</h3>
                            <p>Departments</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card text-center rounded-0 h-100">
                        <div class="card-body">
                            <h3>20+</h3>
                            <p>Student Societies</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card text-center rounded-0 h-100">
                        <div class="card-body">
                            <h3>50+</h3>
                            <p>International Collaboration</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card text-center rounded-0 h-100">
                        <div class="card-body">
                            <h3>440+</h3>
                            <p>Faculty Members</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card text-center rounded-0 h-100">
                        <div class="card-body">
                            <h3>70%</h3>
                            <p>Female Based Staff</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card text-center rounded-0 h-100">
                        <div class="card-body">
                            <h3>100%</h3>
                            <p>Internship For Graduates</p>
                        </div>
                    </div>
                </div>
            </div>
            {{--Card Images--}}
            <div class="row">
                <div class="col-md-12 mb-3">
                    <img src="{{asset('webFront/images/1.png')}}" class="w-100">
                </div>
                <div class="col-md-12 mb-3">
                    <img src="{{asset('webFront/images/2.png')}}" class="w-100">
                </div>
                <div class="col-md-12 mb-3">
                    <img src="{{asset('webFront/images/3.png')}}" class="w-100">
                </div>
                <div class="col-md-12 mb-3">
                    <img src="{{asset('webFront/images/4.png')}}" class="w-100">
                </div>
            </div>
        </div>
    </div>
    <div class="card text-bg-dark job-banner my-3">
        <div class="dark-image">
            <img src="{{asset('webFront/images/sign-up-banner.jpg')}}" class="card-img" alt="...">
        </div>
        <div class="card-img-overlay">
            <div class="row align-items-center">
                <div class="col-md-10">
                    <p class="card-text mb-0 text-start">Couldn't find an open position matching your expertise? <b
                            class="text-warning">No worries!</b> Take a moment to create <b class="text-warning">your
                            profile</b>, and we'll notify you when relevant <b class="text-warning">opportunities</b>
                        arise. Let's stay connected!</p>
                </div>
                <div class="col-md-2">
                    <a href="{{route('register')}}"
                       type="button"
                       class="btn btn-warning btn-sm btn-application-apply float-end mb-2">
                        Sign Up
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script src="{{ asset('admin/select2/dist/js/select2.js') }}"></script>
    <script>
        $(document).ready(function () {
            //Select Department
            @if (!empty($department))
            let department = [{
                id: "{{$department->id}}",
                text: "{{$department->title}}",
            }];
            $('.select2-department').select2({
                data: department,
                theme: "bootstrap5",
                placeholder: 'Select Department',
                allowClear: true,
            });
            @endif
            $('.select2-department').select2({
                theme: "bootstrap5",
                placeholder: 'Select Department',
                allowClear: true,
                ajax: {
                    url: '{{route('get.dpt-select')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.name
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2')
        });
        $(document).ready(function () {
            //Select Department
            @if (!empty($qualification))
            let qualification = [{
                id: "{{$qualification->id}}",
                text: "{{$qualification->title}}",
            }];
            $('.select2-qualification').select2({
                data: qualification,
                theme: "bootstrap5",
                placeholder: 'Select Qualification',
                allowClear: true,
            });
            @endif
            $('.select2-qualification').select2({
                theme: "bootstrap5",
                placeholder: 'Select Qualification',
                allowClear: true,
                ajax: {
                    url: '{{route('get.qualifications-select')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.name
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2')
        });
        $(document).ready(function () {
            //Select Department
            @if (!empty($location))
            let location = [{
                id: "{{$location->id}}",
                text: "{{$location->name}}",
            }];
            $('.select2-location').select2({
                data: location,
                theme: "bootstrap5",
                placeholder: 'Select Location',
                allowClear: true,
            });
            @endif
            $('.select2-location').select2({
                theme: "bootstrap5",
                placeholder: 'Select Location',
                allowClear: true,
                ajax: {
                    url: '{{route('get.location-select')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.name
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2')
        });
    </script>
@endpush