@extends("layout.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/css/select2.min.css" rel="stylesheet" type="text/css"
          media="all"/>
    <style>
        .select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__rendered {
            font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        }

        .expand {
            cursor: pointer;
        }

        a[aria-expanded=true] .fa-caret-left {
            display: none;
        }

        a[aria-expanded=false] .fa-caret-down {
            display: none;
        }
    </style>
    <style type="text/css">
        @media (min-width: 768px) {
            .btn + .btn {
                margin-left: 0;
            }
        }

        .btn--icon i {
            right: 0;
            left: auto;
            border-radius: 0px 6px 6px 0px;
        }

        .btn--icon {
            padding-right: 4.571429em;
            padding-left: 1.571429em;
        }

        .expand {
            color: #0070c9;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
    <style>

        .sidebar__widget > h5:first-child {
            margin-top: 0.92857143em;
            margin-bottom: 0em;
        }

        h5:not(:last-child), .h5:not(:last-child) {
            margin-top: 1.85714286em;
            margin-bottom: 0em;
        }
    </style>
    <style>
        a:link,
        a:visited {
            color: #222;
        }

        .category-sep {
            border-bottom: 2px #c1c1c1 solid !important;
        }

        a:hover,
        a:focus {
            color: #0070c9;
        }

        .selected-sub {
            background: #f2f2f2;
            padding: 3px 6px;
        }

        .selected-sub a {
            color: #0070c9;

        }

        .selected-sub a i {
            color: #000;
            margin-top: 5px;
        }

        .list-group-item span {
            border: solid #222;
            border-width: 0 1px 1px 0;
            display: inline;
            cursor: pointer;
            padding: 3px;
            position: absolute;
            left: 0;
            margin-top: 10px;
        }

        .list-group-item a.collapsed span {
            transform: rotate(40deg);
            -webkit-transform: rotate(40deg);
            transition: .3s transform ease-in-out;
        }

        #myList li {
            padding: 2px 8px;
        }

        #myList li a {
            display: block;
        }

        #myList li.selected {
            background-color: #f2f2f2;
        }

        .list-group-item a span {
            transform: rotate(-140deg);
            -webkit-transform: rotate(-140deg);
            transition: .3s transform ease-in-out;
        }

        @media (max-width: 770px) {
            img.is_sale_water_mark {
                right: 15px !important;
            }
        }
    </style>
    @include('partial.infinite_pagination.style')
