@extends('layouts.app')
@section('title', 'My Account - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">My Account</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Account</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm border border-gray-100 p-8">
            {{-- Login/Register Tabs --}}
            <div class="flex mb-8 border-b border-gray-100">
                <button onclick="document.getElementById('login-form').classList.remove('hidden'); document.getElementById('register-form').classList.add('hidden'); this.classList.add('text-brand-red'); this.nextElementSibling.classList.remove('text-brand-red'); this.nextElementSibling.classList.add('text-gray-500')"
                    class="flex-1 py-4 text-center font-bold uppercase tracking-widest text-sm transition-colors text-brand-red relative" id="login-tab">
                    Log In <span class="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-red" id="login-indicator"></span>
                </button>
                <button onclick="document.getElementById('register-form').classList.remove('hidden'); document.getElementById('login-form').classList.add('hidden'); this.classList.add('text-brand-red'); this.previousElementSibling.classList.remove('text-brand-red'); this.previousElementSibling.classList.add('text-gray-500'); document.getElementById('login-indicator').classList.add('hidden')"
                    class="flex-1 py-4 text-center font-bold uppercase tracking-widest text-sm transition-colors text-gray-500 hover:text-gray-800">
                    Sign Up
                </button>
            </div>

            @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6 text-sm">
                @foreach($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
            @endif

            {{-- Login Form --}}
            <form id="login-form" method="POST" action="{{ url('/login') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Email Address *</label>
                    <input required type="email" name="email" value="{{ old('email') }}" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Password *</label>
                    <input required type="password" name="password" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red">
                </div>
                <div class="flex justify-between items-center text-sm mb-6">
                    <label class="flex items-center space-x-2 cursor-pointer text-gray-600">
                        <input type="checkbox" name="remember" class="accent-red-600"> <span>Remember me</span>
                    </label>
                </div>
                <button type="submit" class="w-full bg-brand-red text-white py-4 rounded font-extrabold uppercase tracking-widest hover:bg-red-700 transition-colors mt-4">Log In</button>
            </form>

            {{-- Register Form --}}
            <form id="register-form" method="POST" action="{{ url('/register') }}" class="space-y-4 hidden">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Full Name *</label>
                    <input required type="text" name="name" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Email Address *</label>
                    <input required type="email" name="email" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Password *</label>
                    <input required type="password" name="password" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Confirm Password *</label>
                    <input required type="password" name="password_confirmation" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red">
                </div>
                <button type="submit" class="w-full bg-brand-red text-white py-4 rounded font-extrabold uppercase tracking-widest hover:bg-red-700 transition-colors mt-4">Register</button>
            </form>
        </div>
    </div>
</div>
@endsection