@extends('Admin.layout')

@section('content')

<h4>Reset Password</h4>

<div class="row justify-content-center">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <form id="resetPasswordForm" method="POST" action="{{route('reset_password_submit')}}">
                    @csrf
                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="current_password" class="form-control p-3"
                                name="current_password" placeholder="Current Password" aria-describedby="password"
                                value="{{ old('current_password') }}">
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </div>

                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="newpass" class="form-control p-3" name="newpass"
                                placeholder="New Password" aria-describedby="password" value="{{ old('newpass') }}">
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </div>

                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="conpass" class="form-control p-3" name="conpass"
                                placeholder="Confirm Password" aria-describedby="password" value="{{ old('conpass') }}">
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </div>


                    <button type="submit" id="resetBtn"
                        class="btn btn-primary d-grid w-100 waves-effect waves-light mt-6">Reset Password</button>
                </form>
            </div>

        </div>


    </div>
</div>

@if (session('success') || session('error') || $errors->any())
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast"
        class="toast align-items-center text-white 
        {{ session('success') ? 'bg-success' : 'bg-danger' }} border-0"
        role="alert">

        <div class="d-flex">
            <div class="toast-body" id="customToastBody">
                @if (session('success'))
                    {{ session('success') }}
                @elseif (session('error'))
                    {{ session('error') }}
                @elseif ($errors->any())
                    {{ $errors->first() }}
                @endif
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto"
                data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
@endif

<script>
document.addEventListener("DOMContentLoaded", function () {

    let toastEl = document.getElementById('customToast');
    if (toastEl) {
        new bootstrap.Toast(toastEl, { delay: 3000 }).show();
    }

    document.getElementById('resetPasswordForm')
        ?.addEventListener('submit', function() {
            const btn = document.getElementById('resetBtn');
            btn.disabled = true;
            btn.innerText = 'Processing...';
        });
});
</script>

@endsection