@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.png') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
<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 class="about-bg">
    <div class="container">

        <div class="text-center">
            <img src="{{ asset('images/banner-line.png') }}" class="d-block align-middle img-fluid ps-5 mx-auto" alt="..." width="250" data-aos="fade-left">
            <h1 class="banner-title text-white m-0" data-aos="zoom-out">CAREERS</h1>
            <img src="{{ asset('images/banner-line.png') }}" class="d-block align-middle img-fluid pe-5 mx-auto" alt="..." width="250" data-aos="fade-right">
        </div>

    </div>
</div>

<div class="container my-5">
    <form action="{{ route('application.storeStep3') }}" method="POST" id="employmentForm">
        @csrf
        <div class="row text-lg-start text-center mb-3">
            <span class="fw-bold span-montserrat fs-5">Additional Information</span>
            <p class="fw-bold text-muted">Provide additional details below.</p>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-sm-12">
                <label for="" class="form-label fw-bold">Application Questions</label> <br>
                <label for="" class="form-label text-muted fw-bold">Please answer the following questions. You can answer in the following languages: English, Tagalog, Taglish.</label>
            </div>

            <div class="col-sm-12">
                <div class="ms-5">

                    <label for="" class="form-label fw-bold">What is your current employment status?*</label> <br>
                    <label for="" class="form-label text-muted fw-bold">Ano ang iyong kasalukuyang katayuan sa trabaho?*</label>

                    <div class="form-check">
                        <input  class="form-check-input rounded-0 single-checkbox" name="employment_status" type="checkbox" value="Employed" id="employedChecked">
                        <label class="form-check-label fw-bold" for="employedChecked">
                            Employed
                        </label>
                    </div>
                    <div class="form-check">
                        <input  class="form-check-input rounded-0 single-checkbox" name="employment_status" type="checkbox" value="Self-Employed" id="selfChecked">
                        <label class="form-check-label fw-bold" for="selfChecked">
                            Self-Employed
                        </label>
                    </div>
                    <div class="form-check">
                        <input  class="form-check-input rounded-0 single-checkbox" name="employment_status" type="checkbox" value="Unemployed" id="unemployedChecked">
                        <label class="form-check-label fw-bold" for="unemployedChecked">
                            Unemployed
                        </label>
                    </div>
                    <div class="form-check">
                        <input  class="form-check-input rounded-0 single-checkbox" name="employment_status" type="checkbox" value="Student" id="studentChecked">
                        <label class="form-check-label fw-bold" for="studentChecked">
                            Student
                        </label>
                    </div>
                    
                    <div id="error-message" class="text-danger" style="display: none;">Please select your employment status.</div>


                    <div class="col-12 my-3">
                        <label for="question_1" class="form-label fw-bold">What's the most difficult situation in your life and how did you overcome it?</label>
                        <label for="question_1" class="text-muted fw-bold"><i>Ano ang pinakamahirap na sitwasyon sa iyong buhay at paano mo ito nalampasan?</i></label>
                        <textarea type="text" class="form-control rounded-0" name="question_1" value="" id="question_1" placeholder="" required=""></textarea>

                    </div>

                    <div class="col-12 my-3">
                        <label for="question_2" class="form-label fw-bold">Why should we choose you amongst other candidates?</label>
                        <p for="question_2" class="text-muted fw-bold"><i>Bakit ka namin pipiliin sa iba pang mga kandidato?</i></p>
                        <textarea type="text" class="form-control rounded-0" name="question_2" value="" id="question_2" placeholder="" required=""></textarea>

                    </div>

                    <div class="col-12 my-3">
                        <label for="question_3" class="form-label fw-bold">Are you willing to commute and/or relocate in the assigned area?</label>
                        <p for="question_3" class="text-muted fw-bold"><i>Handa ka bang mag-commute at/o lumipat sa nakatalagang lugar?</i></p>
                        <textarea type="text" class="form-control rounded-0" name="question_3" value="" id="question_3" placeholder="" required=""></textarea>
                    </div>

                </div>

                <div class="form-check mb-5 mt-5">
                    <input class="form-check-input rounded-0 checkbox" type="checkbox" name="terms" id="terms" required>
                    <label class="form-check-label fw-bold" for="terms">Check if you accept the</label> <a href="{{ asset('pdf/privacy_policy.pdf') }}" class="fw-bold" target="_blank" style="text-decoration: none; color: #15b6b3;">Terms and Conditions</a>
                </div>
            </div>

        </div>

        <button type="submit" class="btn bg-color-light border-0 rounded-0 px-5" style="align-items: center;">SUBMIT APPLICATION</button>
    </form>
</div>

<style>
    .about-bg {
        background-image: url("{{ asset('images/banner-about.jpg') }}");
        height: 50vh;
        background-position: center;
        background-size: cover;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 768px) {
        .about-bg {
            height: 25vh;
        }
    }

    /* Change the color of the checkbox outline */
    .checkbox:checked::before {
        border: 2px solid #15b6b3;
        /* Border color when checked */
    }

    /* Change the color of the checkbox label text */
    .checkbox {
        border: 2px solid #15b6b3;
    }
</style>

<!-- Checkbox Select One Only Script -->
<script>
    const checkboxes = document.querySelectorAll('.single-checkbox');
    const errorMessage = document.getElementById("error-message");

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', () => {
            checkboxes.forEach(otherCheckbox => {
                if (otherCheckbox !== checkbox) {
                    otherCheckbox.checked = false;
                }
            });
            errorMessage.style.display = 'none'; // Hide error message when a checkbox is clicked
        });
    });

    document.getElementById("employmentForm").addEventListener("submit", (event) => {
        let isChecked = false;
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) isChecked = true;
        });

        if (!isChecked) {
            event.preventDefault(); // Prevent form submission
            errorMessage.style.display = 'block'; // Show error message
        } else {
            errorMessage.style.display = 'none'; // Hide error message on successful submission
        }
    });
</script>
@endsection