@extends('layouts.main_layout')

@php
 $title = 'User - Profile';
 $name = $email = $status = ''; 

 if(!empty($user)){
     $title='User - Profile';
     $name = $user->name;
     $email = $user->email;
}
@endphp

@section('title','RCSA - '.$title)

@section('main-content')

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 dashboard-page-head edit-document document pt-3 pb-2 mb-2">
    <div>
        <div class="status">
            <form action="">
                <div class="form-group">
                    <center>  <span class="success_message" style="color:#5cb85c!important;text-align: center!important;">
                        {{ session()->has('flash_message') ? session()->get('flash_message') : '' }} </span></center>
                </div>
            </form>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="d-flex flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-2">
            <a href="{{route('admin.users.index')}}"><i class="fas fa-chevron-left"></i></a>
            <h1 class="">{{$title}}</h1>
        </div>
        @if(!empty($user))
            <form action="" id="profileForm" method="POST" autocomplete="off">
        @endif
        @csrf()
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="form-group">
                    <label for="name">Name </label>
                    <input type="text" class="form-control" id="name" aria-describedby="name" placeholder="Please enter name" name="name" value="{{old('name')?? $name}}" >
                    <label for="name" class="error"></label>
                    <span class="alert-message" id="name_err"></span>      

                </div>
                <div class="form-group">
                    <label for="email">Email </label>
                    <input type="email" class="form-control" id="email" placeholder="Please enter email" name="email" value="{{old('email')?? $email}}" @if(!empty($user)) readonly="true" @endif>
                     <label for="email" class="error"></label>
                </div>
                <div class="form-group">
                    <label for="password">Old Password  <span style="color: #FFB339;"> (Note: Current logged-in password.)</span></label>
                    <input type="password" class="form-control" id="old_password" placeholder="Please enter old password" name="old_password" autocomplete="off">
                    <span class="alert-message" id="old_password_err"></span>      

                    <label for="old_password" class="error"></label>
                </div>
                <div class="form-group">
                    <label for="password">New Password </label>
                    <input type="password" class="form-control" id="password" placeholder="Please enter password" name="password" autocomplete="off">
                    <span class="alert-message" id="password_err"></span>

                    <label for="password" class="error"></label>
                </div>
                <div class="form-group">
                    <label for="password_confirmation">New Password Confirmation </label>
                    <input type="password" class="form-control" id="password_confirmation" placeholder="Please enter password-confirmation" name="password_confirmation" autocomplete="off">
                    <label for="password_confirmation" class="error"></label>
                </div>
            </div>
        </div>
        <div class="d-flex btn_wrap">
            @if($access==true)
                <a href="{{route('admin.users.index')}}" id="cancel_btn" class="btn btn-primary btn-custom btn_custom_noBg" id="cancel_btn">Cancel</a>
            @elseif($access==false)
                <a href="{{route('users.index')}}" id="cancel_btn" class="btn btn-primary btn-custom btn_custom_noBg" id="cancel_btn">Cancel</a>
            @endif

            <button type="button" class="btn btn-primary btn-custom btn_custom_bg" id="submitBtn">Update</button>
        </div>
        </form>
    </div>
</main>
@endsection

@section('additionaljs')
<script src="{{asset('/js/jquery.validate.min.js')}}"></script>

<script type="text/javascript">  

var indexProfileUrl = "{{route('data.profile.index')}}";
var updateProfileUrl = "{{route('data.profile.update-password')}}";

$(document).ready(function(){

    $('#profileForm').on('click','#submitBtn', function(event){
        event.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        spinner.show();

        $("#profileForm").validate({
        rules: {
            old_password:{
                // required:true
            },
            password:{
                // required:true,
               
            },
            password_confirmation:{
                // required:true
            }
        },messages:{
            old_password:"Please enter the current (old) password.",
            password:"Please enter the password.",
            password_confirmation:"Please enter the confirmed password.",
           
        },errorPlacement: function(error, element) {
            $(element).parent("div").addClass('has-error');
            error.insertAfter(element);
        }
    });
    
    var form = $('#profileForm')[0];
    var formData = new FormData(form);

    if($("#profileForm").valid()) {

        $("#submitBtn").prop("disabled", true);

        $.ajax({
            url:updateProfileUrl,
            method:"POST",
            data:formData,
            dataType:'JSON',
            contentType: false,
            cache: false,
            processData: false,

            success:function(data) {

                console.log(data.message);
                var error_unit_msg = ((data.success)==false) ? data.message : 'Failed';

                if(data.success) {
                    spinner.show();
                    console.log('success message - '+data.message);
                    $("#submitBtn").prop("disabled", true);
                    window.location = indexProfileUrl;

                } else if (data.error_type=='validation_err') {
                    spinner.hide();
                    var err_fields = JSON.stringify(data.message,null, 2);

                    var arr_keys = JSON.parse(err_fields); 

                    if ((JSON.stringify(arr_keys['name']) == '["The name field is required."]')) {
                        
                        $('#name_err').text('The name field is required.');
                    }
                    if ((JSON.stringify(arr_keys['password']) == '["The password field is required."]')) {
                        
                        $('#password_err').text('The password field is required.');
                    }
                    if ((JSON.stringify(arr_keys['password']) == '["The password must be at least 6 characters."]')) {
                        
                        $('#password_err').text('The password must be at least 6 characters.');
                    }

                    if ((JSON.stringify(arr_keys['password']) == '["The password must not be greater than 14 characters."]')) {
                        $('#password_err').text('The password must not be greater than 14 characters.');
                    }
                    if ((JSON.stringify(arr_keys['password']) == '["The password confirmation does not match."]')) {
                        $('#password_err').text('The password confirmation does not match.');
                    }

                    if ((JSON.stringify(arr_keys['password']) == '["The password must be at least 6 characters.","The password confirmation does not match."]')) {
                        $('#password_err').text('The password must be at least 6 characters long and password confirmation does not match.');
                    }

                    $("#submitBtn").prop("disabled", false);
                    console.log('validation error - '+err_fields);

                } else {
                    spinner.hide();
                    console.log('failed message - '+data.message); 
                    $("#submitBtn").prop("disabled", false);
                    $("#old_password_err").text(data.message);
                }
            }
        });
    } else {
        spinner.hide();
    }
        $("#submitBtn").prop("disabled", false);
        return false;
    });
});
</script>
@endsection