@php
    $inputClass =
        'py-3 px-4 mb-[10px] laptop:mb-4 w-full bg-white rounded-lg outline-none mobile:px-4 desktop:px-3.5  border border-[#c0c5c8]';
@endphp
@props([
    'class' => '',
])
<section form-wrapper
    class="{{ $class }} relative bg-lightGray h-full w-full  m-auto p-6 laptop:container laptop:py-10 laptop:pb-[50px]">
    <h2 class="text-2xl font-semibold mb-4 xs:text-[32px]">Get <span class='font-black text-orange'>More Info</span>
        Now!!!</h2>
    <p class='text-[12px] xs:text-sm font-regular'>Start your journey towards a new career today by requesting program
        details.</p>
    <form method="post" class=" pt-6 lg:flex justify-between gap-[10px] " action="/api/submit">
        <input type="hidden" form-input data-name="type" value="contact-us-form" name="type">
        @csrf
        <x-honeypot />
        <div class='lg:w-1/2'>
            <div class="w-full relative laptop:inline-block laptop:w-[48%] laptop:mr-[2%]">
                <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 }}">{{ $program->name }}</option>
                    @endforeach
                </select>
                <img loading="lazy" src="/images/icons/arrow-down.png" alt="Arrow Down" class="absolute right-4 top-[20px]">
                <span></span>
            </div>
            <div class="w-full relative laptop:inline-block  laptop:w-[48%]">
                <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 loading="lazy" src="/images/icons/arrow-down.png" alt="Arrow Down" class="absolute right-4 top-[20px]">
                <span></span>
            </div>
            <div class="text-sm xs:w-[48%] xs:inline-block xs:mr-[2.8%] md:mr-[3%] lg:w-full tablet:w-[48%] tablet:mr-[2.8%] laptop:w-[48%] laptop:mr-[2%]">
                <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 xs:w-[48%] xs:inline-block lg:w-full tablet:w-[48%] laptop:w-[48%]">
                <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="text-sm laptop:inline-block laptop:w-[48%] laptop:mr-[2%]"> 
                <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="text-sm xs:w-[48%] xs:inline-block xs:mr-[2.8%] md:mr-[3%] lg:w-full tablet:w-[48%] tablet:mr-[2.8%] laptop:w-[48%] laptop:mr-0">
                <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 xs:w-[48%] xs:inline-block lg:w-full tablet:w-[48%] laptop:w-[48%] laptop:mr-[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>
            <p class='hidden font-regular text-[10px] leading-[10px] laptop:inline-block laptop:w-[48%] whitespace-nowrap'>Please send me more information right away using my
                information above! I consent to electronic communication and I may opt-out at any time. <br class='[@media(min-width:1100px)]:hidden '><a href="/terms-and-conditions"
                    class='text-orange underline cursor-pointer'>Read&nbsp;terms.</a></p>
            <button form-submit
                class='hidden relative animate-mover w-full  bg-orange hover:bg-green text-white font-bold text-lg py-2 rounded-lg laptop:inline-block laptop:w-[48%]'>
                Get Info Now!
                <div class="hidden spinner"></div>
            </button>
        </div>
        <div class='lg:w-1/2 h-fit'>
            <div class="text-sm   "> 
                <textarea form-input data-name="message" class="{{ $inputClass }} mb-0 min-h-[100px] resize-none md:min-h-[158px] laptop:min-h-[170px]" placeholder="Message" name="message"></textarea>
            </div>
            <p class='font-regular text-[10px] leading-[10px] pb-3 tablet:pb-[22px] md:h-[52px] laptop:hidden'>Please send me more information right away using my
                information above! I consent to electronic communication and I may opt-out at any time.<br class='hidden lg:inline-block'> <a href="/terms-and-conditions"
                    class='text-orange underline cursor-pointer'>Read&nbsp;terms.</a></p>
            <button form-submit
                class='relative animate-mover w-full  bg-orange hover:bg-green text-white font-bold text-lg py-2 rounded-lg laptop:hidden'>
                Get Info Now!
                <div class="hidden spinner"></div>
            </button>
        </div>
    </form>
    <p></p>
</section>