@extends('hire.app')
@section('title', 'Home')
@section('content')
<div class="row justify-content-center">
    <div class="col-12">
        <h3 class="font-weight-bold text-center text-light">{{ __('Talent Recruit') }}</h3>
    </div>
    <div class="col-12 pb-3">
        <h4 class="text-center text-light">
            {{ __('Grow your career with us! Your journey begins here.') }}
        </h4>
    </div>
    <div class="col-lg-6 col-md-8 col-12 text-center mt-lg-5 mt-3 mb-5">
        <div class="card box-shadow-none animate__animated animate__pulse">
            <div class="card-header">
                <h1 class="font-weight-semibold typography-3 mb-0">{{ __('Select Employment Type') }}</h1>
            </div>
            <div class="card-body">
                <div class="row justify-content-end mx-0" id="employee_type">
                    <button class="col-6 py-3 text-center border-0 btn-col-employment-type" onclick="window.location='{{ route('pre-candidate-application-new', ['type' => 'Permanent']) }}'">
                        <div class="img-employment-type position-relative m-auto">
                            <picture>
                                <source srcset="{{ asset('images/hire/permanent.webp') }}" type="image/webp">
                                <img class="w-100 h-auto not_hover position-absolute top-50 start-50 translate-middle" src="{{ asset('images/hire/permanent.png') }}" alt="Permanent Icon" width="110px" height="110px" />
                            </picture>
                            <picture>
                                <source srcset="{{ asset('images/hire/permanent-hover.webp') }}" type="image/webp">
                                <img class="w-100 h-auto hover position-absolute top-50 start-50 translate-middle" src="{{ asset('images/hire/permanent-hover.png') }}" alt="Hover Effect Permanent Icon" width="110px" height="110px" />
                            </picture>
                        </div>
                        <div class="fw-normal flex-fill">I'm Looking <br>for Permanent Job</div>
                    </button>
                    <button class="col-6 py-3 text-center border-0 btn-col-employment-type" onclick="window.location='{{ route('pre-candidate-application-new', ['type' => 'Intern']) }}'">
                        <div class="img-employment-type position-relative m-auto">
                            <picture>
                                <source srcset="{{ asset('images/hire/internship.webp') }}" type="image/webp">
                                <img class="w-100 h-auto not_hover position-absolute top-50 start-50 translate-middle" src="{{ asset('images/hire/internship.png') }}" alt="Intern Icon" width="110px" height="110px">
                            </picture>
                            <picture>
                                <source srcset="{{ asset('images/hire/internship-hover.webp') }}" type="image/webp">
                                <img class="w-100 h-auto hover position-absolute top-50 start-50 translate-middle" src="{{ asset('images/hire/internship-hover.png') }}" alt="Hover Effect Intern Icon" width="110px" height="110px">
                            </picture>
                        </div>
                        <div class="fw-normal flex-fill">I'm Looking <br>for Internship</div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div><!-- Employment Application Form Header -->
@endsection