@extends('layouts.main')

@section('content')

<!-- Contact Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h1 class="display-6 mb-4">Courses</h1>
        </div>
        <div class="row g-5">
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s" style="min-height: 450px;">
                <div class="position-relative h-100">
                    <iframe class="position-relative w-100 h-100"
                        src="https://www.openstreetmap.org/export/embed.html?bbox=-2.556381225585938%2C52.92215137976296%2C-1.6500091552734377%2C53.24960383268415&amp;layer=mapnik"
                        frameborder="0" style="min-height: 450px; border:0;" allowfullscreen="" aria-hidden="false"
                        tabindex="0">
                    </iframe>
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                <h6 class="text-primary text-uppercase mb-2">Contact Us</h6>
                <h1 class="display-6 mb-4">We're Here to Help, Reach Out to Us Anytime</h1>
                <p class="mb-4">Have a question, feedback, or need assistance? Our team is here to assist you with any inquiries you may have. Simply fill out the form below, and we'll get back to you as soon as possible.</p>
                
                <!-- Display validation errors -->
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Contact form -->
                <form action="{{ route('contact.submit') }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-7">
                            <div class="form-floating">
                                <input type="text" class="form-control border-0 bg-light" id="name" name="name" placeholder="Your Name" required>
                                <label for="name">Name</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" class="form-control border-0 bg-light" id="email" name="email" placeholder="Your Email" required>
                                <label for="email">Email</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control border-0 bg-light" id="phone" name="phone" placeholder="Your Phone">
                                <label for="phone">Phone</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" class="form-control border-0 bg-light" id="subject" name="subject" placeholder="Subject" required>
                                <label for="subject">Subject</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control border-0 bg-light" placeholder="Leave a message here" id="message" name="message" style="height: 150px" required></textarea>
                                <label for="message">Message</label>
                            </div>
                        </div>

                        <div class="d-none">
                            <label for="honeypot">If you are a human, leave this field blank:</label>
                            <input type="text" id="continue" name="continue" />
                        </div>

                        <div class="col-12">
                            <div class="form-floating">
                                {!! NoCaptcha::renderJs() !!}
                                {!! NoCaptcha::display() !!}
                            </div>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-primary py-3 px-5" type="submit">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- Interested Start-->
        <div class="container-xxl py-6">
            <div class="container">
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                    <h2 class="display-6 mb-4">Interested?</h2>
                    <h6 class="text-primary text-uppercase mb-2">Want To Start You Driving Journey With MyWheels</h6>
                </div>
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s">
                    <p class="mb-4">If you are interested in booking or need more information, call, WhatsApp or text Jane. We will answer any queries you have, and get you in the driving seat!</p>
                    <div class="row justify-content-center align-items-center">
                        <div class="col-sm-6">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm-4 d-flex align-items-center justify-content-center">
                                    <a class="btn btn-primary py-3 px-5" href="about">Read More</a>
                                </div>
                                <div class="col-sm-4 d-flex align-items-center justify-content-center">
                                    <a href="tel:07526357958" class="text-dark text-decoration-none">
                                        <div class="position-relative text-center">
                                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mb-4 mx-auto" style="width: 100px; height: 100px;">
                                                <i class="bi bi-phone fa-2x text-white"></i>
                                            </div>
                                            <h5 class="mb-0">Phone</h5>
                                            <p class="mb-0">07526 357958</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-sm-4 d-flex align-items-center justify-content-center">
                                    <a href="https://wa.me/447526357958" target="_blank" class="text-dark text-decoration-none">
                                        <div class="position-relative text-center">
                                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center mb-4 mx-auto" style="width: 100px; height: 100px;">
                                                <i class="bi bi-whatsapp fa-2x text-white"></i>
                                            </div>
                                            <h5 class="mb-0">WhatsApp</h5>
                                            <p class="mb-0">07526 357958</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Interested End -->
    </div>
</div>
<!-- Contact End -->
@endsection