@extends("layout.app")
@section("content")
    <style>
        .color-choose {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
        }
        .color-choose .col {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .owl-theme .owl-nav{
            margin-top:unset!important;
        }
        .popover-title {
            text-align: center;
        }
        .custom-popover li{
            /*color: #666!important;*/
        }
        .popover-body{
            padding: 0!important;
        }
        .popover{
            filter: opacity(0.96);
            padding: 2px!important;
        }
        .custom-popover li {
            border: none!important;
            text-align: center;
            font-size: 0.90em!important;
            font-weight: 400!important;
        }
        .available-stock{
            color: #009100 !important;
        }
        .not-available-stock{
            color: #e50000 !important;
        }
        .custom-popover li:nth-child(2) {
            border-top: 1px solid #ccc!important;
        }

        .custom-popover li:last-child {
            border-top: 1px solid #ccc!important;
        }

        .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-md-12">
                        <div class="container-owl" data-content-align="left">
                            <div class="col">
                                <div class="row">
                                    <ul class="tabs nav owl-carousel owl-theme">
                                        @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" style="width: max-content">
                                                        @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" style="width: auto!important;"></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" style="width: auto!important;">
                                                        <span class="h5" style="margin:0">مقارنة</span>
                                                    </div>
                                                </a>

                                            </li>
                                        @endif

                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <section style="margin-bottom: 0; padding-bottom: 0!important;">
        <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
            $showItemsCondition = false;
            $showItemsInTapsCondition = false;

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

        @if($showItemsCondition)
            @php
                $items = $tapSpec->items()
                    ->where('category_id', $sub_category->id)
                    ->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 () {

            $(document).on('click', '.popover-item', function (e) {
                e.preventDefault();

                let id = $(this).data('color_id')
                let item = $(this).data('item')
                let q = $(this).data('stock')
                let check = $("#stock-color-" + item).attr('check-w')
                if ($('.popover.fade').popover().length == 0) {
                    if (q > 0 && check == undefined) {
                        $.ajax({
                            type: "POST",
                            url: '{{ route("check-availability-warehouse") }}',
                            data: {
                                id: id,
                                model: 'item'
                            },
                            success: function (result) {
                                $("#stock-color-" + item).html(`</a>  <a href="#" id="popover-warehouses" class="pop-${item}" data-toggle="popover">  <span style="color:#8fda8f;font-size: 13px;font-weight: bold"><i class="fas fa-check-circle"></i> متوفر </span>`);
                                $("#stock-btn-" + item).html('للتفاصيل والطلب');
                                $('a#popover-warehouses').data('content', `${result}`)
                                $('[data-toggle="popover"]').popover({
                                    html: true,
                                    // trigger: 'click'
                                });
                                $(`a.pop-${item}`).popover('show')

                                $('a#popover-warehouses').on('click', function (e) {
                                    e.preventDefault();
                                    return true;
                                });
                            }
                        });
                    }
                } else {
                    if (q > 0 && check == undefined) {
                        $('.popover.fade').popover().remove('div.popover.fade');
                        $('.popover.fade').popover('hide');
                        return false
                    }

                }
            })
            $('a#popover-warehouses').on('click', function (e) {
                e.preventDefault();
                return true;
            });

            $('[data-toggle="popover"]').popover({
                html: true,
                trigger: 'click',
                content: function () {
                    return $('#popover-content').html();
                }
            });
            $('html').on('mouseleave', '#popover-warehouses', function (e) {
                if (!$(e.target).closest('.popover').length) {
                    $('.popover').each(function () {
                        if ($('.popover.fade').popover().length > 0) {
                            $('.popover.fade').popover().remove('div.popover.fade');
                        }
                    });
                }
            });

            $('.color-choose div').on('click', function () {
                if ($('.popover.fade').popover().length != 0) {
                    $('.popover.fade').popover().remove('div.popover.fade');
                    $('.popover.fade').popover('hide');
                }
                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 PreorderQuantity = $(this).attr('data-color-preorder-quantity');
                var ColorCode = $(this).attr('data-color-code');
                $("#current-image-" + Item).attr("src", $("#image-selector-" + Color).attr("src"));
                $("#color-code-" + Item).val(ColorCode);
                $(".render-color-code" + Item).text(ColorCode)
                var Quantity = $(this).attr('data-color-quantity');
                $("#stock-color-" + Item).attr('check-w', 'false');

                if (Quantity > 0) {
                    $('.popover.fade').popover().remove('div.popover.fade');
                    $.ajax({
                        type: "POST",
                        url: '{{ route("check-availability-warehouse") }}',
                        data: {
                            id: $(this).data('item_color_id'),
                            model: 'item'
                        },
                        success: function (result) {
                            $("#stock-color-" + Item).html('<span style="color:#8fda8f;font-size: 13px;font-weight: bold"></a>  <a style="color:#8fda8f;font-size: 13px;font-weight: bold" href="#" id="popover-warehouses" data-toggle="popover" data-trigger="click"> <i class="fas fa-check-circle"></i> متوفر </span>');
                            $("#stock-btn-" + Item).html('للتفاصيل والطلب');
                            $('a#popover-warehouses').data('content', `${result}`)
                            $('[data-toggle="popover"]').popover({
                                html: true,
                                trigger: 'click'
                            });
                            $('a#popover-warehouses').on('click', function (e) {
                                e.preventDefault();
                                return true;
                            });

                            $('html').on('mouseleave', '#popover-warehouses', function (e) {
                                if (!$(e.target).closest('.popover').length) {
                                    $('.popover').each(function () {
                                        $('.popover.fade').popover().remove('div.popover.fade');
                                    });
                                }
                            });
                        }
                    });

                } else {
                    $("#stock-color-" + Item).css({'cursor': "default"});
                    if (PreorderQuantity > 0) {
                        $("#stock-color-" + Item).html('<span style="color:#7138c7;font-size: 13px;font-weight: bold"><i class="fas fa-check-square"></i> طلب مسبق </span>');
                        $("#stock-btn-" + Item).html('للتفاصيل والطلب');
                    } else if (Status == "coming-soon") {
                        $("#stock-color-" + Item).html('<span style="color:#4b90e2;font-size: 13px;font-weight: bold"><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;font-size: 13px;font-weight: bold"><i class="fas fa-check-square"></i> طلب خاص </span>');
                        } else {
                            $("#stock-btn-" + Item).html('للتفاصيل والتنبيه عن التوفر');
                            $("#stock-color-" + Item).html('<span style="color:#fa9393;font-size: 13px;font-weight: bold"><i class="fas fa-times-circle"></i> غير متوفر </span>');
                        }
                    }
                }
            });

            @if($showItemsCondition)
            flexItemsDistribution();

            $(window).resize(function () {
                flexItemsDistribution();
            });
            @elseif($showItemsInTapsCondition)


            if (!window.location.hash) {
                $('.tabs li:first-child').addClass('active');
            }
            $(document).find(`.tabs-content>li:not(.active)`).css({'display':'none'})

            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 () {
                $(document).find(`.tabs-content>li.active`).css({'display':'block'})
                let itemsCount = $('.tabs-content .active .item').children().length;
                flexItemsDistribution(itemsCount);
                $(document).find(`.tabs-content>li:not(.active)`).css({'display':'none'})
            });
            @endif
            fixColorsPerCard(6);
        });
        function fixColorsPerCard(maxPerRow = 0) {
            $('.color-choose').each(function () {
                const $container = $(this);
                let $colors = $container.find('.col');

                const itemsCount = $colors.length;
                if (itemsCount <= 1) return;

                if (itemsCount % maxPerRow !== 1) return;

                const indexToMove = itemsCount - 2;
                const $elementToMove = $colors.eq(indexToMove);
                const $lastItem = $colors.last();

                if ($elementToMove.length && $lastItem.length) {
                    const $cloned = $elementToMove.clone(true, true);
                    $elementToMove.remove();
                    $lastItem.after($cloned);
                }
            });
        }

        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;
            }
            // 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