@extends('layouts.auth')

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

@push('styles')
<style>
    .login-visual-bg {
        background: radial-gradient(circle at 30% 30%, #1a1a2e 0%, #0c0c10 100%);
    }
    .feature-icon-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }
    .feature-icon-container:hover {
        background: rgba(108, 99, 255, 0.1);
        border-color: rgba(108, 99, 255, 0.3);
        transform: translateY(-2px);
    }
    .input-group:focus-within .input-icon {
        color: #6c63ff;
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .floating-illustration {
        animation: float 4s ease-in-out infinite;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen flex flex-col md:flex-row">
    {{-- Left Side: Visual --}}
    <div class="hidden md:flex md:w-1/2 login-visual-bg relative overflow-hidden flex-col justify-center px-12 lg:px-20 py-12">
        {{-- Decorative Elements --}}
        <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
            <div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] rounded-full blur-[120px] bg-brand-500/30"></div>
            <div class="absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] rounded-full blur-[100px] bg-purple-500/20"></div>
        </div>

        <div class="relative z-10 space-y-10">
            {{-- Badge --}}
            <div class="inline-flex items-center gap-2 bg-white/5 backdrop-blur-md border border-white/10 rounded-full px-4 py-2">
                <div class="w-5 h-5 bg-brand-500 rounded-full flex items-center justify-center">
                    <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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>
                <span class="text-white/90 text-xs font-semibold tracking-wide uppercase">New Password</span>
            </div>

            {{-- Text Content --}}
            <div class="max-w-md">
                <h1 class="text-4xl lg:text-5xl font-800 text-white leading-tight mb-6 tracking-tight">
                    Secure your<br>account
                </h1>
                <p class="text-gray-400 text-lg leading-relaxed">
                    Set a new strong password to ensure your account remains safe and accessible only to you.
                </p>
            </div>

            {{-- Features --}}
            <div class="space-y-6 max-w-sm">
                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 21a11.955 11.955 0 01-9.618-7.016m19.236 0A11.955 11.955 0 0112 3a11.955 11.955 0 01-9.618 7.016"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Enhanced Security</h3>
                        <p class="text-gray-500 text-xs">A new password strengthens your account protection</p>
                    </div>
                </div>

                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Strong Requirements</h3>
                        <p class="text-gray-500 text-xs">Use a mix of letters, numbers, and symbols</p>
                    </div>
                </div>
            </div>

            {{-- Illustration --}}
            <div class="pt-10">
                <img src="{{ asset('themes/digital_agence/assets/images/signup_visual.png') }}" alt="DigitalStore" class="w-full max-w-[450px] floating-illustration drop-shadow-2xl">
            </div>
        </div>
    </div>

    {{-- Right Side: Form --}}
    <div class="w-full md:w-1/2 bg-white flex items-center justify-center px-8 lg:px-20 py-12 lg:py-24">
        <div class="w-full max-w-[440px]">
            <div class="mb-10 text-center md:text-left">
                <h2 class="text-3xl font-800 text-gray-900 mb-3 tracking-tight">Reset Password</h2>
                <p class="text-gray-500 text-[15px]">Create a new password for your account.</p>
            </div>

            <form method="POST" action="{{ route('password.update') }}" class="space-y-6">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">

                {{-- Email (Read-only for security/clarity) --}}
                <div class="space-y-2">
                    <label for="email" class="text-sm font-600 text-gray-700 block">Email Address</label>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-400 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="{{ request()->email }}" required readonly
                            class="block w-full pl-11 pr-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-gray-500 text-sm focus:ring-0 cursor-not-allowed outline-none transition-all">
                    </div>
                    @error('email')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password --}}
                <div class="space-y-2">
                    <label for="password" class="text-sm font-600 text-gray-700 block">New Password</label>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-400 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 autofocus
                            class="block w-full pl-11 pr-12 py-3.5 bg-white border border-gray-200 rounded-xl text-gray-900 text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-400"
                            placeholder="Enter new password">
                    </div>
                    @error('password')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Confirm Password --}}
                <div class="space-y-2">
                    <label for="password_confirmation" class="text-sm font-600 text-gray-700 block">Confirm Password</label>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-400 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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_confirmation" name="password_confirmation" required
                            class="block w-full pl-11 pr-12 py-3.5 bg-white border border-gray-200 rounded-xl text-gray-900 text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-400"
                            placeholder="Confirm new password">
                    </div>
                </div>

                {{-- Submit --}}
                <button type="submit"
                    class="w-full py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-xl shadow-lg shadow-brand-500/25 transition-all active:scale-[0.98] focus:ring-4 focus:ring-brand-500/20">
                    Reset Password
                </button>
            </form>
        </div>
    </div>
</div>
@endsection