@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-[#b4bf9f] flex items-center">
    <div class="container mx-auto px-4 py-4 sm:py-8 mt-20 sm:mt-24 lg:mt-32">
        <div class="max-w-md mx-auto rounded-xl shadow-lg bg-[#DBDBBC] relative">
            <!-- Tabs -->
            <div class="flex border-b border-[#2C5530]/10">
                <a href="#login" 
                    onclick="event.preventDefault(); showTab('login')" 
                    id="loginTab"
                    class="flex-1 py-3 sm:py-4 px-4 sm:px-6 text-center text-sm sm:text-base font-medium hover:text-[#2C5530] transition-colors border-b-2 border-[#2C5530] text-[#2C5530]">
                    Giriş Yap
                </a>
                <a href="#register" 
                    onclick="event.preventDefault(); showTab('register')" 
                    id="registerTab"
                    class="flex-1 py-3 sm:py-4 px-4 sm:px-6 text-center text-sm sm:text-base font-medium hover:text-[#2C5530] transition-colors">
                    Üye Ol
                </a>
            </div>

            <!-- Login Form -->
            <div id="loginForm" class="p-4 sm:p-8">
                <!-- Greeting Message (Only for Login) -->
                <div class="text-center mb-6">
                    <h2 class="text-xl sm:text-2xl font-bold text-[#2C5530] mb-2">Merhaba,</h2>
                    <p class="text-[#2C5530]/80 text-sm sm:text-base">Serap Gerebiç'e giriş yap veya hesap oluştur, indirimleri kaçırma!</p>
                </div>
                
                <form method="POST" action="{{ route('customer.login') }}" class="space-y-4 sm:space-y-6">
                    @csrf
                    <div class="space-y-2">
                        <label for="login-email" class="block text-base sm:text-lg font-medium text-[#2C5530]">E-posta</label>
                        <input id="login-email" 
                            type="email" 
                            name="email" 
                            value="{{ old('email') }}" 
                            required
                            placeholder="E-posta adresinizi giriniz"
                            class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="space-y-2">
                        <label for="login-password" class="block text-base sm:text-lg font-medium text-[#2C5530]">Şifre</label>
                        <input id="login-password" 
                            type="password" 
                            name="password" 
                            required
                            placeholder="Şifrenizi giriniz"
                            class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                        @error('password')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                        <div class="flex items-center">
                            <input type="checkbox" 
                                name="remember" 
                                id="remember"
                                class="w-4 h-4 rounded border-2 border-[#2C5530]/30 text-[#2C5530] focus:ring-[#2C5530] focus:ring-offset-0">
                            <label for="remember" class="ml-3 text-sm sm:text-base text-[#2C5530]">Beni Hatırla</label>
                        </div>
                        <a href="{{ route('customer.password.request') }}" class="text-sm sm:text-base text-[#2C5530] hover:text-[#2C5530]/80 transition-colors duration-200">
                            Şifremi Unuttum
                        </a>
                    </div>

                    <button type="submit"
                        class="w-full px-6 py-2.5 sm:py-3 bg-[#2C5530] text-white rounded-lg hover:bg-[#2C5530]/90 transition-colors duration-200 font-medium text-sm sm:text-base">
                        Giriş Yap
                    </button>
                </form>
            </div>

            <!-- Register Form -->
            <div id="registerForm" class="p-4 sm:p-8 hidden">
                <form method="POST" action="{{ route('customer.register') }}" class="space-y-4 sm:space-y-6" autocomplete="off">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label for="first_name" class="block text-base sm:text-lg font-medium text-[#2C5530]">Ad</label>
                            <input id="first_name" 
                                type="text" 
                                name="first_name" 
                                value="{{ old('first_name') }}" 
                                required
                                autocomplete="off"
                                placeholder="Adınız"
                                class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                            @error('first_name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="space-y-2">
                            <label for="last_name" class="block text-base sm:text-lg font-medium text-[#2C5530]">Soyad</label>
                            <input id="last_name" 
                                type="text" 
                                name="last_name" 
                                value="{{ old('last_name') }}" 
                                required
                                autocomplete="off"
                                placeholder="Soyadınız"
                                class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                            @error('last_name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="register-email" class="block text-base sm:text-lg font-medium text-[#2C5530]">E-posta</label>
                        <input id="register-email" 
                            type="email" 
                            name="register_email"
                            value="{{ old('register_email') }}" 
                            required
                            autocomplete="off"
                            placeholder="E-posta adresinizi giriniz"
                            class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                        @error('register_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="space-y-2">
                        <label for="phone" class="block text-base sm:text-lg font-medium text-[#2C5530]">Telefon</label>
                        <input id="phone" 
                            type="number" 
                            name="phone" 
                            value="{{ old('phone') }}" 
                            required
                            autocomplete="off"
                            min="05000000000"
                            max="05999999999"
                            placeholder="05XXXXXXXXX"
                            class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                        @error('phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="space-y-2">
                        <label for="password" class="block text-base sm:text-lg font-medium text-[#2C5530]">Şifre</label>
                        <input id="password" 
                            type="password" 
                            name="register_password"
                            required
                            autocomplete="new-password"
                            placeholder="Şifrenizi giriniz"
                            class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                        @error('register_password')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="space-y-2">
                        <label for="password_confirmation" class="block text-base sm:text-lg font-medium text-[#2C5530]">Şifre Tekrar</label>
                        <input id="password_confirmation" 
                            type="password" 
                            name="register_password_confirmation"
                            required
                            autocomplete="new-password"
                            placeholder="Şifrenizi tekrar giriniz"
                            class="block w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg bg-[#b4bf9f]/50 border-2 border-[#2C5530]/10 text-[#2C5530] placeholder-[#2C5530]/50 focus:outline-none focus:border-[#2C5530]/30 focus:ring-0 transition duration-150 ease-in-out text-sm sm:text-base">
                    </div>

                    <div class="flex items-start space-x-3">
                        <input type="checkbox" 
                            name="terms" 
                            id="terms" 
                            required
                            class="mt-1 w-4 h-4 rounded border-2 border-[#2C5530]/30 text-[#2C5530] focus:ring-[#2C5530] focus:ring-offset-0">
                        <label for="terms" class="text-sm sm:text-base text-[#2C5530]">
                            <a href="{{ route('terms') }}" target="_blank" class="text-[#2C5530] hover:text-[#2C5530]/80 transition-colors duration-200">Üyelik sözleşmesini</a>
                            okudum ve kabul ediyorum
                        </label>
                    </div>
                    @error('terms')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror

                    <button type="submit"
                        class="w-full px-6 py-2.5 sm:py-3 bg-[#2C5530] text-white rounded-lg hover:bg-[#2C5530]/90 transition-colors duration-200 font-medium text-sm sm:text-base mb-4">
                        Üye Ol
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function showTab(tabName) {
    // Hide all forms
    document.getElementById('loginForm').classList.add('hidden');
    document.getElementById('registerForm').classList.add('hidden');
    
    // Remove active classes from all tabs
    document.getElementById('loginTab').classList.remove('border-b-2', 'border-[#2C5530]', 'text-[#2C5530]');
    document.getElementById('registerTab').classList.remove('border-b-2', 'border-[#2C5530]', 'text-[#2C5530]');
    
    // Show selected form and activate tab
    if (tabName === 'login') {
        document.getElementById('loginForm').classList.remove('hidden');
        document.getElementById('loginTab').classList.add('border-b-2', 'border-[#2C5530]', 'text-[#2C5530]');
        history.pushState(null, '', '#login');
    } else {
        document.getElementById('registerForm').classList.remove('hidden');
        document.getElementById('registerTab').classList.add('border-b-2', 'border-[#2C5530]', 'text-[#2C5530]');
        history.pushState(null, '', '#register');
    }
}

// Check URL hash on page load and validation errors
document.addEventListener('DOMContentLoaded', function() {
    @if($errors->any())
        @if($errors->has('first_name') || $errors->has('last_name') || $errors->has('register_email') || 
            $errors->has('phone') || $errors->has('register_password') || $errors->has('terms'))
            showTab('register');
        @elseif($errors->has('email') || $errors->has('password'))
            showTab('login');
        @else
            const hash = window.location.hash.replace('#', '') || 'login';
            showTab(hash);
        @endif
    @else
        const hash = window.location.hash.replace('#', '') || 'login';
        showTab(hash);
    @endif
});

// Hash değişikliğini dinle
window.addEventListener('popstate', function() {
    const hash = window.location.hash.replace('#', '') || 'login';
    showTab(hash);
});

// Google Data Layer için kayıt başarı olayını izle
@if(session()->has('registration_success'))
window.addEventListener('load', function() {
    // Google Data Layer'a kayıt başarı olayını gönder
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'user_registration',
        'user_id': '{{ session('registration_success.customer_id') }}',
        'user_email': '{{ session('registration_success.customer_email') }}',
        'user_first_name': '{{ session('registration_success.first_name') }}',
        'user_last_name': '{{ session('registration_success.last_name') }}',
        'registration_date': '{{ session('registration_success.registration_date') }}'
    });
    console.log('Registration success event pushed to dataLayer');
});
@endif
</script>
@endsection