<?php 
session_start();
include('includes/config.php');
error_reporting(0);

/*
|--------------------------------------------------------------------------
| CAR RENTAL PORTAL - MODERN HOMEPAGE
|--------------------------------------------------------------------------
| Existing database structure preserved.
|--------------------------------------------------------------------------
*/

/* Featured Vehicles */
$sql = "SELECT 
            tblvehicles.VehiclesTitle,
            tblbrands.BrandName,
            tblvehicles.PricePerDay,
            tblvehicles.FuelType,
            tblvehicles.ModelYear,
            tblvehicles.id,
            tblvehicles.SeatingCapacity,
            tblvehicles.VehiclesOverview,
            tblvehicles.Vimage1
        FROM tblvehicles
        JOIN tblbrands ON tblbrands.id = tblvehicles.VehiclesBrand
        LIMIT 6";

$query = $dbh->prepare($sql);
$query->execute();
$featuredVehicles = $query->fetchAll(PDO::FETCH_OBJ);


/* Testimonials */
$tid = 1;

$sql = "SELECT 
            tbltestimonial.Testimonial,
            tblusers.FullName
        FROM tbltestimonial
        JOIN tblusers ON tbltestimonial.UserEmail = tblusers.EmailId
        WHERE tbltestimonial.status = :tid
        LIMIT 6";

$query = $dbh->prepare($sql);
$query->bindParam(':tid', $tid, PDO::PARAM_STR);
$query->execute();
$testimonials = $query->fetchAll(PDO::FETCH_OBJ);

?>

<!DOCTYPE HTML>
<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Car Rental Portal | Rent Your Perfect Car</title>

<meta name="description" content="Find and rent quality vehicles quickly and easily.">

<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">

<!-- Existing Styles -->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">

<!-- Font Awesome -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">


<style>

/* =========================================================
   GLOBAL
========================================================= */

:root {
    --primary: #0b5ed7;
    --primary-dark: #084298;
    --dark: #101828;
    --text: #344054;
    --muted: #667085;
    --light: #f8fafc;
    --border: #e4e7ec;
    --white: #ffffff;
    --success: #12b76a;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--text);
    background: #fff;
    margin: 0;
}

a {
    transition: all .25s ease;
}

.section-padding {
    padding: 85px 0;
}

.section-title {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-title .eyebrow {
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.section-title h2 {
    color: var(--dark);
    font-size: 38px;
    font-weight: 900;
    margin: 0 0 15px;
    line-height: 1.2;
}

.section-title h2 span {
    color: var(--primary);
}

.section-title p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}


/* =========================================================
   HERO
========================================================= */

.modern-hero {
    position: relative;
    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: visible;

    background:
        linear-gradient(
            90deg,
            rgba(7, 20, 42, .94) 0%,
            rgba(7, 20, 42, .78) 45%,
            rgba(7, 20, 42, .20) 100%
        ),
        url('assets/images/banner-image.jpg') center center / cover no-repeat;
}

.hero-content {
    max-width: 700px;

    color: #fff;

    padding: 70px 0 150px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    border-radius: 50px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.20);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 22px;
}

.hero-badge i {
    color: #4ade80;
}

.hero-content h1 {
    font-size: 58px;

    line-height: 1.08;

    font-weight: 900;

    margin: 0 0 20px;

    letter-spacing: -1.5px;
}

.hero-content h1 span {
    color: #5ea5ff;
}

