{{-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Forgot Password</title>
</head>
<body>
    <h1>Forgot Password</h1>

    @if (session('status'))
        <div style="color: green;">
            {{ session('status') }}
        </div>
    @endif

    <form method="POST" action="{{ route('filament.admin.forgot-password.email') }}">
        @csrf
        <label>Email:</label>
        <input type="email" name="email" required>
        <button type="submit">Send Password Reset Link</button>
    </form>

    <a href="{{ \Filament\Facades\Filament::getPanel('admin')->getLoginUrl() }}">Back to login</a>
</body>
</html> --}}




{{-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forgot Password</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 flex items-center justify-center h-screen">

    <div class="w-full max-w-md bg-white p-8 rounded-2xl shadow-lg">
        <div class="text-center mb-6">
            <img src="{{ asset('/assets/crilogo1.png') }}" alt="Logo" class="mx-auto w-24 h-24">
            <h1 class="mt-4 text-2xl font-bold text-gray-700">Forgot Password</h1>
            <p class="text-gray-500 mt-1 text-sm">Enter your email to reset your password</p>
        </div>

        @if (session('status'))
            <div class="mb-4 text-green-600 text-sm text-center">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-4 text-red-600 text-sm text-center">
                {{ $errors->first() }}
            </div>
        @endif

        <form method="POST" action="{{ route('filament.admin.forgot-password.email') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-medium mb-2">Email</label>
                <input type="email" name="email" required
                    class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
            </div>

            <button type="submit"
                class="w-full py-2 px-4 bg-amber-500 text-white font-semibold rounded-lg shadow-md hover:bg-amber-600 transition duration-200">
                Generate OTP
            </button>
        </form>

        <div class="mt-6 text-center">
            <a href="{{ \Filament\Facades\Filament::getPanel('admin')->getLoginUrl() }}"
               class="text-amber-500 hover:underline font-medium text-sm">
                Back to login
            </a>
        </div>
    </div>

</body>
</html> --}}



{{-- Imp --}}


{{-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forgot Password</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-50 flex items-center justify-center h-screen">

<div class="w-full max-w-md bg-white p-8 rounded-2xl shadow-lg" x-data="{ otpSent: false, email: '', error: '' }">

    <div class="text-center mb-6">
        <img src="{{ asset('/assets/crilogo1.png') }}" alt="Logo" class="mx-auto w-24 h-24">
        <h1 class="mt-4 text-2xl font-bold text-gray-700">Forgot Password</h1>
        <p class="text-gray-500 mt-1 text-sm">Enter your email to reset your password</p>
    </div>

    <!-- Display session status -->
    @if (session('status'))
        <div class="mb-4 text-green-600 text-sm text-center">
            {{ session('status') }}
        </div>
    @endif

    <!-- Display backend validation errors -->
    @if ($errors->any())
        <div class="mb-4 text-red-600 text-sm text-center">
            {{ $errors->first() }}
        </div>
    @endif

    <!-- Front-end error -->
    <div class="mb-4 text-red-600 text-sm text-center" x-show="error" x-text="error"></div>

    <!-- Frontend success -->
    <div class="mb-4 text-green-600 text-sm text-center" x-show="success" x-text="success"></div>

    <form method="POST" action="{{ route('filament.admin.forgot-password.otp') }}">
        @csrf

        <!-- Email input -->
        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-medium mb-2">Email</label>
            <input type="email" name="email" x-model="email" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500"
                   x-bind:readonly="otpSent">
        </div>

        <!-- OTP input -->
        <div class="mb-4" x-show="otpSent" x-transition>
            <label class="block text-gray-700 text-sm font-medium mb-2">Enter OTP</label>
            <input type="text" name="otp" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
        </div>

        <!-- New password -->
        <div class="mb-4" x-show="otpSent" x-transition>
            <label class="block text-gray-700 text-sm font-medium mb-2">New Password</label>
            <input type="password" name="password" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
        </div>

        <!-- Confirm password -->
        <div class="mb-4" x-show="otpSent" x-transition>
            <label class="block text-gray-700 text-sm font-medium mb-2">Confirm Password</label>
            <input type="password" name="password_confirmation" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
        </div>

        <!-- Submit / Generate OTP button -->
        <button type="submit"
                class="w-full py-2 px-4 bg-amber-500 text-white font-semibold rounded-lg shadow-md hover:bg-amber-600 transition duration-200"
                x-on:click.prevent="
                    error = '';
                    if (!email) {
                        error = 'Please enter your email';
                        return;
                    }
                    otpSent = true;
                ">
            <span x-text="otpSent ? 'Reset Password' : 'Generate OTP'"></span>
        </button>
    </form>

    <div class="mt-6 text-center">
        <a href="{{ \Filament\Facades\Filament::getPanel('admin')->getLoginUrl() }}"
           class="text-amber-500 hover:underline font-medium text-sm">
            Back to login
        </a>
    </div>
</div>
</body>
</html> --}}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forgot Password</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-50 flex items-center justify-center h-screen">

