@extends("layout.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/css/select2.min.css" rel="stylesheet" type="text/css"
          media="all"/>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.2.3/dist/select2-bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    <style>
        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            color: #000;
            background-color: #f4f4f4;
        }

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

        .btn-group .btn:first-child:nth-last-child(2), .btn-group .btn:last-child:nth-child(2) {
            width: auto;
        }

        .accessory_category {
            padding-left: 0px;
            padding-right: 0px;
            width: 13%;
        }

        .spec > ul {
            list-style: outside;
        }

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

        #stock_alert_when_available_btn {
            width: 100%;
        }

        .slides li, .slides li img {
            text-align: center;
            max-height: 500px;
        }

        .boxed {
            position: relative;
            overflow: hidden;
            padding: 1em;
            margin-top: 5px !important;
            margin-bottom: 5px !important;
        }

        .select2-container--bootstrap4 .select2-results__option--group:not(:first-child):before {
            border-bottom: 0 solid #333333 !important;
            border-top: 0 solid #333333 !important;
            text-align: right;
        }

        .select2-container--bootstrap4 .select2-results__option {
            border-bottom: 0 solid #333333 !important;
            text-align: right;
        }
        .top_left_tag{
            top: 0%!important;
            width: 50px !important;
            left: 0%!important;
        }
        .is_sale_water_mark{
            width: 50px !important;
            right: unset!important;
        }
        .bottom_tag{
            width: 100% !important;
            bottom: -12px!important;
        }
    </style>