.hero-content p {
    max-width: 590px;

    color: rgba(255,255,255,.85);

    font-size: 18px;

    line-height: 1.7;

    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.btn-primary-modern {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px 24px;

    border-radius: 8px;

    background: var(--primary);

    color: #fff !important;

    font-weight: 800;

    border: none;

    text-decoration: none !important;
}

.btn-primary-modern:hover {
    background: #084fc1;

    transform: translateY(-2px);
}

.btn-outline-modern {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 24px;

    border-radius: 8px;

    background: rgba(255,255,255,.08);

    color: #fff !important;

    border: 1px solid rgba(255,255,255,.35);

    font-weight: 800;

    text-decoration: none !important;
}

.btn-outline-modern:hover {
    background: rgba(255,255,255,.16);
}


/* =========================================================
   SEARCH / FILTER BOX
========================================================= */

.hero-search-wrapper {
    position: absolute;

    left: 0;

    right: 0;

    bottom: -70px;

    z-index: 100;
}

.rental-search {
    background: #fff;

    border-radius: 14px;

    padding: 20px;

    box-shadow:
        0 20px 50px rgba(16,24,40,.18);

    border: 1px solid rgba(16,24,40,.05);
}

.search-title {
    color: var(--dark);

    font-size: 16px;

    font-weight: 900;

    margin-bottom: 14px;
}

.search-title i {
    color: var(--primary);

    margin-right: 6px;
}

.search-grid {
    display: grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr
        1fr
        auto;

    gap: 12px;

    align-items: end;
}

.search-field {
    position: relative;
}

.search-field label {
    display: block;

    color: #667085;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    margin-bottom: 5px;
}

.search-field input,
.search-field select {
    width: 100%;

    height: 48px;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 0 12px;

    color: var(--dark);

    background: #fff;

    outline: none;

    font-size: 13px;
}

.search-field input:focus,
.search-field select:focus {
    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(11,94,215,.08);
}

.search-button {
    height: 48px;

    padding: 0 25px;

    border: none;

    border-radius: 8px;

    background: var(--primary);

    color: #fff;

    font-weight: 900;

    white-space: nowrap;

    transition: all .25s ease;
}

.search-button:hover {
    background: var(--primary-dark);

    transform: translateY(-1px);
}


/* =========================================================
   FEATURED VEHICLES
========================================================= */

.featured-section {

    /*
    Important:
    Extra top padding creates enough space for
    the floating search box.
    */

    padding-top: 185px;

    background: #f8fafc;
}

.vehicle-card {
    background: #fff;

    border: 1px solid #eaecf0;

    border-radius: 14px;

    overflow: hidden;

    margin-bottom: 30px;

    height: calc(100% - 30px);

    transition: all .25s ease;
}

.vehicle-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(16,24,40,.10);
}

.vehicle-image {

    height: 225px;

    position: relative;

    overflow: hidden;

    background: #f2f4f7;
}

.vehicle-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.vehicle-card:hover .vehicle-image img {

    transform: scale(1.04);
}

.vehicle-price {

    position: absolute;

    right: 15px;

    bottom: 15px;

    padding: 8px 12px;

    border-radius: 7px;

    background: #fff;

    color: var(--dark);

    font-size: 15px;

    font-weight: 900;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);
}

.vehicle-price small {

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;
}

.vehicle-content {

    padding: 20px;
}

.vehicle-brand {

    color: var(--primary);

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .8px;

    margin-bottom: 6px;
}

.vehicle-content h3 {

    font-size: 20px;

    color: var(--dark);

    font-weight: 900;

    margin: 0 0 8px;
}

.vehicle-description {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    min-height: 42px;
}

.vehicle-specs {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin: 15px 0;
}

.vehicle-spec {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 8px;

    border-radius: 6px;

    background: #f8fafc;

    color: #475467;

    font-size: 11px;

    font-weight: 700;
}

.vehicle-spec i {

    color: var(--primary);
}

.vehicle-action {

    display: block;

    width: 100%;

    text-align: center;

    padding: 11px;

    border-radius: 7px;

    background: #eef4ff;

    color: var(--primary) !important;

    font-size: 13px;

    font-weight: 900;

    text-decoration: none !important;
}

.vehicle-action:hover {

    background: var(--primary);

    color: #fff !important;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits-section {

    background: #fff;
}

.benefit-card {

    padding: 28px 22px;

    text-align: center;

    border: 1px solid #eaecf0;

    border-radius: 12px;

    height: 100%;

    transition: .25s ease;
}

.benefit-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(16,24,40,.08);
}

.benefit-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 12px;

    background: #eef4ff;

    color: var(--primary);

    font-size: 24px;
}

.benefit-card h4 {

    color: var(--dark);

    font-size: 17px;

    font-weight: 900;

    margin-bottom: 10px;
}

.benefit-card p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {

    background: #f8fafc;
}

.step-card {

    text-align: center;

    padding: 20px;

    position: relative;
}

.step-number {

    width: 52px;

    height: 52px;

    margin: 0 auto 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: #fff;

    font-weight: 900;

    font-size: 18px;
}

.step-card h4 {

    color: var(--dark);

    font-weight: 900;

    font-size: 18px;
}

.step-card p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   STATISTICS
========================================================= */

.stats-section {

    background: var(--dark);

    color: #fff;

    padding: 65px 0;
}

