@extends('web.layouts.master')
@section('contents')


    <!-- start page title -->
    <section class="page-title">
        <div class="container">
            <h3 class="main-title">بياناتي الشخصية</h3>
        </div>
    </section>
    <!-- end page title -->

    <!-- start brands  -->
    <section class="filter-block all-brands white-bg">
        <div class="container">
            <div class="all-profile grey-bg">
                <div class="row">
                    <div class="col-md-5 col-lg-4">
                        <h3 class="title wow fadeInDown">بيانات المستخدم</h3>
                        <!-- tabs -->
                        <div class="nav flex-column nav-pills wow fadeInUp" id="v-pills-tab" role="tablist"
                             aria-orientation="vertical">
                            <a href="#" class="share-icon" title="مشاركة"><i class="fa fa-share-alt"></i></a>
                            <div class="avatar-upload">
                                <div class="avatar-edit">
                                    <input type="file" id="imageUpload" name="imageUpload" class="main_image"
                                           accept=".png, .jpg, .jpeg"/>
                                    <label for="imageUpload"></label>
                                </div>

                                <div class="avatar-preview">
                                    <div id="imagePreview"
                                         style="background-image: url({{asset("images/users/".$user->image)}});"></div>
                                </div>
                            </div>
                            <div class="user">
                                <h4 class="name" id="old_username">{{$user->name ? $user->name : $user->mobile}}</h4>
                                <!-- if active now -->
                                <p class="status active">
                                    <span class="active"></span>
                                    <span class="text">متصل الان</span>
                                </p>
                                <!-- if not active -->
                                <!-- <p class="status not-active">
                                    <span class="not-active"></span>
                                    <span class="text">غير متصل</span>
                                </p> -->
                                <p class="membership">
                                    <span class="text">عضو منذ : </span>
                                    <span class="time">{{$user->created_at->diffForHumans()}}</span>
                                </p>
                            </div>
                            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home"
                               role="tab" aria-controls="v-pills-home" aria-selected="true">الاعلانات</a>

                            <a class="nav-link" id="v-pills-changPass-tab" data-toggle="pill" href="#v-pills-changPass"
                               role="tab" aria-controls="v-pills-changPass" aria-selected="true">تغيير الرقم السري</a>

                            <a class="nav-link" id="v-pills-changName-tab" data-toggle="pill" href="#v-pills-changName"
                               role="tab" aria-controls="v-pills-changName" aria-selected="false">تغيير مسمى
                                العضوية</a>

                            <a class="nav-link" id="v-pills-email-tab" data-toggle="pill" href="#v-pills-email"
                               role="tab" aria-controls="v-pills-email" aria-selected="false">تحديث البريد
                                الالكتروني</a>

                            <a class="nav-link" id="v-pills-changNum-tab" data-toggle="pill" href="#v-pills-changNum"
                               role="tab" aria-controls="v-pills-changNum" aria-selected="false">تغيير رقم الجوال</a>

                            <a class="nav-link" href="{{route('commission')}}">دفع عمولة الموقع</a>

                            <a class="nav-link" id="v-pills-confirmNum-tab" data-toggle="pill"
                               href="#v-pills-confirmNum" role="tab" aria-controls="v-pills-confirmNum"
                               aria-selected="false">وثق الجوال</a>

                            <a class="nav-link logout main-color" id="" href="{{route('user_logout')}}">تسجيل خروج</a>
                        </div>
                    </div>
                    <div class="col-md-7 col-lg-8">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                                 aria-labelledby="v-pills-home-tab">
                                <div class="main-content">
                                    <div class="title wow fadeInDown">
                                        <div class="right-grid">
                                            <h3>الاعلانات</h3>
                                        </div>
                                        <div class="left-grid d-flex">
                                            <div class="round-sh ch-grid">
                                                <img src="{{asset('web/img/dynamic/icons/menu.png')}}" alt="img">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row grid-cols wow fadeInUp">
                                        @foreach($rows as $row)
                                            <div class="col-md-6 col-lg-4">
                                                <div class="card sm">
                                                    <div class="card-img-top">
                                                        <img src="{{(count($row->images) > 0) ? $row->images[0]['image'] : $setting->site_logo}}"
                                                             class=" img-fluid"
                                                             alt="product img">
                                                        <div class="card-caption">
                                                            <div class="inner-caption">
                                                                <ul class="list-unstyled list-inline">
                                                                    <li class="icon eye">
                                                                        <a href="{{route('product.show', $row->code)}}"
                                                                           title="مشاهدة الاعلان"><i
                                                                                class="fa fa-eye"></i>
                                                                        </a>
                                                                    </li>
                                                                    <li onclick="favourite({{$row->id}})"
                                                                        class="icon fav {{\App\Models\Favourite::where(['user_id' => Auth::user()->id, 'product_id' => $row->id])->first() ? 'liked' : ''}}">
                                                        <span
                                                            style="cursor: pointer" title="أضف الى المفضلة"><i
                                                                class="fa fa-heart"></i>
                                                        </span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <h5 class="card-title"><a href="{{route('product.show', $row->code)}}">{{$row->title}}</a></h5>
                                                        <p class="locate">
                                                            <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
                                                            {{$row->city->name[App::getLocale()]}}
                                                        </p>
                                                        <div class="bottom">
                                                            <p class="owner">
                                                                <span class="icon"><i class="fas fa-user"></i></span>
                                                                {{$row->user->name}}
                                                            </p>
                                                            <p class="time">
                                                <span class="icon">
                                                    <i class="fas fa-clock"></i>
                                                </span>
                                                                {{\Carbon\Carbon::parse($row->created_at)->diffForHumans()}}
                                                            </p>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                        @endforeach
                                            {{$rows->links()}}

                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-changPass" role="tabpanel"
                                 aria-labelledby="v-pills-changPass-tab">
                                <div class="main-content">
                                    <div class="title">
                                        <div class="right-grid">
                                            <h3>تغيير كلمة المرور</h3>
                                        </div>
                                    </div>
                                    <div class="form-edit white-bg">
                                        <form action="" class="row">
                                            <div class="form-group col-12">
                                                <input id="old_password" name="old_password" type="password"
                                                       maxlength = "191"     class="form-control"
                                                       placeholder="كلمة المرور الحالية" required>

                                            </div>
                                            <div class="form-group col-12">
                                                <input id="password" name="password" type="password"
                                                       maxlength = "191"    class="form-control"
                                                       placeholder="كلمة المرور الجديدة" required>

                                            </div>
                                            <div class="form-group col-12">
                                                <input id="password_confirmation" name="password_confirmation"
                                                       maxlength = "191"    type="password" class="form-control"
                                                       placeholder="تأكي كلمة المرور" required>

                                            </div>
                                            <div class="col-12 center">
                                                <button type="submit" id="change_password"
                                                        class="btn btn-main btn-hover full-width-btn">
                                                    حفظ التغييرات
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-changName" role="tabpanel"
                                 aria-labelledby="v-pills-changName-tab">
                                <div class="main-content">
                                    <div class="title">
                                        <div class="right-grid">
                                            <h3>تغيير مسمى العضوية</h3>
                                        </div>
                                    </div>
                                    <div class="form-edit white-bg">
                                        <p class="current-info">
                                            اسم عضويتك الحالي : <span class="main-color">الاسم الحالي للعضوية</span>
                                        </p>
                                        <p class="note">يجب أن يكون لديك عمولات بأكثر من 100 ريال لاستخدام الخدمة</p>
                                        @if($user->total_transfers >= 100)

                                            <form action="" class="needs-validation row" novalidate>
                                                <div class="form-group col-12">
                                                    <input id="username" type="text" class="form-control"
                                                           maxlength = "191"    placeholder="المسمى الجديد" required>
                                                    <div class="invalid-feedback">
                                                        يجب ادخال المسمى بطريقة صحيحة
                                                    </div>
                                                </div>
                                                <div class="col-12 center">
                                                    <button id="new_username" type="submit"
                                                            class="btn btn-main btn-hover full-width-btn">
                                                        حفظ التغييرات
                                                    </button>
                                                </div>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-email" role="tabpanel"
                                 aria-labelledby="v-pills-email-tab">
                                <div class="main-content">
                                    <div class="title">
                                        <div class="right-grid">
                                            <h3>تجديث البريد الالكتروني</h3>
                                        </div>
                                    </div>
                                    <div class="form-edit white-bg">
                                        <p class="current-info">
                                            بريدك الحالي : <span id="new_email_changed"
                                                                 class="main-color">{{$user->email ? $user->email :  Lang::get('data.no_email')}}</span>
                                        </p>

                                        <form action="" class="needs-validation row" novalidate>
                                            <div class="form-group col-12">
                                                <input id="user_email" type="email" class="form-control"
                                                       maxlength = "191"          placeholder="البريد الجديد" required>
                                                <div class="invalid-feedback">
                                                    يجب ادخال بريد الكتروني صحيح
                                                </div>
                                            </div>
                                            <div class="col-12 center">
                                                <button id="change_email" type="submit"
                                                        class="btn btn-main btn-hover full-width-btn">
                                                    حفظ التغييرات
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-changNum" role="tabpanel"
                                 aria-labelledby="v-pills-changNum-tab">
                                <div class="main-content">
                                    <div class="title">
                                        <div class="right-grid">
                                            <h3>تغيير رقم الجوال</h3>
                                        </div>
                                    </div>
                                    <div class="form-edit white-bg">
                                        <p class="current-info">
                                            رقم الجوال الحالي : <span id="mobile_changes"
                                                                      class="main-color">{{$user->mobile}}</span>
                                        </p>
                                        <form action="" class="needs-validation row" novalidate>
                                            <div class="form-group col-12">
                                                <input id="new_mobile" type="tel" class="form-control"
                                                       maxlength = "191"      placeholder="رقم الجوال الجديد" required>
                                                <div class="invalid-feedback">
                                                    يجب ادخال رقم جوال صحيح
                                                </div>
                                            </div>
                                            <div class="col-12 center">
                                                <button id="change_mobile" type="submit"
                                                        class="btn btn-main btn-hover full-width-btn">
                                                    حفظ التغييرات
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="v-pills-confirmNum" role="tabpanel"
                                 aria-labelledby="v-pills-confirmNum-tab">
                                <div class="main-content">
                                    <div class="title">
                                        <div class="right-grid">
                                            <h3>توثيق رقم الجوال</h3>
                                        </div>
                                    </div>
                                    <div class="form-edit white-bg">
                                        @if($user->verified == 'false')
                                            <p class="current-info">
                                                رقم الجوال الحالي : <span id="document_mobile"
                                                                          class="main-color">{{$user->mobile}}</span>
                                            </p>
                                            <p class="note">سيتم ارسال كود التوثيق على رقم جوالك الحالي</p>
                                            <div class="col-6 center">
                                                <button id="send_code_mobile"
                                                        class="btn btn-main btn-hover full-width-btn">
                                                    إرسال الكود
                                                </button>
                                            </div>
                                            <br>
                                            <form id="code_form" style="display: none" action=""
                                                  class="needs-validation row" novalidate>
                                                <div class="form-group col-12">
                                                    <input min="4" max="4" id="code_mobile" type="tel"
                                                           class="form-control"
                                                           maxlength = "191"        placeholder="الكود" required>
                                                    <div class="invalid-feedback">
                                                        يجب ادخال الكود
                                                    </div>
                                                </div>
                                                <div class="col-12 center">
                                                    <button id="confirm_code_mobile" type="submit"
                                                            class="btn btn-main btn-hover full-width-btn">
                                                        حفظ التغييرات
                                                    </button>
                                                </div>
                                            </form>

                                        @else

                                            <p class="note">الحساب مفعل من قبل</p>


                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end brands  -->

