@extends('webview.master')

@section('maincontent')
@section('title')
    {{ env('APP_NAME') }}- @if($slug=='best') Best Selling  @elseif($slug=='featured') Featured @elseif($slug=='promotional') Promotional @else @endif Product
@endsection
{{-- category slug --}}
<input type="hidden" name="category" id="categoryslug" value="{{ $slug }}">
<style>
    .product{
     margin-top: 4px !important;
    }
    #featureimagess{
        width: 100%;
        padding: 0px;
        padding-top: 0;
        height:180px;
    }
    #checked {
        color: orange;
    }
    .star{
        font-size: 12px !important;
    }
    
   .brand-img {
    width:95%;
    height: 130px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    background: #F3F8F8;
    padding:0px 11px;
    border-radius: 5px;
    }
    .brand-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: 0.35s all;
    }
 .brand-img:hover{
   box-shadow: 0px 0px 5px 0px #ec701b;
   filter: grayscale(0);
 }


#nav_listing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 15px 0;
    flex-wrap: wrap;
}

/* Filters button */
#div_toggle_filtre {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #EC701B, #f28a3a);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(236,112,27,0.3);
}

#div_toggle_filtre:hover {
    background: linear-gradient(135deg, #d95f12, #ec701b);
    transform: translateY(-2px);
}

#txt_toggle_filtre {
    text-transform: uppercase;
}

#arrow_toggle_filtre {
    font-size: 12px;
    transition: transform 0.3s ease;
}

#div_toggle_filtre.active #arrow_toggle_filtre {
    transform: rotate(180deg);
}

/* Sort dropdown */
#listing_tri {
    display: flex;
    align-items: center;  
    gap: 8px;             
    margin-top: 0;        
    white-space: nowrap;
}

#listing_tri label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

#tri_produit {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 220px;
    height: 36px;
    font-size: 14px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

#tri_produit:hover {
    border-color: #EC701B;
    box-shadow: 0 0 6px rgba(236,112,27,0.3);
}

/* Responsive *//* Responsive */
@media (max-width: 576px) {
    #nav_listing {
        flex-wrap: nowrap; 
        gap: 8px;
    }

    #listing_tri {
        flex: 1;
        justify-content: flex-end; 
    }

    #tri_produit {
        width: 100%;              
        min-width: auto;          
    }

    #div_toggle_filtre {
        flex-shrink: 0;
    }
}




/* Sidebar Filter Panel */
#filtres {
    border-radius: 10px;
    width: 264px;
    min-width: 264px;
    padding: 15px;
    background-color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* Section Title */
#titre_encart_categorie,
#form_filtre dt {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 15px 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* Category List */
.nav_left_categorie {
    margin: 0;
    padding: 0;
}

.nav_left {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu_categorie_filtre .nav_left li div {
    padding: 6px 0 6px 10px;
    transition: background 0.3s;
    border-radius: 6px;
}

.menu_categorie_filtre .nav_left li div:hover {
    background-color: #f3f8f8;
}

.nav_left li span {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: inline-block;
}

/* Filter Group (Brands, Price, etc.) */
#form_filtre {
    padding: 0;
    margin-top: 10px;
}

.content_filtre {
    padding: 6px 0 6px 5px;
    border-bottom: 1px solid #f0f0f0;
}

/* Custom Checkbox */
.custom_checkbox {
    display: flex;
    align-items: center;
    margin: 6px 0;
}

.div_filtre {
  list-style: none;   /* number/bullet hide */
  padding: 0;
  margin: 0;
}
.div_filtre li {
  margin: 6px 0;
}
.custom_checkbox input[type="checkbox"] {
  margin-right: 6px;
}


.custom_checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.custom_checkbox input[type="checkbox"]:checked {
    background-color: #EC701B;
    border-color: #EC701B;
}

.custom_checkbox input[type="checkbox"]:checked::after {
    content: "✔";
    position: absolute;
    top: -2px;
    left: 2px;
    font-size: 12px;
    color: #fff;
}

.custom_checkbox label {
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

/* Price Filter */
#filtre_choix_prix {
    padding: 12px 0;
}

#slider {
    margin: 10px 0;
}

#div_slider_prix_min,
#div_slider_prix_max {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-top: 5px;
}

/* Arrow Icons */
.arrow_down,
.arrow_up {
    border: solid #333;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.arrow_down {
    transform: rotate(45deg);
}

.arrow_up {
    transform: rotate(-135deg);
}

/* Responsive */
@media (max-width: 768px) {
    #filtres {
        width: 100%;
        min-width: unset;
        margin-bottom: 20px;
    }
}



</style>
<!-- /.breadcrumb -->

