@extends("layout.app")
@section('styles')
    <style>
    .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%;
        /*top: 0;*/
        bottom: auto;
        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-prev,.owl-next{
        background: #819993!important;
        color: #FFFFFF!important;
    }
</style>

    <style>
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none; /* Safari */
            margin: 0; /* Remove default margin */
        }
        input[type="number"] {
            -moz-appearance: textfield; /* Firefox */
        }
        .select2-search__field{
        width: 170%!important;
        }
        .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
             padding: unset !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";
        }


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

        .popover {
            font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
            direction: rtl;
        }
    </style>
    <style>
        .item-specifications ul {
            margin-top: 0px !important;
        }

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

        .image-column {
            align-items: center;
        }
    </style>
    <style>
        .used-item {
            position: relative;
        }

        .pin-icon {
            /*color: #333333;*/
            position: absolute;
            top: -17px;
            left: 0;
            z-index: 10;
            font-size: 1.5em;
            /*transform: rotate(-20deg);*/
            /*text-shadow:1px 3px 2px white;*/
            color: #4a90e2;
            /*font-family: Tahoma, Arial, sans-serif;*/
            /*font-size: 13px;*/
            font-weight: 700;
        }
        .top_left_tag{
            /*top: 15%!important;*/
            width: 50px !important;
        }
    </style>
    @include('partial.infinite_pagination.style')