@stop
@section('script')

    <script>
        $("#change_password").click(function (e) {

            e.preventDefault();


            var old_password = $("#old_password").val();
            var password = $("#password").val();
            var password_confirmation = $("#password_confirmation").val();

            console.log(old_password);
            console.log(password);
            console.log(password_confirmation);

            $.ajax({

                type: 'POST',

                url: '{{route('change_password_ajax')}}',

                data: {old_password: old_password, password: password, password_confirmation: password_confirmation},

                success: function (data) {
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });
                        $('#old_password').val('');
                        $('#password').val('');
                        $('#password_confirmation').val('');

                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }

            });


        });
        $("#new_username").click(function (e) {

            e.preventDefault();


            var username = $("#username").val();


            console.log(username);

            $.ajax({

                type: 'POST',

                url: '{{route('change_username_ajax')}}',

                data: {new_username: username},

                success: function (data) {
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });

                        $('#new_username').val('');
                        $('#old_username').html(username);
                        $('#name_header').html(username);

                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }

            });


        });
        $("#change_email").click(function (e) {

            e.preventDefault();


            var user_email = $("#user_email").val();


            console.log(user_email);

            $.ajax({

                type: 'POST',

                url: '{{route('change_email_ajax')}}',

                data: {email: user_email},

                success: function (data) {
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });
                        $("#new_email_changed").html(user_email);

                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }

            });


        });
        $("#change_mobile").click(function (e) {

            e.preventDefault();


            var mobile = $("#new_mobile").val();


            console.log(mobile);

            $.ajax({

                type: 'POST',

                url: '{{route('change_mobile_ajax')}}',

                data: {mobile: mobile},

                success: function (data) {
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });
                        $("#mobile_changes").html(mobile);
                        $("#document_mobile").html(mobile);

                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }

            });


        });
        $("#confirm_code_mobile").click(function (e) {

            e.preventDefault();


            var code = $("#code_mobile").val();


            console.log(code);

            $.ajax({

                type: 'POST',

                url: '{{route('confirm_sent_code')}}',

                data: {code: code},

                success: function (data) {
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });
                        $('#code_form').hide();
                        $('#code_mobile').val('');


                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }

            });


        });
        $("#send_code_mobile").click(function () {


            $.ajax({

                type: 'POST',

                url: '{{route('send_document_mobile')}}',

                data: {},

                success: function (data) {
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });
                        $('#code_form').show();


                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }

            });


        });
    </script>
    <script>
        $(".main_image").change(function () {


            var form = new FormData();

            form.append('image', $('#imageUpload')[0].files[0]);

            const file = $('#imageUpload')[0].files[0];
            const fileType = file['type'];
            const validImageTypes = ['image/bmp', 'image/jpeg', 'image/png', 'image/jpg'];
            console.log($('#imageUpload')[0].files[0]);
            if (!validImageTypes.includes(fileType)) {

                Swal.fire({
                    title: '{{trans('data.error')}}',
                    text: "{{trans('data.image_mimes')}}",
                    icon: 'error',
                    confirmButtonText: '{{trans('data.close')}}'
                });
            }
            $.ajax({
                url: "{{route('upload_image_ajax')}}",
                headers: {
                    'X-CSRF-TOKEN': "{{csrf_token()}}"
                },

                data: form,
                method: "POST",
                processData: false,
                contentType: false,
                enctype: 'multipart/form-data',
                beforeSend: function () {
                    // $('#success').empty();
                    // $('#all_files').empty();

                    // document.getElementById("click_button").disabled = true;

                },


                success: function (data) {

                    console.log(data.data);
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.data,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });


                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });

                    }

                }
            });
        });
    </script>

@stop