@endsection
@section("content")
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-md-5 item-details">
                    <div class="slider border--round boxed--border" data-paging="true" data-arrows="true" id="sticky">
                        @php
                            $hasImageListing = optional($accessory_color)->image_listing;
                            $hasImageDefault = optional($accessory_color)->image_default;

                            $bottomBadge = $accessory->badges()->where("position", "bottom")->where("is_active", 1)->latest()->first();
                            $topLeftBadge = $accessory->badges()->where("position", "top-left")->where("is_active", 1)->latest()->first();
                            $topRightBadge = $accessory->badges()->where("position", "top-right")->where("is_active", 1)->latest()->first();
                        @endphp

                        <ul class="slides">
                            @if($hasImageDefault || $hasImageListing)
                                @foreach([$hasImageDefault, $hasImageListing] as $imageFile)
                                    @if($imageFile)
                                        <li style="position: relative;">
                                            @if(\App\facades\IHouseFacade::isRunningSale($accessory))
                                                <img src="{{ 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
                                            <a href="{{ url("https://cdn.ihouse.ps/{$imageFile}") }}" data-lightbox="gallery">
                                                <img alt="{{ $accessory->name }}" src="{{ url("https://cdn.ihouse.ps/{$imageFile}") }}"/>
                                            </a>
                                            @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
                                        </li>
                                    @endif
                                @endforeach
                            @else
                                <li style="position: relative;">
                                    @if(\App\facades\IHouseFacade::isRunningSale($accessory))
                                        <img src="{{ 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
                                    <a href="{{ $accessory->image }}" data-lightbox="gallery">
                                        <img alt="{{ $accessory->name }}" src="{{ $accessory->image }}"/>
                                    </a>
                                    @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
                                </li>
                            @endif

                            @foreach($accessory->accessory_images()->when(!$hasImageListing,function($query){
                                $query->where("is_base",0);
                            })->orderBy("order","asc")->get() as $image)
                                @if($image->with_colors && !in_array(optional($accessory_color)->color_id, $image->with_colors))
                                    @continue
                                @endif
                                <li>
                                    <a href="{{ url("https://cdn.ihouse.ps/{$image->file}") }}" data-lightbox="gallery">
                                        <img alt="{{ $accessory->name }}" src="{{ url("https://cdn.ihouse.ps/{$image->file}") }}"/>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <div>
                            @php
                                $item_colors_sorted =
                                    $accessory
                                        ->colors
                                        ->where("is_hidden",0)
                                        ->sortBy(function($q) {
                                            return $q->color->order;
                                        });

                                $selected_color = $accessory_color;
                            @endphp

                            @if(count($item_colors_sorted) > 0)
                                <div class="product-color text-center mt-50px">
                                   <span style="color:#009300;text-align:center">
                                     @if(count($item_colors_sorted) != 1)
                                           اختر اللون لفحص التوفر
                                       @endif
                                    </span>
                                    <div class="clear"></div>
                                    <div
                                        class="color-choose row no-gutters text-center">
                                        @foreach($item_colors_sorted as $color)
                                            <div class="col"
                                                 style="padding-right: 10px; padding-left: 10px; @if(!$color->color->is_published) display:none; @endif"
                                                 data-item="{{$accessory->id}}"
                                                 data-color-quantity="{{$color->quantity}}"
                                                 data-color-code="{{$color->code}}"
                                                 data-image="{{$accessory->id}}-{{$color->color->id}}">
                                                <input
                                                    @if($selected_color && $color && $color->code==$selected_color->code) checked
                                                    @endif
                                                    {!!$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-accessory-chooser {!!$color->quantity==0?"disabled":""!!}"
                                                    data-color-code="{{$color->code}}" type="radio"
                                                    id="{{$color->color->id}}" name="color-{{$accessory->id}}"
                                                    value="{{$color->color->id}}">
                                                <label
                                                    {!!$color->quantity==0?'title="غير متوفر"':""!!}  class="text-center color-label"
                                                    for="{{$color->color->color}}">
                                                    {{$color->color->name}}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div style="clear:both"></div>
                                </div>

                            @endif

                        </div>
                    </div>
                </div>
                @if(request()->get("debug"))
                    <input type="text" value="{{ str_replace("images/","", $accessory->image) }}">

                    @foreach($accessory->accessory_images()->where("is_base",0)->orderBy("order","asc")->get() as $image)
                        <input type="text" value="{{ str_replace("images/","",$image->name) }}">
                    @endforeach
                @endif
                <div class="col-sm-7 col-md-7 item-details text-left">
                    <h2>
                        {{$accessory->name}}
                        @if($accessory_color && $accessory_color->color->is_published)
                            - {{$accessory_color->color->name}}
                        @endif
                    </h2>
                    <h6 class="text-right">
                        الموديل:
                        {{$accessory_color ? $accessory_color->code : $accessory->code}}
                    </h6>


                    <div dir="ltr" class="spec text-left">
                        {!! $accessory->specifications !!}
                    </div>

                    @if($accessory->brand)
                        <h4 class="text-right" style=" margin-bottom: 1rem">الشركة المصنعة</h4>
                        <div class="row mt-20px">
                            <div class="text-right col-md-3">
                                <a href="{{route("accessories-listing",['brand' => $accessory->brand->id])}}"
                                   class="block">
                                    <div class="feature boxed boxed--border border--round text-center">
                                        <img
                                            src="{{url("https://cdn.ihouse.ps/{$accessory->brand->logo}")}}"
                                            class="image-icon-block">
                                        <span class="h5 color--primary">{{$accessory->brand->name}}</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endif
                    <br>
                    @if(($accCategories = IHouse::getAccessoryCategories($accessory))->isNotEmpty())
                        <div>
                            <div class="text-right">
                                <h4 class="text-right" style=" margin-bottom: 1rem">الاقسام</h4>

                                <div class="text-right row">
                                    @foreach($accCategories as $category)
                                        <div class="col-md-3 col-lg-3 col-6">
                                            <a href="{{route("accessories-listing",['accessory-category' => $category->slug])}}"
                                               class="block">
                                                <div class="feature boxed boxed--border border--round text-center">
                                                    {!! $category->image !!}
                                                    <span class="h5 color--primary">{{$category->title}}</span>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif

                    @if(($specsByCategory = $accessory->specifications()->get()->groupBy('spec_category_id'))->isNotEmpty())
                        <br>
                        <h4 class="unmarg--bottom text-right">متوافق مع موديلات</h4>

                        @php
                            $categories = IHouse::getAllCompatibleWith($accessory);
                            $mainCategories = collect($categories)->groupBy('category_id');
                        @endphp

                        @foreach($mainCategories as $mainCategoryId => $subCategories)
                            @php
                                $categorySpecifications = IHouse::getAccessorySpecifications(\App\Models\Category::find($mainCategoryId));
                            @endphp

                            <div>
                                <div class="text-right row">
                                    @foreach($subCategories as $subCategory)
                                        <div class="col-md-3 col-lg-3 col-6">
                                            <a href="{{route("accessories-listing",['category' => $subCategory->slug])}}"
                                               class="block">
                                                <div class="feature boxed boxed--border border--round text-center">
                                                    @if($subCategory->black_image)
                                                        <img
                                                            src="{{url("https://cdn.ihouse.ps/$subCategory->black_image")}}"
                                                            class="image-icon-block">
                                                    @else
                                                        <i class="ihouse-{{$subCategory->icon}} block"
                                                           style="color:#919191;"></i>
                                                    @endif
                                                    <span class="h5 color--primary">{{$subCategory->title}}</span>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            @foreach($categorySpecifications as $key => $specs)
                                @php
                                    $selectedSpecs = IHouse::getAccessorySpecificationsIds($accessory, $key);
                                @endphp
                                <div class="text-right accessory-items-specs">
                                    <div class="row mt-10px">
                                        <div class="col-md-3">
                                            <h4>{{ $specs->first()->sc_title }}</h4>
                                        </div>
                                        <div class="col-md-9">
                                            @foreach($specs as $spec)
                                                @if(! in_array($spec->id, $selectedSpecs))
                                                    @continue
                                                @endif

                                                <h4 class="d-inline-block">
                                                    <span class="badge badge-dark p-1">{{$spec->nickname}}</span>
                                                </h4>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <hr/>
                        @endforeach
                    @elseif($categories=IHouse::getAllCompatibleWith($accessory))
                        <div>
                            <br>
                            <h4 class="unmarg--bottom text-right">متوافق مع موديلات</h4>
                            <div class="text-right row">
                                @foreach($categories as $category)
                                    <div class="col-md-3 col-lg-3 col-6">
                                        <a href="{{route("accessories-listing",['category' => $category->slug])}}"
                                           class="block">
                                            <div class="feature boxed boxed--border border--round text-center">
                                                @if($category->black_image)
                                                    <img
                                                        src="{{url("https://cdn.ihouse.ps/$category->black_image")}}"
                                                        class="image-icon-block">
                                                @else
                                                    <i class="ihouse-{{$category->icon}} block"
                                                       style="color:#919191;"></i>
                                                @endif
                                                <span class="h5 color--primary">{{$category->title}}</span>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            @if($accessory->available_items->count() > 0)
                <div class="row" style="margin-top:4rem; margin-bottom: 1rem">
                    <div class="col-md-12">
                        <h3 class="text-right unmarg--bottom">اجهزة مقترحة</h3>
                    </div>
                </div>
                <div class="row">
                    @foreach($accessory->available_items as $item)
                        <div class="col-md-2 col-lg-2 col-6 text-center">
                            <a href="{{ url($item->category->main_category->slug .'/'. $item->category->slug.'/'.$item->id.'?product='.$item->item_colors()->first()->code ) }}">
                                <div class="animated fadeInUp pricing boxed boxed--sm pricing-2 text-center">
                                    @if($item->item_colors->count()>0)
                                        <div class="item-image">
                                            <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="">
                                        </div>
                                        <div class="item-name" style="color:black;">
                                            {{$item->nickname}}
                                            @php $upgrades = $item->upgrades()->where("is_base",1)->get(); @endphp
                                            @if($upgrades)
                                                @foreach($upgrades as $upgrade)
                                                    {{$upgrade->short_title}}
                                                @endforeach
                                            @endif
                                        </div>
                                        @if($item->can_laser)
                                            <div>
                                                <h6 class="text-dark" style="color:#9c9c9c"><i class="fa fa-font"></i>
                                                    إمكانية الحفر بالليزر</h6>
                                            </div>
                                        @endif
                                        <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>
            @endif

            @if($similar_accessories->count())
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-right">اكسسوارات مشابهه</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="slider">
                            <div class="accessory-slider owl-carousel owl-theme">
                                @foreach($similar_accessories as $similar_accessory)
                                    @include("components.accessory",["accessory"=>$similar_accessory, 'thumbnailIsAutoHeight' => true])
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection
@section("scripts")
    @include('accessories.partial.accessories_script')
    @include('partial.send_notification_partial')

    <script src="https://cdn.ihouse.ps/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.town').select2({
                theme: 'bootstrap4'
            });
        });
    </script>
    <script>
        $('.color-accessory-chooser').on('change', function () {
            id = $('.color-accessory-chooser:checked').data("color-code");
            var url = updateQueryStringParameter("{{request()->fullUrl()}}", "product", id);
            window.location.replace(url);
        });

        function update_delivery() {
            var months = $("#months").val();
            var total = $("#total-price-value").val();
            $.ajax({
                url: "{{route("calculate-payments")}}",
                type: "POST",
                data: {
                    months: months,
                    total: total,
                    with_payments: true
                },
                traditional: true,
                beforeSend: function () {
                    $('#total_loading').html('<i class="fa fa-circle-refresh fa-spin"></i>');
                },
                success: function (result) {
                    $("#total-money").text(result.total_payment_price);
                    $("#monthly-payment").text(result.payment);
                    $("#total-price-final-money").show();
                    $("#total-price-final").hide();
                },
                error: function () {
                }
            });
        }

        $(".input-number").click(function () {
            update_delivery();
        });
        $('input:radio[name=payments]').on('change', function () {
            update_delivery();

        });

        $("#months").change(function () {
            update_delivery();
        });

        $(document).ready(function () {
            let selectedColorCode = '{{ $selected_color['code'] ?? '' }}';

            if (selectedColorCode) {
                $('.color-accessory-chooser').each(function () {
                    if ($(this).data('color-code') == selectedColorCode) {
                        $(this).addClass('color-selected');
                    }
                });
            }
            update_delivery();
            var oldPriceBeforeDiscount = {{ $accessory->price }};
            var oldPrice = {{ $accessory->totalPrice }};
            var upgrades = [];
            // updatePriceWithOptions(false, false);
            $('#with-delivery').change(function () {
                $('#delivery-div').fadeToggle();
                $('#delivery-note-div').fadeToggle();
                if ((parseInt($('#originalPrice').val()) <= {{\App\Models\Settings::where("key",'payments_min')->first()->value}}) || parseInt($('#lastPrice').val() <= {{\App\Models\Settings::where("key",'payments_min')->first()->value}})) {
                    $('#with-payments').attr('disabled', true);
                } else {
                    $('.checkbox-desc').toggleClass("checkbox-disabled-desc");
                    $('#with-payments').prop("checked", false);
                    $('#with-payments').prop("disabled", $("#with-delivery").is(':checked'));
                }
                updatePriceWithOptions($('#with-payments').is(':checked'), $('#with-delivery').is(':checked'));
            });

            $('#with-payments').change(function () {
                if ((parseInt($('#originalPrice').val()) <= {{\App\Models\Settings::where("key",'payments_min')->first()->value}})) {
                    $('#warning-text').fadeToggle('fast');
                    return false;
                }
                $("#payments-months").trigger("input");
                $('#with-delivery').prop("checked", false);
                $('.delivery-checkbox-desc').toggleClass("checkbox-disabled-desc");
                $('#with-delivery').prop("disabled", $("#with-payments").is(':checked'));
                $('#delivery-note-div').fadeOut();
                $('#delivery-div').fadeOut();
                $('#payments-div').fadeToggle();
            });
            $("#payments-months").on("input", function () {
                if ($('#with-payments').is(':checked')) {
                    $('#discountBeforePaymentsChecked').val(oldPrice);
                    $('#priceBeforePaymentsChecked').val(oldPriceBeforeDiscount);
                }
                if (!$("#payments-months").val() || $("#payments-months").val() > 36) {
                    $("#payments-months").val(12);
                }
                updatePriceWithOptions($('#with-payments').is(':checked'), $('#with-delivery').is(':checked'));

            });

            function updatePriceWithOptions(is_payment, is_delivery) {
                var upgradesTotal = 0;
                $.each(upgrades, function () {
                    upgradesTotal += this;
                });
                $.ajax({
                    url: "{{route("update_price")}}",
                    type: "POST",
                    data: {
                        discountState: {{ json_encode($accessory->discountState) }},
                        originalPrice: parseInt($('#originalPrice').val()),
                        lastPrice: parseInt($('#originalDiscount').val()),
                        is_sale: $('#is_sale_input').val(),
                        originalPriceBeforePayments: parseInt($('#discountBeforePaymentsChecked').val()),
                        lastPriceBeforePayments: parseInt($('#priceBeforePaymentsChecked').val()),
                        percentageText: {{json_encode($accessory->discountPercentage)}},
                        upgradesTotal: upgradesTotal,
                        is_delivery: is_delivery,
                        is_payment: is_payment,
                        months: $("#payments-months").val(),
                        with_payments: $('#with-payments').is(':checked'),
                        quantityTextStatic: $('#quantityTextStatic').val(),
                    },
                    traditional: true,
                    beforeSend: function () {
                        $('#total_loading').html('<i class="fa fa-circle-refresh fa-spin"></i>');
                    },
                    success: function (result) {
                        if (result.is_sale) {
                            if (result.with_payments) {
                                $("#price s").html((result.total_payment_price).toLocaleString() + 'شيكل ');
                            } else {
                                $('#price s').html(result.originalPrice.toLocaleString() + 'شيكل ');
                            }
                            $('#price_before_discount_input').val(result.originalPrice);
                        }
                        var deliveryText = (result.deliveryPrice == 0) ? "مجانا" : "{{\App\Models\Settings::where("key",'delivery_price')->first()->value}}"
                        $('#delivery-price').html(deliveryText);
                        $("#payment-price").html(result.payment);
                        $('#total_loading').html('');
                        $('#quantityText').html(result.quantityText);
                        if (result.with_payments) {
                            $("#total-price").html(result.payment_discount);
                            $("#total-price-value").val(result.total_payment_discount);
                        } else {
                            $("#total-price").html(result.lastPrice.toLocaleString());
                            $("#total-price-value").val(result.lastPrice);
                        }
                    },
                    error: function () {
                    }
                });

            }

        });
    </script>
    <script src="https://cdn.ihouse.ps/js/jquery-magnet.js"></script>

    <script>
        $(function () {
            $("#sticky").stick_in_parent({
                offset_top: 60
            });
        });

    </script>
    <script type="text/javascript">

        jQuery(document).ready(function () {
            jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        });

        function getSendNotificationData() {
            let name = $('#name').val();
            let mobile = $('#mobile-number').val();
            let address = $('#address').val();
            let town = $('#town').val();
            let is_alert_when = $(`[name='is_alert_when']`).val()
            return {
                address: address,
                name: name,
                mobile: mobile,
                town: town,
                item_name: "{{$accessory->name ." - ". ($accessory_color?$accessory_color->code:$accessory->code)}}",
                accessory: {{$accessory->id}},
                color: "{{ optional($accessory_color)->id??'' }}",
                is_alert_when: is_alert_when,
                encrypt_price: $('#totalPriceAfterDiscount').val()
            };
        }


        $("#add-to-cart").click(function (e) {
            $("#add-to-cart").prop("disabled", true);
            $(".add-cart-text").hide();
            $("#cart-icon-loading").show();

            $.ajax({
                dataType: "JSON",
                type: "POST",
                contentType: 'application/json',
                url: '{{ route("add-to-cart") }}',
                data: JSON.stringify({
                    accessory: {{$accessory->id}},
                    preorder: {{$accessory->preorder?"1":"0"}},
                    accessory_color_id: '{{optional($accessory_color)->id}}'
                }),
                success: function (data) {
                    window.location.replace("{{route("cart")}}");
                }
            });

        });


    </script>

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

        });

        function updateQueryStringParameter(uri, key, value) {
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = uri.indexOf('?') !== -1 ? "&" : "?";
            if (uri.match(re)) {
                return uri.replace(re, '$1' + key + "=" + value + '$2');
            } else {
                return uri + separator + key + "=" + value;
            }
        }
    </script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script>
        $(document).find(".one-slider").slick({
            adaptiveHeight: false,
            autoplay: true,
            rtl: true,
            dots: true,
            arrows: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
        });
        $(document).find('.nav-link').on('click',function (){

            $(document).find('button.slick-prev.slick-arrow').click()
            $(document).find('button.slick-prev.slick-arrow').click()

        })
    </script>

    <script>
        $("#demo").carousel({
            interval: 2000,
        });
    </script>