@endsection
@section("content")
    <div class="text-center">
        <div class="container">
            <div class="row mb-3">
                <div class="col-sm-12">
                    <h1 class="text-center">اجهزة مستعملة</h1>

                </div>
            </div>
            <hr>

            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="text-center">هل لديك منتج مستعمل
                                للبيع؟</h4>
                            <a class="btn-block btn btn--primary " href="{{route("customers.create-used-item")}}">
                                قم بعرض منتجك هنا
                            </a>
                        </div>

                        <div class="col-md-6">

                            <h4 class="text-center" style="{{$agent->isMobile()?'margin-top: 15px;margin-bottom: 15px;':''}}">تنبيه عند توفر الأجهزة؟</h4>

                            <a href="#" data-toggle="modal" data-target="#order-modal" data-title="تنبيه عند التوفر"
                               class="modal-btn btn-block btn btn--primary">
                                <span class="btn__text">
                                   <i class="fas fa-bell fa-2x" style="color:#fff;font-size:18px"></i> تنبيه عند التوفر
                                </span>
                            </a>
                        </div>
                        <!--end of row-->
                    </div>
                </div>
            </div>


            <div class="modal fade" id="order-modal" data-keyboard="false" tabindex="-1"
                 aria-labelledby="staticBackdropLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title" id="modalLabel">تنبيه عند التوفر</h3>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        {{--                            @include("customers.messages")--}}
                        <div class="modal-body text-right">
                            <form id="notify-form" method="post">
                                <span class="alert alert-warning" id="alert_more_one" style="display: none;color: rgb(90 71 10) !important; background-color: rgb(255 218 103) !important;">
                                    <strong>يرجى الانتباه الى انه ستصلك رسالة واحدة فقط عند توفر اول موديل، ولن تصلك بعدها رسائل اخرى. اذا اردت مواصلة التنبيه يرجى التسجيل بعدها مرة اخرى.</strong>
                                </span>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="name">الاسم</label>
                                        <input id="name" type="text" name="name"
                                               value="{{ old('name')}}"
                                               placeholder="الاسم">
                                        <span class="text-danger error-text name_error"></span>
                                    </div>

                                    <div class="col-md-6">
                                        <label>المحمول</label>
                                        <input type="text" inputmode="numeric"
                                               name="mobile" class="mobile" style="width: 100%;"
                                               id='mobile-number'
                                               value="{{old('mobile')}}"
                                               style="font-size: 10px;"
                                               placeholder="05XXXXXXXX"
                                               maxlength="10"
                                        >
                                        <span class="text-danger error-text mobile_error"></span>

                                    </div>
                                </div>

                                <div class="row">
                                    <!-- First Column -->
                                    <div class="col">
                                        <label>الفئة الرئيسيه</label>
                                        {{Form::select("main_categories",IHouse::used_items_categories(),null,["id"=>"categories",'placeholder'=>'اختر الفئة','class'=>'select-has-placeholder' ,'style'=>'border: 1px solid #ececec!important;     height: max-content;'])}}
                                        <span class="text-danger error-text main_categories_error"></span>

                                    </div>
                                </div>
                                <div class="row" style="display: none" id="cat_id">
                                    <!-- Second Column -->
                                    <div class="col" >
                                        <label>الفئة الفرعية</label>
                                        {{Form::select("category_id",[],null,["id"=>"sub_categories",'multiple'=>"multiple" ,'class'=>' js-example-basic-multiple'])}}
                                        <span class="text-danger error-text category_id_error"></span>
                                    </div>
                                </div>


                                <!--/span-->


                                <label style="margin:0px;display: none"
                                       class="text-success text-center h5 notification-alert"></label>

                                <div id="success-alert" class="alert alert-success" style="display:none">
                                    <div class="alert__body">
                                        <span dir="rtl" id="success-response-msg">  </span>
                                    </div>
                                    <div class="alert__close">
                                        ×
                                    </div>
                                </div>
                                <div id="error-alert" class="alert alert-danger" style="display:none">
                                    <div class="alert__body">
                                        <span dir="rtl" id="error-response-msg">  </span>
                                    </div>
                                    <div class="alert__close">
                                        ×
                                    </div>
                                </div>
                                <button type="button" class="btn btn--primary send-stock-alert-btn mt-5"
                                        style="padding: 5px 10px 5px 10px;font-size: 10px;margin: 0px;">&nbsp;<i
                                        id="icon-loading" style="color:#fff;display:none"
                                        class="fas fa-spinner fa-spin"></i>
                                    ارسال
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-12">
                        <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 class="col-md-6">
                                            <div class="my-2" style="display:flex;">
                                                <div class="input-checkbox">
                                                    <input id="checkbox"
                                                           {{ request()->get('available_only') ? 'checked' : '' }}
                                                           value="1" type="checkbox" name="available_only"
                                                    />
                                                    <label for="checkbox"></label>
                                                </div>
                                                <h4 class="text-center" style=" margin-right: 10px;">اظهار المتوفر فقط</h4>
                                            </div>

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

                            </form>

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

            <div class="row">
                <div id="initScroll">
                    <div class="scrolling-pagination">
                        <div class="row justify-content-center accessories-items">
                            @foreach($items as $item)
                                @php
                                    $badges = $item->badges()->where("is_active", 1)->get();
                                    $badgeTopLeft = $badges->where("position", "top-left")->first();
                                    $badgeBottom = $badges->where("position", "bottom")->sortByDesc('created_at')->first();
                                    $badgeTopRight = $badges->where("position", "top-right")->sortByDesc('created_at')->first();
                                @endphp

                                <div class="col-md-3 col-12 text-center mt-5 used-item">
                                    <div class="card h-100 text-center">

                                        @if($item->is_pinned)
                                            <i class="fas pin-icon fa-thumbtack" title="Pinned"></i>
                                        @endif

                                        <div class="test" style="position: relative;{{$item->is_pinned ? 'border:3px solid #4a90e2' : ''}}">

                                            <img src="{{ $item->base_image ? url("https://cdn.ihouse.ps/$item->base_image") : $item->image }}" class="img-fluid">

                                            @if($badgeTopLeft)
                                                @if($badgeTopLeft->image)
                                                    <img src="https://cdn.ihouse.ps/{{$badgeTopLeft->image}}" class="lazy top_left_tag" alt="badge">
                                                @else
                                                    <div class="badge badge-top-left" style="background: {{$badgeTopLeft->background_color ?? 'transparent'}}; color: {{$badgeTopLeft->font_color ?? '#000'}};">
                                                        {{$badgeTopLeft->title}}
                                                    </div>
                                                @endif
                                            @endif

                                            @if($badgeTopRight)
                                                @if($badgeTopRight->image)
                                                    <img src="https://cdn.ihouse.ps/{{$badgeTopRight->image}}" class="lazy top_right_tag" alt="badge">
                                                @else
                                                    <div class="badge badge-top-right" style="background: {{$badgeTopRight->background_color ?? 'transparent'}}; color: {{$badgeTopRight->font_color ?? '#000'}};">
                                                        {{$badgeTopRight->title}}
                                                    </div>
                                                @endif
                                            @endif

                                            @if($badgeBottom)
                                                @if($badgeBottom->image)
{{--                                                    <img src="https://cdn.ihouse.ps/{{$badgeBottom->image}}" class="lazy bottom_tag" alt="badge" style="">--}}
{{--                                                @else--}}
                                                    <div class="bottom_tag_used" style="background: {{$badgeBottom->background_color ?? 'transparent'}}; color: {{$badgeBottom->font_color ?? '#000'}};">
                                                        {{$badgeBottom->title}}
                                                    </div>
                                                @endif
                                            @endif
                                        </div>

                                        <div class="card-body d-flex flex-column">
                                            <h4 class="product-title text-left" dir="ltr">
                                                @if($item->is_from_ihouse)
                                                    <i data-toggle="popover" data-content="تم فحص الجهاز في مشغل iHouse, أصل الجهاز مشترى من iHouse" class="fa fa-check-circle text-primary"></i>
                                                @else
                                                    <i data-toggle="popover" data-content="تم فحص الجهاز في مشغل iHouse" class="fa fa-check-circle text-default"></i>
                                                @endif
                                                {{$item->name}}
                                            </h4>

                                            <div class="item-specifications text-left" dir="ltr">
                                                <p>{!! nl2br($item->details) !!}</p>
                                            </div>

                                            <div class="item-prices mt-auto">
                                                <div>
                                                    @if($item->discountState)
                                                        <h5 class="col-md-12 unmarg--bottom" dir="rtl">
                                                            <s>{{ number_format($item->price) }}</s> شيكل
                                                        </h5>
                                                        <h4 class="col-md-12 unmarg--bottom" dir="rtl">
                                                            {{ number_format($item->discount) }} شيكل
                                                        </h4>
                                                    @else
                                                        <h4 class="col-md-12 unmarg--bottom" dir="rtl">
                                                            {{ number_format($item->price) }} شيكل
                                                        </h4>
                                                    @endif
                                                    <h6 style="font-weight: normal;">
                                                        @if(optional(\App\Models\Settings::where("key", "show-used-items-vat")->first())->value == "yes")
                                                            غير شامل الضريبة
                                                        @else
                                                            &nbsp;
                                                        @endif
                                                    </h6>
                                                </div>
                                            </div>

                                            @if($item->stock == 0 || $item->status == "sold")
                                                <a href="#" disabled class="btn btn--primary-1 disabled">
                                                    <span class="btn__text">تم البيع</span>
                                                </a>
                                            @else
                                                <a href="{{ route("used-item", $item->id) }}" class="btn btn--primary-1 mt-auto">
                                                    <span class="btn__text">التفاصيل</span>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pagination">
                            {{ $items->links("vendor.pagination.default") }}
                        </div>
                    </div>
                </div>
                <div id="ajaxScroll"></div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <!-- Add these before the closing </body> tag of your HTML -->
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
    @include('admin.partials.get_sub_categories_script',['categoriesURL'=>route("get-categories")])
    @include('partial.placeholder_color_script')
    <script>
        $(function () {
            $('[data-toggle="popover"]').popover({
                // trigger: 'hover',
                placement: "auto"
            })
        })
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
                'placeholder':'اختر فئة او اكثر من الفئات الفرعيه',
                closeOnSelect: false,
            });

            function updateNumberOfSelectedValues() {
                var selectedValues = $('.js-example-basic-multiple').val();

                var numberOfSelectedValues = selectedValues ? selectedValues.length : 0;

                if( numberOfSelectedValues > 1 ){
                    $('#alert_more_one').css({'display':'block'})
                }else {
                    $('#alert_more_one').css({'display':'none'})
                }
            }

            $('.js-example-basic-multiple').on('change', function () {
                // Call the function to update the number of selected values
                updateNumberOfSelectedValues();
            });
            updateNumberOfSelectedValues();
        });
    </script>
    @include('partial.infinite_pagination.script')
    <script>
        $('.send-stock-alert-btn').on('click', function () {
            $("#error-alert").slideUp();
            $("#success-alert").slideUp();

            $.ajax({
                cache: false,
                type: 'POST',
                url: '{{ route('send-alert-used-items') }}',
                dataType: 'json',
                data: {
                    mobile: $('#mobile-number').val(),
                    name: $('#name').val(),
                    main_categories: $('#categories').val(),
                    category_id: $('#sub_categories').val()
                }, beforeSend: function (data) {
                    $(document).find('span.error-text').text('')
                }, success: function (response) {
                    $('#success-response-msg').html(response.success)
                    $("#success-alert").slideDown();
                    $("#error-alert").slideUp();
                    $('#notify-form').find('input,select').prop("readonly", true);
                    $('.send-stock-alert-btn').hide();
                    setTimeout(function () {
                        location.reload();
                    }, 2000)
                },
                error: function (response) {
                    if (response.status === 422) {
                        let errors = $.parseJSON(response.responseText);
                        $.each(errors.errors, function (feild, message) {
                            $('span.' + feild + '_error').html(message[0]);
                        })
                    }
                    if (response.status === 400) {
                        $('#error-response-msg').html(response.responseJSON['error'])
                        $("#error-alert").slideDown();
                    }
                }
            })
        });
    </script>
    <script>
        $(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();
            });
            $('#orderBy').change(function () {
                serializeAndSubmitForm();
            });
            $('#checkbox').change(function () {
                serializeAndSubmitForm();
            });

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

                if (selectedCategoryCode) {
                    serializedData += '&category=' + selectedCategoryCode;
                }
                $.ajax({
                    async: true,
                    url: '{{route('used-items')}}',
                    type: 'GET',
                    data: serializedData,
                    cache: false,
                    success: function(response) {
                        $(document).remove('#initScroll')
                        $('#ajaxScroll').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
        });
        $(document).ready(function(){
            $('.accessory-slider').owlCarousel({


            });
        });

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

        var numberInput = document.getElementById('mobile-number');

        numberInput.addEventListener('input', function() {
            this.value = this.value.replace(/[^\d٠-٩]/g, '');

            if (this.value.length > 10) {
                this.value = this.value.slice(0, 10); // Truncate input to 10 characters
            }
        });
    </script>
@endsection