@extends('user.layout')

@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<style>
    .form-group {
        position: relative;
    }

    .form-group .icon-left {
        position: absolute;
        top: 50px;
        left: 10px;
        transform: translateY(-50%);
        color: #B3B4BA;
        font-size: 12px;
    }

    .form-group .icon-right {
        position: absolute;
        top: 50px;
        right: 10px;
        transform: translateY(-50%);
        color: #B3B4BA;
        cursor: pointer;
        font-size: 12px;
    }

    .form-group input {
        padding-left: 35px; /* Space for the left icon */
        padding-right: 35px; /* Space for the right icon */
    }

    .resetcard {
        max-width: 500px;
        height: auto;
        background: #fff;
        border-radius: 10px;
        padding: 2rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>

<div class="row mb-3">
    <div class="row d-flex justify-content-between">
        <h4 class="page-top-heading">Reset Password</h4>
    </div>
</div>

<div class="row d-flex justify-content-center">
    <div class="resetcard">
    <!-- @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif -->
<form action="{{ route('reset_password_post') }}" method="POST">
    @csrf

    <div class="form-group my-4">
        <label for="currentPassword" class="form-label fw-bold">Current Password</label>
        <i class="fas fa-lock icon-left"></i>
        <input type="password" id="currentPassword" name="current_password" class="form-control @error('current_password') is-invalid @enderror" placeholder="Enter current password" required>
        <i class="fas fa-eye icon-right toggle-password" data-target="currentPassword"></i>
        @error('current_password')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group my-4">
        <label for="newPassword" class="form-label fw-bold">New Password</label>
        <i class="fas fa-lock icon-left"></i>
        <input type="password" id="newPassword" name="new_password" class="form-control @error('new_password') is-invalid @enderror" placeholder="Enter new password" required>
        <i class="fas fa-eye icon-right toggle-password" data-target="newPassword"></i>
        @error('new_password')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group my-4">
        <label for="confirmPassword" class="form-label fw-bold">Confirm Password</label>
        <i class="fas fa-lock icon-left"></i>
        <input type="password" id="confirmPassword" name="new_password_confirmation" class="form-control @error('new_password_confirmation') is-invalid @enderror" placeholder="Confirm new password" required>
        <i class="fas fa-eye icon-right toggle-password" data-target="confirmPassword"></i>
        @error('new_password_confirmation')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary py-3 px-3 w-100 text-white mt-4">Reset Password</button>
    </div>
</form>


    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <h4 class="mb-3 fw-bold">Are you sure</h4>
                <hr>
                <h6 class="mb-4 fw-regular mt-3">Are you sure you want to Reset Password?</h6>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary py-3 w-50" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary py-3 w-50">Yes, Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Toggle password visibility
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', () => {
            const targetId = button.getAttribute('data-target');
            const input = document.getElementById(targetId);
            const icon = button;
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        });
    });
</script>

@endsection