@extends('auth-base')

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

@section('content')

    @push('styles')
        <style>
            /* Background image with overlay effect - same as admin/login style */
            body {
                font-family: 'Figtree', sans-serif;
                background-image: url('{{ asset('dynaweb4/img/background.jpg') }}');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }

            /* Animation for smooth entrance */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .animate-fade-in {
                animation: fadeIn 0.5s ease-out;
            }

            .animate-slide-up {
                animation: slideUp 0.6s ease-out;
            }

            /* Glassmorphism card effect - premium look (same as register) */
            .glass-card {
                background-color: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(8px);
                transition: all 0.3s ease;
            }

            .glass-card:hover {
                transform: translateY(-3px);
                box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.2);
            }

            /* Input focus effect */
            .input-focus-effect:focus {
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
                border-color: #6366f1;
            }

            /* Custom scrollbar */
            ::-webkit-scrollbar {
                width: 8px;
            }

            ::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb {
                background: #818cf8;
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #6366f1;
            }
        </style>
    @endpush

    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 px-4 py-8">

        <!-- Logo / Brand - consistent with registration -->
        <div class="mb-5 animate-fade-in">
            <a href="/">
                <img src="{{ asset('dynaweb4/img/logo-small.png') }}" alt="Logo"
                    class="w-20 h-20 rounded-2xl shadow-xl object-cover p-1.5 bg-white/90 backdrop-blur-sm">
            </a>
        </div>

        <!-- Reset Password Card (similar glass-card style) – narrower than register form, perfect for reset -->
        <div
            class="w-full max-w-md px-7 py-8 glass-card shadow-xl overflow-hidden sm:rounded-2xl border border-gray-100 animate-slide-up">

            <!-- Header Section -->
            <div class="text-center mb-7">
                <h2 class="text-2xl font-bold text-gray-900">
                    Reset Password
                </h2>
                <p class="text-sm text-gray-600 mt-2">
                    Enter your email and choose a new password
                </p>
            </div>

            <!-- Success/Error Session Messages (Laravel compatible) -->
            @if (session('success'))
                <div class="mb-5 text-sm text-green-700 bg-green-50 border-l-4 border-green-500 rounded-lg p-3 animate-fade-in">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="mb-5 text-sm text-red-700 bg-red-50 border-l-4 border-red-500 rounded-lg p-3 animate-fade-in">
                    {{ session('error') }}
                </div>
            @endif

            <!-- Reset Form - matches backend route user.password.update -->
            <form method="POST" action="{{ route('user.password.update') }}" class="space-y-5">
                @csrf
                <!-- Token from email reset link -->
                <input type="hidden" name="token" value="{{ $token ?? '' }}">

                <!-- Email Field (with icon & validation) -->
                <div>
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Email Address <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <input type="email" id="email" name="email" value="{{ $email ?? old('email') }}" required
                            class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('email') border-red-500 @enderror"
                            placeholder="you@example.com">
                    </div>
                    @error('email')
                        <p class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                    clip-rule="evenodd" />
                            </svg>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- New Password Field with toggle (strength note) -->
                <div>
                    <label for="password" class="block text-sm font-semibold text-gray-700 mb-1.5">
                        New Password <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <input type="password" id="password" name="password" required
                            class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect @error('password') border-red-500 @enderror"
                            placeholder="Create a strong password">
                        <button type="button" onclick="togglePassword('password', 'togglePassIcon')"
                            class="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none">
                            <svg id="togglePassIcon"
                                class="h-5 w-5 text-gray-400 hover:text-gray-600 cursor-pointer transition" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <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.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                        </button>
                    </div>
                    @error('password')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1.5 text-xs text-gray-500">Minimum 8 characters, letters & numbers recommended</p>
                </div>

                <!-- Confirm Password Field with toggle -->
                <div>
                    <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Confirm Password <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <input type="password" id="password_confirmation" name="password_confirmation" required
                            class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 input-focus-effect"
                            placeholder="Confirm your new password">
                        <button type="button" onclick="togglePassword('password_confirmation', 'toggleConfirmIcon')"
                            class="absolute inset-y-0 right-0 pr-3 flex items-center focus:outline-none">
                            <svg id="toggleConfirmIcon"
                                class="h-5 w-5 text-gray-400 hover:text-gray-600 cursor-pointer transition" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <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.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Submit Button with gradient (matching register style) -->
                <button type="submit"
                    class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-rose-800 to-red-900 hover:from-rose-900 hover:to-red-950 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 transition duration-150 transform hover:scale-[1.02] mt-2">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 7v6m0 0l-3-3m3 3l3-3M5 7h6m0 0L8 4m3 3L8 10m-3 7h14a2 2 0 002-2v-6a2 2 0 00-2-2h-4.5" />
                        </svg>
                        Reset Password
                    </span>
                </button>
            </form>

            <!-- Extra Links: Back to Login -->
            <div class="mt-6 pt-4 text-center border-t border-gray-200">
                <p class="text-sm text-gray-600">
                    Remember your password?
                    <a href="{{ route('user.login') }}"
                        class="font-semibold text-indigo-600 hover:text-indigo-500 hover:underline transition ml-1">
                        Sign in
                    </a>
                </p>
                <p class="text-xs text-gray-500 mt-2">
                    <a href="{{ route('user.password.request') }}" class="hover:underline">Resend reset link?</a>
                </p>
            </div>

            <!-- Info box (same style as registration notice) -->
            <div class="mt-5 p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
                <p class="text-xs text-blue-800 font-medium flex items-center gap-1">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                            clip-rule="evenodd" />
                    </svg>
                    Security Tip:
                </p>
                <p class="text-xs text-blue-700 mt-1">Choose a strong password that you haven't used before. After
                    reset, you'll be able to access your account.</p>
            </div>
        </div>

    </div>

@endsection

@push('scripts')
    <!-- JavaScript for password toggle functionality (same as original) -->
    <script>
        function togglePassword(fieldId, iconId) {
            const passwordInput = document.getElementById(fieldId);
            const icon = document.getElementById(iconId);

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.innerHTML =
                    '<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.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>';
            } else {
                passwordInput.type = 'password';
                icon.innerHTML =
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>';
            }
        }
    </script>
@endpush