@extends('layouts.layout')
@section('title', 'Carte')

@section('banner')
     <!-- banner -->
     <section>
        <div class="header-img banner-size">
  
        </div>
        @include('partials.telecharger')
      </section>

@endsection

@section('main')
   <!-- Main -->
   <section>
    <div class="container text-center my-5">
        <div class="row">
          <div class="col-md-12">
            <h2 class="titre text-uppercase">NOTRE CARTE </h2>
            <h3 class="sous-titre text-uppercase">{{$category_selected}}</h3>
          </div>
          <div class="col-md-4 col-lg-4 col-xl-3">
            <button class="btn  d-block d-md-none mb-5 filter" onclick="document.getElementById('accordionExample').classList.toggle('show')"> Filter </button>
            <div class="accordion" id="accordionExample">
                <button class="close d-block d-md-none" onclick="document.getElementById('accordionExample').classList.remove('show')"> X </button>
              @foreach ($menus as $item)
                <div class="accordion-item">
                  <h2 class="accordion-header" id="has{{$item->id}}">
                      
                    <button class="accordion-button titre @if ($item->slug != $Pcategory_selected) collapsed @endif " style="color: {{$item->color}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$item->slug}}" @if ($item->slug == $Pcategory_selected) aria-expanded="true" @else aria-expanded="false"    @endif  aria-controls="collapse{{$item->slug}}">
                      {{$item->titre}}
                    </button>
                  </h2>
                  
                  <div id="collapse{{$item->slug}}" class="accordion-collapse collapse @if($item->slug == $Pcategory_selected)    show @endif " aria-labelledby="has{{$item->slug}}" data-bs-parent="#accordionExample">
                    <div class="accordion-body list p-0" >
                      <ul class="m-0 ps-3">
                        @foreach ($item->categories as $category)
                            <li><a href="{{route('cart.produit',[$item->slug,$category->slug])}}">{{$category->titre}}</a></li>
                        @endforeach

                      </ul> 
                    </div>
                  </div>
                </div>
              @endforeach
 
            
            </div>

          </div>
          <div class="col-md-8 col-lg-8 col-xl-9">
            <div class="container">
                <div class="row">
                  <div class="col-md-12">
                    <div class="container cart-produits">
                      <div class="row g-4">
                        @foreach ($produits as $produit)
                        <!-- card -->
                        <div class="col-md-6 col-lg-4 col-xl-3">
                          <div class="card position-relative" >
                            @if (!empty($produit->nutriscore) && $produit->nutriscore == 'NEW' )
                               
                            <div class="new-flag position-absolute"><span>Nouveau</span></div>

                            @endif


                            @if (empty($produit->image) || $produit->image == null)
                            <!--<div class="mt-3">-->
                              <img src="{{asset('images/logo/top-logo.png')}}" class="produit-img" alt="...">
                            <!--</div>-->
                            @else
                            <!--<div class="mt-3">-->
                                <img src="{{Storage::url($produit->image)}}" class="produit-img popup" alt="...">
                            <!--</div>-->

                            @endif
                            <div class="card-body ">
                              <h5 class="card-title">{{$produit->produit}}</h5>
                              @if (!empty($produit->composition))
                              <p class="card-text">
                                {{$produit->composition}}
                              </p>
                              @endif
                              <!-- <h6 class="card-title-category">Jambon halal</h6> -->
                              
                                
                            </div>
                            <div class="container card-price @if (!empty($produit->prix_menu) || $produit->prix_menu != null) background @endif text-start py-2  px-2">
                              <div class="row justify-content-center">
                                @if (empty($produit->prix_menu) || $produit->prix_menu == null)
                                <div class="col-md-12 text-center"><span >{{$produit->prix_individuel}}</span></div>
                                @else
                                <div class="col-6 col-md-6 col-sm-6 solo-mobile text-center"><span class="solo-price">{{$produit->prix_individuel}}</span></div>
                                <div class="col-6 col-md-6 col-sm-6 solo-mobile text-center"><span class="menu-price">{{$produit->prix_menu}}</span></div>
                                @endif
                                
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- end card -->
                        @endforeach
                     
                      </div>
        
                    </div>
                  </div>
                   <div class="popup-image">
                    <span>&times;</span>
                    <img src="{{asset('images/rvb/')}}" alt="">
                  </div>
                  {{-- <div class="col-md-12 my-5">
                    {{ $produits->links() }}
                  </div> --}}
                </div>
            </div>
          </div> 
            
        </div>
        </div>
  </section>
@endsection

@section('first-block')
  @include('partials.first-block')
@endsection


@push('scripts')
    <script>
      
      document.querySelector('.popup-image').addEventListener('click', function (e) {
        if(e.target == document.querySelector('.popup-image')) {
          document.querySelector('.popup-image').classList.remove("active");
        }
      })

      document.querySelectorAll('.produit-img.popup').forEach(image => {
        image.onclick = () =>{
          document.querySelector('.popup-image').classList.add("active");
          document.querySelector('.popup-image img').src = image.getAttribute('src')
         }
      });
      document.querySelector('.popup-image span').onclick = () => {
        document.querySelector('.popup-image').classList.remove("active");
      }

    </script>
@endpush