<div class="w-full max-w-md bg-white p-8 rounded-2xl shadow-lg"
     x-data="{
        email: '',
        showFields: false,
        error: '',
        success: ''
     }">

    <!-- Logo & Heading -->
    <div class="text-center mb-6">
        <img src="{{ asset('/assets/crilogo1.png') }}" alt="Logo" class="mx-auto w-24 h-24">
        {{-- <img src="{{ Storage::url('app/private/uploads/CRI/crilogo1.png') }}" alt="Logo" class="mx-auto w-24 h-24"> --}}
        <h1 class="mt-4 text-2xl font-bold text-gray-700">Forgot Password</h1>
        <p class="text-gray-500 mt-1 text-sm">Enter your email to reset your password</p>
    </div>

    <!-- Frontend error / success -->
    <div class="mb-4 text-red-600 text-sm text-center" x-show="error" x-text="error"></div>
    <div class="mb-4 text-green-600 text-sm text-center" x-show="success" x-text="success"></div>

    <!-- Email & Password Form -->

<form x-data="{
        email: '',
        old_password: '',
        password: '',
        password_confirmation: '',
        showFields: false,
        emailError: '',
        passwordError: '',
        oldPasswordError: '',
        newPasswordError: '',
        error: '',
        success: ''
    }"
    x-on:submit.prevent="
        oldPasswordError=''; newPasswordError=''; error=''; passwordError=''; success='';
        fetch('{{ route('filament.admin.forgot-password.otp') }}', {
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRF-TOKEN':'{{ csrf_token() }}'
            },
            body: JSON.stringify({
                email: email,
                old_password: old_password,
                password: password,
                password_confirmation: password_confirmation
            })
        })
        .then(res=>res.json())
        .then(data => {
        if(data.success){
            // Success
            success = data.success;
            old_password = '';
            password = '';
            password_confirmation = '';
        } else {
            oldPasswordError = data.oldPasswordError || '';
            newPasswordError = data.newPasswordError || '';
            passwordError = data.passwordError || '';
        }
    })
    .catch(() => {
        passwordError = 'Something Went Wrong.';
    });
    "
