@extends('layouts.site')
@section('title', 'Giriş / Kayıt Ol — Kolay Abonelik')
@section('content')
<div class="max-w-md mx-auto px-4 py-14">
    <div class="flex border-b mb-6">
        <button type="button" id="tab-login-btn" class="flex-1 py-2.5 text-sm font-semibold border-b-2">Giriş Yap</button>
        <button type="button" id="tab-register-btn" class="flex-1 py-2.5 text-sm font-semibold border-b-2 border-transparent text-slate-400">Kayıt Ol</button>
    </div>

    <p class="text-xs text-slate-500 mb-6">Zaten hesabınız varsa giriş yapın; yoksa hemen ücretsiz kayıt olup başvurularınızı takip edin.</p>

    <div id="panel-login">
        <form method="POST" action="{{ route('customer.login.store') }}" class="space-y-4">
            @csrf
            <input type="hidden" name="_form" value="login">
            <div>
                <label class="block text-sm font-medium mb-1">E-posta</label>
                <input type="email" name="email" required value="{{ old('_form') === 'login' ? old('email') : '' }}" class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Şifre</label>
                <input type="password" name="password" required class="w-full border rounded px-3 py-2">
            </div>
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="remember" value="1"> Beni hatırla
            </label>
            @if ($errors->any() && old('_form') === 'login')
                <div class="text-sm text-red-600">{{ $errors->first() }}</div>
            @endif
            <button class="w-full bg-blue-600 text-white rounded py-2.5 font-semibold hover:bg-blue-700">Giriş Yap</button>
        </form>
    </div>

    <div id="panel-register" class="hidden">
        <form method="POST" action="{{ route('customer.register.store') }}" class="space-y-4">
            @csrf
            <input type="hidden" name="_form" value="register">
            <div>
                <label class="block text-sm font-medium mb-1">Ad Soyad</label>
                <input type="text" name="name" required value="{{ old('_form') === 'register' ? old('name') : '' }}" class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">E-posta</label>
                <input type="email" name="email" required value="{{ old('_form') === 'register' ? old('email') : '' }}" class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Telefon</label>
                <input type="text" name="phone" value="{{ old('_form') === 'register' ? old('phone') : '' }}" class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Şifre</label>
                <input type="password" name="password" required class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Şifre (Tekrar)</label>
                <input type="password" name="password_confirmation" required class="w-full border rounded px-3 py-2">
            </div>
            @if ($errors->any() && old('_form') === 'register')
                <div class="text-sm text-red-600">
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <button class="w-full bg-blue-600 text-white rounded py-2.5 font-semibold hover:bg-blue-700">Kayıt Ol</button>
        </form>
    </div>
</div>

<script>
(function () {
    const loginBtn = document.getElementById('tab-login-btn');
    const registerBtn = document.getElementById('tab-register-btn');
    const loginPanel = document.getElementById('panel-login');
    const registerPanel = document.getElementById('panel-register');

    function showLogin() {
        loginPanel.classList.remove('hidden');
        registerPanel.classList.add('hidden');
        loginBtn.classList.add('border-blue-600');
        registerBtn.classList.remove('border-blue-600');
        registerBtn.classList.add('border-transparent', 'text-slate-400');
        loginBtn.classList.remove('text-slate-400');
    }

    function showRegister() {
        registerPanel.classList.remove('hidden');
        loginPanel.classList.add('hidden');
        registerBtn.classList.add('border-blue-600');
        loginBtn.classList.remove('border-blue-600');
        loginBtn.classList.add('border-transparent', 'text-slate-400');
        registerBtn.classList.remove('text-slate-400');
    }

    loginBtn.addEventListener('click', showLogin);
    registerBtn.addEventListener('click', showRegister);

    if ('{{ old('_form', 'login') }}' === 'register') {
        showRegister();
    } else {
        showLogin();
    }
})();
</script>
@endsection