@extends('userPanel.user')
@section('content')
<div class="game_bid_parent">
@include('userPanel.layouts.partial.success')
 @include('userPanel.layouts.partial.error')
                    <div class="row game_type_parent_inner">
                        <div class="col-sm game_type_card_wrap">
                            <div class="card body_game_type_parent">
                                <div class="card-body body_game_card2">
                                    <div class="d-flex align-items-center justify-content-start user_profile_container1">
                                        <div class="user_profile_icon_parent">
                                            <img src="@if(\Auth::user()->profile_picture == '') {{ asset('/frontend/assets/avtar.jpg') }} @else {{ \Auth::user()->profile_picture }} @endif" class="rounded user_profile_pic" alt="profile picture">
                                        </div>
                                        <div class="user_profile_container2">
                                            <h5 class="card-title txt_game_market">My Information</h5>
                                            <p class="card-text">
                                                <span class="txt_game_type">Change Password</span>
                                            </p>
                                        </div>
                                    </div>
                                    <!-- START FORM -->
                                    <form class="form_bid_container" id="changeForm" method="post" action="{{ route('submitChangePassword'); }}">
                                    @csrf
                                        <div class="row">
                                            <div class="col-sm form_pwd_parent">
                                                <input type="password" class="form-control input_form_pwd" placeholder="Old Password" name="old_password" id="old_password">
                                                <span class="material-symbols-rounded icon_pwd" onclick="funcPwdToggle1()" id="old_password">visibility</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm form_pwd_parent">
                                                <input type="password" class="form-control input_form_pwd" placeholder="New Password" name="new_password" id="new_password">
                                                <span class="material-symbols-rounded icon_pwd" onclick="funcPwdToggle2()" id="new_password">visibility</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm form_pwd_parent">
                                                <input type="password" class="form-control input_form_pwd" placeholder="Confirm Password" name="confirm_password" id="confirm_password">
                                                <span class="material-symbols-rounded icon_pwd" onclick="funcPwdToggle3()" id="confirm_password">visibility</span>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn_form_pwd">Change Password</button>
                                    </form>
                                    <!-- END FORM -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
@endsection                
@section('pageLevelJS')
<script>
$("#changeForm").validate({
    rules: {
        old_password: {
            required: true,
        },
        new_password: {
            required: true,
        },
        confirm_password: {
            required: true,
            equalTo:new_password
        },

    },
    submitHandler: function(form) {
    
       form.submit();
        
    }
});
</script>
@endsection