@endsection
@section("content-footer")
    <div class="modal fade" id="installments-modal" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">إحتساب التقسيط</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-right">
                    <div class="boxed boxed--lg">
                        <div class="col-md-12">
                            <h4> ما هو عدد الاشهر</h4>
                        </div>
                        <div class="col-md-12 text-center">
                            <div class="input-number">
                                <input id="months" type="number" name="months" placeholder="عدد الاشهر" value="12"
                                       min="1" max="36" class="form-control input-sm"/>
                                <div class="input-number__controls">
                                    <span class="input-number__increase"><i class="stack-up-open"></i></span>
                                    <span class="input-number__decrease"><i class="stack-down-open"></i></span>
                                </div>
                            </div>

                            <h5 dir="rtl"> القسط الشهري: <span id="monthly-payment"></span>₪</h5>
                            <h4 class="unmarg--bottom" dir="rtl"> المجموع قبل التقسيط: <span
                                    id="before-total-money">{{$accessory->totalPrice}}</span>₪</h4>
                            <h3 class="unmarg--bottom" dir="rtl"> المجموع بعد التقسيط: <span id="total-money"></span>₪
                            </h3>

                        </div>
                        <h2>طرق التقسيط</h2>
                        <hr class="short">
                        <p class="lead text-right">
                            {!! \App\Models\Settings::where("key",'payments_methods')->first()->value !!}
                        </p>

                    </div>

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

    @include('partial.direct_buy_modal')

    <div class="modal fade" id="delivery-conditions-modal" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">آلية التوصيل</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-right">
                    {!! \App\Models\Settings::where("key",'delivery_conditions')->first()->value !!}

                </div>
            </div>
        </div>
    </div>
    @if(optional($accessory_color) && $accessory_color)
        <div class="modal fade" id="warehouses-stock-modal" data-keyboard="false" tabindex="-1"
             aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">التوفر في الفروع </h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center">

                        <div class="row">
                            <div class="col-md-5 mb-3">
                                <ul class="nav nav-pills nav-fill flex-column" id="warehouses-tabs">
                                    @foreach(\App\facades\IHouseFacade::getWarehouses()  as $warehouse)
                                        @if($warehouse->type=='EXIST-BRANCH'||$warehouse->type=='ONLINE-BRANCH')
                                            <li class="nav-item text-right"
                                                style="{{$warehouse->type=='ONLINE-BRANCH'&&\App\facades\IHouseFacade::showHideOnlineBranchBasedStock($accessory_color->id,'accessory')?'display:none':''}};border-bottom: 1px solid #e0e4e4">
                                            <a class="nav-link @if($loop->index==0) active @endif"
                                               id="warehouse-{{$warehouse->code}}" data-toggle="tab"
                                               href="#warehouse-{{$warehouse->code}}-tab" role="tab"
                                               aria-controls="warehouse-{{$warehouse->code}}" aria-selected="true">
                                                {{$warehouse->title}}
                                                <br>
                                                <i class="fa fa-map-marker-alt"></i>&nbsp;{{$warehouse->short_address}}
                                                <br>
                                                @if($accessory_color->warehouse_accessory_color()->where("warehouse_id",$warehouse->id)->first() && $accessory_color->warehouse_accessory_color()->where("warehouse_id",$warehouse->id)->first()->stock>0)
                                                    <span class="text-success">متوفر </span>
                                                @else
                                                    <span class="text-danger">غير متوفر </span>
                                                @endif
                                            </a>
                                        </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                            <div class="col-md-7">
                                <div class="tab-content text-center" id="warehouses-tabs-content">
                                    @foreach($warehouses as $warehouse)
                                        @if($warehouse->type!='MAINTENANCE-BRANCH')
                                            <div class="tab-pane fade @if($loop->index==0) show active @endif"
                                             id="warehouse-{{$warehouse->code}}-tab" role="tabpanel"
                                             aria-labelledby="warehouse-{{$warehouse->code}}-tab">
                                            @if(!empty($warehouse->imageWarehouses))
                                                <section class="container-fluid p-0 m-0">
                                                    <div id="demo" class="carousel slide" data-ride="carousel">
                                                        <div class="carousel-inner">
                                                            @foreach($warehouse->imageWarehouses as $key=> $image)

                                                                <div
                                                                    class="carousel-item {{$loop->iteration==1?'active':""}}">
                                                                    <img style="height: fit-content"
                                                                         src="{{url('https://cdn.ihouse.ps/' . $image->file)}}"
                                                                         alt="{{$warehouse->title}}" width="1100"
                                                                         height="300">
                                                                </div>
                                                            @endforeach

                                                        </div>
                                                    </div>
                                                </section>
                                            @endif

                                            <div class="row mt-3">
                                                <div class="col-md-6">
                                                    {!!$warehouse->working_hours!!}
                                                    @if(!empty($warehouse->map))
                                                        <a class="btn btn-default no-underline"
                                                           href="{{$warehouse->map}}"
                                                           target="_blank"><i class="fa fa-map-marked-alt"></i> اظهار
                                                            على
                                                            الخارطة </a>
                                                    @endif
                                                    @if(!empty($warehouse->apple_map))
                                                        <a class="btn btn-default no-underline mt-2"
                                                           href="{{$warehouse->apple_map}}"
                                                           target="_blank"><i class="fa fa-map-marked-alt"></i> اظهار على موقع ابل</a>
                                                    @endif
                                                </div>
                                                <div class="col-md-6">
                                                    <h4 class="mb-2">{{$warehouse->title}}</h4>
                                                    {!!  $warehouse->address !!}
                                                    <label><strong>الهاتف:</strong> <span dir="ltr"><a
                                                                href="tel:{{$warehouse->phone}}">{{$warehouse->phone}}</a></span></label><br>
                                                    <label><strong>الرقم المجاني:</strong> <span dir="ltr"><a
                                                                href="tel:{{\App\Models\Settings::where("key",'tollfree')->first()->value}}">{{\App\Models\Settings::where("key",'tollfree')->first()->value}}</a></span></label><br>
                                                    <label><strong>الفاكس:</strong> <span
                                                            dir="ltr">{{\App\Models\Settings::where("key",'fax')->first()->value}}</span></label><br>
                                                    <label><strong>رقم الواتساب:</strong> <span dir="ltr"><a
                                                                target="_blank" dir="ltr"
                                                                href="https://wa.me/{{$warehouse->whatsapp}}">{{$warehouse->whatsapp}}</a></span></label>

                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <!-- /.col-md-8 -->
                        </div>


                    </div>
                </div>
            </div>
        </div>
    @endif
    <section class="container-fluid pb100" style="margin-bottom: 25px;">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="footer-helper text-right">
                        {!! \App\Models\Settings::where("key",'payments_conditions')->first()->value !!}
                        <p>- قد يختلف المخزون الفعلي من ناحية توفر التوريد عن الموقع، اخر تحديث للمخزون تم
                            في:{{$accessory->updated_at->format("d/m/Y H:i")}}</p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    @include("layout.footer")
    <div class="footer-padding-item" style="height: 100px"></div>
    @include("components.accessories.footer")


@endsection