@include('inc.header')
<style>
    .price-wrapper {
        position: relative; 
        display: inline-block;
    }

    .price-slash {
        position: relative;
        width: 100%;
        height: 0;
        border-top: 4px solid red;
        transform: rotate(-0deg);
        top: 17px;
    }

    .price {
        font-size: 30px;
    }

  
</style>

<!-- Content begin -->
<div class="no-bottom no-top" id="content">
    <div id="top"></div>
    <section class="pt10 pb10 mt80" style="background-size: cover; background-repeat: no-repeat;">
        <div class="container" style="background-size: cover; background-repeat: no-repeat;">
            <div class="row align-items-center" style="background-size: cover; background-repeat: no-repeat;">
                <div class="col-lg-6" style="background-size: cover; background-repeat: no-repeat;">
                    
                </div>
                <div class="col-lg-6 text-lg-end" style="background-size: cover; background-repeat: no-repeat;">
                     <div class="filter-container">
    <button id="filterToggle" class="filter-btn"style="background-color: #fff;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down-alt" viewBox="0 0 16 16">
  <path d="M3.5 3.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 12.293zm4 .5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5"/>
</svg>Toggle Filters</button>
    <div id="filterMenu" class="filter-menu">
      <h3>Filter Options</h3>
       <form action="{{ route('cart_accessories.filter') }}" method="POST">
                                        @csrf
                                         
                                         <div class="row">
                                           
                                          <div class="col-sm-6">
                                                      <div class="form-group ">
                                                         <select id="productCatalog" class="form-control" name="product_id" onchange="fetchModelCatalogs()">
                                                            <option value="">Select Product</option>
                                                            @foreach($products as $product)
                                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                               <div class="col-sm-6">
                                                      <div class="form-group ">
                                                         <select id="modelCatalog" class="form-control" name="model_id">
                                                            <option value="">Select Model</option>
                                                        </select>
                                                    </div>
                                                </div>
                                          

                                         <div class="col-sm-12 text-center mt-4"><button type="submit" class="btn-main">Filter</button></div>
                                       </div>
                                       <br>
                                    </form>
    </div>
  </div>
                </div>
            </div>
        </div>
    </section>

    <section class=" no-top">
<script>
  
</script>
<style >
    .filter-container {
      
    }

    .filter-btn {
      padding: 10px 20px;
      background-color: #fff;
      color: #034e99;
      border: none;
      cursor: pointer;
      font-size: 16px;
      border-radius: 4px;
    }

    .filter-btn:hover {
      background-color: #fff;
    }

    .filter-menu {
      display: none;
      margin-top: 10px;
      border: 1px solid #ddd;
      padding: 15px;
      background-color: #fff;
      border-radius: 4px;
      position: absolute;
      right: 5%;
      z-index: 10000;
    }

    .filter-menu h3 {
      margin-top: 0;
    }

    .filter-menu label {
      display: block;
      margin-bottom: 10px;
    }

    .filter-menu input[type="checkbox"] {
      margin-right: 5px;
    }
</style>
        <div class="container  "> 
            
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#filterToggle').on('click', function(){
        $('#filterMenu').toggle();
      });
    });
  </script>
            <div class="row">
              

                <div class="col-lg-12 order-1 order-lg-2">
                    
                   

    <!-- Display Data -->
      <div class="row  ">
            @foreach($cartAccessories as $accessory)

               <div class="col-lg-3 col-sm-6 gy-5"  style="background-size: cover; background-repeat: no-repeat;">
                                    <div class="bg-grey p-4 rounded-20px hover" style="background-size: cover; background-repeat: no-repeat;">
                                        <div class="text-center" style="background-size: cover; background-repeat: no-repeat;">
                                            <h4 class="bg-white text-dark p-1 rounded-5">{{ $accessory->item }}</h4>

                                            <div class="d-block mt-4" style="background-size: cover; background-repeat: no-repeat;">
                                                <img src="{{url($accessory->image)}}" class="w-80 relative z-1000 hover-scale-1-2" alt="" style="height:210px; ">
                                            </div>

                                             
                                                <h4 class="mt-3 mb-1">
                                                    <!--<span class="bg-color me-2 fs-16 px-2 rounded-5px text-uppercase anim-op-blink-to-light">Start from</span>-->
                                                    ₹ {{ $accessory->price }} /-*
                                                </h4>
                                            

                                           </div>

                                       
                                        <div class="text-center" style="background-size: cover; background-repeat: no-repeat;">
                                           <a class="btn-main" href="{{ route('buy_now_accessories', [Crypt::encrypt($accessory->id)]) }}">Buy Now</a>
                                        </div>
                                    </div>
                                </div>
                
            @endforeach
         </div>
                </div>
            </div>
        </div>
    </section>
</div>
@include('inc.footer')
<script type="text/javascript">
                    function fetchModelCatalogs() {
                        var catalogId = $('#productCatalog').val();
                        if (catalogId) {
                            $.ajax({
                                url: '/get-model-catalogs/' + catalogId,
                                type: 'GET',
                                dataType: 'json',
                                success: function(data) {
                                    $('#modelCatalog').empty();
                                    $('#modelCatalog').append('<option value="">Select Model</option>');
                                    $.each(data, function(key, model) {
                                        $('#modelCatalog').append('<option value="' + model.id + '">' + model.name + '</option>');
                                    });
                                }
                            });
                        } else {
                            $('#modelCatalog').empty();
                            $('#modelCatalog').append('<option value="">Select Model</option>');
                        }
                    }
                </script>

<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>