.stat-card {

    text-align: center;

    border-right: 1px solid rgba(255,255,255,.10);
}

.stat-card:last-child {

    border-right: 0;
}

.stat-card i {

    color: #5ea5ff;

    font-size: 25px;

    margin-bottom: 12px;
}

.stat-card h2 {

    color: #fff;

    font-size: 38px;

    font-weight: 900;

    margin: 0 0 4px;
}

.stat-card p {

    color: rgba(255,255,255,.65);

    margin: 0;

    font-size: 13px;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {

    background: #fff;
}

.testimonial-card {

    padding: 28px;

    border: 1px solid #eaecf0;

    border-radius: 12px;

    margin-bottom: 25px;

    height: calc(100% - 25px);
}

.testimonial-stars {

    color: #f5b900;

    margin-bottom: 15px;
}

.testimonial-card p {

    color: #475467;

    font-size: 14px;

    line-height: 1.8;

    min-height: 80px;
}

.customer {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;
}

.customer-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef4ff;

    color: var(--primary);

    font-weight: 900;
}

.customer strong {

    display: block;

    color: var(--dark);
}

.customer small {

    color: var(--muted);
}


/* =========================================================
   CTA
========================================================= */

.cta-section {

    padding: 80px 0;

    background:
        linear-gradient(
            100deg,
            #0b5ed7,
            #084298
        );
}

.cta-box {

    text-align: center;

    color: #fff;
}

.cta-box h2 {

    font-size: 40px;

    font-weight: 900;

    margin: 0 0 15px;
}

.cta-box p {

    max-width: 600px;

    margin: 0 auto 25px;

    color: rgba(255,255,255,.85);

    font-size: 16px;
}

.cta-white {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 25px;

    border-radius: 8px;

    background: #fff;

    color: var(--primary) !important;

    font-weight: 900;

    text-decoration: none !important;
}

.cta-white:hover {

    transform: translateY(-2px);
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width: 1199px) {

    .search-grid {

        grid-template-columns:
            1fr
            1fr
            1fr;
    }

    .search-button {

        width: 100%;

        margin-top: 0;
    }

    .hero-search-wrapper {

        bottom: -110px;
    }

    .featured-section {

        padding-top: 225px;
    }
}


@media(max-width: 991px) {

    .hero-content h1 {

        font-size: 45px;
    }

    .hero-search-wrapper {

        position: absolute;

        bottom: -155px;
    }

    .search-grid {

        grid-template-columns:
            1fr
            1fr;
    }

    .featured-section {

        padding-top: 270px;
    }

    .stat-card {

        margin-bottom: 30px;

        border-right: 0;
    }
}


@media(max-width: 767px) {

    .section-padding {

        padding: 60px 0;
    }

    .section-title h2 {

        font-size: 30px;
    }

    .modern-hero {

        min-height: 630px;

        overflow: visible;
    }

    .hero-content {

        padding: 60px 15px 120px;
    }

    .hero-content h1 {

        font-size: 38px;
    }

    .hero-content p {

        font-size: 16px;
    }

    .hero-search-wrapper {

        position: absolute;

        left: 15px;

        right: 15px;

        bottom: -300px;
    }

    .rental-search {

        padding: 16px;
    }

    .search-grid {

        grid-template-columns: 1fr;
    }

    .search-button {

        width: 100%;
    }

    .featured-section {

        padding-top: 335px;
    }

    .vehicle-image {

        height: 210px;
    }

    .cta-box h2 {

        font-size: 30px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width: 480px) {

    .hero-content h1 {

        font-size: 32px;
    }

    .hero-content p {

        font-size: 15px;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;
    }

    .btn-primary-modern,
    .btn-outline-modern {

        width: 100%;
    }

    .hero-search-wrapper {

        bottom: -340px;
    }

    .featured-section {

        padding-top: 375px;
    }

    .search-title {

        font-size: 14px;
    }

}


/* =========================================================
   BACK TO TOP
========================================================= */

#back-top {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 999;

}

#back-top a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    text-decoration: none;

}

#back-top a:hover {

    background: var(--primary-dark);
}

</style>

</head>


<body>


<!-- =========================================================
     HEADER
========================================================= -->

<?php include('includes/header.php'); ?>


<!-- =========================================================
     HERO
========================================================= -->

