@extends('welcome')
@section('content')

<style>
    .galleryno {
        display: none;
    }
    .profile {
        border-radius: 10px;
    }

    @media (max-width:700px) {
        .profile {
            height: 100px;
            width: 100px !important;
        }
    }

    @media (max-width:1100px) {
        .profile {
            height: 180px;
            width: 180px !important;
        }
    }

    @media (min-width:1101px) {
        .profile {
            height: 250px;
            width: 250px !important;

        }
    }
</style>
<section class="page-header page-header-classic">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="breadcrumb">
                    <li><a href="{{URL::to('index')}}">Home</a></li>
                    <li><a href="{{url('userProfile',session('id'))}}">{{session('user')}}</a></li>
                    <li class="active">Update Password </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col p-static">
                <span class="page-header-title-border visible" style="width: 216.938px;"></span>
                <h1 data-title-border="">Update Password</h1>

            </div>
        </div>
    </div>
</section>
<section class="about-us padding-section yellow-bg">
    <div class="container">

        <div class="row py-4">
            <div class="col-sm-6 align-middle mt-md-3">
                <div class="text-center ">
                    @if($data->profile)
                    <img src="{{asset('storage/uploads/profile/'.$data['profile'])}}" class=" rounded-xl profile" style="max-height:250px;min-height:100px;width:auto;" alt="" srcset="">
                    @else
                    <img src="{{asset('assets/img/unknown.webp')}}" class=" rounded-xl " style="max-height:250px;min-height:100px;width:auto;" alt="" srcset="">
                    @endif
                </div>
                <div class="mt-3 text-center">
                    <p>Name : {{$data->name}}</p>
                    <p>Email : {{$data->email}}</p>
                    <p>Mobile Number : {{$data->mobile}}</p>
                </div>
            </div>
            <div class="col-md-6">
                <form action="" method="post">
                    @csrf
                    @method('PUT')
                    <h3>Update Password</h3>
                    <!--@if ($message = Session::get('success'))-->
                    <!--            <div class="contact-form-success alert alert-success  mt-4">-->
                    <!--                <strong>{{$message}}</strong>-->
                    <!--            </div>-->
                    <!--        @endif-->
                    <div class="col-md-12 ">
                        <label for="inputOldPassword" class="form-label">Old Password<sup class="text-danger">*</sup></label>
                        <input type="text" hidden class="form-control" value="{{$data->id}}" name="id" id="userid">
                        <input type="text" value="{{old('oldPassword')}}" name="oldPassword" class="form-control" id="inputOldPassword">
                        @error('oldPassword')
                         <p class="text-danger">{{$message}}</p> 
                         @enderror
                    </div>
                    <div class="col-md-12 ">
                        <label for="inputNewPassword" class="form-label">New Password<sup class="text-danger">*</sup></label>
                        <input type="text" placeholder="Enter New Password*" value="{{old('newPassword')}}" name="newPassword" class="form-control" id="inputNewPassword">
                        @error('confirmPassword')
                        <p class="text-danger">Password must contain at least one numeric, capital letter, small letter, special and 8 characters!</p>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <label for="inputConfirmPassword" class="form-label">Confirm Password<sup class="text-danger">*</sup></label>
                        <input type="password" placeholder="Enter Confirm Password*" value="{{old('confirmPassword')}}"  name="confirmPassword" class="form-control" id="inputConfirmPassword">
                        @error('newPassword')
                        <p class="text-danger">New password and old password must be same !</p>
                        @enderror
                    </div>
                    <div class="col-12 pt-2">
                        <button id="sbtn" name="submit" class="btn btn-primary">Update Profile</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    $(document).ready(function() {
        $('#sbtn').attr('disabled', true);
        let newPas = $("input[name='newPassword']");
        let cnfPas = $("input[name='confirmPassword']");
        cnfPas.attr('disabled', true);
        if(newPas.val().length>1){
            cnfPas.attr('disabled', true);
            checkvalid(cnfPas);
        }
        if(cnfPas.val().length>1){
            if (newPas.val().length <1) {
                cnfPas.attr('disabled', true);
                cnfPas.siblings('i').remove();
            }
            checkvalid(cnfPas);
        }
        cnfPas.on('keyup', function() {
            if (newPas.val().length <1) {
                cnfPas.attr('disabled', true);
                cnfPas.siblings('i').remove();
            }
            return checkvalid(cnfPas);
        });
        newPas.on('keyup', function() {
            if (newPas.val().length > 0 || cnfPas.val().length>0) {
                cnfPas.removeAttr('disabled');
                return checkvalid(newPas);
            } else {
                newPas.siblings('i').remove()
                cnfPas.siblings('i').remove()
                cnfPas.attr('disabled', true);

            }
        });
    });
</script>

<script type="text/javascript" src="{{asset('assets/js/jqueryvalidation.js')}}"></script>


@stop