@extends('layouts.master')
@section('page', 'boutique')
@section('boutiqueactive', 'active')
@section('content')
  
  <!-- breadcrumb section -->
  <div class="breadcrumb-area">
    <div class="container">
      <!-- row -->
      <div class="row ">
        <!-- col -->
        <div class="col-12">
          <!-- breadcrumb -->
          <div class="breadcrumb-content">
            <h2>Boutique</h2>
            <ul>
              <li><a href="{{('/')}}">Accueil</a></li>
              <li><a href="{{('boutique')}}">Boutique</a></li>
            </ul>
          </div>
        </div>
      </div> 
    </div>
  </div>

  <div class="my-5">
    <div class="container">
      <div class="row">
        <!-- filter section -->
        <aside class="col-lg-3 col-md-4 mb-6 mb-md-0">
          <div class="offcanvas offcanvas-start offcanvas-collapse" tabindex="-1" id="offcanvasCategory"
            aria-labelledby="offcanvasCategoryLabel">

            <div class="offcanvas-header d-lg-none">
              <h5 class="offcanvas-title" id="offcanvasCategoryLabel">Filter</h5>
              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body ps-lg-2 pt-lg-0">
              <div class="mb-5">
                <!-- title -->
                <h5 class="mb-3">Categories</h5>
                <!-- nav -->
                <ul class="nav nav-category" id="categoryCollapseMenu">
                  @foreach(category_product() as $categories)
                  <li class="nav-item border-bottom w-100 collapsed">
                    <a
                      href="{{url('categorie_produit/'.$categories->id)}}" class="nav-link">{{$categories->LibelleCategorie}} <i class="feather-icon icon-chevron-right"></i></a>
                    
                  </li>
                  @endforeach
                  
                </ul>
              </div>
              
            </div>
          </div>
        </aside>
        <section class="col-lg-9 col-md-12">
          <div class="card mb-4 bg-light border-0">
            <!-- product title section -->
            <div class=" card-body p-5">
              <h2 class="mb-0 fs-1">Notre boutique</h2>
            </div>
          </div>
          
          <!-- products listing section -->
          <div class="row mt-5">
            @foreach($produit 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: 256px !important; background-color: #ffffff !important">
                  <img style="max-width: 256px; width: 256px; 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; cursor: pointer;" 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
            
          </div>
          <!-- pagination section -->
          <div class="row mt-5">
            <div class="col">
              <!-- nav -->
              <nav>
                {{ $produit->links() }}
              </nav>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>




  

@endsection