@extends("layout.app")
@section("styles")
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

    <style>
        .image-icon-block {
            width: 60px;
            margin: 0px;
            padding: 0;
            height: 60px;
            margin-bottom: 0px;
        }
    </style>
@endsection
@section("content")
    @if($sliders->count()>0)
        <section class="container-fluid p-0 m-0">
            <div class="one-slider row">
                @foreach($sliders as $slider)
                    <div class="col">
                        <a href="{{$slider->link}}">
                            <img alt="Image" class="img-fluid w-100"
                                 src="{{ ($slider->image != 'default.jpg') ? url("https://cdn.ihouse.ps/$slider->image")   : 'http://via.placeholder.com/450' }}">
                        </a>
                    </div>
                @endforeach

            </div>
        </section>
    @endif
    <section class="text-center">
        <div class="container">
            <div class="row">
                <div class="col-m-12">
                    <br>
                    <h3 class="unmarg--bottom text-center">اعثر على الاكسسوار الذي تريد</h3>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-12 text-center">
                    <div class="boxed boxed--sm bg--white text-center">
                        @include("components.accessory_filter", ['submitFilterToAccessoryList' => true])
                        {{--                        <form class="m-0 text-center" action="{{route("accessories-listing")}}">--}}
                        {{--                            <input style="padding: 2.0em;" type="text" name="q" id="query"--}}
                        {{--                                   placeholder="اكتب كلمة البحث هنا">--}}
                        {{--                        </form>--}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="tabs-container text-center" data-content-align="left">
                        <ul class="tabs">
                            <li class="active">
                                <div class="tab__title">
                                    <span class="h5">تصفح حسب القسم</span>
                                </div>
                                <div class="tab__content">
                                    <section class="unpad--bottom">
                                        <div class="container">
                                            <div class="row">
                                                @foreach($accessory_categories->take(8)->get() as $accessory_category)
                                                    <div class="col-md-3 col-6 col-xs-6 col-sm-6">
                                                        <a href="{{route("accessories-listing",['accessory-category' => $accessory_category->slug])}}"
                                                           class="block">
                                                            <div
                                                                class="feature boxed boxed--border border--round text-center">
                                                                {!! $accessory_category->image !!}
                                                                <span
                                                                    class="h5 color--primary">{{$accessory_category->title}}</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="row">

                                                <div class="col-md-12">
                                                    <div class="text-center">
                                                        <a href="#" id="toggle-categories"><span
                                                                class="h4 text-center color--primary unmarg--bottom"><i
                                                                    id="toggle-icon"
                                                                    class="fas fa-plus"></i>&nbsp;عرض المزيد</span></a>
                                                    </div>
                                                    <div class="container" id="more-categories"
                                                         style="display:none">
                                                        <div class="row">
                                                            @foreach($accessory_categories->skip(8)->take(100)->get() as $accessory_category)
                                                                <div class="col-md-3 col-6 col-xs-6 col-sm-6">
                                                                    <a href="{{route("accessories-listing",['accessory-category' => $accessory_category->slug])}}"
                                                                       class="block">
                                                                        <div
                                                                            class="feature boxed boxed--border border--round text-center">
                                                                            {!! $accessory_category->image !!}
                                                                            <span
                                                                                class="h5 color--primary">{{$accessory_category->title}}</span>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </li>
                            <li>
                                <div class="tab__title">
                                    <span class="h5">تصفح حسب المنتج</span>
                                </div>
                                <div class="tab__content">
                                    <section>
                                        <div class="container">
                                            @foreach($categories->chunk(6) as $chunks)
                                                <div class="row">
                                                    @foreach($chunks as $category)
                                                        <div class="col-md-2 col-6">
                                                            <a href="{{route("accessories-listing",['category' => $category->slug])}}"
                                                               class="block">
                                                                <div
                                                                    class="feature boxed boxed--border border--round text-center">
                                                                    @if($category->image)
                                                                        <img
                                                                            src="{{url("https://cdn.ihouse.ps/$category->image")}}"
                                                                            class="image-icon-block">
                                                                    @else
                                                                        <i class="ihouse-{{$category->icon}} block"
                                                                           style="color:#919191;"></i>
                                                                    @endif
                                                                    <span
                                                                        class="h5 color--primary">{{$category->title}}</span>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endforeach
                                        </div>
                                    </section>
                                </div>
                            </li>
                            <li>
                                <div class="tab__title">
                                    <span class="h5">تصفح حسب الشركة المصنعة</span>
                                </div>
                                <div class="tab__content">
                                    <section>
                                        <div class="container">
                                            <div class="row">
                                                @foreach($brands->take(8)->get() as $brand)
                                                    <div class="col-md-3 col-6 col-xs-6 col-sm-6">
                                                        <a href="{{route("accessories-listing",['brand' => $brand->id])}}"
                                                           class="block">
                                                            <div
                                                                class="feature boxed boxed--border border--round text-center">
                                                                <img
                                                                    src="{{url("https://cdn.ihouse.ps/$brand->logo")}}"
                                                                    class="image-icon-block">
                                                                <span class="h5 color--primary">{{$brand->name}}</span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="row">

                                                <div class="col-md-12">
                                                    <div class="text-center">
                                                        <a href="#" id="toggle-brands"><span
                                                                class="h4 text-center color--primary"><i
                                                                    id="brand-toggle-icon"
                                                                    class="fas fa-plus"></i>&nbsp;عرض المزيد</span></a>
                                                    </div>
                                                    <div class="container" id="more-brands"
                                                         style="display:none">
                                                        <div class="row">
                                                            @foreach($brands->skip(8)->take(100)->get() as $brand)
                                                                <div class="col-md-3 col-6 col-xs-6 col-sm-6">
                                                                    <a href="{{route("accessories-listing",['brand' => $brand->id])}}"
                                                                       class="block">
                                                                        <div
                                                                            class="feature boxed boxed--border border--round text-center">
                                                                            <img
                                                                                src="{{url("https://cdn.ihouse.ps/$brand->logo")}}"
                                                                                class="image-icon-block">

                                                                            <span
                                                                                class="h5 color--primary">{{$brand->name}}</span>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--end of tabs container-->
                </div>
            </div>
        </div>
    </section>

    @if($latest_accessories->count()>0)
        <hr class="unmarg">
        <section class="text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-center unmarg">وصل حديثا <span class="f18">(<a
                                    href="{{route("accessories-listing")}}"
                                    class="no-underline">عرض الجميع</a>)</span>
                        </h1>

                        <br>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="accessory-slider owl-carousel owl-theme">
                            @foreach($latest_accessories as $latest_accessory)
                                @include("components.accessory",["accessory"=>$latest_accessory])
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>

        </section>
    @endif

    @if($featured_accessories->count()>0)
        <hr class="unmarg">
        <section class="text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-center unmarg">اكسسوارات مميزة</h1>
                        <br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="accessory-slider owl-carousel owl-theme">
                            @foreach($featured_accessories as $featured_accessory)
                                @include("components.accessory",["accessory"=>$featured_accessory])
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </section>
    @endif

    @foreach($featured_accessory_categories as $featured_accessory_category)
        @if($featured_accessory_category->accessories()->where("is_active",1)->where("is_category_featured",1)->where("is_home_featured",0)->count()>0)
            <hr class="unmarg">
            <section class="text-center">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1 class="text-center unmarg">{{$featured_accessory_category->title}} <span
                                    class="f18">(<a
                                        href="{{route("accessories-listing",['accessory-category' => $featured_accessory_category->slug])}}"
                                        class="no-underline">عرض الجميع</a>)</span></h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="accessory-slider owl-carousel owl-theme">
{{--                                @foreach($featured_accessory_category->sub_categories as $key => $sub_category)--}}
{{--                                    @foreach($sub_category->accessories()->where("is_active",1)->where("is_category_featured",1)->where("is_home_featured",0)->limit(1)->get() as $accessory)--}}
{{--                                        @include("components.accessory",["accessory"=>$accessory])--}}
{{--                                    @endforeach--}}
{{--                                @endforeach--}}
                                @foreach($featured_accessory_category->accessories()->where("is_active",1)->where("is_category_featured",1)->where("is_home_featured",0)->get() as $accessory)
                                    @include("components.accessory",["accessory"=>$accessory])
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        @endif

    @endforeach
@endsection
@section("scripts")
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script>
        $("#toggle-categories").click(function (e) {
            e.preventDefault();
            $("#more-categories").slideToggle();
            $("#toggle-icon").toggleClass("fa-plus fa-minus");
        });
        $("#toggle-brands").click(function (e) {
            e.preventDefault();
            $("#more-brands").slideToggle();
            $("#brand-toggle-icon").toggleClass("fa-plus fa-minus");
        });
    </script>

    <script>
        $('.accessory-slider').owlCarousel({
            loop: true,
            lazyLoad: true,
            nav: false,
            rtl: true,
            margin: 20,
            responsive: {
                0: {
                    items: 2
                },
                600: {
                    items: 4
                },
                1000: {
                    items: 4
                }
            }

        });
    </script>
    <script>
        $(".one-slider").slick({
            adaptiveHeight: true,
            autoplay: true,
            rtl: true,
            dots: true,
            arrows: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            slidesToScroll: 1,
        });

    </script>
    @include('accessories.partial.accessories_script')
@endsection