@extends('templates/header')
@section('content')
<div class="container-fluid page-header ph2 wow fadeIn" data-wow-delay="0.1s">
    <div class="container">



        <h1 class="display-3 mb-3 animated slideInDown">Services</h1>

        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a class="text-body" href="{{route('accueil')}}">Accueil</a></li>
                <li class="breadcrumb-item text-dark active" aria-current="page" style="font-weight: 700">Services</li>
            </ol>
        </nav>
    </div>
</div>


<!-- About Start -->
<!-- <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="about-img position-relative overflow-hidden p-5 pe-0">
                        <img class="img-fluid w-100" src="img/about.jpg">
                    </div>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                    <h1 class="display-5 mb-4">Best Organic Fruits And Vegetables</h1>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet</p>
                    <p><i class="fa fa-check text-primary me-3"></i>Tempor erat elitr rebum at clita</p>
                    <p><i class="fa fa-check text-primary me-3"></i>Aliqu diam amet diam et eos</p>
                    <p><i class="fa fa-check text-primary me-3"></i>Clita duo justo magna dolore erat amet</p>
                    <a class="btn btn-primary rounded-pill py-3 px-5 mt-3" href="">Read More</a>
                </div>
            </div>
        </div>
    </div> -->
<!-- About End -->


<!-- Feature Start -->
<!-- <div class="container-fluid bg-light bg-icon my-5 py-6">
        <div class="container">
            <div class="section-header text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                <h1 class="display-5 mb-3">Our Features</h1>
                <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="bg-white text-center h-100 p-4 p-xl-5">
                        <img class="img-fluid mb-4" src="img/icon-1.png" alt="">
                        <h4 class="mb-3">Natural Process</h4>
                        <p class="mb-4">Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.</p>
                        <a class="btn btn-outline-primary border-2 py-2 px-4 rounded-pill" href="">Read More</a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="bg-white text-center h-100 p-4 p-xl-5">
                        <img class="img-fluid mb-4" src="img/icon-2.png" alt="">
                        <h4 class="mb-3">Organic Products</h4>
                        <p class="mb-4">Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.</p>
                        <a class="btn btn-outline-primary border-2 py-2 px-4 rounded-pill" href="">Read More</a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="bg-white text-center h-100 p-4 p-xl-5">
                        <img class="img-fluid mb-4" src="img/icon-3.png" alt="">
                        <h4 class="mb-3">Biologically Safe</h4>
                        <p class="mb-4">Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.</p>
                        <a class="btn btn-outline-primary border-2 py-2 px-4 rounded-pill" href="">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
<!-- Feature End -->

<!-- Product Start -->
<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-0 gx-5 align-items-end">
            <div class="col-lg-6">

            </div>
            <div class="col-lg-12 text-start text-lg-end wow slideInRight" data-wow-delay="0.1s">
                <ul class="nav nav-pills d-inline-flex justify-content-center mb-5">
                    <li class="nav-item me-2 m-1">
                        <a class="btn btn-outline-primary border-2 active" data-bs-toggle="pill" href="#tab-1">Services</a>
                    </li>


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

        <style>
            /* Default styles for larger screens */
            .mobile img {
                width:500px;
                height:300px;
                border-radius: 15px;
            }

            /* Media query for screens with a maximum width of 768px (typical for mobile devices) */
            @media (max-width: 768px) {
                .mobile img {
                    /* Adjust the width and height as needed for mobile screens */
                    width: 100%;
                    /* 100% width makes the image fill the container */
                    height: 200px;
                    /* Allows the height to scale proportionally with the width */
                    max-width: 100%;
                    /* Prevents the image from overflowing its container */
                    border-radius: 10px;
                    /* Optionally remove border radius for mobile */
                }
            }

                /* Default styles for larger screens */
          

            /* Media query for screens with a maximum width of 768px (typical for mobile devices) */
            @media (max-width: 768px) {
                .mobile-table  {
                    /* Adjust the width and height as needed for mobile screens */
                    width: 100%;
                    /* 100% width makes the image fill the container */
                    height: auto;
                    /* Allows the height to scale proportionally with the width */
                    max-width: 100%;
                    /* Prevents the image from overflowing its container */
                    border-radius: 0;
                    /* Optionally remove border radius for mobile */
                }
            }
        </style>

        <div class="tab-content col-lg-12">
            <div id="tab-1" class="tab-pane fade show p-0 active">
                <div class="container">
                    <div class="row">
                        <div class="section-header text-start mb-5 wow fadeInUp col-lg-7" data-wow-delay="0.1s">
                            <h1 class="display-5 mb-3">Services</h1>
                            <br><br>
                            Service après-vente <br>

                            <h1 style="display:inline-block">Un SAV à votre</h1>&nbsp;&nbsp;&nbsp;<h1 style="color:rgb(0, 131, 255);display:inline-block"> écoute !</h1>
                            <br>
                            Notre service après-vente est à l'écoute pour traiter vos réclamations, vous conseiller et résoudre rapidement les difficultés que vous pourriez rencontrer. <br> <br>

                            Pour vous garantir des prestations de qualité, nous vous accompagnons étape par étape, dans vos démarches de réparation ou d’échange.
                        </div>

                        <div class="text-start mb-5 wow fadeInUp col-lg-5 " data-wow-delay="0.1s">
                            <br><br><br><br>
                            <div class="mobile">
                                <img src="{{ URL('uploads/savv.png') }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if($isEmpty)
        <div class="Grid_container Containers_content-box mobile-table">
            <div class="Grid_row Containers_row  " style="padding: 10px 0px 0px;">
                <div class="Grid_col-12 Grid_col-sm-12 Grid_col-md-12 Grid_col-lg-12 Grid_align-self-auto Containers_col  ">
                    <div class="Containers_content-box Containers_top Containers_justify-horizontal Containers_vertical-orientation ">
                        <div class="StyleWrapper_wrapper " style="text-align: left;">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col">Marques</th>
                                        <th scope="col">Durée de garantie</th>
                                        <th scope="col" style="width: 180px;">Echange standard</th>
                                        <th scope="col">Réparation</th>
                                        <th scope="col">Point d'accueil S.A.V.</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($posts as $item)

                                    <tr>
                                        <td>{{ $item->marque}}</td>
                                        <td>{{ $item->duree}}</td>
                                        <td>{{ $item->echange}}</td>
                                        <td>{{ $item->reparation}}</td>
                                        <td>{{ $item->point}}</td>
                                    </tr>
                                   
                                 @endforeach
                                
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <style>
            .pagination-container {
                display: flex;
                justify-content: center;
                margin-top: 20px;
                /* You can adjust the margin as needed */
            }
        </style>


    </div>

