@extends('layouts.app')

@section('title', 'Contact')

@section('content')
    <!-- Page Header Start -->
    <div class="page-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-2" data-cursor="-opaque">
                            Contact <span>Us</span>
                        </h1>

                        <nav aria-label="breadcrumb" class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('home') }}">Home</a>
                                </li>

                                <li class="breadcrumb-item">
                                    <a href="{{ route('contact') }}">Contact Us</a>
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Page Contact Us Start -->
    <div class="page-contact-us">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <!-- Contact Us Form Start -->
                    <div class="contact-us-form">
                        <!-- Section Title Start -->
                        <div class="section-title">
                            <h3 class="wow fadeInUp">contact us</h3>
                            <h2 class="text-anime-style-2" data-cursor="-opaque">HR solutions made simple <span>contact us now</span></h2>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">We connect talent with opportunity, fostering growth, success, and a brighter and future for individuals and businesses alike.</p>
                        </div>
                        <!-- Section Title End -->

                        <!-- Contact Form Start -->
                        <div class="contact-form">

                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('success') }}

                                    <button type="button"
                                            class="btn-close"
                                            data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                </div>
                            @endif


                            <form id="contactForm"
                                action="{{ route('contact.submit') }}"
                                method="POST"
                                class="wow fadeInUp"
                                data-wow-delay="0.4s">

                                @csrf

                                <div class="row">

                                    <!-- Name -->
                                    <div class="form-group col-md-12 mb-4">
                                        <input type="text"
                                            name="name"
                                            class="form-control"
                                            placeholder="Name"
                                            value="{{ old('name') }}"
                                            oninput="this.value=this.value.replace(/[^A-Za-z\s]/g,'')"
                                            required>

                                        @error('name')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <!-- Phone -->
                                    <div class="form-group col-md-5 mb-4">
                                        <input type="text"
                                            name="phone"
                                            class="form-control"
                                            placeholder="Phone"
                                            value="{{ old('phone') }}"
                                            maxlength="10"
                                            oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                                            required>

                                        @error('phone')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <!-- Email -->
                                    <div class="form-group col-md-7 mb-4">
                                        <input type="email"
                                            name="email"
                                            class="form-control"
                                            placeholder="E-mail"
                                            value="{{ old('email') }}"
                                            required>

                                        @error('email')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <!-- Message -->
                                    <div class="form-group col-md-12 mb-5">
                                        <textarea name="message"
                                                class="form-control"
                                                rows="3"
                                                placeholder="Write Message..."
                                                required>{{ old('message') }}</textarea>

                                        @error('message')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    <div class="form-group col-md-12 mb-4">
                                        <div class="g-recaptcha"
                                            data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}">
                                        </div>

                                        @error('g-recaptcha-response')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>


                                    <!-- Submit -->
                                    <div class="col-md-12">
                                        <button type="submit" class="btn-default">
                                            submit message
                                        </button>
                                    </div>

                                </div>
                            </form>
                        </div>


                        <!-- Contact Form End -->
                    </div>
                    <!-- Contact Us Form End -->
                </div>

                <div class="col-lg-6">
                    <!-- Google Map Start -->
                    <div class="google-map wow fadeInUp">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1354.1516854725999!2d78.38115220453183!3d17.44540883373159!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2bb6b13cd6e338c9%3A0xd0d08f011dbe698!2sAmple%20ServQ%20Services%20Private%20Limited!5e1!3m2!1sen!2sin!4v1770798487276!5m2!1sen!2sin" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    <!-- Google Map End -->

                    <!-- Contact Info List Start -->
                    <div class="contact-info-list">
                        <!-- Contact Info Item Start -->
                        <div class="contact-info-item location-item wow fadeInUp" data-wow-delay="0.6s">
                            <!-- Icon Box Start -->
                            <div class="icon-box">
                                <img src="images/icon-location.svg" alt="">
                            </div>
                            <!-- Icon Box End -->

                            <!-- Contact Item Content Start -->
                            <div class="contact-item-content">
                                <h3>location</h3>
                                <p>Ample ServQ Services Private Limited,<br>
                                    Sai Sree Nivasam, Street No. 1,<br>
                                    Patrika Nagar, Hitech City,<br>
                                    Hyderabad - 500081.</p>
                            </div>
                            <!-- Contact Item Content End -->
                        </div>
                        <!-- Contact Info Item End -->

                        <!-- Contact Info Item Start -->
                        <div class="contact-info-item wow fadeInUp" data-wow-delay="0.4s">
                            <!-- Icon Box Start -->
                            <div class="icon-box">
                                <img src="images/icon-phone.svg" alt="">
                            </div>
                            <!-- Icon Box End -->

                            <!-- Contact Item Content Start -->
                            <div class="contact-item-content">
                                <h3>contact</h3>
                                <p><a href="tel:+919966642206">099666 42206</a></p>
                            </div>
                            <!-- Contact Item Content End -->
                        </div>
                        <!-- Contact Info Item End -->

                        <!-- Contact Info Item Start -->
                        <div class="contact-info-item wow fadeInUp" data-wow-delay="0.2s">
                            <!-- Icon Box Start -->
                            <div class="icon-box">
                                <img src="images/icon-mail.svg" alt="">
                            </div>
                            <!-- Icon Box End -->

                            <!-- Contact Item Content Start -->
                            <div class="contact-item-content">
                                <h3>email</h3>
                                <p><a href="mailto:info@ampleservq.com">info@ampleservq.com</a></p>
                            </div>
                            <!-- Contact Item Content End -->
                        </div>
                        <!-- Contact Info Item End -->                        
                    </div>
                    <!-- Contact Info List End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Contact Us End -->
@endsection