@extends('front.layouts.app')
@section('title', $selectedCategories->isNotEmpty() ? 'Materijali '.$selectedCategories->pluck('title')->implode(', ') : 'Materijali')


@section('content')
<div class="container">
  <div class="row">
    <div class="page-head">
      <div class="page-head-content">
        <h1>Materijali</h1>
        <h2>{{ $selectedCategories->isNotEmpty() ? $selectedCategories->pluck('title')->implode(', ') : 'Za svaku priliku' }}</h2>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-3">
      <!-- Filtriranje po kategorijama -->
      <div class="filter-form-open">
        <button class="btn btn-lg btn-block btn-green">Filtriranje</button>
      </div>
      <div class="filter-form-holder">
        <div class="filter-form-close">
                <button class="btn btn-md">X</button>
              </div>
      <form id="filter-form" method="GET" action="{{ route('products.index') }}">
          <div class="categories-filter">

              @foreach($groups as $group)
                  <div class="category-group {{ $loop->first || $selectedGroups->contains('slug', $group->slug) ? 'open' : '' }}">
                      <div class="category-header">
                        <h4>{{ $group->title }}</h4>
                      </div>
                      <div class="category-group-list">
                        @foreach($group->categories as $category)
                            <div class="category-check">
                              <input
                                  type="checkbox"
                                  name="categories[]"
                                  value="{{ $category->slug }}"
                                  id="category-{{ $category->slug }}"
                                  {{ $selectedCategories->contains('slug', $category->slug) ? 'checked' : '' }}
                              >
                              <label for="category-{{ $category->slug }}">{{ $category->title }}</label>
                            </div>
                        @endforeach
                      </div>
                  </div>
              @endforeach
          </div>
          <button type="submit" class="btn btn-lg btn-block btn-green">Primeni filtere</button>
          @if($selectedCategories->count())
              <a class="btn btn-md btn-block" href="{{ route('products.index') }}">Resetuj filtere</a>
          @endif
      </form>
      </div>

    </div>
    <div class="col-lg-10 col-md-9">
       @if($selectedCategories->count())
                 <p>Izabrani filteri:</p>
           <ul class="product-selected-filters">
               @foreach($selectedCategories as $category)
                   <li>{{ $category->title }}</li>
               @endforeach
           </ul>


       @endif



         <!-- Prikaz proizvoda -->
         <div class="product-list">
           @foreach($products as $product)
               <a href="{{ route('products.show', $product->slug) }}" class="product-box" data-aos="fade-up" data-aos-once="true" data-aos-delay="{{ $loop->index*10 }}">

                 @if ($product->price_discount)
                 <div class="product-box-discount pulse"><span>{{ round((($product->price-$product->price_discount)/$product->price * 100)) }}% <br /><small>POPUST</small></span></div>
                 @endif
                 <div class="product-box-image">


                   @forelse($product->images as $image)
                   <img src="{{url('storage/'.$image->thumbnail_path)}}" alt="">

                   @empty
                   <img src="https://placehold.co/300" alt="">
                   @endforelse

                 </div>
                 <h3>{{ $product->title }}</h3>
                 @if($product->price_discount)
                      <p class="original-price">{{ $product->price }} RSD/{{ $product->unit }}</p>
                      <p class="discount-price">{{ $product->price_discount }} RSD/{{ $product->unit }}</p>
                  @else
                      <p class="price">{{ $product->price }} RSD/{{ $product->unit }}</p>
                  @endif
              </a>
           @endforeach





         </div>
         <div class="products-nav">
          {{ $products->links() }}
         </div>

    </div>

  </div>
</div>






@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#filter-form').on('submit', function(event) {
        event.preventDefault();
        var selectedValues = $('input[name="categories[]"]:checked').map(function() {
            return $(this).val();
        }).get();
        var baseUrl = '{{ url('/materijali') }}';
        var queryString = selectedValues.join(',');
        var filterUrl = baseUrl + '/' + queryString;
        window.location.href = filterUrl;
    });
});
$('.category-header').click(function() {
    if(!$(this).parent().hasClass('open')){
        $(this).parent().removeClass('open');
        $(this).parent().addClass('open');

    } else {

        $(this).parent().removeClass('open');
    }
});
$('.filter-form-open button').click(function() {
  $('.filter-form-holder').fadeIn();
});
$('.filter-form-close button').click(function() {
  $('.filter-form-holder').fadeOut();
});





</script>
@endpush