@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="{{('shop')}}">Boutique</a></li>
              <li>{{$produit->title}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- quick view modal -->
  <div class="modal fade" id="quickViewModal{{$produit->idproduit}}" tabindex="-1" aria-labelledby="quickViewModalLabel{{$produit->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($produit->photo)}})">
                    <img src="{{asset($produit->photo)}}" alt="solar">
                  </div>
                  <div class="zoom" onmousemove="zoom(event)"
                    style="background-image: url({{asset($produit->photo)}})">
                    <img src="{{asset($produit->photo)}}" alt="solar">
                  </div>
                  
                </div>
                <div class="slider slider-nav gallery-thumb">
                  <div>
                    <img src="{{asset($produit->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">{{$produit->LibelleCategorie}}</a>
                <h2 class="mb-1 h1">{{$produit->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($produit->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 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($produit->body, '500', '...')  !!}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- shop section -->
  <div class="my-5">
    <div class="container">
      <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($produit->photo)}})">
                <img src="{{asset($produit->photo)}}" alt="solar">
              </div>
              
            </div>
            <div class="slider slider-nav gallery-thumb">
              <div>
                <img src="{{asset($produit->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">{{$produit->LibelleCategorie}}</a>
            <h2 class="mb-1 h1">{{$produit->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($produit->price, 2) }} XOF</span>
              
            </div>
            
            <div>
              <!-- input -->
              <!-- input -->
              <!-- <div class="input-group input-spinner">
                <span class="button-minus btn btn-sm">-</span>
                <input type="text" value="1" class="quantity-field form-control-sm form-input">
                <span class="button-plus btn btn-sm">+</span>
              </div> -->
            </div>
            <div class="mt-3 row justify-content-start g-2 align-items-center">

              <div class="col-lg-4 col-md-5 col-6  ">
                <!-- button -->
                <!-- btn -->
                <div class="custom-button">
                  <button onclick="addtocart{{$produit->idproduit}}()" type="button"
                    class="rounded-pill custom-btn-primary font-small button-effect justify-content-center align-items-center d-flex w-100">
                    <i class="bi icon-shopping-bag me-2"></i>Ajouter au panier
                  </button>
                </div>
              </div>
              
            </div>
            <hr class="my-6">
            <div>
              <table class="table table-borderless small">
                <tbody>
                  {!! $produit->body !!}
                </tbody>
              </table>
            </div>
            <div class="mt-8">
              <!-- dropdown -->
              <!-- <div class="dropdown">
                <a class="btn btn-outline-secondary rounded-pill dropdown-toggle" href="#" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false">
                  Share
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#"><i class="bi bi-facebook me-2"></i>Facebook</a></li>
                  <li><a class="dropdown-item" href="#"><i class="bi bi-twitter-x me-2"></i>Twitter</a></li>
                  <li><a class="dropdown-item" href="#"><i class="bi bi-instagram me-2"></i>Instagram</a></li>
                </ul>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- product details section -->
  
  <script type="text/javascript">
      function addtocart{{$produit->idproduit}}() {
          

          var id = {{$produit->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: '{{$produit->title}} bien ajouté au panier',
                    showConfirmButton: false,
                    timer: 1500
                  });

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


      
  </script>
  <!-- related product section -->
  <div class="my-lg-5 my-5">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <!-- heading -->
          <h3>Produits similaires</h3>
        </div>
      </div>
      <div class="row g-4 row-cols-lg-5 row-cols-1 row-cols-md-2 mt-2">
        <!-- col -->
        @foreach($similaire as $similaires)
        <div class="col">
          <div class="border border-1">
            <div class="box h-auto">
              <img src="{{asset($similaires->photo)}}" class="img-fluid" alt="solar product">
              
              <div class="content-hover flex-row">
                <a href="#" class="quick-btn" data-bs-toggle="modal" data-bs-target="#quickViewModal{{$similaires->idproduit}}"><i
                    class="bi bi-eye" data-bs-toggle="tooltip" data-bs-placement="top" title="Quick View"></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">{{$similaires->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">{{$similaires->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($similaires->price, 2) }} XOF</span>
                </div>
                <div class="custom-button"><a href="#"
                    class="rounded-pill custom-btn-secondary font-small button-effect d-flex justify-content-center align-items-center add-btn" onclick="addtocart{{$similaires->idproduit}}()">+
                    Ajouter au panier</a></div>
              </div>
            </div>
          </div>
          <!-- repetable -->
        </div>
        @endforeach
        
      </div>
    </div>
  </div>
  

@endsection