@endsection
@section("content")
    <div class="text-center cta cta-4 border--bottom bg--dark">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="tabs-container" data-content-align="left">
                        <ul class="tabs nav">
                            <li><a href="{{route("tags",[$tag,'filter'=>"devices"])}}">
                                    <div class="tab__title text-center @if($filter == "devices") active @endif">
                                        <i class="ihouse-mac_comp_large block"></i>
                                        <span class="h5">اجهزة</span>
                                    </div>
                                </a>

                            </li>
                            <li><a href="{{route("tags",[$tag,'filter'=>"accessories"])}}">
                                    <div
                                        class="tab__title text-center @if($filter == "accessories" || $filter == null) active @endif">
                                        <i class="ihouse-mac_acc_large block"></i>
                                        <span class="h5">اكسسوارات</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
    </div>
    <section class="text-center mtb-20 ptb-20">
        <div class="container">
            @if($filter == "devices")
                <div class="row scrolling-pagination">
                    <div class="col-md-12">
                        <form id="order_form" class="form-horizontal margin-bottom-15" role="form">
                            <div class="form-group col-md-6">
                                <label for="inputType" class="col-md-2 control-label">ترتيب حسب</label>
                                <div class="col-md-7">
                                    <input type="hidden" name="filter" value="{{ $filter }}"/>
                                    <select name="order" class="orders" id="orderBy">
                                        <option value="created_at"
                                                @if(Request::get("order") == "created_at")selected="selected"@endif>
                                            تاريخ الاضافه
                                        </option>
                                        <option value="name"
                                                @if(Request::get("order") == "name")selected="selected"@endif>الاسم
                                        </option>
                                        <option value="price"
                                                @if(Request::get("order") == "price")selected="selected"@endif>السعر
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-12 col-lg-12">
                        @forelse($items->chunk(4) as $collection)
                            <div class="row accessories-items">
                                @foreach($collection as $item)
                                    <div class="col-md-3 text-center">
                                        <a href="{{ url($item->category->main_category->slug .'/'. $item->category->slug.'/'.$item->id.'?product='.$item->item_colors()->first()->code ) }}">
                                            @if($item->is_sale==true)
                                                <img src="{{url(asset('images/sale.png'))}}" class="is_sale_water_mark">
                                            @endif
                                            @if($item->badges()->where("is_active",1)->where("position","top-left")->first())
                                                <img
                                                    src="https://cdn.ihouse.ps/{{$item->badges()->where("position","top-left")->latest()->first()->image}}"
                                                    class="top_left_tag">
                                            @endif
                                            @if($item->badges()->where("is_active",1)->where("position","top-right")->first())
                                                <img
                                                    src="https://cdn.ihouse.ps/{{$item->badges()->where("position","top-right")->latest()->first()->image}}"
                                                    class="top_right_tag">
                                            @endif
                                            <div
                                                class="animated fadeInUp pricing boxed boxed--sm pricing-2 text-center">
                                                @if($item->item_colors->count()>0)
                                                    <div class="item-image image-column"
                                                         @if($item->badges()->where("position","bottom")->where("is_active",1)->first()) style="position: relative;" @endif>
                                                        <img @if($loop->index==0)  class="active"
                                                             @endif id="current-image-{{$item->id}}"
                                                             data-image="{{$item->item_colors()->first()->image}}"
                                                             src="{{url("https://cdn.ihouse.ps/{$item->item_colors()->first()->image_default}")}}"
                                                             alt="">
                                                        @if($item->badges()->where("position","bottom")->first())
                                                            <div class="bottom_tag"
                                                                 @if($item->badges()->where("position","bottom")->latest()->first()->background_color) style="background:{{$item->badges()->where("position","bottom")->latest()->first()->background_color}}" @endif>
                            <span
                                @if($item->badges()->where("position","bottom")->latest()->first()->font_color) style="color:{{$item->badges()->where("position","bottom")->latest()->first()->font_color}}" @endif>{{$item->badges()->where("position","bottom")->first()->title}}</span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="item-name" style="color:black;">
                                                        {{$item->nickname}}
                                                    </div>

                                                    <div class="item-prices">
                                                        @php $item = $item->updateDiscount($item, $item->category);  @endphp
                                                        <div>
                                                            @if($item->discountState || $item->discountPercentage)
                                                                <h6 class="col-md-12 unmarg--bottom" dir="rtl">
                                                                    <s>{{ number_format($item->price) }}</s> شيكل</h6>
                                                                <h6 class="col-md-12"
                                                                    dir="rtl">{{ number_format($item->totalPrice) }}
                                                                    شيكل</h6>
                                                            @else
                                                                <h6 class="col-md-12"
                                                                    dir="rtl">{{ number_format($item->price) }}
                                                                    شيكل</h6>

                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @empty
                            There is no items here ...
                        @endforelse
                    </div>
                    @include('partial.infinite_pagination.spinner')
                </div>
            @else
                @include('accessories.partial.accessories_filters_and_items')
            @endif
        </div>
    </section>

@endsection
@section("scripts")
    <script src="https://cdn.ihouse.ps/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#orderBy').on('change', function () {
                $('#order_form').submit();
            });
            $('.orders').select2({
                minimumResultsForSearch: -1
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $(function () {
                $('ul#myList').each(function () {
                    var $ul = $(this),
                        $lis = $ul.find('li:gt(4)'),
                        isExpanded = $ul.hasClass('expanded');
                    $lis[isExpanded ? 'show' : 'hide']();

                    if ($lis.length > 0) {
                        $ul
                            .append($('<li class="expand">' + (isExpanded ? 'اخفاء' : 'المزيد') + '</li>')
                                .click(function (event) {
                                    var isExpanded = $ul.hasClass('expanded');
                                    event.preventDefault();
                                    $(this).text(isExpanded ? 'المزيد' : 'اخفاء');
                                    $ul.toggleClass('expanded');
                                    $lis.toggle();
                                }));
                    }
                });
            });
        });

        $('#order').change(function (e) {
            var order = $(this).val();
            var url = UpdateQueryString("order", order);
            window.location.href = url;
        });

        function UpdateQueryString(key, value, url) {
            if (!url) url = window.location.href;
            var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
                hash;

            if (re.test(url)) {
                if (typeof value !== 'undefined' && value !== null)
                    return url.replace(re, '$1' + key + "=" + value + '$2$3');
                else {
                    hash = url.split('#');
                    url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
                    if (typeof hash[1] !== 'undefined' && hash[1] !== null)
                        url += '#' + hash[1];
                    return url;
                }
            } else {
                if (typeof value !== 'undefined' && value !== null) {
                    var separator = url.indexOf('?') !== -1 ? '&' : '?';
                    hash = url.split('#');
                    url = hash[0] + separator + key + '=' + value;
                    if (typeof hash[1] !== 'undefined' && hash[1] !== null)
                        url += '#' + hash[1];
                    return url;
                } else
                    return url;
            }
        }

    </script>
    @include('accessories.partial.accessories_script', ['baseRoute' => route('tags',$tag)])
    @include('partial.infinite_pagination.script')
@endsection