@extends('layouts.auth')

@section('title', 'Reset Password')

@section('content')
<div class="card shadow-sm border-0 rounded-4">
    <div class="card-body p-4">
        <h5 class="card-title fw-bold text-dark mb-2">Reset Password</h5>
        <p class="text-muted small mb-4">Please set your new password below.</p>

        <form id="resetPasswordForm" method="POST" action="{{ route('admin.reset-password.update') }}">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">

            <div class="mb-3">
                <label for="email" class="form-label text-secondary small fw-medium">Email Address</label>
                <input type="email" class="form-control bg-light" id="email" name="email" value="{{ $email }}" required readonly>
            </div>

            <div class="mb-3">
                <label for="password" class="form-label text-secondary small fw-medium">New Password</label>
                <input type="password" class="form-control bg-light" id="password" name="password" placeholder="Minimum 8 characters" required>
            </div>

            <div class="mb-4">
                <label for="password_confirmation" class="form-label text-secondary small fw-medium">Confirm Password</label>
                <input type="password" class="form-control bg-light" id="password_confirmation" name="password_confirmation" placeholder="Repeat new password" required>
            </div>

            <button type="submit" class="btn btn-primary w-100 py-2 rounded-3 fw-semibold">Reset Password</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script type="module">
    $(document).ready(function () {
        $('#resetPasswordForm').validate({
            rules: {
                email: { required: true, email: true },
                password: { required: true, minlength: 8 },
                password_confirmation: { required: true, equalTo: '#password' }
            },
            messages: {
                password: { required: 'Please enter a new password.', minlength: 'Password must be at least 8 characters.' },
                password_confirmation: { required: 'Please confirm your new password.', equalTo: 'Passwords do not match.' }
            },
            errorElement: 'div',
            errorClass: 'invalid-feedback invalid-feedback-custom text-danger small mt-1',
            errorPlacement: function (error, element) {
                if (element.closest('.input-group').length) {
                    error.insertAfter(element.closest('.input-group'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
                $(element).closest('.input-group').addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
                const group = $(element).closest('.input-group');
                if (group.length && !group.find('.is-invalid').length) {
                    group.removeClass('is-invalid');
                }
            },
            submitHandler: function (form) {
                AdminAjax.submit({
                    form: form
                });
            }
        });
    });
</script>
@endpush