@extends('layouts.guest1')
@section('title', 'Sign In')
@section('content')

<!-- BrimStone Brokers Client Login -->
<div class="min-h-screen bg-gray-900 relative overflow-hidden py-12 px-4 sm:px-6 lg:px-8">
    <div class="relative z-10 flex min-h-screen items-center justify-center">
        <div class="w-full max-w-lg">
            <!-- Premium Login Card -->
            <div class="bg-[#0f2b48]/90 border border-gray-700/50 rounded-2xl p-8 sm:p-10 shadow-2xl backdrop-blur-md">
                
                <!-- Status Alert -->
                @if (Session::has('status'))
                    <div class="mb-6 p-4 bg-blue-500/20 border border-blue-400/30 rounded-xl" role="alert">
                        <div class="flex items-center gap-3">
                            <i data-lucide="info" class="h-5 w-5 text-blue-400 flex-shrink-0"></i>
                            <div class="text-sm text-blue-100">
                                {{ session('status') }}
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Header Section -->
                <div class="text-center mb-8">
                    <!-- Logo -->
                    <div class="flex items-center justify-center mb-6">
                        <img src="{{ asset('storage/app/public/'.$settings->logo)}}"
                             class="h-16 w-auto"
                             alt="{{ $settings->site_name }}" />
                    </div>

                    <!-- Title -->
                    <h1 class="text-3xl font-bold text-white mb-2">
                        Welcome to <span class="text-[#d4af37]">{{ $settings->site_name }}</span>
                    </h1>
                    <p class="text-gray-300 text-sm">
                        Access your wealth management & stock portfolio
                    </p>

                    <!-- Quality Indicators -->
                    <div class="flex items-center justify-center gap-4 mt-6 text-xs text-gray-400">
                        <div class="flex items-center gap-1">
                            <i data-lucide="award" class="w-3.5 h-3.5 text-[#d4af37]"></i>
                            <span>Institutional Grade</span>
                        </div>
                        <div class="w-1.5 h-1.5 bg-gray-600 rounded-full"></div>
                        <div class="flex items-center gap-1">
                            <i data-lucide="shield" class="w-3.5 h-3.5 text-[#d4af37]"></i>
                            <span>Secure Portfolio</span>
                        </div>
                    </div>
                </div>

                <!-- Error Messages -->
                @error('email')
                    <div class="mb-6 p-4 bg-red-500/20 border border-red-400/30 rounded-xl">
                        <div class="flex items-center gap-3">
                            <i data-lucide="alert-circle" class="h-5 w-5 text-red-400 flex-shrink-0"></i>
                            <div class="text-sm text-red-100">
                                {{ $message }}
                            </div>
                        </div>
                    </div>
                @enderror

                <!-- Login Form -->
                <form action="{{ route('login') }}" method="post" class="space-y-6">
                    @csrf

                    <!-- Email Field -->
                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-semibold text-gray-200">
                            Email Address or Username
                        </label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                <i data-lucide="mail" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors duration-200"></i>
                            </div>
                            <input type="text" name="email" id="email" required
                                   class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-4 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                   placeholder="your.email@example.com"
                                   value="{{ old('email') }}">
                        </div>
                    </div>

                    <!-- Password Field -->
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-semibold text-gray-200">
                            Password
                        </label>
                        <div class="relative group" x-data="{ showPassword: false }">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-4">
                                <i data-lucide="lock" class="h-5 w-5 text-gray-400 group-focus-within:text-[#d4af37] transition-colors duration-200"></i>
                            </div>
                            <input type="password" name="password" id="password" required
                                   :type="showPassword ? 'text' : 'password'"
                                   class="block w-full rounded-xl border border-gray-600 bg-gray-900/50 pl-12 pr-12 py-3.5 text-white placeholder-gray-400 focus:border-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 focus:bg-gray-800 transition-all duration-200 text-sm"
                                   placeholder="Enter your password">
                            <button type="button" @click="showPassword = !showPassword"
                                    class="absolute inset-y-0 right-0 flex items-center pr-4 text-gray-400 hover:text-[#d4af37] transition-colors">
                                <i data-lucide="eye" class="h-5 w-5" x-show="!showPassword"></i>
                                <i data-lucide="eye-off" class="h-5 w-5" x-show="showPassword" x-cloak></i>
                            </button>
                        </div>
                    </div>

                    <!-- Remember Me & Forgot Password -->
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center">
                            <input type="checkbox" name="remember" id="remember"
                                   class="h-4 w-4 rounded border-gray-600 bg-gray-900 text-[#d4af37] focus:ring-2 focus:ring-[#d4af37]/20 transition-colors">
                            <label for="remember" class="ml-3 text-gray-300 font-medium">
                                Remember me
                            </label>
                        </div>
                        <a href="{{ route('password.request') }}"
                           class="text-[#d4af37] hover:text-[#e5c150] transition-colors underline underline-offset-2">
                            Forgot password?
                        </a>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit"
                            class="w-full inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-[#d4af37] to-[#b3922e] hover:from-[#e5c150] hover:to-[#cfa736] text-gray-900 font-bold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group">
                        <i data-lucide="log-in" class="h-5 w-5"></i>
                        <span>Access Dashboard</span>
                    </button>

                    <!-- Sign Up Link -->
                    <p class="text-center text-sm text-gray-400 pt-4">
                        New investor?
                        <a href="{{ route('register') }}"
                           class="font-bold text-[#d4af37] hover:text-[#e5c150] transition-colors underline underline-offset-2">
                            Create your account
                        </a>
                    </p>
                </form>

                <!-- Security Badges -->
                <div class="flex items-center justify-center gap-6 py-6 mt-6 border-t border-gray-700/50 text-xs text-gray-400">
                    <div class="flex items-center gap-1">
                        <i data-lucide="shield-check" class="w-3.5 h-3.5 text-green-400"></i>
                        <span>SSL Secured</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <i data-lucide="lock" class="w-3.5 h-3.5 text-blue-400"></i>
                        <span>256-bit Encryption</span>
                    </div>
                </div>

                <!-- Copyright -->
                <p class="text-center text-xs text-gray-500">
                    © {{ date('Y') }} {{ $settings->site_name }}. All rights reserved.
                </p>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/lucide@latest"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const emailField = document.getElementById('email');
        if (emailField) {
            emailField.focus();
        }
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>

@endsection
