@extends('frontend.include.layout')

@section('content')

    @if(count($brand_advertisements_tops) != 0)
        <section class="home-slider position-relative mb-30">
            <div class="container">

                <div class="home-slide-cover bg-grey-10 mt-30">
                    <div class="hero-slider-1 style-4 dot-style-1 dot-style-1-position-1">
                        @foreach($brand_advertisements_tops as $key => $home_advertisementdetail)
                            @include('frontend.include.advertisementdesign')
                        @endforeach
                    </div>

                </div>

            </div>
        </section>
    @endif

    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row" id="display_brandlist_design_field">

                <div id="loader" class="loader" style="display: none;">Loading...</div>

                <div class="col-lg-9">
                    <div class="shop-product-fillter">
                        <div class="all-product">
                            <p id="displaybrand_filter_count_overall">
                                0-0 of 0 results
                            </p>
                        </div>

                        <div class="sort-by-product-area">
                            <div class="sort-by-cover mr-10" id="displaybrandfilterremoveshow">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps"></i>Show:</span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span> <span class="displaybrandfilterchoosecount">2</span> <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown" id="displaybrandfiltercount">
                                    <ul>
                                        {{--                                        <li><a class="active">20</a></li>--}}
                                        {{--                                        <li><a>40</a></li>--}}
                                        {{--                                        <li><a>60</a></li>--}}
                                        {{--                                        <li><a>80</a></li>--}}

                                        <li><a class="active">2</a></li>
                                        <li><a>4</a></li>
                                        <li><a>6</a></li>
                                        <li><a>8</a></li>

                                    </ul>
                                </div>
                            </div>
                            <div class="sort-by-cover" id="displaybrandsortbyremoveshow">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps-sort"></i>Sort by:</span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span> <span class="displaybrandsortbyvalue" sortbyid="0"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown" id="displaybrandsortbygettext">
                                    <ul>
                                        <li><a sortbyid="1">Release Date</a></li>
                                        <li><a sortbyid="2">Avg. Rating</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="totall-product" id="display_all_brand_filter_option">

                                {{--                                <button type="button" class="button button-keywords clickremovebrandlist">On Sale &nbsp;<span>X</span></button>--}}

                            </div>


                            <br><br>

                        </div>
                    </div>



                    <div class="row product-grid-4" id="displayfilterbrandlist">

                        @if($brand_details != '')
                            @foreach($brand_details as $key => $brand_detail)

{{--                                @include('frontend.include.brandsearch')--}}

                            @endforeach

                        @else

                            <script>
                                setTimeout(function() {
                                    $("#loader").hide();
                                }, 1000);

                            </script>

                        @endif

                    </div>


                    <!--pagination-->


                    <br>

                    <div class="row product-grid-4" >
                        <div class="col-md-12">
                            <div class="pagination-area mt-15 mb-sm-5 mb-lg-0">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-center" id="displayfilterbrandlistpagination">

                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>





                </div>

                <div class="col-lg-3 primary-sidebar sticky-sidebar">

                    <form method="POST" enctype="multipart/form-data" id="brand_all_field_filter_form">

                        <div class="row">
                            <div class="col-lg-12 col-mg-6"></div>
                            <div class="col-lg-12 col-mg-6"></div>
                        </div>

                        <div class="widget-category">
                            <div class="row">
                                <div class="col-md-6"><h5 class="section-title style-1 wow fadeIn animated">Refine By</h5></div>
                                <div class="col-md-6"><a href="{{ route('brandlist.index') }}"><h5 class="section-title style-1  wow fadeIn animated">Clear filters</h5></a></div>
                            </div>

                        </div>

                        <div class="widget-category">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="mb-0">
                                        <tr class="clickfilteroption">
                                            <td><h5 class="section-title style-1 wow fadeIn animated">Verification</h5></td>
                                            <td><h5 class="section-title style-1 wow fadeIn animated text-right displayplusminusicon"><i class="fa fa-minus" aria-hidden="true"></i></h5></td>
                                        </tr>
                                    </table>

                                </div>

                                <div class="col-md-12 mt-15 showhidefilteroption">
                                    <input class="form-check-input filterbranddetails" type="checkbox" name="verificationtype" displaytext="brand Verified" id="exampleVerification1" value="1">
                                    <label class="form-check-label" for="exampleVerification1">brand Verified<span id="dispay_count_brandlist_verified"> (0)</span></label>
                                    <br>
                                    <input class="form-check-input filterbranddetails" type="checkbox" name="verificationtype" displaytext="brand Unverified" id="exampleVerification2" value="2">
                                    <label class="form-check-label" for="exampleVerification2">brand Unverified<span id="dispay_count_brandlist_unverified"> (0)</span></label>

                                </div>
                            </div>

                        </div>

                        <div class="widget-category mb-30">
                            <h5 class="section-title style-1 mb-30 wow fadeIn animated">Ratings</h5>

                            <div class="stars">
                                <i class="fa-solid fa-star filterassetdetails"></i>
                                <i class="fa-solid fa-star filterassetdetails"></i>
                                <i class="fa-solid fa-star filterassetdetails"></i>
                                <i class="fa-solid fa-star filterassetdetails"></i>
                                <i class="fa-solid fa-star filterassetdetails"></i>
                            </div>
                            <br>
                            {{--                        <button type="submit" class="btn btn-primary btn-lg btn-block clickremovestarrating">Filter</button>--}}

                        </div>



                    </form>

                    <!-- Product sidebar Widget -->
                </div>

            </div>

            <input type="hidden" id="brandlist_filter_load" value="0">
            <input type="hidden" id="brandlist_pagination_load" value="0">
            <input type="hidden" id="brandlist_filter_count_load" value="0">

        </div>
    </section>

    @if(count($brand_advertisements_bottoms) != 0)
        <section class="home-slider position-relative mb-30">
            <div class="container">

                <div class="home-slide-cover bg-grey-10 mt-30">
                    <div class="hero-slider-1 style-4 dot-style-1 dot-style-1-position-1">
                        @foreach($brand_advertisements_bottoms as $key => $home_advertisementdetail)
                            @include('frontend.include.advertisementdesign')
                        @endforeach
                    </div>

                </div>

            </div>
        </section>
    @endif

    <style>
        label.form-check-label {
            font-size: 13px;
            font-weight: 400;
        }
        .pagination {
            padding-left: 0;
            list-style: none;
        }
        .designclearfilter {
            font-weight: 600 ! important;
            color: #2196f3;
            font-size: 14px ! important;
        }
        .button-keywords {
            font-size: 14px;
            font-weight: 700;
            padding: 0px 8px;
            border-radius: 4px;
            color: #000;
            border: 1px solid #adadad;
            background-color: #ffffff;
        }
        table td, table th {
            padding: 10px 0px;
        }
    </style>

    <style>
        /* styles.css */
        .loader {
            display: none; /* Hidden by default */
            position: absolute;
            top: 20%;
            left: 30%;
            transform: translate(-50%, -50%);
            font-size: 15px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 5px 15px;
            border-radius: 5px;
            z-index: 9999; /* Ensure it's above other elements */
        }


        .loader, .bar {
            width: 100px;
            height: 35px;
        }
        @media (min-width: 1200px) {
            .col-xl-3 {
                flex: 0 0 auto;
                width: 26%;
            }
        }
    </style>


@endsection

@section('script')
    @include('frontend.include.brandjs')
@endsection