@php
    $checkmarkClass = 'font-medium text-text text-xs w-1/2 flex items-center 
        mobile:text-[13px]
        tablet:ps-3';
    $inputClass = 'py-3 px-4 w-full outline-none mobile:px-4 desktop:px-3.5  border-b border-[#c0c5c8]';
@endphp
@props([
    'class' => '',
])
<section form-wrapper class="{{ $class }} relative  bg-white h-full w-full  m-auto p-4 laptop:p-8 laptop:py-8">
    <div close-btn
        class='absolute  top-[12px] right-[12px] bg-[url("/public/images/icons/plus-icon.png")] w-4 h-4 bg-no-repeat bg-cover transform rotate-45 hidden '>
    </div>
    <h2 class="text-[28px] font-light text-center mb-3">GET <span class='font-semibold'>MORE INFO</span> NOW!!!</h2>
    <p class=' text-xs text-center mb-6 laptop:px-10'>Start your journey towards a new career today
        by requesting program details.</p>
    <ul class="flex flex-wrap justify-between gap-y-2 ">
        <li class="{{ $checkmarkClass }} "><img loading='lazy' width="7" height="11"
                class="self-center me-2 " src="/images/icons/checkmark.png" alt="Checkmark icon">Financial Assistance
        </li>
        <li class="{{ $checkmarkClass }}  text-nowrap"><img loading='lazy' width="7" height="11"
                class="self-center me-2" src="/images/icons/checkmark.png" alt="Checkmark icon">Career Options</li>
        <li class="{{ $checkmarkClass }}  "><img loading='lazy' width="7" height="11" class="self-center me-2"
                src="/images/icons/checkmark.png" alt="Checkmark icon">Start Dates</li>
        <li class="{{ $checkmarkClass }}  "><img loading='lazy' width="7" height="11"
                class="self-center me-2 " src="/images/icons/checkmark.png" alt="Checkmark icon">Job Opportunities</li>
    </ul>
    <form method="post" class="flex pt-4 flex-wrap gap-y-3" action="/api/submit">
        @csrf
        <x-honeypot />
        <input type="hidden" form-input data-name="type" value="contact-us-form" name="type">
        <div class="w-full relative ">
            <select form-select class="{{ $inputClass }} form-select bg-white text-text-light text-sm appearance-none"
                data-id="program" name="program" aria-label="select program">
                <option value="" selected disabled>Select program</option>
                @foreach ($programs as $program)
                    <option value="{{ $program->key }}" {{ isset($page->name) && $page->name == $program->name ? 'selected=selected' : '' }}>{{ $program->name }}</option>
                @endforeach
            </select>
            <img src="/images/icons/arrow-down.png" alt="Arrow Down" class="absolute right-4 top-[20px]">
            <span></span>
        </div>
        <div class="w-full relative ">
            <select form-select class="{{ $inputClass }} form-select bg-white text-text-light text-sm appearance-none"
                data-id="campus" name="campus" aria-label="select campus">
                <option value="" selected disabled>Select campus</option>
                @foreach ($campuses as $campus)
                    <option value="{{ $campus->posting_key }}">{{ $campus->name }}</option>
                @endforeach
            </select>
            <img src="/images/icons/arrow-down.png" alt="Arrow Down" class="absolute right-4 top-[20px]">
            <span></span>
        </div>
        <div class="flex w-full">
            <div class="text-sm w-1/2 mr-2 mobile:mr-6">
                <input form-input type="text" aria-placeholder="First Name" name="first_name" data-id="first_name"
                    data-name="name" placeholder="First Name" value="" class="{{ $inputClass }}  ">
                <span></span>
                <div class="first_nameError err"></div>
            </div>
            <div class="text-sm w-1/2">
                <input form-input type="text" name="last_name" data-id="last_name" data-name="name"
                    placeholder="Last Name" value="" class="{{ $inputClass }} ">
                <span></span>
                <div class="last_nameError err"></div>
            </div>
        </div>
        <div class="w-full text-sm text-text">
            <input form-input type="text" name="email" data-id="email" data-name="email" placeholder="Email"
                value="" class="{{ $inputClass }} ">
            <span></span>
            <div class="emailError err"></div>
        </div>
        <div class="flex w-full">
            <div class="text-sm w-1/2 mr-2 mobile:mr-6">
                <input form-input type="tel" name="phone" data-id="phone" data-name="phone" placeholder="Phone"
                    value="" class="{{ $inputClass }}  ">
                <span></span>
                <div class="phoneError err"></div>
            </div>
            <div class="text-sm w-1/2">
                <input form-input type="text" name="postal" data-id="postal" data-name="postal"
                    placeholder="Postal Code" value="" class="{{ $inputClass }} ">
                <span></span>
                <div class="postalError err"></div>
            </div>
        </div>
        <p class='font-regular text-[10px] text-center leading-[10px] py-3 '>Please send me more information right away
            using my information above! I consent to electronic communication and I may opt-out at any time. <a href="/terms-and-conditions"
                class='text-orange underline cursor-pointer'>Read terms.</a></p>
        <button form-submit
            class='relative animate-mover w-full  bg-orange hover:bg-green text-white font-semibold text-lg py-2 rounded-lg'>
            GET INFO NOW!
            <div class="hidden spinner"></div>
        </button>
    </form>
    <p></p>
</section>