@extends('layouts.main')

@section('content')
    <!-- Carousel Start -->
    <div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
        <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="w-100" src="img/carousel-1.jpg" alt="Image">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    <h1 class="mb-5 animated slideInDown">Your Premier Driving School in Stoke-On-Trent & Staffordshire</h1>
                                    <a href="{{ route('about') }}" class="btn btn-primary py-sm-3 px-sm-5">Learn More</a>
                                    <a href="{{ route('courses.index') }}" class="btn btn-light py-sm-3 px-sm-5 ms-3">Our Courses</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="w-100" src="img/carousel-2.jpg" alt="Image">
                    <div class="carousel-caption">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    <h1 class="mb-5 animated slideInDown">Start Your Driving Journey With My Wheels</h1>
                                    <a href="{{ route('about') }}" class="btn btn-primary py-sm-3 px-sm-5">Learn More</a>
                                    <a href="{{ route('courses.index') }}" class="btn btn-light py-sm-3 px-sm-5 ms-3">Our Courses</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
    <!-- Carousel End -->


    <!-- Facts Start -->
    <div class="container-fluid facts py-5 pt-lg-0">
        <div class="container py-5 pt-lg-0">
            <div class="row gx-0">
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="bg-white shadow d-flex align-items-center h-100 p-4" style="min-height: 150px;">
                        <div class="d-flex">
                            <div class="flex-shrink-0 btn-lg-square bg-primary">
                                <i class="fa fa-car text-white"></i>
                            </div>
                            <div class="ps-4">
                                <h5>Intensive Courses </h5>
                                <span>Get on the road fast. No matter how much experience you've had, you could pass within weeks of booking</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                    <div class="bg-white shadow d-flex align-items-center h-100 p-4" style="min-height: 150px;">
                        <div class="d-flex">
                            <div class="flex-shrink-0 btn-lg-square bg-primary">
                                <i class="fa fa-users text-white"></i>
                            </div>
                            <div class="ps-4">
                                <h5>Prices from £40 p.h</h5>
                                <span>Book your driving journey today, from PAYG lessons to full intensive courses, there is a choice for you.</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.5s">
                    <div class="bg-white shadow d-flex align-items-center h-100 p-4" style="min-height: 150px;">
                        <div class="d-flex">
                            <div class="flex-shrink-0 btn-lg-square bg-primary">
                                <i class="fa fa-file-alt text-white"></i>
                            </div>
                            <div class="ps-4">
                                <h5>Expert Tuition</h5>
                                <span>Learn with the best. With 10+ years of driving instructor experience and 100+ student passes, we help learners to get on the road.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Facts End -->


    <!-- About Start -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative overflow-hidden ps-5 pt-5 h-100" style="min-height: 400px;">
                        <img class="position-absolute w-100 h-100" src="{{ asset('img/passed-test-1.jpg') }}" alt="young female holding a driving pass certificate" style="object-fit: cover;">
                        <img class="position-absolute top-0 start-0 bg-white pe-3 pb-3" src="{{ asset('img/connie.jpg') }}" alt="connie holding a driving pass certificate" style="width: 200px; height: 250px;">
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="h-100">
                        <h6 class="text-primary text-uppercase mb-2">About Us</h6>
                        <h1 class="display-6 mb-4">Driving in Stoke-On-Trent & Staffordshire</h1>
                        <p>We know the Staffordshire roads like the back of our hand, our students have passed in Cobridge (Stoke-On-Trent), Newcastle-Under-Lyme, Crewe, Buxton and other Staffordshire test centres. Having an experienced instructor who knows the test routes of the area will help you go from L to P with ease!</p>
                        <p class="mb-4">We'll guide and provide you with quality on the road experience and the skills needed to be a great driver before taking your practical test. Whether you are an eager to drive 17 year old or a nervous first time driver at 55, we will get you on your way to passing your test.</p>
                        <div class="row g-2 mb-4 pb-2">
                            <div class="col-sm-6">
                                <i class="fa fa-check text-primary me-2"></i>Approved Driving Instructor - DVSA
                            </div>
                            <div class="col-sm-6">
                                <i class="fa fa-check text-primary me-2"></i>10+ Years Experiecne
                            </div>
                            <div class="col-sm-6">
                                <i class="fa fa-check text-primary me-2"></i>Female Instructor
                            </div>
                            <div class="col-sm-6">
                                <i class="fa fa-check text-primary me-2"></i>Manual Car
                            </div>
                        </div>
                        <div class="row g-4">
                            <div class="col-sm-6">
                                <a class="btn btn-primary py-3 px-5" href="about">Read More</a>
                            </div>
                            <div class="col-sm-6">
                                <a class="d-inline-flex align-items-center btn btn-outline-primary border-2 p-2" href="tel:07526357958">
                                    <span class="flex-shrink-0 btn-square bg-primary">
                                        <i class="fa fa-phone-alt text-white"></i>
                                    </span>
                                    <span class="px-3">07526 357958</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->


    <!-- Courses Start -->
    <div class="container-xxl courses my-6 py-6 pb-0">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                <h6 class="text-primary text-uppercase mb-2">Courses & Prices</h6>
                <h1 class="display-6 mb-4">Our Courses And Prices At The Best Prices</h1>
            </div>
            <div class="row g-4 justify-content-center">
                @foreach($courses as $course)
                    <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                        <div class="courses-item d-flex flex-column bg-white overflow-hidden h-100">
                            <div class="text-center p-4 pt-0">
                                <h5 class="mb-3">{{ $course->name }}</h5>
                                <p>{{ $course->content }}</p>
                                <div class="d-inline-block bg-primary text-white fs-5 py-1 px-4 mb-4">Prices from £{{ $course->price }}</div>
                            </div>
                            <div class="position-relative mt-auto">
                                <img class="img-fluid" src="{{ asset('storage/' . $course->image) }}" alt="{{ $course->name }}">
                                <div class="courses-overlay">
                                    <a class="btn btn-outline-primary border-2" href="{{ route('courses.index') }}">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- Courses End -->


    <!-- Testimonial 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;">
                <h6 class="text-primary text-uppercase mb-2">Testimonials</h6>
                <h1 class="display-6 mb-4">Just A Few Of Our Students!</h1>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="owl-carousel testimonial-carousel">
                        @foreach($testimonials as $testimonial)
                            <div class="testimonial-item text-center">
                                <div class="position-relative mb-5">
                                    <img class="img-fluid rounded-circle mx-auto" src="{{ asset('storage/' . $testimonial->image) }}" alt="{{ $testimonial->name }}" style="width: 150px; height: 150px; object-fit: cover;">
                                    <div class="position-absolute top-100 start-50 translate-middle d-flex align-items-center justify-content-center bg-white rounded-circle" style="width: 60px; height: 60px;">
                                        <i class="fa fa-quote-left fa-2x text-primary"></i>
                                    </div>
                                </div>
                                <p class="fs-4">{{ $testimonial->content }}</p>
                                <hr class="w-25 mx-auto">
                                <h5>{{ $testimonial->name }}</h5>
                                <span>{{ $testimonial->title }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial End -->

    <!-- 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>
    
    @endsection