@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Your Trusted Service Contracting Partner | Beta Com Resources Inc.</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Trusted Service Contracting Partner | Beta Com Resources Inc." />
<meta property="og:description" content="Discover Beta Com Resources Inc., a dynamic service contracting company offering Manufacturing, Maintenance, Retail Support, and Janitorial services. Backed by industry leaders, we provide innovative workforce solutions, enriching lives with employment opportunities and tailored services." />
<meta property="og:site_name" content="Beta Com Resources Inc." />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:keywords" content="Beta Com Resources Inc., Service contracting, Workforce solutions, Manufacturing services, Maintenance solutions, Retail support, Janitorial services, Full outsourcing, Reliable business partner, Innovative solutions, Agile workforce, Skilled manpower, Workforce training, Background checking, Philippine services, Business processes, Dynamic service provider, Enriching lives through employment, Industry leaders, Service excellence">
@endsection

@section('content')

<div id="featured" class="carousel slide overflow-hidden" data-bs-ride="false">
    <div class="carousel-inner">
        @foreach ($banner as $banners)
        <div class="carousel-item active">
            <div class="position-relative">
                <img src="{{ asset($banners->image) }}" class="d-block align-middle img-fluid w-100" style="height: 100vh; object-fit: cover;" alt="...">
            </div>
            <div class="position-absolute top-50 start-25 carousel-text">
                <div class="text-white">{!!$banners->title!!}</div>
            </div>
        </div>
        @endforeach
        <style>
            .carousel-text {
                transform: translateX(300px) translateY(-175px);
            }

            .carousel-text h1 {
                font-size: 80px;
            }

            @media (max-width: 768px) {
                .carousel-text h1 {
                    font-size: 20px;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
                }

                .carousel-text {
                    transform: translateX(80px) translateY(-60px);
                }
            }
        </style>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#featured" data-bs-slide="prev">
        <div class="icon-box" style="margin-right: 30px; padding: 20px; background-color: lightgray; width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; transform: skewX(-20deg);">
            <i class="fa-solid fa-arrow-left color-mid fs-4"></i>
        </div>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#featured" data-bs-slide="next">
        <div class="icon-box" style="margin-left: 30px; padding: 20px; background-color: lightgray; width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; transform: skewX(20deg);">
            <i class="fa-solid fa-arrow-right color-mid fs-4"></i>
        </div>
    </button>
</div>

