@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 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">
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <form action="{{ route('application.storeStep1') }}" method="POST">
        @csrf

        <div class="row text-lg-start text-center mb-3">
            <span class="fw-bold span-montserrat fs-5">Job Application Form</span>
            <p class="fw-bold text-muted">Thank you for your interest in working with us. Please check below for available job opportunities that meet your criteria and send your application by filling out the form.</p>
        </div>

        <div class="row text-lg-start text-center mb-3">
            <span class="fw-bold span-montserrat fs-5">Contact Information</span>
            <p class="fw-bold text-muted">Please enter your contact information.</p>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-sm-4">
                <label for="first_name" class="form-label text-muted fw-bold">First Name*</label>
                <input type="text" class="form-control rounded-0" name="first_name" value="{{ old('first_name') }}" id="first_name" placeholder="" required>
            </div>

            <div class="col-sm-4">
                <label for="last_name" class="form-label text-muted fw-bold">Last Name*</label>
                <input type="text" class="form-control rounded-0" name="last_name" value="{{ old('last_name') }}" id="last_name" placeholder="" required>
            </div>

            <div class="col-sm-4">
                <label for="middle_name" class="form-label text-muted fw-bold">Middle Name</label>
                <input type="text" class="form-control rounded-0" name="middle_name" value="{{ old('middle_name') }}" id="middle_name" placeholder="">
            </div>

            <div class="col-sm-3">
                <label for="suffix" class="form-label text-muted fw-bold">Suffix</label>
                <input type="text" class="form-control rounded-0" name="suffix" value="{{ old('suffix') }}" id="suffix" placeholder="">
            </div>

            <div class="col-sm-3">
                <label for="sex" class="form-label text-muted fw-bold">Sex*</label>
                <select class="form-select rounded-0" name="sex" id="sex" required>
                    <option disabled selected>Select Sex</option>
                    <option value="Male" {{ old('sex') == 'Male' ? 'selected' : '' }}>Male</option>
                    <option value="Female" {{ old('sex') == 'Female' ? 'selected' : '' }}>Female</option>
                </select>
            </div>

            <div class="col-sm-3">
                <label for="religion" class="form-label text-muted fw-bold">Religion*</label>
                <select class="form-select rounded-0" name="religion" id="religion" required>
                    <option disabled selected>Select Religion</option>
                    <option value="None" {{ old('religion') == 'None' ? 'selected' : '' }}>None</option>
                    <option value="Catholic" {{ old('religion') == 'Catholic' ? 'selected' : '' }}>Catholic</option>
                    <option value="Christian" {{ old('religion') == 'Christian' ? 'selected' : '' }}>Christian</option>
                    <option value="Islam" {{ old('religion') == 'Islam' ? 'selected' : '' }}>Islam</option>
                </select>
            </div>

            <div class="col-sm-3">
                <label for="birth_date" class="form-label text-muted fw-bold">Birth Date*</label>
                <input type="date" class="form-control rounded-0" name="birth_date" value="{{ old('birth_date') }}" id="birth_date" required>
            </div>

            <div class="col-sm-6">
                <label for="birth_place" class="form-label text-muted fw-bold">Birth Place*</label>
                <input type="text" class="form-control rounded-0" name="birth_place" value="{{ old('birth_place') }}" id="birth_place" placeholder="" required>
            </div>
        </div>

        <div class="row g-3 mb-5">
            <div class="col-sm-6">
                <label for="email" class="form-label text-muted fw-bold">Email Address*</label>
                <input type="email" class="form-control rounded-0" name="email" value="{{ old('email') }}" id="email" placeholder="" required>
            </div>

            <div class="col-sm-6">
                <label for="phone_no" class="form-label text-muted fw-bold">Phone No.*</label>
                <div class="input-group">
                    <span class="input-group-text border-end-0 rounded-0 bg-white" id="basic-addon1">+63</span>
                    <input type="number" class="form-control rounded-0" name="phone_no" value="{{ old('phone_no') }}" id="phone_no" placeholder="" required>
                </div>
            </div>
        </div>

        <div class="row text-lg-start text-center mb-3">
            <span class="fw-bold span-montserrat fs-5">Address</span>
            <p class="fw-bold text-muted">Please enter your address details.</p>
        </div>

        <div class="row g-3 mb-5">
            <div class="col-sm-12">
                <label for="home_address" class="form-label text-muted fw-bold">Complete Home Address*</label>
                <input type="text" class="form-control rounded-0" name="home_address" value="{{ old('home_address') }}" id="home_address" placeholder="" required>
            </div>

            <div class="col-sm-6">
                <label for="city" class="form-label text-muted fw-bold">City*</label>
                <input type="text" class="form-control rounded-0" name="city" value="{{ old('city') }}" id="city" placeholder="" required>
            </div>

            <div class="col-sm-6">
                <label for="province" class="form-label text-muted fw-bold">Province*</label>
                <input type="text" class="form-control rounded-0" name="province" value="{{ old('province') }}" id="province" placeholder="" required>
            </div>

            <div class="col-sm-6">
                <label for="region" class="form-label text-muted fw-bold">Region*</label>
                <input type="text" class="form-control rounded-0" name="region" value="{{ old('region') }}" id="region" placeholder="" required>
            </div>
        </div>

        <button type="submit" class="btn bg-color-light border-0 rounded-0 px-5">PROCEED</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;
        }
    }

    .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='%2315b6b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
</style>
@endsection