@extends('frontend.layout.layout')
@section('title', 'Home page')
@section('content')

    <!-- Slider -->
    <div class="slider">
        <div class="">
            <div id="carouselExampleCaptions" class="carousel slide"  data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
                </div>

                <div class="carousel-inner">
                    @foreach ($slider as $sliders)
                        <div class="carousel-item active" data-bs-interval="3000">
                            <img src="{{ asset('uploads/slider_images/' . $sliders->image) }}" class="d-block w-100" alt="..." />
                            <div class="carousel-caption d-none d-md-block">
                                <h5 class="bannerheading">
                                    {{ $sliders->name }}
                                </h5>

                                <h2 class="bannertwo">
                                    {{ $sliders->namee }}
                                </h2>
                                <p class="bannerpara">
                                    {{ $sliders->description }}
                                </p>
                                <button class="btn btn-light theme-color bannerbtn">{{ $sliders->linkk }}</button>
                            </div>
                        </div>
                    @endforeach
                    {{-- <div class="carousel-item">
                        <img src="{{asset('frontend/images/Rectangle 7.png')}}" class="d-block w-100" alt="..." />
                        <div class="carousel-caption d-none d-md-block">
                            <h5>
                                Find Your Way, Anytime, <br />
                                Anywhere: GPS Tracking Made Easy
                            </h5>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                <br />
                                Ut elit tellus, luctus nec ullamcorper mattis, pulvinar
                                dapibus leo.
                            </p>
                            <button class="btn btn-light theme-color">Get a Quote</button>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="{{asset('frontend/images/Rectangle 7-1.png')}}" class="d-block w-100" alt="..." />
                        <div class="carousel-caption d-none d-md-block">
                            <h5>
                                Find Your Way, Anytime, <br />
                                Anywhere: GPS Tracking Made Easy
                            </h5>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                <br />
                                Ut elit tellus, luctus nec ullamcorper mattis, pulvinar
                                dapibus leo.
                            </p>
                            <button class="btn btn-light theme-color">Get a Quote</button>
                        </div>
                    </div> --}}
                </div>


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

    <!-- We Provide -->
    {{-- <div class="weprovide py-4">
        <div class="container" style="    max-width: 1290px;">

            <div class="row row-cols-1 row-cols-md-4 g-4 ">
                @foreach ($category as $value)
                    @if ($value->title !== null)
                        <div class="col">
                            <div class="card weprovidecard ht ">
                                <div>
                                    <img src="{{ asset('admin/img/' . $value->image) }}" class="card-img-top"
                                        alt="...">
                                </div>
                                <div class="card-body">
                                    <h5 class="servicehd">{{ $value->title }} </h5>
                                    <p class="serviceparaone">{{ $value->button }}</p>
                                    <p class="servicepara ">{{ $value->description }}</p>
                                </div>
                            </div>
                        </div>
                    @endif
                 
                    @if ($value->title == null)
                        <div class="col">
                            <div class="card h-100" style="background: #98CBFB;">
                                <img src="{{ asset('admin/img/' . $value->image) }}" alt="" class="w-100" />
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div> --}}

    <div class="weprovide py-4">
        <div class="container" style="max-width: 1290px;">
            <div class="row row-cols-1 row-cols-md-4 g-4 ">
                @foreach ($service_category as $value)
                @if ($value->title !== null)
                <div class="col">
                    <div class="card weprovidecard ht ">
                        <div>
                            <img src="{{ asset('admin/img/' . $value->image) }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body srrvicepadding">
                            <h5 class="servicehd">{{ $value->title }} </h5>
                            {{-- <p class="serviceparaone">{{ $value->heading }}</p> --}}
                            <p class="servicepara ">{{ $value->description }}</p>
                        </div>
                    </div>
                </div>
                @endif
                 
                @if ($value->title == null)               
                <div class="col">
                    <div class="card h-100">
                        <img src="{{ asset('admin/img/' . $value->image) }}" alt="" class="w-100" />
                    </div>
                </div>
                @endif
                @endforeach
            </div>
        </div>
    </div>

    <!-- Accute 140 -->
    {{-- <section class="accute140">
        @foreach ($product as $products)
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2 class="underLineHeading">
                            <span class="position-relative">
                                {{ $products->title }}
                                <div class="linebottom"></div>
                            </span>
                        </h2>
                        <ul class="indexlist">
                            <li>
                                {{ $products->li_item }} </li>
                            <li>
                                {{ $products->li_item2 }}</li>
                        </ul>

                        <div class="d-flex flex-wrap">
                            <p class="gradient-btn me-2">{{ $products->item1 }}</p>
                            <p class="gradient-btn me-2">{{ $products->item2 }}</p>
                            <p class="gradient-btn me-2">{{ $products->item3 }}</p>
                            <p class="gradient-btn me-2">{{ $products->item4 }}</p>
                            <p class="gradient-btn me-2">{{ $products->item5 }}</p>
                            <p class="gradient-btn me-2">{{ $products->item6 }}</p>
                        </div>
                        <div class="mt-4">
                            <a href="{{ $products->button1_link }}" class="gradient-btnBlue">{{ $products->button1 }}</a>
                            <a href="{{ $products->button2_link }}" class="gradient-btn ms-2">{{ $products->button2 }}</a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <img src="{{ asset('admin/img/' . $products->image) }}" class="w-100" alt="hello" />
                    </div>
                </div>
            </div>
        @endforeach
    </section> --}}
    <section class="accute140">
        @foreach ($product as $products)
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h2 class="underLineHeading">
                            <span class="position-relative">
                                {{ $products->title }}
                                <div class="linebottom"></div>
                            </span>
                        </h2>
                        <ul class="indexlist">
                            <li> {{ $products->li_item }}
                                {{-- Discover our cutting-edge AIS 140 compliant products, designed
                            to <br>elevate your transportation system's efficiency and safety. --}}
                            </li>
                            <li> {{ $products->li_item2 }}
                                {{-- Discover our cutting-edge AIS 140 compliant products, designed
                            to <br>elevate your transportation system's efficiency and safety. --}}
                            </li>
                        </ul>
                        <div class="row">
                            <div class="col-md-4">
                                <ul class="myindexlist">
                                    <li>{{ $products->item1 }}
                                        {{-- Government Aproved --}}
                                    </li>
                                    <li>{{ $products->item2 }}
                                        {{-- Built-In 800Mah Battery --}}
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul class="myindexlist">
                                    <li>{{ $products->item3 }}
                                        {{-- Real-Time IRNSS GPS --}}
                                    </li>
                                    <li>{{ $products->item4 }}
                                        {{-- Built-In GSM & GPS Antenna --}}
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul class="myindexlist">
                                    <li>{{ $products->item5 }}
                                        {{-- Tele Vut Off Fuel / Power --}}
                                    </li>
                                    <li>{{ $products->item6 }}
                                        {{-- Multiple Alarms --}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="mt-4">
                            <a href="{{ $products->button1_link }}" class="gradient-btnBlue">{{ $products->button1 }}</a>
                            <a href="{{ $products->button2_link }}" class="gradient-btn ms-2">{{ $products->button2 }}</a>

                            {{-- <a href="" class="gradient-btnBlue">Enquire Now</a>
                        <a href="" class="gradient-btn ms-2">Read More</a> --}}
                        </div>
                    </div>
                    <div class="col-md-5">
                        <img src="{{ asset('frontend/images/accutes140.png') }}" class="w-100" alt="hello" />
                    </div>
                </div>
            </div>
        @endforeach
    </section>

    {{-- <section>
        <div class="OUR_PRODUCTS ">
            <div class="d-flex justify-content-center align-items-center flex-column">
                <h4 class="theme-color">OUR PRODUCTS</h4>
                <p>Special products for all your needs</p>
                <div class="linebottomOne"></div>
            </div>
            <div class="container">
                <div class="row py-4">
                    @foreach ($allproduct as $value)
                        <div class="col-md-4 mb-3">
                            <div class="ProductCard">
                                <img src="{{ asset('admin/img/' . $value->image) }}" class="w-100" alt="product" />
                                <div class="ProductCard-content">
                                    <h5 class="productheading mb-0">{{ $value->name }} </h5>
                                    <div class="linebottomOne"></div>
                                    <br>
                                    <h6> <b><span> QUAD BAND : </span> </b> {{ $value->quad_band }}</h6>
                                    <h6> <b><span> GPRS Multi-Slot Class : </span> </b> {{ $value->description }} </h6>
                                    <br>

                                    <div class="text-end flex-row">
                                        {{ $value->button }} <i class="fa-solid fa-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach                   
                </div>
            </div>
    </section> --}}
    <section>
        <div class="OUR_PRODUCTS ">
            <div class="d-flex justify-content-center align-items-center flex-column">
                <h4 class="theme-color">OUR PRODUCTS</h4>
                <p>Special products for all your needs</p>
                <div class="linebottomOne"></div>
            </div>
            <div class="card-slider">
                @foreach ($allproduct as $value)
                    <div class="card">
                        <div class="p-2">
                            <a href="#" target="_blank" class="main-link">
                                <h2 class="sliderproducthd"> MC201</h2>
                                <p class="prpductpara">{{ $value->name }} </p>
                                <div class="image">
                                    <img src="{{ asset('admin/img/' . $value->image) }}">
                                </div>
                            </a>
                            <ul class="myproduct">
                                <li>
                                    QUAD BAND : {{ $value->quad_band }}
                                </li>
                                <li>
                                    GPRS Multi-Slot Class : {{ $value->description }}
                                </li>
                            </ul>
                        </div>
                        <a href="#" class="reviews-link"> Read more </a>
                    </div>
                @endforeach
                {{-- <div class="card">
                    <div class="p-2">
                        <a href="#" target="_blank" class="main-link">
                            <h2 class="sliderproducthd"> MC201</h2>
                            <p class="prpductpara"> ACUTE140 </p>
                            <div class="image">
                                <img src="images/product.png">
                            </div>
                        </a>
                        <ul class="myproduct">
                            <li>
                                QUAD BAND : 850/900/1800/1900MHZ
                            </li>
                            <li>
                                GPRS Multi-Slot Class : Class 12 (85.6 KBPS)
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="reviews-link"> Read more </a>
                </div>
                <div class="card">
                    <div class="p-2">
                        <a href="#" target="_blank" class="main-link">
                            <h2 class="sliderproducthd"> MC201</h2>
                            <p class="prpductpara"> ACUTE140 </p>
                            <div class="image">
                                <img src="images/product.png">
                            </div>
                        </a>
                        <ul class="myproduct">
                            <li>
                                QUAD BAND : 850/900/1800/1900MHZ
                            </li>
                            <li>
                                GPRS Multi-Slot Class : Class 12 (85.6 KBPS)
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="reviews-link"> Read more </a>
                </div>
                <div class="card">
                    <div class="p-2">
                        <a href="#" target="_blank" class="main-link">
                            <h2 class="sliderproducthd"> MC201</h2>
                            <p class="prpductpara"> ACUTE140 </p>
                            <div class="image">
                                <img src="images/product.png">
                            </div>
                        </a>
                        <ul class="myproduct">
                            <li>
                                QUAD BAND : 850/900/1800/1900MHZ
                            </li>
                            <li>
                                GPRS Multi-Slot Class : Class 12 (85.6 KBPS)
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="reviews-link"> Read more </a>
                </div>
                <div class="card">
                    <div class="p-2">
                        <a href="https://accessible360.com" target="_blank" class="main-link">
                            <h2 class="sliderproducthd"> MC201</h2>
                            <p class="prpductpara"> ACUTE140 </p>
                            <div class="image">
                                <img src="images/product.png">
                            </div>
                        </a>
                        <ul class="myproduct">
                            <li>
                                QUAD BAND : 850/900/1800/1900MHZ
                            </li>
                            <li>
                                GPRS Multi-Slot Class : Class 12 (85.6 KBPS)
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="reviews-link"> Read more </a>
                </div> --}}
            </div>
    </section>


    <section class="thumbdiv">
        <br>
        <div class="w-100 py-1 theme-bg border "></div>
        <div class="container">
            <div class="row">
                <div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        @foreach($device_tracking as $device)
                        <div class="col-md-4">
                            <br>
                            <h5 class="card-title whclr rrr"> <img src="{{ asset('admin/img/'.$device->image) }}" />{{$device->title}}</h5>
                            <p class="card-text whclr">{{$device->description}}</p>
                            <br>
                        </div>
                        @endforeach
                        {{-- <div class="col-md-4">
                            <br>
                            <h5 class="card-title whclr rrr"> <img src="{{ asset('frontend/images/th.png') }}" /> Easily
                                Fitted</h5>
                            <p class="card-text whclr">Our devices are easily fitted
                                to your vehicle, worn on a
                                child’s wrist or even on a
                                pet’s collar!</p>
                            <br>
                        </div>
                        <div class="col-md-4">
                            <br>
                            <h5 class="card-title whclr rrr"> <img src="{{ asset('frontend/images/down.png') }}" /> Free
                                App</h5>
                            <p class="card-text whclr">Acute FREE app lets
                                you track infinite devices &
                                individuals on just one
                                screen! Track them all!</p>
                            <br>
                        </div> --}}
                    </div>
                </div>
                <div class="col-md-6" >
                    <h1 class="nh ms-2"> Need help? Call our support team at <span>  <a href="tel:9119114343" style="padding: 0px;margin: 0px;">  <i class="fa fa-phone" aria-hidden="true" style="padding: 0px;margin: 0px"></i>(+91)9119114343 </a> </span></h1>
                      
                   </div>
            </div>
        </div>
        <div class="w-100 py-1 theme-bg border "></div>
        <br>
    </section>
    <!-- About us -->
    <section class="aboutus mt-5">
        @foreach ($about_us as $about)
            <div class="container ">
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <h3 class="theme-color">{{ $about->title }}</h3>
                            <div class="linebottomOne"></div>
                        </div>
                        <div>
                            <p>{{ strip_tags($about->description) }}</p>
                            <a href="" class="gradient-btnBlue">{{ $about->button_f }}</a>
                            <a href="" class="gradient-btn ms-2">{{ $about->button_s }}</a>
                        </div>
                    </div>
                    <div class="col-md-6 d-flex justify-content-end">
                        <img src="{{ asset('admin/img/' . $about->image) }}" class="w-100" alt="" />
                    </div>
                </div>
            </div>
        @endforeach
    </section>

    <!-- Mission  -->
    <section class="ourmission  whitebk">
        @foreach ($mission as $missions)
            <div class="container">
                <div class="row">
                    <div class="col-md-5 align-self-center">
                        <img class="w-75 d-block mx-auto" src="{{ asset('admin/img/' . $missions->image) }}" />
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class=" col-md-6 align-self-center">
                        <div class="omvbackground">
                            <h3>{{ $missions->title }}</h3>
                            <p>{{ $missions->description }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </section>
    <!-- Our Vision -->
    <section class="ourmission mt-5">
        @foreach ($vision as $visions)
            <div class="container">
                <div class="row">
                    <div class=" col-md-5 align-self-center">
                        <div class="omvbackground">
                            <h3>{{ $visions->title }}</h3>
                            <p>{{ $visions->description }}</p>
                        </div>
                    </div>
                    <div class=" col-md-7 ">
                        <img class="w-75 d-block mx-auto" src="{{ asset('admin/img/' . $visions->image) }}" />
                    </div>
                </div>
            </div>
        @endforeach
    </section>
    <section class="thumbdiv">
        <br>
        <div class="w-100 py-1 theme-bg border "></div>
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="testimonials">
                        @foreach ($testimonial as $testimonials)
                            <div>
                                <figure class="testimonial">
                                    <blockquote>{{ $testimonials->description }} </blockquote>
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQw2qbkAJITwS1cD7tMI7D4qXZAWCfgzHaC07PkERmrl-jiXaUi"
                                        alt="image-1" />
                                    <div class="user">
                                        <h3>{{ $testimonials->title }}</h3>
                                        <p class="identify">{{ $testimonials->designation }}</p>
                                    </div>
                                </figure>
                            </div>
                        @endforeach
                        {{-- <div>
                            <figure class="testimonial">
                                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                </blockquote>
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQw2qbkAJITwS1cD7tMI7D4qXZAWCfgzHaC07PkERmrl-jiXaUi"
                                    alt="image-2" />
                                <div class="user">
                                    <h3>User Name</h3>
                                    <p class="identify">Web Designer</p>
                                </div>
                            </figure>
                        </div>
                        <div>
                            <figure class="testimonial">
                                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                </blockquote>
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQw2qbkAJITwS1cD7tMI7D4qXZAWCfgzHaC07PkERmrl-jiXaUi"
                                    alt="image-3" />
                                <div class="user">
                                    <h3>User Name</h3>
                                    <p class="identify">Ui Designer</p>
                                </div>
                            </figure>
                        </div>
                        <div>
                            <figure class="testimonial">
                                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                </blockquote>
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQw2qbkAJITwS1cD7tMI7D4qXZAWCfgzHaC07PkERmrl-jiXaUi"
                                    alt="image-4" />
                                <div class="user">
                                    <h3>User Name</h3>
                                    <p class="identify">Illustrator</p>
                                </div>
                            </figure>
                        </div> --}}
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="str">
                        <div class="srat">
                            <p style="margin: 0px"> <span
                                    style="border: 2px solid white; padding: 0px 10px;  border-radius: 20px;"> 5 </span>
                            </p>
                            <h4 style="margin: 0px"> Star Rating</h4>
                        </div>
                        ★★★★★★
                    </div>
                </div>
            </div>
        </div>
        <div class="w-100 py-1 theme-bg border "></div>
        <br>
    </section>
    <style>
        .carbk {
            background-image: url('{{ asset('frontend/images/carback.png') }}');
            background-size: cover;
        }
    </style>
    <!-- Real Time tracking -->
    <section class="realtime-tracking mt-5 carbk">
        <div class="container">
            @foreach ($realtimeTracking as $value)
                <div class="row d-flex align-items-center">
                    <div class="col-md-6">
                        <div class="realtimediv">
                            <h3 class="Empowerheading">{{ $value->title }}</h3>
                            <p class="realtimepara">{{ $value->description }}</p>
                            <div class="mt-4">
                                <a href="" class="gradient-btn gradient-btn-about ms-2">{{ $value->button }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>
            @endforeach
        </div>
    </section>
    <!-- Our valued customer -->
@endsection