<div class="search-bg">

    <div class="container py">
        <!-- Form with search and filter functionality -->
        <form action="{{ route('careers.search', $career->id) }}" method="GET"> <!-- Ensure ID is passed to the route -->
            <div class="row justify-content-center gy-2">
                <div class="col-lg-3 d-flex" data-aos="fade-right" data-aos-duration="700">
                    <div class="input-group">
                        <span class="input-group-text border-0 rounded-start-3 bg-white">
                            <i class="fa fa-search color-mid"></i>
                        </span>
                        <input type="search" class="form-control border-0 rounded-end-3" name="search" id="search" placeholder="Job title or keyword" value="{{ request('search') }}">
                    </div>
                </div>

                <div class="col-lg-3 d-flex" data-aos="fade-right" data-aos-duration="500">
                    <div class="input-group">
                        <span class="input-group-text border-0 rounded-start-3 bg-white">
                            <i class="fa fa-list color-mid"></i>
                        </span>
                        <input type="search" class="form-control border-0 rounded-end-3" name="category" id="category" placeholder="Job Category" value="{{ request('category') }}">
                    </div>
                </div>

                <div class="col-lg-3 d-flex" data-aos="fade-left" data-aos-duration="500">
                    <div class="input-group">
                        <span class="input-group-text border-0 rounded-start-3 bg-white">
                            <i class="fa fa-location-dot color-mid"></i>
                        </span>
                        <input type="search" class="form-control border-0 rounded-end-3" name="location" id="location" placeholder="Area, City or Town" value="{{ request('location') }}">
                    </div>
                </div>

                <div class="col-lg-3" data-aos="fade-left" data-aos-duration="700">
                    <button type="submit" class="btn bg-color-light border-0" style="width: 100%; align-items: center;">SUBMIT</button>
                </div>
            </div>


            <!-- Filters for Date Posted, Rate, Workplace, and Job Type -->
            <div class="row gy-2 mt-5">
                <div class="col-lg-2">
                    <select class="form-select rounded search-select fw-bold" name="dateposted" id="dateposted" onchange="this.form.submit()">
                        <option value="" {{ request('dateposted') ? '' : 'selected' }}>Date Posted</option>
                        <option value="This Week" {{ request('dateposted') == 'This Week' ? 'selected' : '' }}>This Week</option>
                        <option value="This Month" {{ request('dateposted') == 'This Month' ? 'selected' : '' }}>This Month</option>
                    </select>
                </div>

                <div class="col-lg-2">
                    <select class="form-select rounded search-select fw-bold" name="rate" id="rate" onchange="this.form.submit()">
                        <option value="" {{ request('rate') ? '' : '' }}>Rate ₱0</option>
                        <option value="₱1000" {{ request('rate') == '₱1000' ? 'selected' : '' }}>Rate ₱1000</option>
                        <option value="₱5000" {{ request('rate') == '₱5000' ? 'selected' : '' }}>Rate ₱5000</option>
                    </select>
                </div>

                <div class="col-lg-2">
                    <select class="form-select rounded search-select fw-bold" name="work_schedule" id="work_schedule" onchange="this.form.submit()">
                        <option value="" {{ request('work_schedule') ? '' : '' }}>Workplace</option>
                        <option value="Remote" {{ request('work_schedule') == 'Remote' ? 'selected' : '' }}>Remote</option>
                        <option value="On-site" {{ request('work_schedule') == 'On-site' ? 'selected' : '' }}>On-site</option>
                    </select>
                </div>

                <div class="col-lg-2">
                    <select class="form-select rounded search-select fw-bold" name="job_type" id="job_type" onchange="this.form.submit()">
                        <option value="" {{ request('job_type') ? '' : '' }}>Job Type</option>
                        <option value="Functional" {{ request('job_type') == 'Functional' ? 'selected' : '' }}>Functional</option>
                        <option value="Managerial" {{ request('job_type') == 'Managerial' ? 'selected' : '' }}>Managerial</option>
                    </select>
                </div>
            </div>
        </form>
    </div>

</div>


