@extends('front.layout')

@section('content')
    <script>
        $(document).ready(function () {

            $('body .error-size-box').hide();
        });
    </script>
    @php $tab=[] @endphp
    @foreach($produit->stocks as $stock)
        @if($stock->stock>0)
            @foreach($stock->declinaisons as $declinaison)
                @php  $att=  $declinaison->attributoption->attribut->id @endphp
                @php $valeur=$declinaison->valeur; @endphp
                @if($att==1)
                    @php $valeur= $declinaison->attributoption->couleur @endphp
                @endif
                @php $tab[$att][$declinaison->attribut_option_id]=$valeur; @endphp

            @endforeach
        @endif
    @endforeach
<!-- breadcrumb start -->
<div class="breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="page-title">
                    <h2>produit</h2>
                </div>
            </div>
            <div class="col-sm-6">
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Accueil</a></li>
                        <li class="breadcrumb-item active" aria-current="page">product</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- breadcrumb End -->


<!-- section start -->
<section class="view">
    <div class="collection-wrapper">
        <div class="container">
            <div class="row detailproduits">
                <div class="col-lg-1 col-sm-2 col-xs-12">
                    <div class="row">
                        <div class="col-12 p-0 blocr">
                            <div class="slider-right-nav">

                                @foreach($produit->images as $image)
                                    <div><img src="{{asset('images/produits/'.$image->image_name)}}"  alt=""
                                              class="img-fluid blur-up lazyload"></div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-sm-10 col-xs-12 order-up blocr2">
                    <div class="product-right-slick">
                        @foreach($produit->images as $image)
                        <div><img src="{{asset('images/produits/'.$image->image_name)}}"  alt=""
                                  class="img-fluid blur-up lazyload image_zoom_cls-{{$image->id}}"></div>
                        @endforeach

                    </div>
                </div>
                <div class="col-lg-6 rtl-text">
                    <div class="product-right product-detail">

                        <h2>{{$produit->translate($locale)->name}}</h2>

                        <div class="label-section">
                            <span class="badge badge-grey-color">#1 Best seller</span>
                            <span class="label-text">in fashion</span>
                        </div>
                        <h3 class="price-detail">{{$produit->prixttc}}<sup>{{$devise}}</sup></h3>

                        @if(!empty($produit->translate($locale)->description))
                            <div class="border-product">
                                <h6 class="product-title">Détail produit</h6>
                                {!! $produit->translate($locale)->description !!}
                            </div>
                        @endif

                        <ul class="color-variant border-prod color-variants-{{$produit->id}}">
                            @php $c=0 @endphp
                            @foreach($tab[1] as $ind=>$couleur)
                                @php $c++ @endphp
                                <li data-page="detailproduits"  data-id="{{$produit->id}}" data-rel="{{$ind}}" class="@if($c==1) {{'active'}} @endif"  ><div style="background-color:{{$couleur}};    height: 100%;border-radius: 100%; "></div></li>
                            @endforeach
                        </ul>
                        @php $tab_taille=[] @endphp
                        @if(isset($tab[2]))
                            @php $tab_taille=$tab[2] @endphp
                        @endif
                        @if(isset($tab[3]))
                            @php $tab_taille=$tab[3] @endphp
                        @endif

                        <div id="selectSize" class="addeffect-section product-description ">
                            <h6 class="product-title size-text">select size </h6>


                            @if(count($tab_taille)>0)
                                <div class="size-box">
                                    <ul class="ul_taille_{{$produit->id}}">
                                        @foreach($tab_taille as $ind=>$taille)
                                            <li data-rel="{{$ind}}"><a>{{$taille}}</a></li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="error-size-box">Choisir taille</div>
                            @endif
                            <h6 class="product-title">Quantité</h6>
                            <div class="qty-box">
                                <div class="input-group"><span class="input-group-prepend"><button type="button"
                                                                                                   class="btn quantity-left-minus" data-type="minus" data-field=""><i
                                                    class="ti-minus"></i></button> </span>
                                    <input id="qty{{$produit->id}}" type="text" name="quantity" class="form-control input-number" value="1">
                                    <span class="input-group-prepend"><button type="button"
                                                                              class="btn quantity-right-plus" data-type="plus" data-field=""><i
                                                    class="ti-plus"></i></button></span>
                                </div>
                            </div>
                        </div>
                        <div class="product-buttons"><a data-rel="{{$produit->type}}"  data-id="{{$produit->id}}" data-page="detailproduits" href="javascript:void(0)" class="addtocart btn btn-solid hover-solid btn-animation"><i class="fa fa-shopping-cart me-1"
                                                                                                           aria-hidden="true"></i> add to cart</a>  </div>



                        <div class="border-product">
                            <h6 class="product-title">share it</h6>
                            <div class="product-icon">
                                <ul class="product-social">
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-rss"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Section ends -->




<!-- product section start -->
    @if(count($categories)>0)