</div>

<!-- Product End -->


<!-- Firm Visit Start -->
<!-- <div class="container-fluid bg-primary bg-icon mt-5 py-6">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-md-7 wow fadeIn" data-wow-delay="0.1s">
                    <h1 class="display-5 text-white mb-3">Visit Our Firm</h1>
                    <p class="text-white mb-0">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos.</p>
                </div>
                <div class="col-md-5 text-md-end wow fadeIn" data-wow-delay="0.5s">
                    <a class="btn btn-lg btn-secondary rounded-pill py-3 px-5" href="">Visit Now</a>
                </div>
            </div>
        </div>
    </div> -->
<!-- Firm Visit End -->


<!-- Testimonial Start -->
<!-- <div class="container-fluid bg-light bg-icon py-6 mb-5">
        <div class="container">
            <div class="section-header text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                <h1 class="display-5 mb-3">Customer Review</h1>
                <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
            </div>
            <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.1s">
                <div class="testimonial-item position-relative bg-white p-5 mt-4">
                    <i class="fa fa-quote-left fa-3x text-primary position-absolute top-0 start-0 mt-n4 ms-5"></i>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.</p>
                    <div class="d-flex align-items-center">
                        <img class="flex-shrink-0 rounded-circle" src="img/testimonial-1.jpg" alt="">
                        <div class="ms-3">
                            <h5 class="mb-1">Client Name</h5>
                            <span>Profession</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item position-relative bg-white p-5 mt-4">
                    <i class="fa fa-quote-left fa-3x text-primary position-absolute top-0 start-0 mt-n4 ms-5"></i>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.</p>
                    <div class="d-flex align-items-center">
                        <img class="flex-shrink-0 rounded-circle" src="img/testimonial-2.jpg" alt="">
                        <div class="ms-3">
                            <h5 class="mb-1">Client Name</h5>
                            <span>Profession</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item position-relative bg-white p-5 mt-4">
                    <i class="fa fa-quote-left fa-3x text-primary position-absolute top-0 start-0 mt-n4 ms-5"></i>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.</p>
                    <div class="d-flex align-items-center">
                        <img class="flex-shrink-0 rounded-circle" src="img/testimonial-3.jpg" alt="">
                        <div class="ms-3">
                            <h5 class="mb-1">Client Name</h5>
                            <span>Profession</span>
                        </div>
                    </div>
                </div>
                <div class="testimonial-item position-relative bg-white p-5 mt-4">
                    <i class="fa fa-quote-left fa-3x text-primary position-absolute top-0 start-0 mt-n4 ms-5"></i>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit diam amet diam et eos. Clita erat ipsum et lorem et sit.</p>
                    <div class="d-flex align-items-center">
                        <img class="flex-shrink-0 rounded-circle" src="img/testimonial-4.jpg" alt="">
                        <div class="ms-3">
                            <h5 class="mb-1">Client Name</h5>
                            <span>Profession</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
<!-- Testimonial End -->




@endsection