<div class="mx-auto space-y-6 w-full">
    <h2 class="text-2xl md:text-3xl lg:text-5xl  font-bold mb-0 text-[#5278ad] text-center">
        Enter your Serial Number
    </h2>
    <textarea id="serial_numbers_input" type="text" name="id-b03" rows="3"
        class="peer h-[70px] md:h-[100px] xl:h-[250px] relative w-full rounded border border-slate-200 px-4 py-2 text-sm text-slate-500 placeholder-transparent outline-none transition-all autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-blue-500 focus:outline-none invalid:focus:border-blue-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"></textarea>
    </textarea>
    <button type="submit"
        class="btn_submit mb-10 mx-auto py-2 px-12 rounded-lg text-neutral-50 bg-blue-500 text-center hover:opacity-80 relative flex items-center justify-center">
        Check Now
    </button>
    <p class="text-sm lg:text-base">
        *Maximum 20 serial numbers, separated by spaces or line breaks.
    </p>
    <i class="text-sm lg:text-base">*Some serial numbers take a long time to find. Results will be updated
        in the search history.</i>
</div>

@section('script')
    <script>
        window.addEventListener("load", (event) => {
            $(".btn_submit").on("click", (e) => {
                const valueInput = $(e.target).parent().find('#serial_numbers_input').val()
                if (valueInput === '') {
                    if (typeof toastr !== "undefined") {
                        toastr.warning('Please enter the serial you want to search!');
                    }
                } else {
                    localStorage.setItem('sn-search-from-home', valueInput)
                    window.location.href = '/serial-number-check'
                }
            })
        })
    </script>
@endsection
