@extends('front.app')

@section('page_content')
  <main>
    <section class="breadcrumbs py-4">
      <div class="container-fluid">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('front.index')}}"> {{ __('general.home') }}</a></li>
            <li class="breadcrumb-item"><a href="{{route('front.product')}}"> {{ __('general.products') }}</a></li>
          </ol>
        </nav>
      </div>
    </section>
    <section class="product-detail pb-5">
      <div class="container-fluid ">
        <div class="row g-md-5 ms-xl-5">
          <h2 class="fw-normal mb-0"> Product Not Available</h2>
        </div>
      </div>
    </section>


    @if($product_similar->isNotEmpty())
    <!-- -------------- SIMILAR PRODUCTS ~ STARTS -------------- -->

    <section class="similar-products py-5">
      <div class="container z-1">
        <h4 class="sub-title-1">{{ __('general.similar_products') }}</h4>
        <div class="owl-carousel owl-theme mt-5">

        @foreach($product_similar as $all)
          <div class="item">
            <div class="product-box bg-white">
              <a href="{{route('front.product_details',$all->slug)}}" class="product-view-nav">
                <div class="prt-1 position-relative">
                  <img src="{{ asset('assets/images/'.$all->photo)  }}" class="img-fluid prod-img" alt="product-image" loading="lazy">
                  @if($all->tag != null)
                  <span class="lc-tag" style="background-color:{{$all->tagz->color_code }}" >{{$all->tagz->name }}</span>
                  @endif
                  @if($all->colors != null)
                  <div class="variants d-flex justify-content-end w-100">
                  @php
                        $colors = json_decode($all->colors, true); // Decode JSON to an array
                        @endphp
                        @foreach ($colors as $color)
                    <span class="variant-display v-1 " style="background-color:{{get_color_code($color)}}"></span>
                    @endforeach
                  </div>
                  @endif
                </div>
                <div class="prt-2 p-1">
                  <h6 class="mt-2 text-black mb-1">{{$all->name}}</h6>
                  <div class="d-lg-flex justify-content-between align-items-center">
                    <div class="price">
                    @if($all->oracle_products_active->offer_price != NULL)
                            {{$all->oracle_products_active->offer_price * $ucv}} {{$user_currency_sign}} <span class="original">{{$all->oracle_products_active->price * $ucv}} {{$user_currency_sign}}</span>
                            @else
                            {{$all->oracle_products_active->price * $ucv}} {{$user_currency_sign}}
                            @endif
                    </div>
                    @if($all->oracle_products_active->offer_price != NULL)
                        <span class="offer-percent">
                          
                        {{user_save_percentage($all->oracle_products_active->price,$all->oracle_products_active->offer_price,$ucv)}}% off
                        </span>
                        @endif
                  </div>
                </div>
              </a>
            </div>
          </div>
@endforeach
          
        </div>
      </div>
    </section>


    @endif
    <!-- -------------- SIMILAR PRODUCTS ~ END -------------- -->

  </main>
  @endsection


  @section('page_js')

  <script>
    $(document).ready(function(){
      $(".owl-carousel").owlCarousel();
    });
  </script>


<script>
  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:40,
      nav:true,
      responsive:{
          0:{
              items:1,
              nav:false
          },
          600:{
              items:2,
              nav:false
          },
          900:{
              items:3
          },
          1300:{
              items:4
          }
      }
  })
</script>

<script>
$('.item_coloursz').on('click', function() {
        $('.item_coloursz').removeClass('selected');
        $(this).addClass('selected');
        var c_id = $(this).data('c_id');
       
        // Hide all buttons with class 'colour_image_select'
        $('.colour_image_select').hide();
        var foundMatch = false;
      // Show only buttons where 'data-img-colour' matches 'c_id' 
        $('.colour_image_select').each(function() {
            if ($(this).data('img-colour') == c_id || $(this).data('img-colour') == 0) {
                $(this).show();
                foundMatch = true;
            }
        });
        if (!foundMatch) {
            $('.default_img').show(); // Replace with your actual class name
        } else {
            $('.default_img').hide(); // Hide the default image if there's a match
        }

        $('.colour_image_select:visible').first().trigger('click');
    });

    

</script>
  @endsection