@extends("layout.app")
@section("content")
    <style>
        .color-choose input[type="radio"] {
            width: 25px;
            height: 25px;
        }

        .mb-0 {
            margin-bottom: 0;
        }

        .item-prices {
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .image-column {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-icon-block {
            width: auto;
            margin: 0px;
            padding: 0;
            height: 60px;
            margin-bottom: 0px;
        }

        .flickity-slider {
            white-space: nowrap;
        }

        .custom-flex-distribution-items {
            min-width: 150px;
            max-width: 250px;
        }

        .wrap-rest-items {
            flex-basis: 100% !important;
            height: 0;
        }
    </style>

    @include('partial.slider_style')

    <div class="text-center cta cta-4 border--bottom bg--dark">
        <div class="container">
            <div class="row">
                @if( $agent->isMobile() )
                    <div class="col">
                        <section>
                            <div class="owl-carousel owl-theme">
                                @foreach($sub_categories as $menu_sub_category)
                                    <div class="item">
                                        <a href="{{ url("$category->slug/$menu_sub_category->slug") }}">
                                            <div class="tab__title text-center">
                                                @if($menu_sub_category->image)
                                                    <img
                                                        src="{{url("https://cdn.ihouse.ps/$menu_sub_category->image")}}"
                                                        class="image-icon-block">
                                                @else
                                                    <i class="ihouse-{{$menu_sub_category->icon}} block"></i>
                                                @endif
                                                <span class="h5"
                                                      style="font-size:10px;margin:0">{{$menu_sub_category->title}}</span>
                                                @if($menu_sub_category->is_new)
                                                    <h5 class="color--error"
                                                        style="font-size: 9px; color: #ff919f !important; line-height: 0px;padding-bottom:10px">
                                                        جديد</h5>
                                                @endif
                                            </div>
                                        </a>
                                        <!--end feature-->
                                    </div>
                                @endforeach
                                @if($category->with_accessories)
                                    <div class="item">
                                        <a href="{{route("accessories")}}">
                                            @include('partial.accessory_nav_item', ['category' => $category])
                                        </a>
                                    </div>
                                @endif
                                @if($category->with_compare)
                                    <div class="item">
                                        <a href="{{url("/$category->slug")}}/compare">
                                            <div class="tab__title text-center">
                                                <img
                                                    src="{{url("https://cdn.ihouse.ps/$category->compare_icon")}}"
                                                    class="image-icon-block">
                                                <span class="h5" style="margin:0">مقارنة</span>
                                            </div>
                                        </a>

                                    </div>
                                @endif

                            </div>
                        </section>
                    </div>
                @else
                    <div class="col-sm-12">
                        <div class="tabs-container" data-content-align="left">
                            <ul class="tabs nav">
                                @foreach($sub_categories as $menu_sub_category)
                                    <li>
                                        <a href="{{url("$category->slug/$menu_sub_category->slug")}}">
                                            <div
                                                class="tab__title text-center @if(Request::segment(2) == $menu_sub_category->slug) active @endif">
                                                @if($menu_sub_category->image)
                                                    <img
                                                        src="{{url("https://cdn.ihouse.ps/$menu_sub_category->image")}}"
                                                        class="image-icon-block">
                                                @else
                                                    <i class="ihouse-{{$menu_sub_category->icon}} block"></i>
                                                @endif
                                                <span class="h5" style="margin:0">{{$menu_sub_category->title}}</span>
                                                @if($menu_sub_category->is_new)
                                                    <h5 class="color--error"
                                                        style="font-size: 11px; color: #ff919f !important; line-height: 0px;">
                                                        جديد</h5>
                                                @endif
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                                @if($category->with_accessories)
                                    <li>
                                        <a href="{{route("accessories")}}">
                                            @include('partial.accessory_nav_item', ['category' => $category])
                                        </a>
                                    </li>
                                @endif
                                @if($category->with_compare)
                                    <li><a href="{{url("/$category->slug")}}/compare">
                                            <div class="tab__title text-center">
                                                <img
                                                    src="{{url("https://cdn.ihouse.ps/$category->compare_icon")}}"
                                                    class="image-icon-block">
                                                <span class="h5" style="margin:0">مقارنة</span>
                                            </div>
                                        </a>

                                    </li>
                                @endif

                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="text-center" dir="ltr">{{$sub_category->title}}</h1>

                </div>
            </div>
        </div>
    </section>
    <section class="text-center">
        @php
            if($tab_specs){
            $tapSpec = $tab_specs->first();

                $showItemsCondition = ($tab && $tab_specs->count() == 1 && $tapSpec);
                $showItemsInTapsCondition = ($tab && $tab_specs->count()>1);
            }else{
                $showItemsCondition = false;
                $showItemsInTapsCondition =false;
            }
        @endphp

        @if($showItemsCondition)
            @php
                $items = $tapSpec->items()->where('category_id', $sub_category->id)->orderBy("items.price",'asc')->where("is_active",1)->get();
                $class = "custom-flex-distribution-items";
            @endphp

            <div class="d-flex justify-content-center flex-wrap">
                @include("components.one_tab_items", compact('items', 'class'))
            </div>
        @elseif($showItemsInTapsCondition)
            @include("components.multiple_tab_items", compact('tab_specs'))
        @endif

    <!-- @TODO: CLEANUP WHEN THE WORK IS STABLE -->
        @if(false)
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        @includeWhen($tab && $tab_specs->count()>1,"components.multiple_tab_items",compact('tab_specs'))
                        @includeWhen($tab && $tab_specs->count()==1 && $tab_specs->first(),"components.one_tab_items",['tab_spec'=>$tab_specs->first()])
                    </div>
                </div>
            </div>
        @endif

    </section>

@endsection
@section("scripts")
    @include('partial.slider_script')

    <script type="text/javascript">

        $(document).ready(function () {
            $('.color-choose div').on('click', function () {
                var Color = $(this).attr('data-image');
                var Item = $(this).attr('data-item');
                var Status = $(this).attr('data-stock-status');
                var SpecialOrder = $(this).attr('data-special-order');
                var ColorCode = $(this).attr('data-color-code');
                $("#current-image-" + Item).attr("src", $("#image-selector-" + Color).attr("src"));
                $("#color-code-" + Item).val(ColorCode);
                var Quantity = $(this).attr('data-color-quantity');
                if (Quantity > 0) {
                    $("#stock-color-" + Item).html('<span style="color:#8fda8f"><i class="fas fa-check-circle"></i> متوفر </span>');
                    $("#stock-btn-" + Item).html('للتفاصيل والطلب');

                } else {
                    if (Status == "coming-soon") {
                        $("#stock-color-" + Item).html('<span style="color:#4b90e2"><i class="fas fa-hourglass-half"></i> قريبا </span>');
                        $("#stock-btn-" + Item).html('للتفاصيل والتنبيه عن التوفر');
                    } else {
                        if (SpecialOrder == 1) {
                            $("#stock-btn-" + Item).html('للتفاصيل والطلب');
                            $("#stock-color-" + Item).html('<span style="color:#efa30c"><i class="fas fa-check-square"></i> طلب خاص </span>');
                        } else {
                            $("#stock-btn-" + Item).html('للتفاصيل والتنبيه عن التوفر');
                            $("#stock-color-" + Item).html('<span style="color:#fa9393"><i class="fas fa-times-circle"></i> غير متوفر </span>');
                        }
                    }
                }
            });

            @if($showItemsCondition)
            flexItemsDistribution();

            $(window).resize(function () {
                flexItemsDistribution();
            });
            @elseif($showItemsInTapsCondition)
            let itemsCount = $('.tabs-content .active .item').children().length;
            flexItemsDistribution(itemsCount);

            $(window).resize(function () {
                let itemsCount = $('.tabs-content .active .item').children().length;
                flexItemsDistribution(itemsCount);
            });

            $('.tabs li').click(function () {
                let itemsCount = $('.tabs-content .active .item').children().length;
                flexItemsDistribution(itemsCount);
            });
            @endif
        });

        function flexItemsDistribution(passedItemsCount = 0) {
            let itemsCount = passedItemsCount || parseInt('{{ $items->count() }}');

            // checkpoint #1
            if (itemsCount === 1) {
                return;
            }

            let baseWidth = 250; // ## dependent on style from `.custom-flex-distribution-items` width
            let windowWidth = window.innerWidth;

            // checkpoint #2
            // update width items to solve css issue just when we have 3 items or more per row
            let numberOfItemsPerRow = parseInt(windowWidth / baseWidth);
            if (numberOfItemsPerRow < 3) {
                // add border left style
                borderLiftStyle();

                return;
            }

            // checkpoint #3
            // to make sure we have a single item in any row
            if (itemsCount % numberOfItemsPerRow !== 1) {
                // add border left style
                borderLiftStyle();

                return;
            }

            $('.wrap-rest-items').remove();

            let element = $('.custom-flex-distribution-items')[itemsCount - 3/* to get the nth child - 2 */];
            if (passedItemsCount !== 0) {
                element = $('.active .custom-flex-distribution-items')[itemsCount - 3/* to get the nth child - 2 */];
            }

            $(element).after('<div class="wrap-rest-items"></div>');

            // add border left style
            borderLiftStyle();
        }

        function borderLiftStyle() {
            let items = $('.active .item-cart');
            let itemsCount = items.children().length;

            if (items.length === 0) {
                items = $('.item-cart');
                itemsCount = '{{ $items->count() }}';
            }

            let itemsPerRow = parseInt(window.innerWidth / 250);
            if (itemsPerRow === 1) {
                return;
            }

            let counter = 0;
            items.each(function () {
                counter++;
                if ($(this).next().hasClass('wrap-rest-items')) {
                    counter = 0;
                    $(this).removeClass('border-left');
                } else if (counter < itemsPerRow) {
                    $(this).addClass('border-left');
                } else {
                    counter = 0;
                    $(this).removeClass('border-left');
                }
            });

            $(items[itemsCount - 1]).removeClass('border-left');
        }
    </script>
@endsection