<div class="container mb-5">
    <div class="row my-5 align-items-center gy-2">
        <div class="col-lg-3 text-lg-start text-center">
            <h6 class="span-inter fw-bold my-auto">99 jobs</h6>
        </div>

    </div>
    @if (session('warning'))
    <div class="alert alert-warning">
        {{ session('warning') }}
    </div>
    @endif

    @if (session('message'))
    <div class="alert alert-info">
        {{ session('message') }}
    </div>
    @endif
    <div class="row gy-2">
        <div class="col-lg-4 order-2 order-lg-1">

            @foreach($allcareers as $allcareer)
            <div class="col-lg-12 mb-3" data-aos="zoom-in" data-aos-offset="100">
                <div class="border-container px-5 py-3">
                    <div class="row justify-content-center">
                        <div class="col-md-6"><i class="fa-solid fa-briefcase fs-1"></i></div>
                        <div class="col-md-4 text-lg-end my-3"><span class="span-montserrat">₱ <b>{{$allcareer->rate}}</b> <b class="text-muted">/month</b></span></div>
                        <div class="col-md-2 text-lg-end"><a href=""><i class="fa-regular fa-bookmark fs-3"></i></a></div>
                    </div>

                    <div class="my-3">
                        <span class="fs-5 span-montserrat"><b>{{$allcareer->jobtitle}}</b> <b class="color-mid">(4)</b></span>
                    </div>
                    <div>
                        <p>{{$allcareer->subtitle}}</p>
                        <span class="span-inter text-black bg-mint px-4 py-1 rounded me-2">{{$allcareer->work_schedule}}</span> <span class="span-inter text-black bg-mint px-4 py-1 rounded">{{$allcareer->location}}</span>
                    </div>
                    <div class="text-center mt-5">
                        <a href="{{ url('careers', $allcareer->id) }}" class="btn bg-color-light border-0 rounded-0 px-5" style="align-items: center;" onclick="toggleActive(this)">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            @endforeach
            <!-- PAGING -->
            <div class="col-lg-12">
                <nav aria-label="Page navigation example" class="mx-auto">
                    <ul class="pagination gap-3">
                        <!-- Previous Page Link -->
                        @if ($allcareers->onFirstPage())
                        <li class="page-item disabled">
                            <span class="page-link p-3 border-0"><i class="fa-solid fa-arrow-left-long color-light"></i> <b class="color-light">Previous</b></span>
                        </li>
                        @else
                        <li class="page-item">
                            <a class="page-link p-3 border-0" href="{{ $allcareers->previousPageUrl() }}" rel="prev"><i class="fa-solid fa-arrow-left-long color-light"></i> <b class="color-light">Previous</b></a>
                        </li>
                        @endif

                        <!-- Page Number Links -->
                        @foreach ($allcareers->links()->elements[0] as $page => $url)
                        @if ($page == $allcareers->currentPage())
                        <li class="page-item active"><a class="page-link fw-bold p-3">{{ $page }}</a></li>
                        @else
                        <li class="page-item"><a class="page-link fw-bold p-3" href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                        @endforeach

                        <!-- Next Page Link -->
                        @if ($allcareers->hasMorePages())
                        <li class="page-item">
                            <a class="page-link p-3 border-0" href="{{ $allcareers->nextPageUrl() }}" rel="next"><b class="color-light">Next</b> <i class="fa-solid fa-arrow-right-long color-light"></i></a>
                        </li>
                        @else
                        <li class="page-item disabled">
                            <span class="page-link p-3 border-0"><b class="color-light">Next</b> <i class="fa-solid fa-arrow-right-long color-light"></i></span>
                        </li>
                        @endif
                    </ul>
                </nav>
            </div>

        </div>

        <div class="col-lg-8 order-1 order-lg-2">

            <div class="" style="border: 2px #15b6b3 solid;">

                <img src="{{ asset('images/career-img.jpg') }}" class="d-block align-middle img-fluid w-100" alt="...">

                <div class="p-5">
                    <div class="row justify-content-center">
                        <div class="col-md-6">
                            <img src="{{ asset('images/logo-job.jpg') }}" class="d-block align-middle img-fluid" alt="...">
                        </div>
                        <div class="col-md-4 text-lg-end my-3">

                            @unless(auth()->check() && in_array(auth()->user()->role, ['cms', 'recruiter']))
                            <form action="{{ route('save.application') }}" method="POST">
                                @csrf
                                <input type="hidden" name="career_id" value="{{ $career->id }}">
                                <button type="submit" class="btn bg-color-light border-0 rounded-0 px-5" style="align-items: center;">APPLY NOW</button>
                            </form>
                            @endunless

                        </div>
                        <div class="col-md-2 text-lg-end">
                            <a href=""><i class="fa-regular fa-bookmark fs-3"></i></a>
                        </div>
                    </div>

                    <div class="my-5">
                        <h2 class="span-inter fw-bold">{{ $career->jobtitle}}</h2>
                        <h6 class="fw-bold span-montserrat text-muted">{{$career->location}} | {{$career->work_schedule}}</h6>
                        <span class="span-montserrat">₱ <b>{{$career->rate}}</b> <b class="text-muted">/month</b></span>
                    </div>

                    <div class="my-5">
                        <h5 class="span-montserrat fw-bold">Job Description</h5>
                        <p class="fw-bold text-muted justify">{!!$career->description!!}</p>
                    </div>

                    <div class="my-5">
                        <h5 class="span-montserrat fw-bold">Job Responsibilities</h5>
                        <ul style="list-style-type:square;" class="text-muted fw-bold">
                            @foreach($career->responsibilities as $responsibility)
                            <li>{{$responsibility->job_responsibility}}</li>
                            @endforeach
                        </ul>

                        <h5 class="span-montserrat fw-bold">Requirement</h5>
                        <ul style="list-style-type:square;" class="text-muted fw-bold">
                            @foreach($career->requirements as $requirement)
                            <li>{{$requirement->requirement}}</li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="my-5">
                        <h5 class="span-montserrat fw-bold">Additional Information</h5>
                        <div class="row gy-2">
                            <div class="col-lg-6">
                                <i class="fa-solid fa-square-poll-vertical fs-3 color-mid"></i> <span class="fw-bold span-montserrat text-muted fs-5">Career Level</span>
                                <ul style="list-style-type:square;" class="text-muted fw-bold">
                                    @foreach($career->levels as $career_level)
                                    <li class="color-mid">{{$career_level->career_level}}</li>
                                    @endforeach

                                </ul>
                            </div>

                            <div class="col-lg-6">
                                <i class="fa-solid fa-briefcase fs-3 color-mid"></i> <span class="fw-bold span-montserrat text-muted fs-5">Years of Experience</span>
                                <ul style="list-style-type:square;" class="text-muted fw-bold">
                                    @foreach($career->yearsOfExperience as $yearsOfExperiences)
                                    <li class="color-mid">{{$yearsOfExperiences->year_of_experience}}</li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="col-lg-6">
                                <i class="fa-solid fa-medal fs-3 color-mid"></i> <span class="fw-bold span-montserrat text-muted fs-5">Job Specializations</span>
                                <ul style="list-style-type:square;" class="text-muted fw-bold">
                                    @foreach($career->specializations as $specialization)
                                    <li class="color-mid">{{$specialization->job_specialization}}</li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="col-lg-6">
                                <i class="fa-solid fa-clipboard fs-3 color-mid"></i> <span class="fw-bold span-montserrat text-muted fs-5">Qualification</span>
                                <ul style="list-style-type:square;" class="text-muted fw-bold">
                                    @foreach($career->qualifications as $qualification)
                                    <li class="color-mid">{{$qualification->qualification}}</li>
                                    @endforeach
                                </ul>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
