@extends("layout.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/css/select2.min.css" rel="stylesheet" type="text/css"
          media="all"/>

    <style>
        .color-choose {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

        .color-choose .col {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;

        }
        .color-choose.force-gap {
            gap: 17px !important;
        }


        .owl-carousel.owl-theme {
            display: flex !important;
            justify-content: center !important;
        }

        .owl-stage-outer {
            margin-right: 20px !important;
        }

        .owl-stage-outer .owl-stage div {
            margin-left: 10px !important;
        }

        .owl-nav button {
            font-size: 48px !important;
            position: absolute;
            top: 5%;
            /*transform: translateY(-50%);*/
            height: 50%;
            width: 30px;
            background-color: rgba(120, 120, 120, 0.3);
            border-radius: 4px;
        }

        .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
            padding: 10px !important;
        }

        .owl-nav button:first-child {
            right: -30px;
        }

        .owl-nav button:last-child {
            left: -40px;
        }

        .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
            padding: unset !important;
        }

        .owl-prev,.owl-next{
            background: #819993!important;
            color: #FFFFFF!important;
        }

        .owl-carousel.owl-theme {
            display: flex !important;
            justify-content: center !important;
            flex-direction: column;
        }

        i.is_pinned_water_mark {
            position: absolute !important;
            top: -18px;
            right: 5px;
            z-index: 10 !important;
            width: 48px !important;
            text-shadow: 1px 3px 2px #f5f0f0;
            /*background: #fd336d;*/
            /*font-size: medium;*/
            color: rgb(83, 100, 113);
            font-family: Tahoma, Arial, sans-serif;
            /*font-size: 13px;*/
            font-weight: 700;
        }

        .fa-thumbtack:before {
            content: "\f08d";
        }

        .owl-nav button:last-child {
            /*height: 25% !important;*/
            /*top: 20% !important;*/
        }

        .owl-nav button:first-child {
            /*height: 60% !important;*/
            /*top: 34% !important;*/
        }

        .carousel-item {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        [dir='rtl'] .slick-next {
            right: auto;
            left: -40px !important;
        }

        [dir='rtl'] .slick-prev {
            left: auto;
            right: -40px !important;
        }

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

        .btn--primary {
            color: #fff;
        }

    </style>

    <style>

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

        .popover {
            z-index: 99999 !important;
        }

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

        .accessories-grid .accessory-card {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 6px 20px rgba(23, 74, 102, 0.11), 0 1.5px 4px rgba(23, 74, 102, 0.07);
            padding: 18px 14px 10px 14px;
            margin: 12px 0;
            min-width: 210px;
            width: 100%;
            max-width: 270px;
            transition: box-shadow 0.25s, transform 0.18s;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .accessories-grid .accessory-card:hover {
            /*box-shadow: 0 12px 36px rgba(23,74,102,0.18), 0 3px 8px rgba(23,74,102,0.12);*/
            transform: translateY(-3px) scale(1.03);
        }
        .accessory-item img{
            justify-content: center;
            align-items: center;
            display: block;
        }
        .accessory-image-container {
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 8px;
            position: relative;
        }

        .accessory-image {
            max-width: 100%;
            max-height: 200px;
            object-fit: fill;
            transition: transform 0.18s;
        }

        .accessories-grid .accessory-card:hover .accessory-image {
            transform: scale(1.07) rotate(0deg);
        }

        .item-name {
            /*font-size: 18px;*/
            /*font-weight: 700;*/
            /*color: #174a66;*/
            /*margin: 6px 0;*/
            min-height: 32px;
            text-align: center;
        }


        .item-prices h6 {
            margin: 0;
            /*font-size: 16px;*/
        }

        @media (max-width: 991px) {
            .accessory-card {
                min-width: 180px;
                max-width: 230px;
                padding: 13px 8px;
            }

            .accessory-image-container {
                height: 120px;
            }
        }

        @media (max-width: 767px) {
            .accessories-grid .accessory-card {
                min-width: 120px;
                max-width: 99vw;
                padding: 9px 4px;
            }

            .item-name {
                font-size: 16px;
            }

            .item-prices h6 {
                font-size: 14px;
            }

            .accessory-image-container {
                height: 92px;
            }
        }

        .accessory-image-container {
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 8px;
            background-color: #fff;
        }

        .accessory-image {
            width: auto;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .item-cart {
            background: #fff;
            /*border-radius: 10px;*/
            padding: 3px;
        }

        .item {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }

        .item-box {
            flex: 0 0 calc(100% / 6 - 16px);
            max-width: calc(100% / 6 - 16px);
        }
        .tab_content{
            max-width: 90% !important;
        }
        @media (max-width: 1520px) {
            .tab_content{
                max-width: 84% !important;
            }
            .item-box {
                flex: 0 0 calc(100% / 4 - 16px);
                max-width: calc(100% / 4 - 16px);
            }
        }

        @media (max-width: 1085px) {
            .item-box {
                flex: 0 0 calc(100% / 3 - 16px);
                max-width: calc(100% / 3 - 16px);
            }
        }

        @media (max-width: 809px) {
            .item-box {
                flex: 0 0 calc(100% / 2 - 16px);
                max-width: calc(100% / 2 - 16px);
            }
        }

    </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 style="{{$filter=='devices'?'opacity: 1 !important':'opacity: 0.4 !important'}}">
                                <a href="{{route("sales",['filter'=>"devices"])}}">
                                    <div class="tab__title text-center">
                                        <i class="ihouse-mac_comp_large block"></i>
                                        <span class="h5">اجهزة</span>
                                    </div>
                                </a>

                            </li>
                            <li style="{{$filter=='accessories'?'opacity: 1 !important':'opacity: 0.4 !important'}}">
                                <a href="{{route("sales",['filter'=>"accessories"])}}">
                                    <div
                                        class="tab__title text-center">
                                        <i class="ihouse-mac_acc_large block"></i>
                                        <span class="h5">اكسسوارات</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
    </div>
    @if($filter == "devices"||request('filter')=='devices')
        <div class="container">
            <div class="row mb-4">
                <div class="col">
                    <h1 class="text-center unmarg">تنزيلات وخصومات الاجهزة
                    </h1>
                </div>
            </div>
            <hr>

            <form id="filter-sale-form">
                <div class="container">
                    <form id="filter-used-item">
                        <div class="col" id="parentH">
                            <div class="row">
                                <div class="owl-carousel owl-theme">
                                    <div
                                        class="categoryCode feature boxed boxed--border border--round text-center"
                                        style="cursor: pointer"
                                        data-code="reset" id="reset-all">
                                        <img
                                            src="{{$agent->isMobile()?asset('images/AllIcon.svg'):asset('images/AllIcon.svg')}}"
                                            class="image-icon-block">

                                        <span style="white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;"
                                              class="h5 color--primary">الجميع</span>
                                    </div>
                                    @foreach(\App\facades\IHouseFacade::geActiveParentsCategories() as $category)
                                        <div style="cursor: pointer"
                                             data-code="{{$category->id}}" id="category-{{$category->id}}"
                                             class="categoryCode 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 style="white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;"
                                                  class="h5 color--primary">{{$category->title}}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    {{ Form::select('order_by', [ 'default' => 'اختر طريقة الترتيب', 'date_oldest' => 'من الاقدم للاحدث', 'date_newest' => 'من الاحدث للاقدم', 'price_low_to_high' => 'من الاقل سعرا الى الاعلى', 'price_high_to_low' => 'من الاعلى سعرا للاقل' ], request()->get('order_by'),['id'=>'orderBy'])}}
                                </div>
                            </div>
                        </div>

                    </form>

                </div>
                <input type="hidden" name="filter" value="{{ $filter }}">
            </form>
        </div>
        <div class="container tab_content tab__content" >
            <hr class="mt-4">

            <div id="ajaxScrollSale"></div>

            <div id="initScroll">
                <div class="scrolling-pagination">
                    <div class="item row  accessories-items" style="justify-content: center">
                        @forelse($items as $loopIndex => $item)
                            @php
                                $selectedColor = $item->selectedColor ?? null;
                                $itemColorsSorted = $item->itemColorsSorted ?? collect();
                                $topLeftBadge = $item->badges_by_position['top-left'] ?? null;
                                $topRightBadge = $item->badges_by_position['top-right'] ?? null;
                                $bottomBadge = $item->badges_by_position['bottom'] ?? null;
                                $productUrl = url($item->category->main_category->slug . '/' . $item->category->slug . '/' . $item->id);
                            @endphp
                            @if($selectedColor)
                                <div class="mb-4 item-box" >
                                    <div class="text-center item-cart card h-100 border-0 "
                                         data-item-id="{{ $item->id }}"
                                         data-main-category="{{ $item->category->main_category->slug }}"
                                         data-sub-category="{{ $item->category->slug }}">
                                        <div
                                            class="text-center card h-100 border-0 d-flex flex-column justify-content-between">
                                            <div class="image-column card-img-top position-relative">
                                                <div class="accessory-image-container">
                                                    <a href="{{ $productUrl }}?product={{ $selectedColor->code ?? '' }}"
                                                       id="image-link-{{ $item->id }}" style="height: 100%">
                                                        @if($itemColorsSorted->isNotEmpty())
                                                            <img class="active" id="current-image-{{$item->id}}"
                                                                 data-image="{{$selectedColor->image_default}}"
                                                                 src="https://cdn.ihouse.ps/{{$selectedColor->image_default}}"
                                                                 alt="" style="height: 100%;object-fit: scale-down">
                                                            @foreach($item->item_colors as $color)
                                                                <img style="display:none"
                                                                     id="image-selector-{{$item->id}}-{{$color->color->id}}"
                                                                     src="https://cdn.ihouse.ps/{{$color->image_default}}">
                                                            @endforeach
                                                        @endif
                                                    </a>
                                                </div>

                                                @if($item->is_sale && (!$item->discount_to || $item->discount_to < today()))
                                                    <img src="{{ url(asset('images/sale.png')) }}"
                                                         class="is_sale_water_mark">
                                                @endif
                                                @if($topLeftBadge)
                                                    <img src="https://cdn.ihouse.ps/{{ $topLeftBadge->image }}"
                                                         class="top_left_tag">
                                                @endif
                                                @if($topRightBadge)
                                                    <img src="https://cdn.ihouse.ps/{{ $topRightBadge->image }}"
                                                         class="top_right_tag">
                                                @endif
                                                @if($bottomBadge)
                                                    <div class="bottom_tag" @if($bottomBadge->background_color) style="background:{{$bottomBadge->background_color}}" @endif>
                                                        <span @if($bottomBadge->font_color) style="color:{{$bottomBadge->font_color}}" @endif>{{$bottomBadge->title}}</span>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="card-body d-flex flex-column justify-content-between p-2">

                                                <a href="{{ $productUrl }}?product={{ $selectedColor->code ?? '' }}"
                                                   class="item-link-{{ $item->id }}"
                                                   style="text-decoration: none; color: inherit; display: inline-block; width: 100%;">
                                                    <h4 class="item-title text-3-rows"
                                                        style="height: 4.2em">{{ $item->show_title }}</h4>
                                                </a>

                                                @if($itemColorsSorted->isNotEmpty())
                                                    <div class="product-color">
                                                        <p id="item_card"
                                                           class="render-color-code{{ $item->id }} m-0"
                                                           style="font-size: xx-small; color: #c6c5c5; display: flex; justify-content: flex-end;">
                                                            {{ $selectedColor->code ?? '-' }}
                                                        </p>

                                                        <div class="color-choose row no-gutters disabled">
                                                            @foreach($itemColorsSorted as $color)
                                                                <div class="col"
                                                                     data-item="{{ $item->id }}"
                                                                     data-stock-status="{{ $color->stock_status }}"
                                                                     data-special-order="{{ $item->is_special_order }}"
                                                                     data-color-preorder-quantity="{{ $color->preorder_quantity }}"
                                                                     data-color-quantity="{{ $color->quantity }}"
                                                                     data-color-code="{{ $color->code }}"
                                                                     data-image="{{ $item->id }}-{{ $color->color->id }}"
                                                                     data-item_color_id="{{ $color->id }}">
                                                                    <input
                                                                        {!! $color->quantity == 0 ? 'title="غير متوفر"' : '' !!}
                                                                        style="display: block; margin: 0 auto; background:{{ $color->quantity == 0 ? 'repeating-linear-gradient(45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.3) 3px, rgba(0,0,0,0.3) 7px),' . $color->color->color : $color->color->color }}"
                                                                        class="color-chooser {{ $color->quantity == 0 ? 'disabled' : '' }}"
                                                                        type="radio"
                                                                        id="{{ $color->color->id }}"
                                                                        name="color-{{ $item->id }}"
                                                                        value="{{ $color->color->id }}"
                                                                        @if($selectedColor->id == $color->id) checked @endif>
                                                                    <label class="text-center color-label"
                                                                           for="{{ $color->color->color }}">
                                                                        {{ $color->color->name }}
                                                                    </label>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif

                                                <div class="mt-auto">
                                                    @if($item->can_laser)
                                                        <div><h6 style="color:#9c9c9c"><i class="fa fa-font"></i>
                                                                إمكانية الحفر بالليزر</h6></div>
                                                    @endif

                                                    <div class="item-prices">
                                                        @if($item->discountState || $item->discountPercentage)
                                                            <h5 class="unmarg--bottom" dir="rtl">
                                                                <s>{{ number_format($item->price) }}</s> شيكل</h5>
                                                            <h4 class="unmarg--bottom"
                                                                dir="rtl">{{ number_format($item->totalPrice) }}
                                                                شيكل</h4>
                                                        @else
                                                            <h4 class="unmarg--bottom"
                                                                dir="rtl">{{ number_format($item->price) }}
                                                                شيكل</h4>
                                                        @endif
                                                    </div>

                                                    <form
                                                        action="{{ $productUrl }}?product={{ $selectedColor->code ?? '' }}"
                                                        method="get" style="margin-top: 3px!important;">
                                                        <input type="hidden" name="product"
                                                               value="{{ $selectedColor->code }}"
                                                               id="color-code-{{ $item->id }}">
                                                        <span class="stock h6 popover-item"
                                                              data-color_id="{{ $selectedColor->id }}"
                                                              data-item="{{ $item->id }}"
                                                              data-stock="{{ $selectedColor->quantity ?? 0 }}"
                                                              id="stock-color-{{ $item->id }}"
                                                              dir="rtl"
                                                              style="margin:0;margin-bottom:3px!important; {{ $selectedColor->quantity ? 'cursor:pointer' : '' }}">
                                                    <span
                                                        style="font-size: 13px;font-weight: bold;color:#{{ $selectedColor->quantity ? '8fda8f' : ($selectedColor->stock_status == 'coming-soon' && !$selectedColor->preorder_quantity ? '4b90e2' : ($item->is_special_order ? 'efa30c' : ($selectedColor->preorder_quantity > 0 ? '7138c7' : 'fa9393'))) }}">
                                                        <i class="fas {{ $selectedColor->quantity ? 'fa-check-circle' : ($selectedColor->stock_status == 'coming-soon' && !$selectedColor->preorder_quantity ? 'fa-hourglass-half' : ($item->is_special_order ? 'fa-check-square' : ($selectedColor->preorder_quantity > 0 ? 'fa-check-square' : 'fa-times-circle'))) }}"></i>
                                                        {{ $selectedColor->quantity ? 'متوفر' : ($selectedColor->stock_status == 'coming-soon' && !$selectedColor->preorder_quantity ? 'قريباً' : ($item->is_special_order ? 'طلب خاص' : ($selectedColor->preorder_quantity > 0 ? 'طلب مسبق' : 'غير متوفر'))) }}
                                                    </span>
                                                </span>
                                                        <button type="submit" class="btn btn--primary-1"
                                                                style="margin: 0!important;">
                                                    <span class="btn__text" id="stock-btn-{{ $item->id }}">
                                                        {{ $selectedColor->quantity || ($item->is_special_order && $selectedColor->stock_status != 'coming-soon') || $selectedColor->preorder_quantity > 0 ? 'للتفاصيل والطلب' : 'للتفاصيل والتنبيه عن التوفر' }}
                                                    </span>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @empty
                            <div class="no-items">لا يوجد عناصر حاليا ...</div>
                        @endforelse
                    </div>
                    <div class="pagination">
                        {{ $items->links("vendor.pagination.default") }}
                    </div>
                </div>
            </div>
        </div>

    @else

        <div class="container" style="max-width: 100%!important;">

            <div class="row mb-4">
                <div class="col">
                    <h1 class="text-center unmarg">تنزيلات وخصومات الاكسسوارات
                    </h1>
                </div>
            </div>
            <hr>

            @include('accessories.partial.accessories_filters_and_items')
        </div>
    @endif
@endsection
@section("scripts")
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
    <script src="https://cdn.ihouse.ps/js/select2.min.js"></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>
    <script>
        function initPopoverAndColors() {
            $(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,
                                });
                                $(`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');
                        }
                    });
                }
            });

            $(document).on('click', '.color-choose div', function (e) {

                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');
                // Begin dynamic URL update for links
                let mainCategory = $(`.item-cart[data-item-id='${Item}']`).data('main-category');
                let subCategory = $(`.item-cart[data-item-id='${Item}']`).data('sub-category');
                let dynamicUrl = `/${mainCategory}/${subCategory}/${Item}?product=${encodeURIComponent(ColorCode)}`;

                $(`#image-link-${Item}`).attr('href', dynamicUrl);
                $(`.item-link-${Item}`).attr('href', dynamicUrl);
                $(`form[action*="/${Item}"]`).attr('action', dynamicUrl);
                $(`#color-code-${Item}`).val(ColorCode);
                // End dynamic URL update for links

                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>');
                        }
                    }
                }
            });
        }

        $(document).ready(function () {
            initPopoverAndColors();
            fixColorsPerCard(5);
            fixBorders();

        });
    </script>


    <script>
        $(document).ready(function () {
            $(document).on('click', '#item_card', function (e) {
                var text = $(this).text().replace(/\s+/g, ''); // Remove all spaces
                copyToClipboard(text, e.pageX, e.pageY);
            });

            function copyToClipboard(text, x, y) {
                var tempInput = document.createElement('input');
                tempInput.style.position = 'absolute';
                tempInput.style.left = '-9999px';
                tempInput.value = text;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);

                showCopyPopup(x, y);
            }

            function showCopyPopup(x, y) {
                var popup = $('<div class="copy-popup">!...Copied</div>');
                $('body').append(popup);
                popup.css({
                    position: 'absolute',
                    top: y + 1 + 'px',
                    left: x + 1 + 'px',
                    background: 'rgba(168,168,168,0.76)',
                    color: 'white',
                    padding: '0.5px 5px',
                    borderRadius: '5px',
                    fontSize: '9px',
                    zIndex: 9999,
                    // boxShadow: '0px 2px 6px rgba(0,0,0,0.2)'
                }).fadeIn(100);

                setTimeout(function () {
                    popup.fadeOut(100, function () {
                        $(this).remove();
                    });
                }, 300);
            }
        });

    </script>

    <script>
        @if(request()->get('filter')=='devices'||request()->is('sales'))
        $(document).ready(function (e) {
            e.preventDefault
            var selectedCategoryCode = '';
            $('.categoryCode').click(function () {
                selectedCategoryCode = $(this).data('code');
                $('#parentH').closest('*').find('.categoryCode').each(function (x, v) {
                    var categoryCode = $(this).css('border', '1px solid #ececec'); // Example: getting data-code attribute
                });
                $(this).css('border', '1px solid #141414')
                $(this).css('border-radius', '7px')
                serializeAndSubmitForm();
                fixColorsPerCard(5);

            });
            $('#orderBy').change(function () {
                serializeAndSubmitForm();
                fixColorsPerCard(5);

            });
            $('#checkbox').change(function () {
                serializeAndSubmitForm();
            });

            function serializeAndSubmitForm() {
                $('#initScroll').css('display', 'none')
                var serializedData = $('#filter-sale-form').serialize();

                if (selectedCategoryCode) {
                    serializedData += '&category=' + selectedCategoryCode;
                }
                $.ajax({
                    async: true,
                    url: '{{route('sales')}}',
                    type: 'GET',
                    data: serializedData,
                    cache: false,
                    success: function (response) {
                        $(document).remove('#initScroll')
                        $('#ajaxScrollSale').html(response['html'])
                    }
                });
            }

            @if(request()->has('category')&&request('category')!=='reset')
            $(document).find('.categoryCode#category-' + {{request('category')}}).click()
            @else
            $(document).find('.categoryCode#reset-all').click()
            @endif
        });

        @endif

    </script>
    <script>
        $('.owl-carousel').owlCarousel({
            loop: false,
            nav: true,
            dots: true,
            rtl: true,
            // margin: 0,
            onInitialized: function () {
                showHideLeftRightArrowElement();
            },
            onChanged: function () {
                showHideLeftRightArrowElement();

            },
            responsive: {
                0: {
                    items: 4
                },
                600: {
                    items: 5
                },
                1000: {
                    items: 7
                }
            }

        });

        function showHideLeftRightArrowElement() {
            let leftArrowElement = $('.owl-nav button:first-child');
            let rightArrowElement = $('.owl-nav button:last-child');

            if (rightArrowElement.hasClass('disabled')) {
                rightArrowElement.addClass('d-none');
            } else {
                rightArrowElement.removeClass('d-none');
            }

            if (leftArrowElement.hasClass('disabled')) {
                leftArrowElement.addClass('d-none');
            } else {
                leftArrowElement.removeClass('d-none');
            }
        }


    </script>



    @include('partial.infinite_pagination.script')

    @include('accessories.partial.accessories_script', ['baseRoute' => route('sales')])

    <script>
        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;

                $container.addClass('force-gap');

                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 fixBorders() {
            var rows = [];
            var tolerance = 5;

            $('.item-box').each(function () {
                var $box = $(this);
                var top = $box[0].getBoundingClientRect().top;
                var found = false;

                $.each(rows, function (_, row) {
                    if (Math.abs(row.top - top) < tolerance) {
                        row.items.push($box);
                        found = true;
                        return false; // break
                    }
                });

                if (!found) {
                    rows.push({ top: top, items: [$box] });
                }
            });

            $('.item-box').css('border-left', '1px solid #e0e0e0');

            $.each(rows, function (_, row) {
                if (row.items.length > 0) {
                    var last = row.items[row.items.length - 1];
                    last.css('border-left', 'none');
                }
            });
        }

        $(document).ready(function () {
            fixBorders();
            fixColorsPerCard(5);

        });

        $(window).on('resize orientationchange', function () {
            fixBorders();
        });
    </script>
@endsection