@extends("layout.app")
@section('styles')
    <style>
        .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: -10px;
            left: 0;
            z-index: 10;
            font-size: 1.5em;
            transform: rotate(-20deg);
            text-shadow: 1px 3px 4px white;
        }
    </style>
    @include('partial.infinite_pagination.style')
@endsection
@section("content")
    <section class="text-center">
        <div class="container">
            <div class="row mb-3">
                <div class="col-sm-12">
                    <h1 class="text-center">اجهزة مستعملة</h1>

                </div>
            </div>
            <div class="row mb-4">
                <div class="col-md-8">
                    <div class="cta cta-1 cta--horizontal boxed boxed--border text-center-xs">
                        <div
                            class="row justify-content-center pt-lg-5 pt-md-5 pt-2 pr-lg-5 pr-md-5 pr-2 pl-lg-5 pl-md-5 pl-2 pb-lg-0 pb-md-0 pb-0 ">
                            <div class="col-lg-8">
                                <h4 class="text-center text-md-right text-xl-right mb-5">هل لديك منتج مستعمل للبيع
                                    للبيع؟</h4>
                            </div>

                            <div class="col-lg-4 text-center">
                                <a class="btn-block btn btn--primary " href="{{route("customers.create-used-item")}}">
                                    قم بعرض منتجك هنا
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div
                            class="row justify-content-center pb-lg-5 pb-md-5 pb-2 pr-lg-5 pr-md-5 pr-2 pl-lg-5 pl-md-5 pl-2 pt-lg-0 pt-md-0 pt-0  mt-sm-4 mt-0 mt-md-0 mt-lg-0 mt-md-4">
                            <div class="col-lg-8">
                                <h4 class="text-center text-md-right text-xl-right">تنبيه عند توفر الأجهزة؟</h4>
                            </div>

                            <div class="col-lg-4 text-center">
                                <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>
                        </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">
                                <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" name="mobile" class="mobile" style="width: 100%;"
                                               id='mobile-number'
                                               value="{{old('mobile')}}"
                                               style="font-size: 10px;"
                                               placeholder="05XXXXXXXX">
                                        <span class="text-danger error-text mobile_error"></span>

                                    </div>
                                </div>

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

                                        </div>
                                    </form>

                                    <div class="col-md-6">
                                        <label>الفئة الفرعية</label>
                                        {{Form::select("category_id",[],null,["id"=>"sub_categories"])}}
                                        <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"
                                        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>


            <div class="row">
                <div class="col-md-4" style="">
                    <form onchange="this.submit()">
                        {{ Form::select('order_by', [ '' => 'اختر طريقة الترتيب', 'date_oldest' => 'من الاقدم للاحدث', 'date_newest' => 'من الاحدث للاقدم', 'price_low_to_high' => 'من الاقل سعرا الى الاعلى', 'price_high_to_low' => 'من الاعلى سعرا للاقل' ], request()->get('order_by')) }}
                    </form>
                </div>
                <div class="col-md-4" style="">
                </div>
                <div class="col-md-4" style="">
                </div>
            </div>
            <div class="scrolling-pagination">
                <div class="row justify-content-center accessories-items">
                    @foreach($items as $item)
                        <div class="col-md-3 col-12 text-center mt-5 used-item">
                            <div class="card h-100 text-center">
                                @if($item->is_sale==true)
                                    <img src="{{url(asset('images/sale.png'))}}" class="is_sale_water_mark">
                                @endif
                                @if($item->is_pinned)
                                    <i class="fas pin-icon fa-thumbtack" title="Pinned"></i>
                                @endif
                                    <div class="test" style="position: relative">

                                        <img
                                            src="{{ $item->base_image ? url("https://cdn.ihouse.ps/$item->base_image") : $item->image }}"
                                            class="img-fluid">
                                        @if($item->badges()->where("position","bottom")->where("is_active",1)->first())
                                            <div class="bottom_tag_used"
                                                 @if($item->badges()->where("position","bottom")->latest()->first()->background_color) style="background:{{$item->badges()->where("position","bottom")->latest()->first()->background_color}}" @endif><span
                                                    @if($item->badges()->where("position","bottom")->latest()->first()->font_color) style="color:{{$item->badges()->where("position","bottom")->latest()->first()->font_color}}" @endif>{{$item->badges()->where("position","bottom")->first()->title}}</span>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="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>
            @include('partial.infinite_pagination.spinner')
        </div>

    </section>

@endsection
@section("scripts")
    @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"
            })
        })
    </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>
@endsection