<section class="section-b-space ratio_asos">
    <div class="container">
        <div class="row">
            <div class="col-12 product-related">
                <h2>Produits Similaires</h2>
            </div>
        </div>
        <div class="row search-product">
            @foreach($categoriesProduits as $category)
                @php $img_survol='' @endphp
                @foreach($category->Produit->images as $image)
                    @if($image->defaut==1)
                        @php $img=$image->image_name @endphp
                    @endif
                    @if($image->survol==1)
                        @php $img_survol=$image->image_name @endphp
                    @endif
                @endforeach

                @php $tab=[] @endphp
                @php $price=$category->Produit->prixttc;
                  $repture =1;
                @endphp
                @if($category->Produit->stock>0 && $category->Produit->type==1)
                    @php $repture =0 @endphp
                @endif
                @if($category->Produit->type==2)
                @foreach($category->Produit->stocks as $stock)
                        @if($stock->stock>0)
                            @php $repture =0 @endphp
                        @endif
                        @if(count($stock->declinaisons)==1)
                            @php $price=$stock->prixttc @endphp
                        @endif
                        @foreach($stock->declinaisons as $declinaison)
                            @php  $att=  $declinaison->attributoption->attribut->id @endphp
                            @php $valeur=$declinaison->valeur; @endphp
                            @if($att==1)
                                @php $valeur= $declinaison->attributoption->couleur @endphp
                            @endif
                            @php $tab[$att][$declinaison->attribut_option_id]=$valeur; @endphp

                        @endforeach

                @endforeach
                @endif
                @php $tab_taille=[] @endphp
                @if(isset($tab[2]))
                    @php $tab_taille=$tab[2] @endphp
                @endif
                @if(isset($tab[3]))
                    @php $tab_taille=$tab[3] @endphp
                @endif
            <div class="col-xl-3 col-md-4 col-6">
                <div class="product-box div-box detail-{{$category->Produit->id}}">
                    <div class="img-wrapper">
                        <div class="front">
                            <a href="#"><img src="{{asset('images/produits/'.$img)}}"
                                             class="img-fluid blur-up lazyload bg-img" alt=""></a>
                        </div>
                        @if(!empty($img_survol))
                        <div class="back">
                            <a href="#"><img src="{{asset('images/produits/'.$img_survol)}}"
                                             class="img-fluid blur-up lazyload bg-img" alt=""></a>
                        </div>
                        @endif


                            <div id="fastBuySelectors" class="m-quick-add-wrapper">



                                <div class="c-quick-add c-quick-add--button c-button--add-shopping-cart--tile btn-add-tocart is-error right"   >
                                    <div class="row">
                                        @php $cls="col-md-12"  @endphp
                                        @if(count($tab_taille)>0)
                                            @php $cls="col-md-4 ps-0"  @endphp
                                        <div class="col-md-8 pe-0">



                                            <select data-page="div-box" data-rel="{{$category->Produit->id}}"class="w-100 select_taille_{{$category->Produit->id}}"  required  >
                                                <option>Choisir taille</option>
                                                @foreach($tab_taille as $ind=>$taille)
                                                    <option value="{{$ind}}">{{$taille}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @endif
                                        @if($repture==1)
                                            <div class="{{$cls}}"> <button  data-toggle="tooltip" data-placement="top" title="Stock épuisé"  data-rel="{{$category->Produit->type}}"  data-id="{{$category->Produit->id}}" class="ti-shopping-cart-disable"> </button>  </div>

                                        @else
                                            <div class="{{$cls}}"> <button   data-rel="{{$category->Produit->type}}"  data-id="{{$category->Produit->id}}" class="ti-shopping-cart"> </button>  </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                        <div class="cart-info cart-wrap">

                            <a href="javascript:void(0)" title="Add to Wishlist">
                                <i class="ti-heart" aria-hidden="true"></i>
                            </a>
                            <a data-id="{{$category->Produit->id}}" href="#" data-bs-toggle="modal" data-bs-target="#quick-view" title="Quick View" class="open-quick-view-modal" >
                                <i class="ti-search" aria-hidden="true"></i>
                            </a>

                        </div>
                    </div>
                    <div class="product-detail">

                        <a href="{{route('produits.show',$category->Produit->id)}}">

                            <h6>{{$category->Produit->translate($locale)->name}}</h6>
                        </a>
                        <h4><span class="pricettc">{{$price}}</span>  <sup>{{$devise}}</sup></h4>
                        @if(isset($tab[1])>0)
                        <ul class="color-variant color-variants-{{$category->Produit->id}}">
                            @php $c=0 @endphp
                            @foreach($tab[1] as $ind=>$couleur)
                                @php $c++ @endphp
                                <li data-page="div-box"   data-id="{{$category->Produit->id}}" data-rel="{{$ind}}" class="@if($c==1) {{'active'}} @endif"  ><div style="background-color:{{$couleur}};    height: 100%;border-radius: 100%; "></div></li>
                            @endforeach

                        </ul>
                            @endif
                    </div>
                </div>
            </div>

                          @endforeach

        </div>
    </div>
</section>
@endif
<!-- product section end -->

@endsection