@extends('layouts.main-app')

@section('title', 'Career Portal')

@section('content')


@include('layouts.navbar')
<div class="relative ">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/career/banner.webp')}}" alt="">
    <div class="container relative max-w-screen-xl mx-auto text-white py-[10rem]">
        <div class="grid grid-cols-1 px-4 md:grid-cols-3">
            <div>
                <h1 class="text-4xl font-bold">Career Portal</h1>
                <p>Join our network of worker cooperatives and discover a career that values your growth, skills, and dedication.</p>
            </div>
        </div>
    </div>
</div>



<!-- Modal HTML Structure (Hidden initially) -->
<div id="resumemodal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-800 bg-opacity-50" onclick="closeresumeModal(event)">
    <form method="POST" action="{{ route('upload.resume') }}" enctype="multipart/form-data">
        @csrf
        <div class="relative max-w-screen-md p-6 space-y-4 bg-white rounded-lg overflow-y-auto max-h-[90vh]" onclick="event.stopPropagation()">

            <!-- Close Button -->
            <button type="button" class="absolute text-gray-400 top-4 right-4 hover:text-gray-600" hidden onclick="closeresumeModal(event)">
                <span class="text-xl font-bold">&times;</span>
            </button>

            <div class="flex flex-col text-center">
                <h2 class="mb-4 text-3xl font-bold">Upload your Resume/CV</h2>
                <p class="text-gray-500">Please select the purpose of your resume submission and provide any relevant details in the message box. This will help us address your request more effectively.</p>
            </div>

            <h1 class="text-lg text-gray-500">Purpose</h1>
            <div class="flex items-start space-x-2">
                <input type="radio" id="purpose" name="purpose" value="pulling" class="mt-1">
                <div>
                    <label for="purpose">For Pulling</label>
                    <p class="text-sm text-gray-500 break-words">(Select this if your resume is submitted for company reference or database purposes)</p>
                </div>
            </div>
            <div class="flex items-start space-x-2">
                <input type="radio" id="purpose" name="purpose" value="looking for a job" class="mt-1">
                <div>
                    <label for="purpose">Looking for a Job</label>
                    <p class="text-sm text-gray-500 break-words">(Select this if your are actively seeking job opportunities and would like us to consider your application)</p>
                </div>
            </div>

            <div class="space-y-2">
                <label for="message" class="text-gray-500">Message</label>
                <textarea name="message" id="message" class="w-full border-2 border-[#FBAF43] rounded-xl p-2" rows="3" placeholder="Type Here"></textarea>
            </div>
            <div class="space-y-2">
                <label for="resume" class="text-gray-500">Upload Resume/CV</label>
                <div class="grid items-center w-full grid-cols-1 gap-12 md:grid-cols-2">
                    <div>
                        <!-- Drag-and-Drop Area -->
                        <div
                            class="border-dashed border-2 border-[#FBAF43] px-8 text-center text-md py-4 text-gray-500 rounded-2xl cursor-pointer"
                            id="drop-area2"
                            ondrop="handleDrop2(event)"
                            ondragover="handleDragOver2(event)"
                            onclick="openModal()"> <!-- Add the onclick event to trigger modal -->
                            <label for="resume2" id="resume-label2">
                                Drag and drop your document here or <span class="font-bold underline">browse</span> for a document to upload
                            </label>
                        </div>

                        <!-- Hidden File Input -->
                        <input type="file" name="resume" id="resume2" accept=".doc,.docx,.pdf" class="hidden" onchange="updateFileName()">
                        @error('resume')
                        <p class="text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Display File Name or Add Text if Resume Exists in Session -->
                    <div class="flex justify-center">
                        <h1 id="filedisplay2" class="italic text-gray-500 text-md">
                            @if (session('resume'))
                            File selected: {{ session('resume') }}
                            @else
                            File names cannot contain spaces or underscores and should be in either .doc, .docx, or .pdf format.
                            @endif
                        </h1>
                    </div>
                </div>
            </div>
            <div>
                <input required type="checkbox" class="border-[#FBAF43]">
                <label class="text-gray-500"> By submitting this form, you agree to our <span class="text-[#FBAF43] font-bold">Privacy Policy</span> and <span class="text-[#FBAF43] font-bold">Terms of Service</span></label>
            </div>

            <div class="flex justify-center">
                <button type="submit" class="px-12 py-2 text-white bg-[#FBAF43] rounded-full">UPLOAD RESUME/CV</button>
            </div>
        </div>
    </form>
