@extends('layouts.main-app')

@section('title', 'Contact Us')

@section('content')

@include('layouts.navbar')
<div class="relative h-[20rem]">
    <div class="relative z-50 py-20 text-center">
        <h1 class="text-4xl font-bold text-black">CONTACT US </h1>
    </div>
</div>

<div class="container max-w-screen-xl py-20 mx-auto overflow-hidden">
    <div class="grid grid-cols-1 gap-8 px-4 md:grid-cols-2">
        <div data-aos="fade-right" data-aos-duration="1000" class="space-y-4">
            <div class="space-y-2">
                    <h1 class="text-xl font-bold">Company Address</h1>
                    <div class="flex items-center space-x-2">
                        <!-- Location Icon -->
                        <i class="fa-solid fa-location-dot"></i>
                        <p>3/F Erechem Building, Salcedo cor. V.A. Rufino St., Legaspi Village, Makati City</p>
                    </div>
                </div>


                <div class="space-y-2">
                    <h1 class="text-xl font-bold">Email Address</h1>
                    <ul class="space-y-1">
                        <li class="flex items-center space-x-2">
                            <!-- Font Awesome Email Icon as SVG, with size adjusted -->
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 text-gray-600">
                                <path
                                    d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z" />
                            </svg>
                            <span>hrd@primover.com.ph</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 text-gray-600">
                                <path
                                    d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z" />
                            </svg>
                            <span>recruitment@primover.com.ph</span>
                        </li>
                    </ul>
                </div>


                <div class="space-y-2">
                    <h1 class="text-xl font-bold">Telephone Number</h1>
                    <ul class="space-y-1">
                        <li class="flex items-center space-x-2">
                            <!-- Font Awesome Telephone Icon -->
                            <i class="fas fa-phone text-gray-600"></i>
                            <span>8830-0186</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <i class="fas fa-phone text-gray-600"></i>
                            <span>8830-3075</span>
                        </li>
                        <li class="flex items-center space-x-2">
                            <i class="fas fa-phone text-gray-600"></i>
                            <span>8812-0719</span>
                        </li>
                    </ul>
                </div>
            <div>
                <h1 class="text-xl font-bold">Visit Us Now!</h1>
                <iframe class="w-full" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.763667490191!2d121.0128603757729!3d14.555502978177882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c90bf535384b%3A0x4443033faeb48598!2sPrimover%20Consultancy%20Services%20Incorporated!5e0!3m2!1sen!2sph!4v1722478994045!5m2!1sen!2sph" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>



        <div data-aos="fade-left" data-aos-duration="1000">
            @if(session('success'))
            <p class="p-4 text-white bg-green-500 rounded">
                {{ session('success') }}
            </p>
            @endif

            @if(session('error'))
            <p class="p-4 text-white bg-red-500 rounded">
                {{ session('error') }}
            </p>
            @endif

            @if($errors->any())
            <div class="p-4 text-white bg-red-500 rounded">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif



            <form action="{{ route('contact_us.store') }}" method="POST" class="space-y-8">
                @csrf
                <h1 class="text-xl font-bold">Please do not leave required (*) fields empty.</h1>
                <div class="space-y-4">
                    <div>
                        <label for="full_name">*Full Name</label>
                        <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" required class="w-full p-2 border border-black">
                        @error('full_name')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="email">*Email Address</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required class="w-full p-2 border border-black">
                        @error('email')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="contact_number">*Contact Number</label>
                        <input type="tel" id="contact_number" name="contact_number" value="{{ old('contact_number') }}" required class="w-full p-2 border border-black">
                        @error('contact_number')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="message">*Message</label>
                        <textarea id="message" name="message" rows="8" required class="w-full p-2 border border-black">{{ old('message') }}</textarea>
                        @error('message')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="security">*Security</label>
                        <div class="grid items-center grid-cols-2 gap-4">
                            <input type="number" id="security" name="security" value="{{ old('security') }}" required class="w-full p-2 border border-black">
                            <p>Type the code shown below.</p>
                            <div class="flex items-center">
                                <input id="security-code" class="w-1/2 p-2 text-lg font-bold border border-black" readonly value="{{ session('security_code') }}">
                                <button type="button" id="refresh-button"><i class='text-4xl text-blue-400 bx bx-refresh'></i></button>
                            </div>
                        </div>
                    </div>

                    <script>
                        document.getElementById('refresh-button').addEventListener('click', function() {
                            fetch('{{ route("generate.security.code") }}', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                    }
                                })
                                .then(response => response.json())
                                .then(data => {
                                    document.getElementById('security-code').value = data.security_code;
                                })
                                .catch(error => console.error('Error:', error));
                        });
                    </script>


                    <div>
                        <button type="submit" class="rounded-full text-white bg-[#0f1d18] px-12 py-2">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@include('layouts.footer')


@endsection