@extends('layouts.portal')

@section('content')
<section class="section">
    <div style="max-width: 450px; margin: 0 auto; padding-top: 4rem;">
        <div
            style="background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 3rem; text-align: center;">
            <h2 class="section-title" style="font-size: 2rem; margin-bottom: 0.5rem;">Customer <span>Login</span></h2>
            <p class="section-subtitle" style="margin-bottom: 2rem; font-size: 0.9rem;">Access your booking details,
                session history & order status.</p>

            @if($errors->any())
            <div
                style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; padding: 1rem; border-radius: 10px; margin-bottom: 2rem; text-align: left; font-size: 0.9rem;">
                <ul style="margin: 0; padding-left: 1.2rem;">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form
                action="{{ route('portal.customer.login.submit', ['simulate_host' => request()->query('simulate_host')]) }}"
                method="POST">
                @csrf
                <div style="margin-bottom: 1.5rem; text-align: left;">
                    <label
                        style="display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-size: 0.9rem;">Name
                        or Email</label>
                    <input type="text" name="login" value="{{ old('login') }}" required placeholder="Your Name or Email"
                        style="width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 0.8rem 1rem; border-radius: 10px; font-family: inherit;">
                </div>
                <div style="margin-bottom: 2rem; text-align: left;">
                    <label
                        style="display: block; margin-bottom: 0.5rem; color: var(--text-muted); font-size: 0.9rem;">Password</label>
                    <input type="password" name="password" required placeholder="••••••••"
                        style="width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 0.8rem 1rem; border-radius: 10px; font-family: inherit;">
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%; padding: 0.9rem;">Login to
                    Portal</button>
            </form>

            <div
                style="margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; display: flex; justify-content: space-around; font-size: 0.85rem; flex-wrap: wrap; gap: 10px;">
                <a href="{{ route('portal.customer.register', ['simulate_host' => request()->query('simulate_host')]) }}"
                    style="color: #4ade80; text-decoration: none; font-weight: bold;">New here? Register</a>
                <a href="{{ route('portal.customer.profile', ['simulate_host' => request()->query('simulate_host')]) }}"
                    style="color: var(--primary-light); text-decoration: none;">Profile & Bookings</a>
                <a href="{{ route('portal.customer.shopping', ['simulate_host' => request()->query('simulate_host')]) }}"
                    style="color: var(--primary-light); text-decoration: none;">Shopping Details</a>
            </div>
        </div>
    </div>
</section>
@endsection