</div>

<script>
    function openModal() {
        document.getElementById('resumemodal').classList.remove('hidden');
    }

    // Function to close the modal when the background or button is clicked
    function closeresumeModal(event) {
        if (event.target === document.getElementById('resumemodal') || event.target.classList.contains('absolute')) {
            document.getElementById('resumemodal').classList.add('hidden');
        }
    }

    // Optional: Update file name in the modal or any other action you want to take
    function updateFileName() {
        const fileInput = document.getElementById('resume2');
        const fileName = fileInput.files.length ? fileInput.files[0].name : 'No file selected';
        document.getElementById('filedisplay2').innerText = `File selected: ${fileName}`;
    }
</script>

<div class="px-4">
    <div>
        <div class="container max-w-screen-xl p-4 mx-auto my-8 shadow-xl rounded-xl">
            <form method="GET" action="{{ url('career_portal') }}">
                <div class="grid items-end grid-cols-1 gap-4 lg:grid-cols-5">
                    <div>
                        <h1>Title or Keyword</h1>
                        <input type="text" name="title" class="w-full border-2 rounded-full border-[#FBAF43] p-2" placeholder="Type Here" value="{{ request('title') }}">
                    </div>
                    <select name="mpc" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                        <option value="">Select MPC</option>
                        @foreach($mpcs as $mpc)
                        <option value="{{ $mpc->mpc_name }}" {{ request('mpc') == $mpc->mpc_name ? 'selected' : '' }}>
                            {{ $mpc->mpc_name }}
                        </option>
                        @endforeach
                    </select>

                    <select name="industry" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                        <option value="">Select Industry</option>
                        @foreach($industries as $industry)
                        <option value="{{ $industry->industry_name }}" {{ request('industry') == $industry->industry_name ? 'selected' : '' }}>
                            {{ $industry->industry_name }}
                        </option>
                        @endforeach
                    </select>

                    <select name="location" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                        <option value="">Select Location</option>
                        @foreach($locations as $location)
                        <option value="{{ $location->location_name }}" {{ request('location') == $location->location_name ? 'selected' : '' }}>
                            {{ $location->location_name }}
                        </option>
                        @endforeach
                    </select>
                    <div>
                        <button type="submit" class="w-full border-2 rounded-full bg-[#FBAF43] p-2 flex items-center justify-center text-white">SEARCH JOB <i class='px-4 bx bx-search'></i></button>
                    </div>
                </div>
            </form>

            <hr class="my-4 border-gray-500">

            <div class="relative w-full ">
                <div class="grid items-center grid-cols-1 gap-4 lg:grid-cols-2">
                    <div>
                        <h1 class="text-lg font-bold">Upload Your CV</h1>
                        <div>
                            <div class="grid items-center w-full grid-cols-1 gap-2 lg:grid-cols-2">
                                <div>
                                    <!-- Drag-and-Drop Area -->
                                    <div
                                        class="border-dashed border-2 border-[#FBAF43] px-8 text-center text-xs py-4 text-gray-500 rounded-xl cursor-pointer"
                                        onclick="openModal()"> <!-- Add the onclick event to trigger modal -->
                                        <label id="resume-label2">
                                            Drag and drop your document here or <span class="font-bold underline">browse</span> for a document to upload
                                        </label>
                                    </div>
                                </div>

                                <!-- Display File Name or Add Text if Resume Exists in Session -->
                                <div class="flex justify-center">
                                    <h1 id="filedisplay2" class="text-xs italic text-gray-500">
                                        @if (session('resume'))
                                        File selected: {{ session('resume') }}
                                        @else
                                        File names cannot contain spaces or underscores and should be in either .doc, .docx, or .pdf format.
                                        @endif
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Center Divider Line -->
                    <div class="absolute inset-y-0 hidden lg:block left-1/2  w-[1px] bg-gray-500"></div>

                    <div>
                        <h1 class="text-lg font-bold">Popular Search:</h1>
                        <div class="flex flex-row flex-wrap gap-4">
                            @foreach($popularSearches as $search)
                            <button type="button" class="px-4 py-1 text-gray-900 bg-gray-300 rounded-md popular-search" data-title="{{ $search->search_term }}">{{ $search->search_term }}</button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Handle popular search button clicks
        document.querySelectorAll('.popular-search').forEach(button => {
            button.addEventListener('click', function() {
                var searchTerm = this.getAttribute('data-title');
                document.getElementById('search-title').value = searchTerm; // Set the value of the title input field
                document.getElementById('search-form').submit(); // Submit the form
            });
        });
    </script>

    <div>
        <div class="container max-w-screen-xl mx-auto ">
            <div class="grid grid-cols-1 lg:gap-8 lg:grid-cols-3">
                <div>
                    <form method="GET" action="{{ url('career_portal') }}" id="filterForm">
                        <div class="p-8 shadow-xl">
                            <!-- Filter Header -->
                            <div class="flex justify-between">
                                <h1 class="text-xl font-bold">FILTER BY</h1>
                                <a href="{{ url('career_portal') }}" class="text-2xl text-black"><i class='bx bx-x'></i> </a>
                            </div>

                            <!-- Location Filter -->
                            <div class="my-4">
                                <h1>Location</h1>
                                <select name="location" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                                    <option value="">Select Location</option>
                                    @foreach($locations as $location)
                                    <option value="{{ $location->location_name }}" {{ request('location') == $location->location_name ? 'selected' : '' }}>
                                        {{ $location->location_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <hr class="my-4 border-gray-400">

                            <!-- MPC Filter -->
                            <div class="my-4">
                                <h1>MPC</h1>
                                <select name="mpc" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                                    <option value="">Select MPC</option>
                                    @foreach($mpcs as $mpc)
                                    <option value="{{ $mpc->mpc_name }}" {{ request('mpc') == $mpc->mpc_name ? 'selected' : '' }}>
                                        {{ $mpc->mpc_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Selected MPC Filters -->
                            <div class="flex flex-wrap gap-4 my-4">
                                @if(request('mpc'))
                                <button type="submit" name="mpc" value="" class="px-3 py-1 text-gray-500 bg-gray-200 rounded-md">
                                    {{ request('mpc') }} <i class='text-red-500 bx bx-x'></i>
                                </button>
                                @endif
                            </div>
                            <hr class="my-4 border-gray-400">

                            <!-- Industry Filter -->
                            <div class="my-4">
                                <h1>Industry</h1>
                                <select name="industry" class="w-full border-2 rounded-full border-[#FBAF43] p-2">
                                    <option value="">Select Industry</option>
                                    @foreach($industries as $industry)
                                    <option value="{{ $industry->industry_name }}" {{ request('industry') == $industry->industry_name ? 'selected' : '' }}>
                                        {{ $industry->industry_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Selected Industry Filters -->
                            <div class="flex flex-wrap gap-4 my-4">
                                @if(request('industry'))
                                <button type="submit" name="industry" value="" class="px-3 py-1 text-gray-500 bg-gray-200 rounded-md">
                                    {{ request('industry') }} <i class='text-red-500 bx bx-x'></i>
                                </button>
                                @endif
                            </div>
                            <hr class="my-4 border-gray-400">

                            <!-- Job Type Filter -->
                            <div class="space-y-2">
                                <h1>Job Type</h1>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4">
                                        <input type="checkbox" name="job_type[]" value="Full Time" class="border-[#FBAF43]"
                                            {{ in_array('Full Time', request('job_type', [])) ? 'checked' : '' }}>
                                        <label>Full Time</label>
                                    </div>
                                    <button type="button" class="px-3 py-1 text-xs text-blue-500 bg-blue-100 rounded-md">{{ $fullTimeCount }}</button>
                                </div>

                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4">
                                        <input type="checkbox" name="job_type[]" value="Part Time" class="border-[#FBAF43]"
                                            {{ in_array('Part Time', request('job_type', [])) ? 'checked' : '' }}>
                                        <label>Part Time</label>
                                    </div>
                                    <button type="button" class="px-3 py-1 text-xs text-blue-500 bg-blue-100 rounded-md">{{ $partTimeCount }}</button>
                                </div>

                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4">
                                        <input type="checkbox" name="job_type[]" value="Freelance" class="border-[#FBAF43]"
                                            {{ in_array('Freelance', request('job_type', [])) ? 'checked' : '' }}>
                                        <label>Freelance</label>
                                    </div>
                                    <button type="button" class="px-3 py-1 text-xs text-blue-500 bg-blue-100 rounded-md">{{ $freelanceCount }}</button>
                                </div>
                                <!-- Add more job types as necessary -->
                            </div>

                            <!-- Apply Filter Button -->
                            <div class="my-4">
                                <button type="submit" class="w-full bg-[#FBAF43] rounded-full text-white py-2">APPLY NOW</button>
                            </div>
                        </div>
                    </form>


                </div>
                <div class="col-span-2 ">

                    <div class="flex items-center justify-between py-8">
                        <h1>Showing {{ $careers->firstItem() }}-{{ $careers->lastItem() }} of {{ $careers->total() }} results</h1>
                        <form method="GET" id="sortForm">
                            <select name="sort" onchange="document.getElementById('sortForm').submit()">
                                <option value="created_at" {{ request('sort') === 'created_at' ? 'selected' : '' }}>Sort By (Default)</option>
                                <option value="title" {{ request('sort') === 'title' ? 'selected' : '' }}>Title</option>
                                <option value="updated_at" {{ request('sort') === 'updated_at' ? 'selected' : '' }}>Recently Updated</option>
                            </select>
                        </form>
                    </div>
                    <div class="space-y-8">
                        @foreach ($careers as $career)
                        <div class="px-8 py-2 shadow-xl">
                            <div class="flex flex-col space-x-4 lg:flex-row">
                                <div class="space-y-2">
                                    <div>
                                        <div class="flex items-center">
                                            <img src="{{asset($career->mpc->image)}}" alt="">
                                            <p>{{$career->mpc->mpc_name}}</p>
                                        </div>
                                        <div class="flex items-center ">
                                            <i class='text-blue-500 bx bx-time'></i>
                                            <p>{{ $career->created_at->diffForHumans() }}</p>
                                        </div>
                                    </div>
                                    <h1 class="text-xl font-bold text-blue-500">{{$career->title}}</h1>
                                    <p class="text-sm">{!!$career->subtitle!!}</p>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex flex-wrap gap-4">
                                        <button class="px-4 py-1 text-blue-500 bg-blue-100 rounded-lg whitespace-nowrap">{!!$career->industry->industry_name!!}</button>
                                        <button class="px-4 py-1 text-red-500 bg-red-100 rounded-lg whitespace-nowrap">{{$career->job_type}}</button>
                                    </div>
                                    <div class="flex items-center">
                                        <i class='text-blue-500 bx bx-map'></i>
                                        <p>{{$career->location->location_name}}</p>
                                    </div>
                                    <div class="flex items-center">
                                        <i class='text-blue-500 bx bx-user'></i>
                                        <p>{{$career->open_position}} Open Positions</p>
                                    </div>
                                </div>
                                <div class="flex items-end ">
                                    <a href="{{url('/job_details',$career->id)}}">
                                        <button class="bg-[#FBAF43] text-white px-4 py-2 shadow-xl rounded-full whitespace-nowrap">APPLY NOW</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        <div class="flex items-center justify-between">
                            <!-- Previous Button -->
                            <div>
                                @if ($careers->onFirstPage())
                                <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl cursor-not-allowed">
                                    <i class='bx bx-left-arrow-alt'></i>
                                </button>
                                @else
                                <a href="{{ $careers->previousPageUrl() }}">
                                    <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl">
                                        <i class='bx bx-left-arrow-alt'></i>
                                    </button>
                                </a>
                                @endif
                            </div>

                            <!-- Page Number Buttons -->
                            <div class="space-x-2">
                                @foreach ($careers->getUrlRange(1, $careers->lastPage()) as $page => $url)
                                <a href="{{ $url }}">
                                    <button class="text-[#FBAF43] rounded-full hover:text-white hover:border-transparent hover:bg-blue-500 border-[#FBAF43] border-2 w-8 h-8 {{ $page == $careers->currentPage() ? 'bg-transparent text-[#FBAF43]' : '' }}">
                                        {{ $page }}
                                    </button>
                                </a>
                                @endforeach
                            </div>

                            <!-- Next Button -->
                            <div>
                                @if ($careers->hasMorePages())
                                <a href="{{ $careers->nextPageUrl() }}">
                                    <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl">
                                        <i class='bx bx-right-arrow-alt'></i>
                                    </button>
                                </a>
                                @else
                                <button class="text-[#FBAF43] border-[#FBAF43] border-2 rounded-full px-4 py-2 text-xl cursor-not-allowed">
                                    <i class='bx bx-right-arrow-alt'></i>
                                </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




@include('layouts.resume_modal')


<div class="container max-w-screen-xl mx-auto">

    @include('layouts.newsletter')
</div>

@include('layouts.footer')




@endsection