@extends('layouts.portal')

@section('content')
<section style="min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 2rem;">
    <div style="background: rgba(17, 24, 39, 0.75); backdrop-filter: blur(20px); border: 1px solid rgba(99, 102, 241, 0.3); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(99, 102, 241, 0.1); border-radius: 24px; padding: 3rem 2.5rem; width: 100%; max-width: 440px; text-align: center; position: relative; overflow: hidden;">
        
        <!-- Glowing background accents -->
        <div style="position: absolute; top: -60px; right: -60px; width: 120px; height: 120px; background: var(--primary); filter: blur(70px); opacity: 0.5;"></div>
        <div style="position: absolute; bottom: -60px; left: -60px; width: 120px; height: 120px; background: var(--accent); filter: blur(70px); opacity: 0.3;"></div>

        <div style="width: 70px; height: 70px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.4)); border: 1px solid rgba(99, 102, 241, 0.4); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem;">
            🔑
        </div>

        <h2 style="font-size: 2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
            Admin <span>Login</span>
        </h2>
        <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem;">
            Enter password to access practice admin panel.
        </p>

        @if(session('error'))
            <div style="background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #EF4444; padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: 0.88rem; text-align: left;">
                ⚠️ {{ session('error') }}
            </div>
        @endif

        @if(session('success'))
            <div style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #34D399; padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: 0.88rem; text-align: left;">
                ✓ {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.login.submit') }}" method="POST" style="display: flex; flex-direction: column; gap: 1.2rem; text-align: left; position: relative; z-index: 1;">
            @csrf

            <!-- Tenant Identifier / Name -->
            <div class="form-group" style="margin: 0;">
                <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    Tenant / Practice Name
                </label>
                
                @if(isset($currentTenant) && $currentTenant)
                    <input type="text" name="tenant_identifier" value="{{ $currentTenant->name }}" readonly style="width: 100%; background: rgba(0,0,0,0.6); border: 1px solid rgba(99, 102, 241, 0.4); border-radius: 10px; padding: 0.85rem 1rem; outline: none; color: #818CF8; font-size: 0.95rem; font-weight: 700; cursor: not-allowed;">
                    <input type="hidden" name="simulate_host" value="{{ $currentTenant->custom_domain }}">
                @else
                    <input type="text" name="tenant_identifier" required placeholder="Enter Practice Name or Domain" value="{{ old('tenant_identifier') }}" style="width: 100%; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.85rem 1rem; outline: none; color: white; font-size: 0.92rem;">
                @endif
            </div>

            <!-- Password Input -->
            <div class="form-group" style="margin: 0;">
                <label for="password" style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    Admin Password
                </label>
                <input type="password" id="password" name="password" placeholder="Enter your admin password" required autofocus style="width: 100%; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.85rem 1rem; outline: none; color: white; font-size: 0.95rem;">
            </div>

            <!-- Submit Button -->
            <button type="submit" style="width: 100%; padding: 0.9rem; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--primary) 0%, #4F46E5 100%); color: white; font-size: 0.95rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); transition: all 0.3s ease; margin-top: 0.5rem;" onmouseover="this.style.transform='translateY(-2px)';" onmouseout="this.style.transform='translateY(0)';">
                Login to Admin Panel →
            </button>
        </form>

    </div>
</section>
@endsection