<section class="modern-hero">

    <div class="container">

        <div class="hero-content">

            <div class="hero-badge">

                <i class="fa fa-check-circle"></i>

                Easy & Reliable Car Rental

            </div>


            <h1>

                Find the right car for your

                <span>journey.</span>

            </h1>


            <p>

                Rent quality vehicles at affordable prices.

                Choose your car, select your dates and get ready

                to hit the road.

            </p>


            <div class="hero-buttons">

                <a
                    href="#vehicles"
                    class="btn-primary-modern"
                >

                    <i class="fa fa-car"></i>

                    Explore Vehicles

                </a>


                <a
                    href="#how-it-works"
                    class="btn-outline-modern"
                >

                    <i class="fa fa-info-circle"></i>

                    How It Works

                </a>

            </div>

        </div>

    </div>


    <!-- =====================================================
         SEARCH FILTER
    ====================================================== -->

    <div class="hero-search-wrapper">

        <div class="container">

            <form
                class="rental-search"
                action="search.php"
                method="get"
            >

                <div class="search-title">

                    <i class="fa fa-search"></i>

                    Find a vehicle for your trip

                </div>


                <div class="search-grid">


                    <!-- Pickup Location -->

                    <div class="search-field">

                        <label>
                            Pickup Location
                        </label>

                        <input
                            type="text"
                            name="pickup_location"
                            placeholder="Where will you pick up?"
                        >

                    </div>


                    <!-- Pickup Date -->

                    <div class="search-field">

                        <label>
                            Pickup Date
                        </label>

                        <input
                            type="date"
                            name="pickup_date"
                        >

                    </div>


                    <!-- Return Date -->

                    <div class="search-field">

                        <label>
                            Return Date
                        </label>

                        <input
                            type="date"
                            name="return_date"
                        >

                    </div>


                    <!-- Vehicle Type -->

                    <div class="search-field">

                        <label>
                            Vehicle Type
                        </label>

                        <select name="vehicle_type">

                            <option value="">
                                All Vehicles
                            </option>

                            <option value="SUV">
                                SUV
                            </option>

                            <option value="Sedan">
                                Sedan
                            </option>

                            <option value="Van">
                                Van
                            </option>

                            <option value="Luxury">
                                Luxury
                            </option>

                        </select>

                    </div>


                    <!-- Search -->

                    <button
                        type="submit"
                        class="search-button"
                    >

                        <i class="fa fa-search"></i>

                        Search Cars

                    </button>


                </div>

            </form>

        </div>

    </div>

</section>


<!-- =========================================================
     FEATURED VEHICLES
========================================================= -->

<section
    class="section-padding featured-section"
    id="vehicles"
>

    <div class="container">


        <div class="section-title">

            <div class="eyebrow">
                Our Fleet
            </div>


            <h2>

                Choose your

                <span>perfect ride</span>

            </h2>


            <p>

                Explore our selection of comfortable, reliable and

                affordable vehicles for every type of journey.

            </p>

        </div>


        <div class="row">


            <?php

            if(count($featuredVehicles) > 0)

            {

                foreach($featuredVehicles as $result)

                {

            ?>


            <div class="col-md-4 col-sm-6">


                <div class="vehicle-card">


                    <div class="vehicle-image">


                        <a
                            href="vehical-details.php?vhid=<?php echo htmlentities($result->id); ?>"
                        >

                            <img
                                src="admin/img/vehicleimages/<?php echo htmlentities($result->Vimage1); ?>"
                                alt="<?php echo htmlentities($result->VehiclesTitle); ?>"
                            >

                        </a>


                        <div class="vehicle-price">

                            $<?php echo htmlentities($result->PricePerDay); ?>

                            <small>
                                / day
                            </small>

                        </div>


                    </div>


                    <div class="vehicle-content">


                        <div class="vehicle-brand">

                            <?php echo htmlentities($result->BrandName); ?>

                        </div>


                        <h3>

                            <?php echo htmlentities($result->VehiclesTitle); ?>

                        </h3>


                        <div class="vehicle-description">

                            <?php

                            echo htmlentities(
                                substr(
                                    $result->VehiclesOverview,
                                    0,
                                    95
                                )
                            );

                            ?>

                        </div>


                        <div class="vehicle-specs">


                            <span class="vehicle-spec">

                                <i class="fa fa-calendar"></i>

                                <?php echo htmlentities($result->ModelYear); ?>

                            </span>


                            <span class="vehicle-spec">

                                <i class="fa fa-user"></i>

                                <?php echo htmlentities($result->SeatingCapacity); ?>

                                Seats

                            </span>


                            <span class="vehicle-spec">

                                <i class="fa fa-tint"></i>

                                <?php echo htmlentities($result->FuelType); ?>

                            </span>


                        </div>


                        <a
                            href="vehical-details.php?vhid=<?php echo htmlentities($result->id); ?>"
                            class="vehicle-action"
                        >

                            View Vehicle

                            <i class="fa fa-arrow-right"></i>

                        </a>


                    </div>

                </div>


            </div>


            <?php

                }

            }

            ?>


        </div>

    </div>

