@extends("layout.app")
@section("content")
    <style>
        /* width */
        ::-webkit-scrollbar {
            width: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #888;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
    <style>

        .input-radio--innerlabel label{
            height:auto;
            border:none;
            padding: 0px;
            margin: 0px;
            border-radius: 0;

        }
        .input-radio label:before{
            border:none;
        }
        .input-radio input:checked + label:after{
            left: 6px;
            top: 6px;
        }.field-error {
             border-color: #D84D4D !important;
         }
        ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            font-family: "SF Pro AR","SF Pro Gulf","SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif !important;
        }
        ::-moz-placeholder { /* Firefox 19+ */
            font-family: "SF Pro AR","SF Pro Gulf","SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif !important;
        }
        :-ms-input-placeholder { /* IE 10+ */
            font-family: "SF Pro AR","SF Pro Gulf","SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif !important;
        }
        :-moz-placeholder { /* Firefox 18- */
            font-family: "SF Pro AR","SF Pro Gulf","SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif !important;
        }

    </style>
    <section class="bg--secondary space--sm">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    @include("customers.messages")
                    @error('mobile')
                    <div class="boxed boxed--lg boxed--border">
                        <div class="alert alert-danger">{{ $message }}</div>

                        @include('customers.partial.html.verify_editable_mobile')

                    </div>
                    @enderror

                    @if(!$errors->any()&& (empty( Auth::user()->mobile )||is_null( Auth::user()->mobile )))
                        <div class="boxed boxed--lg boxed--border">
                            <div class="alert alert-warning">{{ 'الرجاء ادخال رقم الهاتف' }}</div>

                            @include('customers.partial.html.verify_editable_mobile')

                        </div>
                    @endif


                    <div class="boxed boxed--lg boxed--border">

                        <h3>اضافة منتج مستعمل للبيع</h3>

                        <form dir="rtl" action="{{route("customers.post-used-item")}}" method="post"
                              class="text-right  mx-0">
                            {{ csrf_field() }}
                            <input type="hidden" name="mobile" value="{{ Auth::user()->mobile }}">
                            <div class="row">
                                <div class="col-md-6 mb-0 text-right">
                                    <span>نوع الجهاز:</span>
                                </div>
                            </div>
                            <div class="row ">
                                <div class="col-md-6">
                                    <span>الفئة الرئيسيه</span>
                                    {{Form::select("main_categories",IHouse::used_items_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>
                                <div class="col-md-6">
                                    <span>الفئة الفرعية</span>
                                    {{Form::select("category_id",[],null,["id"=>"sub_categories"])}}
                                    <span class="text-danger error-text category_id_error"></span>

                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <span>الرقم التسلسلي:</span>
                                    <input type="text" name="serial"
                                           class="validate-required @if($errors->first("serial")) field-error @endif"
                                           value="{{old("serial")}}">
                                    <span>
                                        للعثور على الرقم التسلسلي <a href="https://support.apple.com/ar-ae/HT204308"
                                                                     target="_blank">إضغط هنا </a>
                                </span>
                            </div>
                                <div class="col-md-6">
                                    <span>السعر:</span>
                                    <input type="text" name="price"
                                           class="validate-required @if($errors->first("price")) field-error @endif" value="{{old("price")}}">
                                <span>
                                    اترك السعر فارغ للتأكيد مع فريقنا على سعر حسب المواصفات
                                </span>
                            </div>
                            <div class="col-md-12">
                                <span>مواصفات الجهاز:</span>
                                <textarea rows="3" name="specs" class="validate-required @if($errors->first("specs")) field-error @endif" placeholder="مثلا: i7 8GB Ram 500 HD">{{old("specs")}}</textarea>
                            </div>

                            <div class="col-md-12 text-center mt-5">
                                <h4 class="m-0 @if($errors->first("status")) text-danger @endif"><i class="fa fa-heartbeat"></i> حالة الجهاز:</h4>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>ممتاز</span>
                                    <input type="radio" name="status" value="perfect" @if(old("status")=="perfect") checked @endif class="validate-required" id="status-1">
                                    <label for="status-1"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع بعض مشاكل </span>
                                    <input type="radio" name="status" value="very-good" @if(old("status")=="very-good") checked @endif class="validate-required" id="status-2">
                                    <label for="status-2"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع مشاكل كثيرة</span>
                                    <input type="radio" name="status" value="good" @if(old("status")=="good") checked @endif  class="validate-required" id="status-3">
                                    <label for="status-3"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>لا يعمل</span>
                                    <input type="radio" name="status" value="bad" @if(old("status")=="bad") checked @endif class="validate-required" id="status-4">
                                    <label for="status-4"></label>
                                </div>
                            </div>
                            <div class="col-md-12 text-center mt-5">
                                <h4 class="m-0  @if($errors->first("case")) text-danger @endif"><i class="fa fa-vector-square"></i> الشكل الخارجي: </h4>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>كالجديد</span>
                                    <input type="radio" name="case" value="perfect" @if(old("case")=="perfect") checked @endif  class="validate-required" id="case-1">
                                    <label for="case-1"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>قحوطات خفيفة </span>
                                    <input type="radio" name="case" value="very-good" @if(old("case")=="very-good") checked @endif  class="validate-required" id="case-2">
                                    <label for="case-2"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>ضربات وقحوطات وكسور صغيرة</span>
                                    <input type="radio" name="case" value="good"  @if(old("case")=="good") checked @endif  class="validate-required" id="case-3">
                                    <label for="case-3"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>مكسور</span>
                                    <input type="radio" name="case" value="bad" @if(old("case")=="bad") checked @endif class="validate-required" id="case-4">
                                    <label for="case-4"></label>
                                </div>
                            </div>



                            <div class="col-md-12 text-center mt-5">
                                <h4 class="m-0 @if($errors->first("battery")) text-danger @endif"><i class="fa fa-battery-three-quarters"></i> حالة البطارية:</h4>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>Normal</span>
                                    <input type="radio" name="battery" value="perfect"  @if(old("battery")=="perfect") checked @endif class="validate-required" id="battery-1">
                                    <label for="battery-1"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>Replace Soon, Check Battery </span>
                                    <input type="radio" name="battery" value="very-good" @if(old("battery")=="very-good") checked @endif class="validate-required" id="battery-2">
                                    <label for="battery-2"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>Replace Now, Service Battery</span>
                                    <input type="radio" name="battery" value="good"   @if(old("battery")=="good") checked @endif  class="validate-required" id="battery-3">
                                    <label for="battery-3"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>لا تعمل/غير موجودة</span>
                                    <input type="radio" name="battery" value="bad"  @if(old("battery")=="bad") checked @endif class="validate-required" id="battery-4">
                                    <label for="battery-4"></label>
                                </div>
                            </div>

                            <div class="col-md-12 text-center mt-5 ">
                                <h4 class="m-0 @if($errors->first("charger")) text-danger @endif"><i class="fa fa-plug"></i> الشاحن: </h4>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>ممتاز</span>
                                    <input type="radio" name="charger" value="perfect"  @if(old("charger")=="perfect") checked @endif class="validate-required" id="charger-1">
                                    <label for="charger-1"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع بعض مشاكل </span>
                                    <input type="radio" name="charger" value="very-good" @if(old("charger")=="very-good") checked @endif  class="validate-required" id="charger-2">
                                    <label for="charger-2"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع مشاكل كثيرة</span>
                                    <input type="radio" name="charger" value="good"   @if(old("charger")=="good") checked @endif  class="validate-required" id="charger-3">
                                    <label for="charger-3"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>لا يعمل</span>
                                    <input type="radio" name="charger" value="bad" @if(old("charger")=="bad") checked @endif  class="validate-required" id="charger-4">
                                    <label for="charger-4"></label>
                                </div>
                            </div>



                            <div class="col-md-12 text-center mt-5">
                                <h4 class="m-0 @if($errors->first("keyboard")) text-danger @endif"><i class="fa fa-keyboard"></i> لوحة المفاتيح:</h4>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>ممتاز</span>
                                    <input type="radio" name="keyboard" value="perfect" @if(old("keyboard")=="perfect") checked @endif  class="validate-required" id="keyboard-1">
                                    <label for="keyboard-1"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع بعض مشاكل </span>
                                    <input type="radio" name="keyboard" value="very-good"  @if(old("keyboard")=="very-good") checked @endif class="validate-required" id="keyboard-2">
                                    <label for="keyboard-2"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع مشاكل كثيرة</span>
                                    <input type="radio" name="keyboard" value="good"   @if(old("keyboard")=="good") checked @endif  class="validate-required" id="keyboard-3">
                                    <label for="keyboard-3"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>لا يعمل</span>
                                    <input type="radio" name="keyboard" value="bad"  @if(old("keyboard")=="bad") checked @endif class="validate-required" id="keyboard-4">
                                    <label for="keyboard-4"></label>
                                </div>
                            </div>


                            <div class="col-md-12 text-center mt-5">
                                <h4 class="m-0 @if($errors->first("mouse")) text-danger @endif"><i class="fa fa-mouse-pointer"></i> فأرة/تراك باد:</h4>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>ممتاز</span>
                                    <input type="radio" name="mouse" value="perfect" @if(old("mouse")=="perfect") checked @endif class="validate-required" id="mouse-1">
                                    <label for="mouse-1"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع بعض مشاكل </span>
                                    <input type="radio" name="mouse" value="very-good" @if(old("mouse")=="very-good") checked @endif class="validate-required" id="mouse-2">
                                    <label for="mouse-2"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>يعمل مع مشاكل كثيرة</span>
                                    <input type="radio" name="mouse" value="good"  @if(old("mouse")=="good") checked @endif  class="validate-required" id="mouse-3">
                                    <label for="mouse-3"></label>
                                </div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="input-radio">
                                    <span>لا يعمل/غير موجود</span>
                                    <input type="radio" name="mouse" value="bad" @if(old("mouse")=="bad") checked @endif class="validate-required" id="mouse-4">
                                    <label for="mouse-4"></label>
                                </div>
                            </div>

                            <div class="col-md-12 text-center mt-5">
                                <h4 class="m-0">الشروط:</h4>
                            </div>
                            <div class="col-md-12">
                                <div  id="conditions" style="overflow-y: scroll; border: 1px solid #bdbdbd; border-radius: 5px; padding: 10px; height: 400px;">
                                    {!! \App\Models\Settings::where("key",'used_conditions')->first()->value !!}
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="input-checkbox">
                                    <input @if(old("cond-check")=="checked") checked @else disabled @endif value="checked" id="cond-check" type="checkbox" name="cond-check" />
                                    <label for="cond-check"></label>
                                </div>
                                <span>اوافق على جميع الشروط</span>

                            </div>

                            <div class="col-md-12 boxed">
                                <button type="submit" @if(old("cond-check")!="checked") disabled @endif  id="submit" class="btn btn--primary btn--lg">إرسال</button>
                            </div>

                            </div>
                        </form>


                    </div>
                </div>
            </div>
        </div>
        <!--end of row-->
        <!--end of container-->
    </section>
@endsection
@section("scripts")
    @include('admin.partials.get_sub_categories_script',['categoriesURL'=>route("get-categories",['is_used'=>true])])
    <script type="text/javascript">
        $(document).ready(function() {
            $("#categories").trigger('change');

        });
        $("#categories").on("change",
            function() {
                $list = $("#sub_categories");
                $list.prop("disabled", false);
                $list.empty();
                $.ajax({
                    url: "{{route("admin.get-categories")}}",
                    type: "GET",
                    data: { id: $("#categories").val() },
                    traditional: true,
                    success: function(result) {
                        $list.empty();
                        $.each(result,
                            function(i, item) {
                                $list.append('<option value="' + item["id"] + '"> ' + item["title"] + ' </option>');
                            });
                    },
                    error: function() {
                        alert("Something went wrong");
                    }
                });
            });

    </script>

    <script>
        $(document).ready(function () {
            $("#cond-check").click(function () {
                $("#submit").attr("disabled", !this.checked);
            });

            $("#conditions").scroll(function () {
                if ($(this).scrollTop() + $(this).innerHeight() + 2 >= $(this)[0].scrollHeight) {
                    $('#cond-check').prop('disabled', false);
                }
            });
        });
    </script>
    @include('customers.partial.js.mobile_verification_partial')

@endsection