@php
    $checkmarkClass = 'font-medium text-text text-xs flex items-center mobile:text-[13px] tablet:ps-3 w-full';
    $inputClass = 'py-3 px-4 w-full outline-none mobile:px-4 desktop:px-3.5 border-b border-[#c0c5c8] !important';
@endphp
@props([
    'class' => '',
])
<section form-wrapper
    class="{{ $class }} !relative !bg-white !h-full !w-full !m-auto !p-5 !py-10">
    <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] !text-black !font-light !text-center !my-0 !mb-3">GET <span class='!font-semibold !text-orange'>MORE INFO</span> NOW!!!
    </h2>
    <p class='!text-xs !text-center !my-0'>Start your journey towards a new career today
        by requesting program details.</p>
    <div class="!flex !flex-wrap  [@media(min-width:431px)]:flex-row hd:!flex-col [@media(min-width:1250px)]:!flex-row !justify-between !gap-y-2 !list-none !mt-5">
        <span class="{{ $checkmarkClass }} [@media(min-width:431px)]:w-1/2  hd:!w-full [@media(min-width:1250px)]:!w-1/2 !text-nowrap !before:none">
            <img loading='lazy' width="7" height="11" class="!self-center !me-2 !my-0" src="/images/icons/checkmark.png" alt="Checkmark icon">Financial Assistance
        </span>
        <span class="{{ $checkmarkClass }} [@media(min-width:431px)]:w-1/2  hd:!w-full [@media(min-width:1250px)]:!w-1/2 !text-nowrap !before:none">
            <img loading='lazy' width="7" height="11" class="!self-center !me-2 !my-0" src="/images/icons/checkmark.png" alt="Checkmark icon">Career Options
        </span>
        <span class="{{ $checkmarkClass }} [@media(min-width:431px)]:w-1/2  hd:!w-full [@media(min-width:1250px)]:!w-1/2 !before:none">
            <img loading='lazy' width="7" height="11" class="!self-center !me-2 !my-0" src="/images/icons/checkmark.png" alt="Checkmark icon">Start Dates
        </span>
        <span class="{{ $checkmarkClass }} [@media(min-width:431px)]:w-1/2  hd:!w-full [@media(min-width:1250px)]:!w-1/2 !before:none">
            <img loading='lazy' width="7" height="11" class="!self-center !me-2 !my-0" src="/images/icons/checkmark.png" alt="Checkmark icon">Job Opportunities
        </span>
    </div>        
    <form method="post" class="!flex !pt-4 !flex-wrap !gap-y-3" action="/api/submit">
        @csrf
        <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] !my-0">
            <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] !my-0">
            <span></span>
        </div>
        <div class="!w-full !text-sm !text-text">
            <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="!w-full !text-sm !text-text">
            <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 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="!w-full !text-sm !text-text">
            <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="!w-full !text-sm !text-text">
            <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>
        <p class='!font-regular !text-[10px] !text-center !leading-[10px] !py-3 !my-0'>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>
</section>