@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 action="{{ route('career.search') }}" method="GET">
            <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>
        </form>
    </div>
</div>


<div class="container py-5">
    <div class="row gy-4">
        @foreach ($careers as $career)
        <div class="col-lg-6" data-aos="zoom-in" data-aos-offset="100">
            <div class="border 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>{{$career->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>{{$career->jobtitle}}</b> <b class="color-mid">(4)</b></span>
                </div>
                <div>
                    <p>{{$career->subtitle}}</p>
                    <span class="span-inter text-black bg-mint px-4 py-1 rounded me-2">{{$career->work_schedule}}</span> <span class="span-inter text-black bg-mint px-4 py-1 rounded">{{$career->location}}</span>
                </div>
                <div class="text-center mt-5">
                    <a href="{{ url('careers', $career->id) }}" class="btn bg-color-light border-0 rounded-0 px-5" style="align-items: center;">VIEW DETAILS</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

@if($email && $temporaryPassword)
<!-- Bootstrap Modal Trigger (Hidden, auto-triggered by JavaScript) -->
<button type="button" id="successModalTrigger" class="btn btn-primary d-none" data-bs-toggle="modal" data-bs-target="#successModal">
    Open Modal
</button>

<!-- Bootstrap Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Your Account Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Your account has been created with the following credentials:</p>
                <ul>
                    <li><strong>Email:</strong> {{ $email }}</li>
                    <li><strong>Temporary Password:</strong> {{ $temporaryPassword }}</li>
                </ul>
                <p>Please log in and change your password as soon as possible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endif

<script>
    // Automatically trigger the modal if email and password exist
    window.onload = function() {
        if (document.getElementById('successModalTrigger')) {
            document.getElementById('successModalTrigger').click();
        }
    };
</script>

<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;
    }
</style>
@endsection