</div>

<style>
    .search-bg {
        background-image: url("{{ asset('images/search-bg.jpg') }}");
        height: 100%;
        background-position: center;
        background-size: cover;
    }

    .container.py {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .search-select {
        background-color: #0f7170;
        border: 3px #15b6b3 solid;
        color: white;
    }

    .col-lg-2 .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    .col-lg-3 .form-select {
        /* background: linear-gradient(to left, #15b6b3, #cdf1d7); */
        background-color: #cdf1d7;
    }

    .border-container {
        border: 1px #c5c5c5 solid;
    }

    .border-container.active {
        border: 2px #15b6b3 solid;
    }


    /* Style for active page link */
    .pagination .page-item.active .page-link {
        background-color: #cdf1d7;
        /* Change to your desired color */
        color: #0f7170;
        /* Text color for the active page */
        border-color: #cdf1d7;
        /* Border color for the active page */
    }

    /* Style for active page link */
    .pagination .page-item .page-link {
        background-color: #e7f1f0;
        /* Change to your desired color */
        color: black;
        /* Text color for the active page */
        border-color: #cdf1d7;
        /* Border color for the active page */
    }

    /* Style for active page link on hover */
    .pagination .page-item.active .page-link:hover {
        background-color: #128a85;
        /* Change to your desired color */
        color: #15b6b3;
        /* Text color for the active page on hover */
        border-color: #128a85;
        /* Border color for the active page on hover */
    }
</style>

<script>
    function toggleActive(button) {
        // Find the parent 'border-container' div of the clicked button
        const borderContainer = $(button).closest('.border-container');

        // Remove 'active' class from all 'border-container' divs
        $('.border-container').removeClass('active');

        // Add 'active' class to the clicked 'border-container' div
        borderContainer.addClass('active');
    }
</script>
@endsection