@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('components.navbar')
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
<div class="bg-center bg-cover " style=" background-image: url('{{ url('/images/contact_us/Wallpaper.png') }}');">
    <div class="container mx-auto">

        <div class="py-32 ml-4 text-white md:ml-20">
            <h1 class="text-2xl font-bold md:text-6xl">Contact Us</h1>
            <p class="text-sm text-justify md:text-lg">
                Michael Angelo Manpower Exponent Inc.
            </p>
        </div>
    </div>
</div>

<div class="flex items-center justify-center ">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 p-4 m-4 bg-red-600 md:grid-cols-2 md:m-12 md:p-12 rounded-xl">
            <div class="w-9/12 space-y-8 ">
                <h1 class="text-2xl font-bold text-white md:text-4xl">
                    Have questions or need assistance?
                </h1>
                <p class="text-sm text-justify text-white md:text-lg">
                    Reach out to us today to discover how we can meet your recruitment needs efficiently and effectively.
                </p>
            </div>
            <div>
                <ul class="my-8 space-y-4 text-xs font-semibold text-white md:text-base lg:text-lg">
                    <div class="flex space-x-4">
                        <li>
                            <i class='text-2xl bx bxl-facebook'></i>
                        </li>
                        <li>
                            Michaelangelo Manpower
                            <br>
                            Exponent Inc.
                        </li>
                    </div>
                    <div class="flex space-x-4 ">
                        <li>
                            <i class='text-2xl bx bxs-phone'></i>
                        </li>
                        <li>
                            0918 965 3179
                        </li>
                    </div>
                    <div class="flex space-x-4 l">
                        <li>
                            <i class='text-2xl bx bx-envelope'></i>
                        </li>
                        <li>
                            michaelangelomanpower88@gmail.com
                        </li>
                    </div>
                    <div class="flex space-x-4 ">
                        <li>
                            <i class='text-2xl bx bxs-map'></i>
                        </li>
                        <li>
                            Suite 401,4F A.P Bldg, 1563 F. Agoncillo
                            <br>
                            St.corner Pedro Gil St. Malate Manila
                            <br>
                            1004 Manila, Philippines
                        </li>
                    </div>

                </ul>
            </div>
        </div>
    </div>
</div>

<div class="flex items-center justify-center">
    <div class="container">
        <form id="contact-form" action="{{ route('save_contact_us') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mx-4 md:mx-32 lg:mx-40">
                <div class="flex flex-col items-center justify-center ">
                    <div class="text-4xl font-bold text-red-600">
                        <h1>Questions and Suggestions?</h1>
                    </div>
                </div>
                <div class="grid grid-cols-1 my-12 space-y-4">
                    <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                        <input name="full_name" required class="py-4 pl-2 border-2 border-gray-500 rounded-xl placeholder:text-gray-500" type="text" placeholder="Full Name">
                        <input name="whatsapp" required class="py-4 pl-2 border-2 border-gray-500 rounded-xl placeholder:text-gray-500" type="text" placeholder="Whatsapp">
                    </div>
                    <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                        <input name="contact_number" min="0" required class="py-4 pl-2 border-2 border-gray-500 rounded-xl placeholder:text-gray-500" type="number" placeholder="Number">
                        <input name="email_address" required class="py-4 pl-2 border-2 border-gray-500 rounded-xl placeholder:text-gray-500" type="email" placeholder="Email Address">
                    </div>
                    <select name="subject" required class="py-4 pl-2 text-gray-500 border-2 border-gray-500 rounded-xl placeholder:text-gray-500" type="text" placeholder="Subject">
                        <option value="">Subject</option>
                        <option value="Business Partnership">Business Partnership</option>
                        <option value="Concern Report">Concern Report</option>
                        <option value="Welfare Report">Welfare Report</option>
                    </select>
                    <input name="message" required class="pt-2 pb-20 pl-2 border-2 border-gray-500 rounded-xl placeholder:text-gray-500" type="text" placeholder="Message">
                </div>
                <div class="flex flex-col items-center justify-center ">
                    <div class="mb-32">
                        <button type="button" class="px-12 py-2 text-lg text-white bg-red-600 showsuccessmodal rounded-xl">Submit</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="flex items-center justify-center">
    <div class="container mx-auto">
        <div class="hidden successmodal">
            <div class="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen bg-black successmodal-bg bg-opacity-70 closesuccessmodal">
                <div class="w-2/4 p-12 bg-white rounded-xl md:w-1/5">
                    <div class="flex flex-col items-center justify-center space-y-4 text-center text-red-600 ">
                        <img class="w-auto h-1/4 animate-bounce" src="{{asset('images/branches/Success!.png')}}" alt="">
                        <img class="w-auto h-1/4 animate-bounce" src="{{asset('images/branches/checklist (2).png')}}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const successmodal = document.querySelector('.successmodal');
        const showsuccessmodal = document.querySelector('.showsuccessmodal');
        const closesuccessmodal = document.querySelector('.closesuccessmodal');
        const form = document.getElementById('contact-form');

        showsuccessmodal.addEventListener('click', function(event) {
            event.preventDefault();
            // Check if all required fields are filled
            if (validateForm()) {
                successmodal.classList.remove('hidden');
            }
        });

        closesuccessmodal.addEventListener('click', function() {
            successmodal.classList.add('hidden');
            form.submit();
        });

        function validateForm() {
            const inputs = form.querySelectorAll('input[required]');
            for (let i = 0; i < inputs.length; i++) {
                if (!inputs[i].value) {
                    // If any required field is empty, return false
                    return false;
                }
            }
            // All required fields are filled
            return true;
        }
    });
</script>

@include('components.footer2')


@endsection