@extends('layouts.userapp')

@section('content')


@php
use Carbon\Carbon;
@endphp

@if($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

@if(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif


<div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
    <div class="card-header">
        <h4>CHANGE PASSWORD</h4>
    </div>
    <div class="card-body">
        <form method="post" action="{{ route('password.change') }}" onsubmit="return validatePassword()">
            @csrf

            <div class="form-group">
                <label for="staticName">Name</label>
                <div class="alert alert-primary" role="alert">
                    {{ $user->username }}
                </div>
            </div>

            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" class="form-control" id="new_password" name="new_password" required>
            </div>

            <div class="form-group">
                <label for="new_password_confirmation">Retype New Password</label>
                <input type="password" class="form-control" id="new_password_confirmation" name="new_password_confirmation" required>
            </div>

            <div class="form-group">
                <button type="submit" id="reset_pwd" class="btn btn-primary btn-lg btn-block">
                    CHANGE
                </button>
            </div>
        </form>

    </div>
</div>

<script>
    function validatePassword() {
        var newPassword = document.getElementById('new_password').value;
        var confirmPassword = document.getElementById('new_password_confirmation').value;

        if (newPassword !== confirmPassword) {
            alert('The passwords do not match. Please retype the passwords correctly.');
            return false; // Prevent form submission
        }

        return true; // Allow form submission
    }
</script>




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
@endsection