@extends('layouts.frontend')

@section('title', 'إنشاء حساب جديد')

@section('content')
<style>
    input:-webkit-autofill {
        -webkit-text-fill-color: white !important;
        -webkit-box-shadow: 0 0 0px 1000px #111 inset !important;
    }
    .auth-card {
        background: #111;
        border: 1px solid #222;
        border-radius: 2.5rem;
        max-width: 450px;
        width: 100%;
        margin: auto;
        overflow: hidden;
    }
    .auth-tabs {
        display: flex;
        border-bottom: 1px solid #222;
    }
    .auth-tab {
        flex: 1;
        padding: 1.5rem;
        text-align: center;
        font-weight: bold;
        color: #444;
        transition: all 0.3s;
        text-decoration: none;
    }
    .auth-tab.active {
        color: #d4af37;
        background: #161616;
        border-bottom: 2px solid #d4af37;
    }
    .auth-input {
        background: #161616 !important;
        border: 1px solid #444 !important; /* حدود حادة وواضحة */
        color: white !important;
        border-radius: 50px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem;
        width: 100%;
        outline: none;
        transition: all 0.2s ease;
        -webkit-appearance: none;
        backface-visibility: hidden;
    }
    .auth-input:focus {
        border-color: #d4af37 !important;
        background: #1a1a1a !important;
    }
    .btn-auth {
        background: linear-gradient(90deg, #d4af37, #f9d976);
        color: #000;
        font-weight: 800;
        border-radius: 3rem;
        padding: 0.9rem !important;
        width: 100%;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 0.95rem;
    }
    .btn-auth:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
    }
</style>

<div class="min-h-screen flex items-center justify-center py-20 px-4 bg-[#0a0a0a]">
    <div class="auth-card shadow-2xl">
        <div class="auth-tabs">
            <a href="{{ route('customer.login') }}" class="auth-tab">تسجيل الدخول</a>
            <a href="{{ route('customer.register') }}" class="auth-tab active">حساب جديد</a>
        </div>

        <div class="p-10 px-12">
            @if (session('success'))
                <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #10b981; padding: 1rem; border-radius: 1rem; margin-bottom: 2rem; font-size: 0.85rem; text-align: center;">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem; border-radius: 1rem; margin-bottom: 2rem; font-size: 0.85rem; text-align: center;">
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('customer.register.post') }}" method="POST" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-3 mr-4 text-right">الاسم الكامل</label>
                    <input type="text" name="name" value="{{ old('name') }}" required 
                        class="auth-input" 
                        placeholder="الأسم بالكامل">
                    @error('name') <p class="text-red-500 text-[10px] mt-2 mr-4 text-right">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-3 mr-4 text-right">البريد الإلكتروني</label>
                    <input type="email" name="email" value="{{ old('email') }}" required 
                        class="auth-input" 
                        placeholder="example@mail.com">
                    @error('email') <p class="text-red-500 text-[10px] mt-2 mr-4 text-right">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-3 mr-4 text-right">رقم الجوال</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" required 
                        class="auth-input" 
                        placeholder="05xxxxxxxx">
                    @error('phone') <p class="text-red-500 text-[10px] mt-2 mr-4 text-right">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-3 mr-4 text-right">كلمة المرور</label>
                        <input type="password" name="password" required 
                            class="auth-input" 
                            placeholder="••••••••">
                        @error('password') <p class="text-red-500 text-[10px] mt-2 mr-4 text-right">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-3 mr-4 text-right">تأكيد المرور</label>
                        <input type="password" name="password_confirmation" required 
                            class="auth-input" 
                            placeholder="••••••••">
                    </div>
                </div>

                <div class="flex items-center justify-end px-4">
                    <label for="terms" class="mr-2 block text-xs text-gray-500 cursor-pointer">أوافق على الشروط</label>
                    <input id="terms" name="terms" type="checkbox" required checked class="h-4 w-4 text-[#d4af37] border-none bg-[#222] rounded cursor-pointer focus:ring-0">
                </div>

                <button type="submit" class="btn-auth shadow-lg active:scale-95">
                    إنشاء الحساب
                </button>
            </form>

            <div class="mt-10 text-center">
                <a href="{{ route('customer.login') }}" class="text-gray-500 text-xs font-medium hover:text-[#d4af37] transition-colors">لديك حساب بالفعل؟</a>
            </div>
        </div>
    </div>
</div>
@endsection