</section>


<!-- =========================================================
     WHY CHOOSE US
========================================================= -->

<section class="section-padding benefits-section">


    <div class="container">


        <div class="section-title">


            <div class="eyebrow">
                Why Choose Us
            </div>


            <h2>

                Renting a car should be

                <span>simple.</span>

            </h2>


            <p>

                Everything you need for a smooth and stress-free

                rental experience.

            </p>


        </div>


        <div class="row">


            <div class="col-md-3 col-sm-6">


                <div class="benefit-card">


                    <div class="benefit-icon">

                        <i class="fa fa-car"></i>

                    </div>


                    <h4>
                        Quality Vehicles
                    </h4>


                    <p>

                        Well-maintained vehicles ready for your next trip.

                    </p>


                </div>


            </div>


            <div class="col-md-3 col-sm-6">


                <div class="benefit-card">


                    <div class="benefit-icon">

                        <i class="fa fa-money"></i>

                    </div>


                    <h4>
                        Fair Prices
                    </h4>


                    <p>

                        Competitive rental rates with no unnecessary surprises.

                    </p>


                </div>


            </div>


            <div class="col-md-3 col-sm-6">


                <div class="benefit-card">


                    <div class="benefit-icon">

                        <i class="fa fa-clock-o"></i>

                    </div>


                    <h4>
                        Easy Booking
                    </h4>


                    <p>

                        Choose your vehicle and dates in just a few steps.

                    </p>


                </div>


            </div>


            <div class="col-md-3 col-sm-6">


                <div class="benefit-card">


                    <div class="benefit-icon">

                        <i class="fa fa-headphones"></i>

                    </div>


                    <h4>
                        Customer Support
                    </h4>


                    <p>

                        Get assistance whenever you need help with your rental.

                    </p>


                </div>


            </div>


        </div>


    </div>


</section>


<!-- =========================================================
     HOW IT WORKS
========================================================= -->

<section
    class="section-padding how-section"
    id="how-it-works"
>


    <div class="container">


        <div class="section-title">


            <div class="eyebrow">
                Simple Process
            </div>


            <h2>

                Rent a car in

                <span>3 easy steps</span>

            </h2>


            <p>

                Getting on the road has never been easier.

            </p>


        </div>


        <div class="row">


            <div class="col-md-4">


                <div class="step-card">


                    <div class="step-number">
                        1
                    </div>


                    <h4>
                        Choose Your Car
                    </h4>


                    <p>

                        Browse our fleet and select the vehicle

                        that fits your trip.

                    </p>


                </div>


            </div>


            <div class="col-md-4">


                <div class="step-card">


                    <div class="step-number">
                        2
                    </div>


                    <h4>
                        Book Your Dates
                    </h4>


                    <p>

                        Select your pickup and return dates and

                        complete your booking.

                    </p>


                </div>


            </div>


            <div class="col-md-4">


                <div class="step-card">


                    <div class="step-number">
                        3
                    </div>


                    <h4>
                        Pick Up & Drive
                    </h4>


                    <p>

                        Collect your vehicle and enjoy your journey.

                    </p>


                </div>


            </div>


        </div>


    </div>


</section>


<!-- =========================================================
     STATISTICS
========================================================= -->