<div class="body-content outer-top-xs">
    
    @if($slug=='featured')
    <div class="container my-2">
        <div class="text-center">
            <h4 class="my-2 text-center" style="font-weight: 600;">Special offers</h4>
        </div>
        <div class="my-1">
            <p class="text-center" style="font-weight: 600;line-height: 22px;">This section is where you'll find all of our current special offers! Special offers on your facial skincare, bodycare, haircare, make-up, suncare and slimming products. Selected promotions on the biggest brands, including Filorga, Avène, Bioderma, La Roche-Posay and Puressentiel, among others. Cocooncenter: bringing you top brands at the best prices!</p>
        </div>
        
        <div class="my-3 p-5 p-sm-3">
            <div class="row">
             @forelse ($brands as $brand)
                <div class="col-6 col-lg-2">
                    <div class="brand-img">
                     <img src="{{ asset($brand->brand_icon) }}">
                    </div>
                </div>
              @empty
             @endforelse
            </div>
        </div>
    </div>
    @else 
    @endif
   
   <input type="hidden" name="_token" value="{{ csrf_token() }}">
   <input type="hidden" id="categoryslug" value="{{ $slug }}">

    <div class='container'>
        <div class='row'>
            <!-- /.sidebar -->
            
            <div id="nav_listing">
                <div id="nav_listing_left">
                    <div id="div_toggle_filtre" class="actif">
                        <span id="txt_toggle_filtre">Filters</span>
                        <span id="arrow_toggle_filtre" class="arrow_left">▼</span>
                    </div>
                </div>
            
               <div id="listing_tri">
                  <label for="tri_produit">Sort by</label>
                  <select id="tri_produit">
                      <option value="ventes">Best sellers</option>
                      <option value="az">From A-Z</option>
                      <option value="prix_asc">Price: low to high</option>
                      <option value="prix_desc">Price: high to low</option>
                      <option value="remise_desc" selected="selected">Discount</option>
                  </select>
                </div>
            </div>
            
            <div class="col-md-3">
               <aside id="filtres" class="filtres">
                
                  <!-- Category Section -->
                  <div id="menu_lateral_categorie" class="menu_categorie_filtre">
                    <div id="titre_encart_categorie">Category</div>
                    <div class="nav_left_categorie">
                      <ul class="nav_left">
                      @forelse($categories as $category)
                        <li>
                            <div>
                             <a href="{{ url('products/category/' . $category->slug) }}" ><span class="filtre_categorie">{{ $category->category_name }}</span></a>
                            </div>
                        </li>
                        @empty
                            <li><div><span class="filtre_categorie">No categories found</span></div></li>
                        @endforelse
                      </ul>
                    </div>
                  </div>
                
                  <dl id="form_filtre">
                  <!-- Brand Section -->
                  <dt>
                    <span class="titre_legend_filtre">Brand</span>
                    <span class="arrow_filtre arrow_down"></span>
                  </dt>
                   <dd class="content_filtre content_filtre_deplie">
                    <ul class="div_filtre">
                      @forelse($brands as $brand)
                      <li>
                        <div class="custom_checkbox">
                          <input type="checkbox" class="brand-filter" id="brand{{$brand->id}}" name="brand[]" value="{{$brand->id}}">
                          <label for="brand{{$brand->id}}" class="mb-3">{{$brand->brand_name}}</label>
                        </div>
                      </li>
                      @empty
                        <li>No Brand Found</li>
                      @endforelse
                    </ul>
                  </dd>
                
                  <!-- Price Section -->
                  <dt>
                    <span class="titre_legend_filtre">Price</span>
                    <span class="arrow_filtre arrow_down"></span>
                  </dt>
                  <dd id="filtre_choix_prix" class="content_filtre content_filtre_deplie">
                    <ol class="div_filtre">
                      <li>
                        <input type="range" min="50" max="5000" value="5000" id="priceRange" style="width:100%;">
                        <div class="price_values">
                          <span id="span_prix_min">50 tk</span> - <span id="span_prix_max">5000 tk</span>
                        </div>
                      </li>
                    </ol>
                  </dd>
               </dl>
             </aside>
            </div>
            <div class="col-md-9" id="cateoryPro">
                <div class="container" id="viewCategoryProduct">
                    
                </div>
                <!-- /.category-product -->
                <!-- /.tab-content -->
                <div class="clearfix filters-container">
                    <div class="text-right">
                        <div class="pagination-container">

                        </div>
                        <!-- /.pagination-container -->
                    </div>
                    <!-- /.text-right -->

                </div>
                <!-- /.filters-container -->

            </div>
            <!-- /.col -->
        </div>

        <!-- ============================================== BRANDS CAROUSEL : END ============================================== -->
    </div>
    <!-- /.container -->