>
    @csrf

    <!-- Email -->
    <div class="mb-4">
        <label class="block text-gray-700 text-sm font-medium mb-2">Email</label>
        <input type="email" x-model="email" :readonly="showFields"
        @keydown.enter.prevent="$refs.continueBtn.click()"
               class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
        <div class="text-red-600 text-sm mt-1" x-text="emailError" x-show="emailError"></div>
    </div>

    <!-- Continue button (Check email) -->
    <button type="button" x-show="!showFields" x-ref="continueBtn"
        class="w-full py-2 px-4 bg-amber-500 text-white font-semibold rounded-lg shadow-md hover:bg-amber-600 transition duration-200"
        x-on:click="
            emailError=''; success='';
            if(!email){ emailError='Please enter your email'; return; }

              // Simple email regex check
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if(!emailPattern.test(email)){
                emailError='Please enter a valid email';
                return;
            }

            fetch('{{ route('admin.check-email') }}',{
                method:'POST',
                headers:{
                    'Content-Type':'application/json',
                    'X-CSRF-TOKEN':'{{ csrf_token() }}'
                },
                body:JSON.stringify({email: email})
            })
            .then(res=>res.json())
            .then(data=>{
                if(data.exists){
                    showFields=true;
                } else {
                    emailError='No user found with this email.';
                }
            })
            .catch(()=> emailError='Something went wrong.');
        "
    >Continue</button>

    <!-- Old / New / Confirm Password -->
    <div x-show="showFields" x-transition class="mt-4 space-y-4">

        {{-- <div>
            <label class="block text-gray-700 text-sm font-medium mb-2">Old Password</label>
            <input type="password" x-model="old_password" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
            <div class="text-red-600 text-sm mt-1" x-text="oldPasswordError" x-show="oldPasswordError"></div>
        </div> --}}

          <!-- Old Password -->
        <div x-data="{ show: false }" class="relative">
            <label class="block text-gray-700 text-sm font-medium mb-2">Old Password</label>
            <input :type="show ? 'text' : 'password'" x-model="old_password"
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
            <button type="button" @click="show = !show" class="absolute right-3 top-8 flex items-center text-gray-500">
                <svg x-show="!show" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg x-show="show" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.269-2.944-9.543-7a10.05 10.05 0 012.175-3.293M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18" />
                </svg>
            </button>
            <div class="text-red-600 text-sm mt-1" x-text="oldPasswordError" x-show="oldPasswordError"></div>
        </div>

        {{-- <div>
            <label class="block text-gray-700 text-sm font-medium mb-2">New Password</label>
            <input type="password" x-model="password" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
        </div> --}}

        <div x-data="{ show: false }" class="relative">
            <label class="block text-gray-700 text-sm font-medium mb-2">New Password</label>
            <input :type="show ? 'text' : 'password'" x-model="password" required
                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">

            <button type="button" @click="show = !show"
                    class="absolute right-3 top-8 flex items-center text-gray-500">
                <!-- Eye open -->
                <svg x-show="!show" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>

                <!-- Eye closed -->
                <svg x-show="show" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.269-2.944-9.543-7a10.05 10.05 0 012.175-3.293M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18" />
                </svg>
            </button>
        </div>


        {{-- <div>
            <label class="block text-gray-700 text-sm font-medium mb-2">Confirm Password</label>
            <input type="password" x-model="password_confirmation" required
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
                <div class="text-red-600 text-sm mt-1" x-text="newPasswordError" x-show="newPasswordError"></div>
        </div> --}}
        <div x-data="{ show: false }" class="relative">
            <label class="block text-gray-700 text-sm font-medium mb-2">Confirm Password</label>
            <input :type="show ? 'text' : 'password'" x-model="password_confirmation" required
                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">

            <button type="button" @click="show = !show"
                    class="absolute right-3 top-8 flex items-center text-gray-500">
                <!-- Eye open -->
                <svg x-show="!show" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>

                <!-- Eye closed -->
                <svg x-show="show" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.269-2.944-9.543-7a10.05 10.05 0 012.175-3.293M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18" />
                </svg>
            </button>

            <div class="text-red-600 text-sm mt-1" x-text="newPasswordError" x-show="newPasswordError"></div>
        </div>


        <button type="submit"
                class="w-full py-2 px-4 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-600 transition duration-200">
            Update Password
        </button>

        <div class="text-green-600 text-sm mt-2" x-text="success" x-show="success"></div>
        <!-- Old Password Error -->
    </div>
</form>


   <!-- Flash messages -->
        @if(session('status'))
            <div class="mt-2 text-green-600 text-sm text-center">
                {{ session('status') }}
            </div>
        @endif

        @if($errors->any())
            <div class="mt-2 text-red-600 text-sm text-center">
                {{ $errors->first() }}
            </div>
        @endif



    <div class="mt-6 text-center">
        <a href="{{ \Filament\Facades\Filament::getPanel('admin')->getLoginUrl() }}"
           class="text-amber-500 hover:underline font-medium text-sm">
            Back to login
        </a>
    </div>
</div>
</body>
</html>