<section class="stats-section">


    <div class="container">


        <div class="row">


            <div class="col-md-3 col-xs-6">


                <div class="stat-card">


                    <i class="fa fa-car"></i>


                    <h2>
                        50+
                    </h2>


                    <p>
                        Vehicles Available
                    </p>


                </div>


            </div>


            <div class="col-md-3 col-xs-6">


                <div class="stat-card">


                    <i class="fa fa-calendar-check-o"></i>


                    <h2>
                        500+
                    </h2>


                    <p>
                        Successful Rentals
                    </p>


                </div>


            </div>


            <div class="col-md-3 col-xs-6">


                <div class="stat-card">


                    <i class="fa fa-users"></i>


                    <h2>
                        300+
                    </h2>


                    <p>
                        Happy Customers
                    </p>


                </div>


            </div>


            <div class="col-md-3 col-xs-6">


                <div class="stat-card">


                    <i class="fa fa-star"></i>


                    <h2>
                        4.9
                    </h2>


                    <p>
                        Customer Rating
                    </p>


                </div>


            </div>


        </div>


    </div>


</section>


<!-- =========================================================
     TESTIMONIALS
========================================================= -->

<section class="section-padding testimonials-section">


    <div class="container">


        <div class="section-title">


            <div class="eyebrow">
                Customer Reviews
            </div>


            <h2>

                What our

                <span>customers say</span>

            </h2>


            <p>

                Real experiences from people who have rented with us.

            </p>


        </div>


        <div class="row">


            <?php

            if(count($testimonials) > 0)

            {

                foreach($testimonials as $result)

                {

            ?>


            <div class="col-md-4 col-sm-6">


                <div class="testimonial-card">


                    <div class="testimonial-stars">

                        <i class="fa fa-star"></i>

                        <i class="fa fa-star"></i>

                        <i class="fa fa-star"></i>

                        <i class="fa fa-star"></i>

                        <i class="fa fa-star"></i>

                    </div>


                    <p>

                        "<?php echo htmlentities($result->Testimonial); ?>"

                    </p>


                    <div class="customer">


                        <div class="customer-avatar">

                            <?php

                            echo strtoupper(
                                substr(
                                    $result->FullName,
                                    0,
                                    1
                                )
                            );

                            ?>

                        </div>


                        <div>

                            <strong>

                                <?php echo htmlentities($result->FullName); ?>

                            </strong>


                            <small>
                                Verified Customer
                            </small>

                        </div>


                    </div>


                </div>


            </div>


            <?php

                }

            }

            ?>


        </div>


    </div>


</section>


<!-- =========================================================
     CALL TO ACTION
========================================================= -->

<section class="cta-section">


    <div class="container">


        <div class="cta-box">


            <h2>
                Ready to hit the road?
            </h2>


            <p>

                Find your perfect vehicle and start your journey today.

            </p>


            <a
                href="#vehicles"
                class="cta-white"
            >

                Browse Available Cars

                <i class="fa fa-arrow-right"></i>

            </a>


        </div>


    </div>


</section>


<!-- =========================================================
     FOOTER
========================================================= -->

<?php include('includes/footer.php'); ?>


<!-- =========================================================
     BACK TO TOP
========================================================= -->

<div
    id="back-top"
    class="back-top"
>

    <a href="#top">

        <i class="fa fa-angle-up"></i>

    </a>

</div>


<!-- =========================================================
     LOGIN
========================================================= -->

<?php include('includes/login.php'); ?>


<!-- =========================================================
     REGISTRATION
========================================================= -->

<?php include('includes/registration.php'); ?>


<!-- =========================================================
     FORGOT PASSWORD
========================================================= -->

<?php include('includes/forgotpassword.php'); ?>


<!-- =========================================================
     JAVASCRIPT
========================================================= -->

<script src="assets/js/jquery.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

<script src="assets/js/interface.js"></script>


<script>

$(document).ready(function(){

    /*
    |--------------------------------------------------------------------------
    | Smooth scrolling
    |--------------------------------------------------------------------------
    */

    $('a[href^="#"]').on('click', function(e) {

        var target = $(this.getAttribute('href'));

        if(target.length) {

            e.preventDefault();

            $('html, body').animate({

                scrollTop: target.offset().top - 70

            }, 700);

        }

    });


    /*
    |--------------------------------------------------------------------------
    | Prevent return date before pickup date
    |--------------------------------------------------------------------------
    */

    $('input[name="pickup_date"]').on('change', function(){

        var pickupDate = $(this).val();

        $('input[name="return_date"]').attr(
            'min',
            pickupDate
        );

    });


    /*
    |--------------------------------------------------------------------------
    | Prevent pickup date in the past
    |--------------------------------------------------------------------------
    */

    var today = new Date().toISOString().split('T')[0];

    $('input[name="pickup_date"]').attr(
        'min',
        today
    );

});

</script>


</body>

</html>