@extends('partials.main')
@section('title')
    {{ 'Rent a Vehicle' }}
@endsection
@section('content')
    <style>
        img.advance-btn {
            height: 200px !important;
            object-fit: cover;
        }

        .tg-description span {
            color: #ff7550;
        }

        .tg-quantitycolor {
            width: 30%;
            float: left;
            padding: 10px 0 0;
        }
    </style>
    <!--************************************
                                        Inner Banner Start
                                      *************************************-->
    <section class="tg-parallax tg-innerbanner" data-appear-top-offset="600" data-parallax="scroll"
        data-image-src="../images/Home/sea-7145940_1280.jpg">
        <div class="tg-sectionspace tg-haslayout">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h1>Rent a Vehicle</h1>
                        <h2>Hire Your Private Tour Car and Chauffeur with us </h2>
                        <ol class="tg-breadcrumb">
                            <li><a href="javascript:void(0);">Home</a></li>
                            <li class="tg-active">Rent a Vehicle</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--************************************
                                        Inner Banner End
                                      *************************************-->
    <!--************************************
                                        Main Start
                                      *************************************-->
    <main id="tg-main" class="tg-main tg-haslayout">
        <!--************************************
                                                Product Detail Start
                                        *************************************-->
        <div class="tg-sectionspace tg-haslayout">
            <div class="container">
                <div class="row">
                    <div class="tg-productdetail">
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
                            <div id="tg-productdetailsider" class="tg-productdetailsider owl-carousel owl-loaded owl-drag">

                                <figure class="item">
                                    <img src="{{ asset('thumbnails/' . $data->image) }}" alt="image description">
                                </figure>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
                            <div class="tg-productinfo">
                                <h3>{{ $data->name }}</h3>
                                <div class="tg-pricearea">

                                    <h4>{{ $data->discount ? $data->discount . '% Off' : '' }}</h4>
                                </div>
                                <div class="tg-description">
                                    {!! $data->description !!}
                                </div>
                                <div class="tg-quantitycolor">
                                    <form action="/quotation" class="" method="post">
                                        @csrf
                                        <input name="type" type="hidden" value="vehi">
                                        <input name="name" type="hidden" value="{{ $data->name }}">
                                        <button class="tg-btnaddtocart" type="submit"> <i class="icon-icons240"></i>
                                            <span>Request Quote </span></button>



                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--************************************
                                                Product Detail End
                                        *************************************-->
        <!--************************************
                                                Latest Product Start
                                        *************************************-->
        <section style="padding-top:40px;" class="tg-sectionspace tg-toppadding tg-haslayout">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="tg-sectionhead tg-sectionheadvtwo">
                            <div class="tg-sectiontitle">
                                <h2>Rent A Vehicle With Driver</h2>
                            </div>
                            <div class="tg-description">
                                <p>Unlock Your Adventure: Explore, Discover, and Drive with Us!
                                </p>
                            </div>
                        </div>
                        <div id="tg-populartoursslider"
                            class="tg-populartoursslider tg-populartours tg-populartoursvtwo owl-carousel">

                            @foreach ($vehicle as $item)
                                <div class="item tg-populartour">
                                    <figure>
                                        <a href="javascript:void(0);">
                                            <img src="{{ asset('thumbnails/' . $item->image) }}" alt="image destinations"
                                                class="advance-btn"></a>
                                        <span
                                            class="tg-descount">{{ $item->discount ? $item->discount . '% Off' : '' }}</span>
                                    </figure>
                                    <div class="tg-populartourcontent">
                                        <div class="tg-populartourtitle">
                                            <h3><a href="javascript:void(0);"> {{ $item->name }}</a></h3>
                                        </div>
                                        <div class="tg-description">
                                            <p> {{ $item->pax }}</p>
                                        </div>
                                        <div class="tg-populartourfoot">
                                            <form action="/quotation" method="post">
                                                @csrf
                                                <input name="type" type="hidden" value="vehi">
                                                <input name="name" type="hidden" value="{{ $item->name }}">
                                                <button class="tg-btnaddtocart" type="submit"> <i
                                                        class="icon-icons240"></i>
                                                    <span>Request Quote </span></button>
                                            </form>

                                        </div>
                                    </div>
                                </div>
                            @endforeach


                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--************************************
                                                Latest Product End
                                        *************************************-->
    </main>
    <!--************************************
                                        Main End
                                      *************************************-->
@endsection