</div>

<script>
$(document).ready(function () {
    var token = $("input[name='_token']").val();
    var slug = $('#categoryslug').val();

    function loadProducts() {
        var selectedBrands = [];
        $(".brand-filter:checked").each(function () {
            selectedBrands.push($(this).val());
        });

        var priceMax = $("#priceRange").val();
        var sortBy = $("#tri_produit").val();

        $('#processing').modal('show');

        $.ajax({
            type: 'GET',
            url: '{{ url("get/slug/products/") }}',
            data: {
                _token: token,
                slug: slug,
                brands: selectedBrands,
                price_max: priceMax,
                sort: sortBy
            },
            success: function (response) {
                $('#processing').modal('hide');
                $('#viewCategoryProduct').empty().append(response);
            },
            error: function (error) {
                console.log('error', error);
            }
        });
    }

    // Brand change
    $(document).on("change", ".brand-filter", function () {
        loadProducts();
    });

    // Price change
    $("#priceRange").on("input change", function () {
        $("#span_prix_max").text($(this).val() + " tk");
        loadProducts();
    });

    // Sort change
    $("#tri_produit").on("change", function () {
        loadProducts();
    });

    // Initial load
    loadProducts();
});
</script>


{{-- csrf --}}
<input type="hidden" name="_token" value="{{ csrf_token() }}" />

<script>

    function shownowpro() {
        $('#processing').modal('show');
        var pricerange = $('.price-slider').val();
        var categorynow = $('#categoryslug').val();
        $.ajax({
            type: 'GET',
            url: '{{ url('get/products/by-category') }}',
            data: {
                _token: token,
                category: categorynow,
                price_range: pricerange
            },

            success: function(response) {
                $('#processing').modal('hide');
                $('#viewCategoryProduct').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }


    function viewcategoryproduct(categoryslug) {
        $('#processing').modal('show');

        $.ajax({
            type: 'GET',
            url: '{{ url('get/products/by-category') }}',
            data: {
                _token: token,
                category: categoryslug,
            },

            success: function(response) {
                $('#processing').modal('hide');
                $('#viewCategoryProduct').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    function shownow() {
        $('#processing').modal('show');
        var pricerange = $('.price-slider').val();
        var categoryslg = $('#categoryslug').val();
        $.ajax({
            type: 'GET',
            url: '{{ url('get/products/by-category') }}',
            data: {
                _token: token,
                category: categoryslg,
                price_range: pricerange
            },

            success: function(response) {
                $('#processing').modal('hide');
                $('#viewCategoryProduct').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    function viewsubcategoryproduct(subcategoryslug) {
        $('#processing').modal('show');
        var pricerange = $('.price-slider').val();

        $.ajax({
            type: 'GET',
            url: '{{ url('get/products/by-subcategory') }}',
            data: {
                _token: token,
                subcategory: subcategoryslug,
                price_range: pricerange
            },

            success: function(response) {
                $('#processing').modal('hide');
                $('#viewCategoryProduct').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }

    function viewcategoryproduct(categoryslug) {
        $('#processing').modal('show');

        $.ajax({
            type: 'GET',
            url: '{{ url('get/products/by-category') }}',
            data: {
                _token: token,
                category: categoryslug,
            },

            success: function(response) {
                $('#processing').modal('hide');
                $('#viewCategoryProduct').empty().append(response);
            },
            error: function(error) {
                console.log('error');
            }
        });
    }
</script>

<style>
    @media only screen and (max-width: 768px) {
        #cateoryProSidebar {
            padding-right: 0;
        }

        #cateoryPro {
            padding-left: 0;
        }
    }

    #cateoryProSidebar {
        padding-left: 0;
    }

    #cateoryPro {
        padding-right: 0px;
    }

    .sidebar-widget .sidebar-widget-body .accordion .accordion-group .accordion-heading .accordion-toggle.collapsed:after {
        color: #636363;
        content: "\f067";
        font-family: fontawesome;
        font-weight: normal;
    }

    .sidebar .sidebar-module-container .sidebar-widget .sidebar-widget-body .accordion .accordion-group .accordion-heading .accordion-toggle:after {
        content: "\f068";
        float: right;
        font-family: fontawesome;
    }

    .widget-title {
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px;
        margin: 0;
    }

    .list {
        list-style: none;
    }

    #liaside {
        color: #858585;
        font-weight: bold;
    }

    .breadcrumb {
        padding: 5px 0;
        border-bottom: 1px solid #e9e9e9;
        background-color: #fafafa;
    }
</style>

@endsection
