@extends('layouts.stores_dashboard_layout')

@section('title')
    {{trans('stores_dashboard.settings')}}
@endsection


@section('content')
            <div  class="table-cont p-2 ">
                <div class="row align-items-center">
                    <div class="dash-title col-md p-0 mt-0">
                        <h6 class="bold">{{trans('stores_dashboard.settings')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.settings_profile')}}</p>
                    </div>
                </div>


                <form id="postForm" >
                   @csrf

                    <div class=" white-bg round7 mb-3 mt-2 p-3">
                        <h6 class="bold border-bottom pt-3 pb-3 mb-4"> {{trans('stores_dashboard.change_password')}}</h6>

                        <div class="w-md-75 ">


                            <div class="form-group">
                                <label class="bold font14" for="Password1">{{trans('stores_dashboard.current_password')}} </label>
                                <div class="password-cont">
                                    <input name="current_password" type="password" class="form-control" id="Password1" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.current_password')}}">
                                    <i class="fa fa-eye color-gray" id="signInShowPassword1"></i>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="bold font14" for="Password3">{{trans('stores_dashboard.new_password')}} </label>
                                <div class="password-cont">
                                    <input name="new_password" type="password" class="form-control" id="Password3" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.new_password')}}">
                                    <i class="fa fa-eye color-gray" id="signInShowPassword3"></i>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="bold font14" for="Password2">{{trans('stores_dashboard.password_confirmation')}} </label>
                                <div class="password-cont">
                                    <input name="password_confirmation" type="password" class="form-control" id="Password2" aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.password_confirmation')}}">
                                    <i class="fa fa-eye color-gray" id="signInShowPassword2"></i>
                                </div>
                            </div>


                        </div>
                    </div>




                    <button id="postbtn" class="button1 mt-3 material-button" >{{trans('stores_dashboard.save')}} </button>

                    <script>
                        document.getElementById('form').onsubmit = function(event){
                            event.preventDefault();
                            // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
                            Swal.fire({
                                icon: 'success',
                                title: "<h5 class='bold'>{{trans('stores_dashboard.congrats')}}</h5>",
                                html: "<p >{{trans('stores_dashboard.sended_msg')}}</p><a href='index.html'><button class='button1 w-100' >{{trans('stores_dashboard.back')}}</button></a>",
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    </script>
                </form>
            </div>


        <!-- end of dashboard body -->


    <!-- start page content -->

    <!-- end page content -->


@endsection

@section('scripts')
    <script>
        $(function(){
            $('.side-button .active').siblings('.side-dropdown').slideDown();
        });
    </script>
     <script>
        $("#postbtn").on('click',function(e){
            e.preventDefault();
            var form = $('#postForm').get(0);
            var formData = new FormData(form);
            var oldText = $(this).text();
            $(this).prop('disabled', true).css({
                opacity:'0.5'
            }).text("{{trans('stores_dashboard.loading')}}");

            $.ajax({
                url:"{{route('stores_dashboard.post_edit_password')}}",
                type:"POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    $('#postbtn').removeAttr("disabled").css({
                        opacity:'1'
                    }).text(oldText);
                    if(data.key =='success'){
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.url);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
@endsection