@extends('frontend.layouts.navBar')

@section('content')

<link rel="stylesheet" href="{{asset('frontend/css/editor.css')}}">



    <div class="page">

        <!-- @foreach($presentations as $presentation)

<video width="320" height="240" controls>
<source src="{{ asset('storage/'.$presentation->videos)}}" type="video/mp4">

</video>

@endforeach -->

        <section class="section swiper-container swiper-slider swiper-slider-6 swiper-nav-1" data-loop="true">
            <div class="swiper-wrapper text-sm-left">
                @foreach($slides as $slide)
                <div class="swiper-slide" data-slide-bg="{{ asset('storage/image/'.$slide->image)}}">




                    <div class="swiper-slide-caption section-md">
                        <div class="container">
                            <div class="swiper-box">
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach



            </div>
            <!-- Swiper Pagination-->
            <div class="swiper-pagination"></div>
            <!-- Swiper Navigation-->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </section>
        <section class="section bg-default mt-4">
            <!-- Owl Carousel-->
            <div class="owl-carousel owl-style-13" data-items="1" data-sm-items="2" data-lg-items="3" data-xxl-items="4" data-dots="true" data-mouse-drag="false">
                <!-- Product simple-->
                @foreach($categories as $categorie)

                <a class="product-simple " href="{{route('produits.index', ['categorieId'=>$categorie])}}">
                    <div class="unit unit-spacing-0 align-items-center">

                        <div class="product-simple-figure"><img src="{{ asset('storage/image/'.$categorie->image)}}" alt="" width="380" height="212" />
                        </div>
                        <div class="unit-body">
                            <div class="product-content-wrap">
                                <div class="product-simple-title">
                                    <div class="heading-3 product-simple-title-big">{{$categorie->nom}}</div>

                                </div>
                            </div>
                         {{-- <span class="mdi mdi-arrow-right"></span> --}}
                        </div>

                    </div>
                </a>
                @endforeach


            </div>
        </section>
        <!-- Featured Events-->

        <!-- New products-->
        <section class="section section-xxl bg-default">
            <div class="container">
                <h2 class="title-style-3 wow fadeScale center mb-4">Produit</h2>
                <div class="row row-30 justify-content-center align-items-center">
                    <div class="col-md-9 col-lg-6">
                        <div class="owl-nav-1 owl-nav-2">
                            <div class="owl-style-14">
                                <!-- Owl Carousel-->
                                <div class="owl-carousel" data-items="1" data-autoplay="true" data-mouse-drag="true" data-navigation-class=".owl-nav-1">
                                    <!-- Product Terri-->
                                    @foreach($promotions as $promotion)

                                    <article class="product-terri">
                                        @if($promotion->produit_id !=null)
											@php
											$produit =  App\Models\Produit::where('id',$promotion->produit_id)->first();
											@endphp
                                      
                                        <h3 class="transform-none product-terri-title"><a href="single-product.html">Pack</a></h3>

                                        <div class="product-terri-figure"><img src="{{ asset('storage/image/'.$produit->image)}}" alt="" width="344" height="250" />
                                          </div>  <a class="button button-sm button-primary button-zakaria" href="{{route('promo.show', ['id'=> $promotion])}}">Voir</a>


                                            @else
                                        <h3 class="transform-none product-terri-title"><a href="single-product.html">Pack</a></h3>

                                        <div class="product-terri-figure"><img src="{{ asset('storage/image/'.$promotion->photo)}}" alt="" width="344" height="250" />
                                          </div>  <a class="button button-sm button-primary button-zakaria" href="{{route('promo.show', ['id'=> $promotion])}}">Voir</a>




                                        @endif


                                    </article>
                                   @endforeach
                                </div>
                                <div class="countdown-mini-wrap" data-countdown="data-countdown" data-from="2021-01-31" data-to="2022-01-31">
                                    <div class="countdown-circle countdown-hours" data-circle-countdown="data-circle-countdown" data-units="Hours">
                                        <div class="countdown-number">

                                            <div class="countdown-overlay">
                                                <h4 class="countdown-counter countdown-mini-counter"></h4>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="countdown-circle countdown-minutes" data-circle-countdown="data-circle-countdown" data-units="Minutes">
                                        <div class="countdown-number">

                                            <div class="countdown-overlay">
                                                <h4 class="countdown-counter countdown-mini-counter"></h4>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="countdown-circle countdown-seconds" data-circle-countdown="data-circle-countdown" data-units="Seconds">
                                        <div class="countdown-number">

                                            <div class="countdown-overlay">
                                                <h4 class="countdown-counter countdown-mini-counter"></h4>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-10 col-lg-6">
                        <div class="row row-30 row-md-40">
                            @foreach($produits as $produit)
                            <div class="col-sm-6 wow fadeInDown">
                                <!-- Product-->
                                <article class="product product-3">
                                    <div class="product-body">
                                        <div class="product-figure"><img src="{{ asset('storage/image/'.$produit->image)}}" alt="" width="220" height="160" />
                                        </div>
                                        <h5 class="transform-none product-title"><a href="{{route('produit.show', ['id'=> $produit])}}">{{$produit->nom}}</a></h5>

                                    </div>
                                    <div class="product-button-wrap">
                                        <div class="product-button center"><i class="fa-solid fa-eyes"></i></div>

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


                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- About Us-->
        <section class="section section-xxl context-dark text-md-left" style="padding: 0">



                
                    @foreach($presentations as $presentation)
					  <div class="row row-30 home-about">
                    <div class="col-lg-6">
                        <h3 class="text-spacing-100 wow fadeInLeft"><span class="font-weight-light">Qui sommes NOUS</span>
                        </h3>

                        <p class="wow fadeInLeft ck-content" data-wow-delay=".1s">


                            {!!  $presentation->texte!!}</p>
							<div style="z-index: 999999; position: absolute;">
                            <a class=" btn mt-4" href="{{route('tifawt.index')}}" style="    background: red; color: white;border-radius: 5px"><i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                    </div>
                        
                    
                    <div class="col-lg-6">
                        @if ($presentation->videos != null)
                        <video  height="300" style="width:80%" controls>
                        <source src="{{ asset('storage/'.$presentation->videos)}}" type="video/mp4">

                        </video>
                        @else
                        <img src="{{ asset('storage/image/'.$presentation->image) }}" alt="description of myimage">

                    @endif

                    </div>
					</div>
                    @endforeach
                    <ul class="circles">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                </ul>
               





        </section>
        <!-- Testimonials-->

        <!-- Section Clients-->
        <section class="section section-lg ">
         <div class="">


            <div class="row">
                <div class="col-lg-3 valeur mt-4">
                    <img class="brand-logo-dark" src="{{asset('frontend/images/garantie.png')}}" alt="" style="max-width: 41% !important;"/>
                    <h6 class="mt-4">Qualité et Garantie</h6>
                </div>
                <div class="col-lg-3 valeur mt-4">
                    <img class="brand-logo-dark" src="{{asset('frontend/images/guider.png')}}" alt="" style="max-width: 41%;"/>
                    <h6 class="mt-4">Accompagnement</h6>

                </div><div class="col-lg-3 valeur mt-4">
                    <img class="brand-logo-dark" src="{{asset('frontend/images/livraison.png')}}" alt="" style="max-width: 41%;margin-top: 6px;"/>
                    <h6 class="mt-4" style="padding-top: 40px;">Livraison Disponible</h6>

                </div>
                <div class="col-lg-3 valeur mt-4">

                    <img class="brand-logo-dark" src="{{asset('frontend/images/sav.png')}}" alt="" style="max-width: 41%; margin-top: 6px;"/>
                    <h6 class="mt-4" style="padding-top: 39px;">Service aprés vente</h6>

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

        </section>
        <!-- Page Footer-->

    </div>
    <div class="snackbars" id="form-output-global"></div>

 <div class="popup" id="popup">
        <p>Nous utilisons des cookies pour améliorer votre expérience sur notre site. <a href="https://www.facebook.com/legal/terms/businesstools" >Lire les termes</p>
		
    </div>
    
<style>
.owl-nav-1.owl-nav-2.disabled:before{
	content:url(frontend/images/promo.png) ;
    position: absolute;
    left: 27px;
    z-index: 2;
    top: -30px;

   }
   .valeur h6{
    font-size: 19px;
    font-weight: 800;
    color: #d52424;
   }
   
   
   @media only screen and (max-width: 600px) {
    .owl-nav-1.owl-nav-2.disabled:before{

    left: -28px;
    z-index: 2;
    top: -64px;
    transform: scale(.5);
}

   }


</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var popup = document.getElementById("popup");
    var refuserLink = document.getElementById("refuser");

    // Afficher le pop-up
    popup.style.display = "block";

    // Gérer le clic sur le lien "Refuser la collecte de données"
    refuserLink.addEventListener("click", function() {
        // Désactiver le cookie "pixel_facebook"
        document.cookie = "pixel_facebook=false; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

        // Masquer le pop-up après que l'utilisateur a cliqué sur "Refuser"
        popup.style.display = "none";
    });
});
</script>

@endsection
