@extends('layouts.master')
@section('page', 'Accueil')
@section('accueilactive', 'active')
@section('content')
  <!-- Body Part - hero section --> 
  <section class="hero" id="home">
    <div class="carouselhero">
      <div class="slider-item set-bg" data-setbg="{{url('template/assets/images/slider/slider1.png')}}">
        <div class="container">
          <div class="row"> 
            <div class="col-12 text-center">
              <h2 class="mt-5 mb-3 theme-text-white display-3 theme-heading animate__animated"
                data-animation-in="animate__backInDown" data-delay-in="0">Profitez de l’énergie solaire et réduisez vos factures d’électricité.</h2>
              <div class="row justify-content-center">
                <div class="col-12 col-md-6">
                  <p class="mb-0 theme-text-white animate__animated" data-animation-in="animate__fadeInLeftBig"
                    data-delay-in="1">Découvrez nos équipements solaires de qualité !</p>
                </div>
              </div>
              <div class="group mt-5 custom-button animate__animated" data-animation-in="animate__bounceInRight"
                data-delay-in="1.5">
                <button class="rounded-pill custom-btn-primary font-small fw-bold button-effect px-5" type="submit">Voir les Produits</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="slider-item set-bg" data-setbg="template/assets/images/slider/slider2.png">
        <div class="container">
          <div class="row">
            <div class="col-12 text-center">
              <<!-- h2 class="mt-5 mb-3 theme-text-primary display-3 theme-heading animate__animated"
                data-animation-in="animate__backInDown" data-delay-in="0">Nous vous accompagnons de l'achat jusqu'à l'installation et la maintenance</h2> -->
              <p class="display-4 mb-3 theme-text-white theme-heading animate__animated"
                data-animation-in="animate__bounceInLeft" data-delay-in="0.5">Nous vous accompagnons de l'achat jusqu'à l'installation et la maintenance
              </p>
              <!-- <div class="row justify-content-center">
                <div class="col-12 col-md-6">
                  <p class="mb-0 theme-text-white animate__animated" data-animation-in="animate__bounceInRight"
                    data-delay-in="1">With our product, partner with a team that has the experience and
                    drive to help you become a market leader.</p>
                </div>
              </div> -->
              <div class="group mt-5 custom-button animate__animated" data-animation-in="animate__bounceInRight"
                data-delay-in="1.5">
                <button class="rounded-pill custom-btn-primary font-small fw-bold button-effect px-5"
                  type="submit">Nos services</button> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Our Product section -->
  <section class="product-sec py-5" id="products">
    <div class="container">
      <div class="row my-5">
        <div class="col-12">
          <h2 class="fs-1 text-center theme-text-secondary mb-3">Nos services</h2>
        </div>
      </div>
      <div class="row">
        @foreach(recupservice() as $key => $sevices)

        <div class="col-12 col-md-4 mb-3 mb-md-0" style="padding-top: 20px;">
          <a href="{{url('service/'.$sevices->id)}}" class="box set-bg" data-setbg="{{asset($sevices->picture)}}">
            <div class="content">
              <p class="theme-heading theme-text-white mb-0 theme-text-shadow text-center">{{$sevices->title}}</p>
            </div>
            <div class="content-hover">
              <h2 class="theme-text-white text-center">{{$sevices->title}}</h2>
              <!-- <p>Lorem ipsum dolor sit</p> -->
            </div>
          </a>
        </div>
        @endforeach
        
      </div>
    </div>
  </section>

  <section class="py-5" id="products">
    <div class="container">
      <div class="row my-5">
        <div class="col-12">
          <h2 class="fs-1 text-center theme-text-secondary mb-3">Nos produits</h2>
        </div>
      </div>
      <div class="row">
        @foreach(product() as $products)
        <div class="col-12 col-md-4 mb-3 mb-md-0" style="padding-top: 25px;">
          <div class="border border-1">
            <div class="box h-auto"  style="height: 456px !important; background-color: #ffffff !important">
              <img style="max-width: 456px; width: 456px; overflow: hidden !important;" src="{{asset($products->photo)}}" class="img-fluid" alt="solar product" onclick="window.location.href='{{url('detail_produit/'.$products->idproduit)}}'">
              <!-- <div class="content">
                <div class="deal-badge">
                  <span class="badge bg-danger">Sale</span>
                </div>
              </div> -->
              <div class="content-hover flex-row">
                <a href="#" class="quick-btn" data-bs-toggle="modal" data-bs-target="#quickViewModal{{$products->idproduit}}"><i
                    class="bi bi-eye" data-bs-toggle="tooltip" data-bs-placement="top" title="aperçu"></i></a>
                <!-- <a href="shop-wishlist.html" class="quick-btn mx-2" data-bs-toggle="tooltip" data-bs-placement="top"
                  title="Whishlist"><i class="bi bi-heart mx-3"></i></a> -->
                <a href="javascript:void(0)" onclick="addtocart{{$products->idproduit}}()" class="quick-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="ajout panier"><i
                    class="bi bi-cart-fill fs-4"></i></a>
              </div>
            </div>
            <div class="position-relative p-3 mb-0 theme-border-radius-bottom card-effect theme-bg-white">
              <div class="card-box"></div>
              <span class="mb-0 pb-2 theme-text-secondary d-inline-flex fs-6 fw-bold" style="height: 70px; overflow: hidden !important;" onclick="window.location.href='{{url('detail_produit/'.$products->idproduit)}}'">{{$products->title}}</span>
              <span class="d-flex pb-2 font-small theme-text-accent-one">
                <span>
                  <i class="bi bi-postage me-1"></i>
                  <span class="d-inline-flex">{{$products->LibelleCategorie}}</span>
                </span>
              </span>
              <span class="text-warning">
                <small>
                  <i class="bi bi-star-fill"></i>
                  <i class="bi bi-star-fill"></i>
                  <i class="bi bi-star-fill"></i>
                  <i class="bi bi-star-fill"></i>
                  <i class="bi bi-star-fill"></i>
                </small>
                
              </span>
              <div class="d-flex justify-content-between align-items-center mt-2">
                <div>
                  <span class="theme-text-secondary">{{number_format($products->price, 2) }} XOF</span>
                </div>
                <div class="custom-button"><a href="javascript:void(0)"
                    class="rounded-pill custom-btn-secondary font-small button-effect d-flex justify-content-center align-items-center add-btn" onclick="addtocart{{$products->idproduit}}()">+
                    Ajouter au panier</a></div>
              </div>
            </div>
          </div>
        </div>

        <script type="text/javascript">
            function addtocart{{$products->idproduit}}() {
                

                var id = {{$products->idproduit}};
                var nombre = 1;
                
                        var csrfToken = $('meta[name="csrf-token"]').attr('content');
                        var payant = "payant";
                        
                        $.ajax({
                        type: 'POST',
                        enctype: 'multipart/form-data',
                        url: '{{url('addToCart')}}',
                        data: {
                        'id': id,
                        'nombre':nombre,
                        "_token":csrfToken
                            },

                        success:function(result) {
                            console.log(result);
                        if(result.number == '1'){
                            console.log(result);


                        Swal.fire({
                          icon: 'success',
                          title: '{{$products->title}} bien ajouté au panier',
                          showConfirmButton: false,
                          timer: 1500
                        });

                        
                          $(".cart").html(result.data);
                                                                
                                                    
                                                                
                                                                
                        }
                    }
                });
                    
            };


            
        </script>

        <div class="modal fade" id="quickViewModal{{$products->idproduit}}" tabindex="-1" aria-labelledby="quickViewModalLabel{{$products->idproduit}}" aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-body p-5">
                <div class="position-absolute top-0 end-0 me-3 mt-3" id="quickViewModalLabel">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="row">
                  <div class="col-lg-6">
                    <!-- product gallery -->
                    <div class="product-gallery">
                      <div class="slider slider-for">
                        <div class="zoom" onmousemove="zoom(event)"
                          style="background-image: url({{asset($products->photo)}})">
                          <img src="{{asset($products->photo)}}" alt="solar">
                        </div>
                        <div class="zoom" onmousemove="zoom(event)"
                          style="background-image: url({{asset($products->photo)}})">
                          <img src="{{asset($products->photo)}}" alt="solar">
                        </div>
                        
                      </div>
                      <div class="slider slider-nav gallery-thumb">
                        <div>
                          <img src="{{asset($products->photo)}}" alt="solar">
                        </div>
                        
                      </div>
                      <!-- products thumb -->
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="ps-lg-8 mt-6 mt-lg-0">
                      <a href="#!" class="mb-3 d-block">{{$products->LibelleCategorie}}</a>
                      <h2 class="mb-1 h1">{{$products->title}}</h2>
                      <div class="mb-4">
                        <small class="text-warning">
                          <i class="bi bi-star-fill"></i>
                          <i class="bi bi-star-fill"></i>
                          <i class="bi bi-star-fill"></i>
                          <i class="bi bi-star-fill"></i>
                          <i class="bi bi-star-half"></i></small>
                        
                      </div>
                      <div class="fs-4">
                        <span class="fw-bold theme-text-secondary">{{number_format($products->price, 2) }} XOF</span>
                        
                      </div>
                      <hr class="my-6">
                      
                      <div>
                        <!-- input -->
                        <!-- input -->
                        
                      </div>
                      <div class="mt-3 row justify-content-start g-2 align-items-center">

                        <div class="col-lg-4 col-md-5 col-6 custom-button">
                          <!-- button -->
                          <!-- btn -->
                          <button onclick="addtocart{{$products->idproduit}}()" type="button"
                            class="rounded-pill custom-btn-primary font-small button-effect justify-content-center align-items-center d-flex">
                            <i class="feather-icon icon-shopping-bag me-2"></i>Ajout au pannier
                          </button>
                        </div>
                        
                      </div>
                      <hr class="my-6">
                      <div>
                        <table class="table table-borderless">
                          <tbody>
                            {!! Str::limit($products->body, '500', '...')  !!}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


        @endforeach

        {{ product()->links() }}
        
      </div>
    </div>
  </section>


  
  <section class="about-company py-5 mt-0 mt-lg-5" id="about">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6">
          <div class="about-pic">
            <figure class="mb-0">
              <img src="{{url('template/assets/images/section/cotation.png')}}" class="img-fluid" alt="about company">
            </figure>
            <div class="experience-box">
              <p class="mb-2 text-center fs-2 fw-bold">10+</p>
              <p class="mb-2 text-center">Années d'expériences</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="py-0 px-0 py-xl-5 px-xl-5 mt-5 mt-lg-0">
            <!-- <p class="mb-4 font-small para-highlight">Our Story</p> -->
            <h4 class="fs-1 mb-4 theme-text-secondary">Demander un devis</h4>
            <p class="mb-4 mt-4 theme-text-accent-one font-small lh-lg">Vous voulez un service particulier ? Contactez nous</p>
            <!-- <ul class="about-list">
              <li><i class="bi bi-gear-wide"></i>Suspe ndisse sagittis leo.</li>
              <li><i class="bi bi-gear-wide"></i>Lorem Ipsum generators on the tend.</li>
              <li><i class="bi bi-gear-wide"></i>Morbi suscipit scelerisque sapieneget</li>
            </ul> -->
            <div class="group mt-5 custom-button">
              <button onclick="window.location.href='{{url('contact')}}'" class="rounded-pill custom-btn-primary font-small fw-bold button-effect" type="button">Demander un devis</button>
              <div class="d-inline-flex align-items-center justify-content-center ms-2 ms-sm-4 ms-xl-4 mt-4 mt-xl-0">
                <a href="tel:22893799644" class="call theme-bg-primary icon-wrapper"><i
                    class="bi bi-telephone-fill theme-text-white"></i></a>
                <span class="ms-3 font-small">
                  Avez vous des questions ?<br>
                  <strong>(+228)93799644</strong>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="news py-5" id="news">
    <div class="container">
      <div class="row my-5">
        <div class="col-12 text-center">
          <h2 class="fs-1 theme-text-secondary mb-3">Actualité & conseils</h2>
          
        </div>
      </div>
      <div class="row mt-5">
        @foreach(post2() as $posts)
        

        
        <div class="col-12 col-lg-4 mb-4 mb-lg-0" style="cursor: pointer;" onclick="window.location.href='{{url('detail_post/'.$posts->idpost)}}'">
          <div class="news-card">
            <div class="overflow-hidden position-relative">
              <figure class="mb-0 img-effect">
                <img src="{{asset($posts->photo)}}" class="img-fluid" alt="news articles">
              </figure>
              <div class="tags position-absolute">
                <div class="flood-effect">
                  <a href="javascript:void(0)" class="font-small">{{$day }} {{ $months[$month-1]}} {{$year}}</a>
                </div>
              </div>
            </div>
            <div class="theme-box-shadow p-4">
              <div style="height: 40px !important; overflow: hidden;">
                <h2 class="fs-6 mb-4">{{$posts->title}}</h2>
              </div>
              <div style="height: 150px !important; overflow: hidden; text-align: justify;" >
                <p class="theme-text-accent-one font-small mb-4">{!! Str::limit($posts->body, 200, '...') !!}</p>
              </div>
              
              
              <div class="custom-button">
                <a href="{{url('detail_post/'.$posts->idpost)}}"
                  class="rounded-pill custom-btn-secondary font-small fw-bold button-effect">Lire la suite</a>
              </div>
            </div>
          </div>
        </div> 

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

@endsection