<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar - INTERIA</title>

    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        :root {
            --color-primary: #fef9c3;
            --color-secondary: #fed7aa;
            --brand-text: #78350f;
        }
        * {
            font-family: 'Poppins', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }

        /* Background Decorations */
        body::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        body::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -15%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(15, 23, 42, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        /* Modern Card */
        .glass-card {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }

        /* Gradient Primary - Match INTERIA Theme */
        .gradient-primary {
                background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 50%, #fde68a 100%);
            }

        .gradient-secondary {
                background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%);
                color: #78350f !important;
            }

        .gradient-text {
                background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

        /* Feature Card - Sama persis dengan halaman login */
        .feature-card {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(217, 119, 6, 0.1);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateX(8px);
            border-color: rgba(217, 119, 6, 0.3);
            background: white;
        }

        /* Input Styles */
        .input-group {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            transition: all 0.3s ease;
            z-index: 2;
        }

        .input-field {
            width: 100%;
            padding: 0.875rem 1rem 0.875rem 2.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 1rem;
            background: #fafbfc;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .input-field:focus {
            outline: none;
            border-color: #d97706;
            background: white;
            box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1);
        }

        .input-field:focus+.input-icon {
            color: #d97706;
        }

        /* Floating Label */
        .floating-label {
            position: absolute;
            top: -0.65rem;
            left: 0.75rem;
            padding: 0 0.5rem;
            background: white;
            font-size: 0.75rem;
            font-weight: 600;
            color: #d97706;
            z-index: 10;
            letter-spacing: 0.025em;
        }

        /* Animation */
        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .float-animation {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        /* Button Hover */
        .btn-register {
            background: linear-gradient(135deg, #fef9c3 0%, #fed7aa 50%, #fde68a 100%);
            color: #78350f;
            font-weight: 700;
            transition: all 0.3s ease;
            border: 1px solid #fde68a;
        }

        .btn-register:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(253, 186, 116, 0.5);
            background: linear-gradient(135deg, #fde68a 0%, #fdba74 50%, #fef9c3 100%);
        }

        /* Checkbox Custom */
        .custom-checkbox {
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid #cbd5e1;
            border-radius: 0.375rem;
            transition: all 0.2s ease;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.125rem;
        }

        .custom-checkbox.checked {
            background: #d97706;
            border-color: #d97706;
        }

        .custom-checkbox.checked i {
            display: block;
        }

        /* Password Strength Indicator */
        .strength-bar {
            height: 4px;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .glass-card {
                margin: 1rem;
            }
        }
    </style>
</head>

<body class="flex items-center justify-center min-h-screen p-4">

    <div class="w-full max-w-6xl animate-fade-in-up">
        <div class="flex flex-col lg:flex-row gap-8 items-center">

            <!-- Left Side - Brand Showcase -->
            <div class="hidden lg:flex flex-1">
                <div class="relative w-full max-w-lg mx-auto">
                    <!-- Decorative Circles -->
                    <div class="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-amber-100 to-orange-100 rounded-full opacity-60 float-animation"></div>
                    <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-gradient-to-br from-slate-200 to-gray-300 rounded-full opacity-60 float-animation" style="animation-delay: 2s;"></div>

                    <!-- Main Card -->
                    <div class="relative glass-card rounded-2xl p-10 shadow-xl">
                        <!-- Logo Section -->
                        <div class="text-center mb-8">
                            <div class="w-24 h-24 gradient-secondary rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                                <i class="fas fa-couch text-[#78350f] text-3xl"></i>
                            </div>
                            <h1 class="text-4xl font-bold gradient-text mb-3">INTERIA</h1>
                            <p class="text-gray-600 text-base">Toko Premium e-Commerce Anda</p>
                        </div>

                        <!-- Member Benefits - SAMA PERSIS DENGAN LOGIN -->
                        <div class="space-y-4">
                            <div class="feature-card rounded-xl p-4 transition-all">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 gradient-secondary rounded-lg flex items-center justify-center mr-4 shadow-sm flex-shrink-0">
                                        <i class="fas fa-truck text-[#78350f] text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800 text-sm">Free Delivery</p>
                                        <p class="text-xs text-gray-500">Gratis ongkir min belanja Rp 5.000.000</p>
                                    </div>
                                </div>
                            </div>

                            <div class="feature-card rounded-xl p-4 transition-all">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 gradient-secondary rounded-lg flex items-center justify-center mr-4 shadow-sm flex-shrink-0">
                                        <i class="fas fa-shield-alt text-[#78350f] text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800 text-sm">Garansi Resmi</p>
                                        <p class="text-xs text-gray-500">Produk original dengan garansi</p>
                                    </div>
                                </div>
                            </div>

                            <div class="feature-card rounded-xl p-4 transition-all">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 gradient-secondary rounded-lg flex items-center justify-center mr-4 shadow-sm flex-shrink-0">
                                        <i class="fas fa-credit-card text-[#78350f] text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800 text-sm">Pembayaran Aman</p>
                                        <p class="text-xs text-gray-500">Various payment methods</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Side - Register Form -->
            <div class="w-full lg:w-2/5">
                <div class="glass-card rounded-2xl p-8 md:p-10 shadow-xl">
                    <!-- Form Header -->
                    <div class="mb-8">
                        <div class="flex items-center justify-between mb-2">
                            <h2 class="text-2xl font-bold text-slate-800">Buat Akun Baru</h2>
                            <i class="fas fa-user-plus text-amber-600 text-2xl opacity-50"></i>
                        </div>
                        <p class="text-gray-500 text-sm">Isi data diri untuk bergabung dengan INTERIA</p>
                    </div>

                    <!-- Error Messages -->
                    @if($errors->any())
                    <div class="mb-6 p-4 rounded-xl bg-gradient-to-r from-red-50 to-rose-50 border border-red-200">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-red-800 mb-1">Perhatian!</p>
                                <ul class="text-sm text-red-700 space-y-1">
                                    @foreach($errors->all() as $error)
                                    <li class="flex items-center gap-2">
                                        <i class="fas fa-circle text-[6px]"></i>
                                        <span>{{ $error }}</span>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Register Form -->
                    <form method="POST" action="{{ route('register') }}" class="space-y-5">
                        @csrf

                        <!-- Name Field -->
                        <div class="input-group">
                            <div class="relative">
                                <div class="floating-label">Nama Lengkap</div>
                                <i class="fas fa-user input-icon"></i>
                                <input id="name"
                                    name="name"
                                    type="text"
                                    required
                                    autofocus
                                    value="{{ old('name') }}"
                                    class="input-field"
                                    placeholder="Masukkan nama lengkap">
                            </div>
                        </div>

                        <!-- Email Field -->
                        <div class="input-group">
                            <div class="relative">
                                <div class="floating-label">Alamat Email</div>
                                <i class="fas fa-envelope input-icon"></i>
                                <input id="email"
                                    name="email"
                                    type="email"
                                    required
                                    value="{{ old('email') }}"
                                    class="input-field"
                                    placeholder="nama@email.com">
                            </div>
                        </div>

                        <!-- Password Field -->
                        <div class="input-group">
                            <div class="relative">
                                <div class="floating-label">Kata Sandi</div>
                                <i class="fas fa-lock input-icon"></i>
                                <input id="password"
                                    name="password"
                                    type="password"
                                    required
                                    class="input-field pr-12"
                                    placeholder="Minimal 8 karakter"
                                    onkeyup="checkPasswordStrength(this.value)">
                                <button type="button"
                                    onclick="togglePassword('password', 'eye-icon-password')"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-amber-600 transition-colors cursor-pointer z-10">
                                    <i id="eye-icon-password" class="fas fa-eye"></i>
                                </button>
                            </div>

                            <!-- Password Strength Indicator -->
                            <div class="mt-2">
                                <div class="flex gap-1">
                                    <div id="strength-bar-1" class="strength-bar flex-1 bg-gray-200"></div>
                                    <div id="strength-bar-2" class="strength-bar flex-1 bg-gray-200"></div>
                                    <div id="strength-bar-3" class="strength-bar flex-1 bg-gray-200"></div>
                                    <div id="strength-bar-4" class="strength-bar flex-1 bg-gray-200"></div>
                                </div>
                                <p id="strength-text" class="text-xs text-gray-500 mt-1">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Gunakan minimal 8 karakter dengan kombinasi huruf dan angka
                                </p>
                            </div>
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="input-group">
                            <div class="relative">
                                <div class="floating-label">Konfirmasi Kata Sandi</div>
                                <i class="fas fa-lock input-icon"></i>
                                <input id="password_confirmation"
                                    name="password_confirmation"
                                    type="password"
                                    required
                                    class="input-field pr-12"
                                    placeholder="Ketik ulang kata sandi"
                                    onkeyup="checkPasswordMatch()">
                                <button type="button"
                                    onclick="togglePassword('password_confirmation', 'eye-icon-confirm')"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-amber-600 transition-colors cursor-pointer z-10">
                                    <i id="eye-icon-confirm" class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div id="password-match-message" class="mt-1"></div>
                        </div>

                        <!-- Terms & Conditions -->
                        <div class="flex items-start gap-3">
                            <div id="checkbox-custom" class="custom-checkbox cursor-pointer flex-shrink-0" onclick="toggleCheckbox()">
                                <i class="fas fa-check text-[#78350f] text-xs hidden"></i>
                            </div>
                            <input type="checkbox" name="terms" id="terms" class="hidden" required>
                            <label for="terms" class="text-sm text-gray-600 cursor-pointer select-none">
                                Saya setuju dengan
                                <a href="#" class="text-amber-600 hover:text-amber-700 font-medium transition">Syarat & Ketentuan</a>
                                dan
                                <a href="#" class="text-amber-600 hover:text-amber-700 font-medium transition">Kebijakan Privasi</a>
                                INTERIA
                            </label>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit"
                            class="w-full btn-register text-[#78350f] font-semibold py-3.5 px-6 rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center gap-2 mt-2">
                            <i class="fas fa-user-plus"></i>
                            <span>Daftar Sekarang</span>
                        </button>
                    </form>

                    <!-- Divider -->
                    <div class="relative my-8">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-gray-200"></div>
                        </div>
                        <div class="relative flex justify-center">
                            <span class="px-4 bg-white text-xs text-gray-400">Sudah punya akun?</span>
                        </div>
                    </div>

                    <!-- Login Button -->
                    <a href="{{ route('login') }}"
                        class="block w-full text-center py-3.5 px-6 rounded-xl border-2 border-gray-200 text-gray-700 font-semibold hover:border-amber-400 hover:text-amber-600 hover:bg-amber-50 transition-all duration-200">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        Masuk ke Akun
                    </a>

                    <!-- Back to Home -->
                    <div class="mt-6 text-center">
                        <a href="/" class="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 text-sm transition-colors group">
                            <i class="fas fa-arrow-left text-xs group-hover:-translate-x-1 transition-transform"></i>
                            <span>Kembali ke Beranda</span>
                        </a>
                    </div>
                </div>

                <!-- Footer -->
                <div class="mt-6 text-center">
                    <p class="text-xs text-gray-400">
                        © 2026 INTERIA. Toko Premium e-Commerce Anda
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Toggle Password Visibility
        function togglePassword(fieldId, iconId) {
            const passwordInput = document.getElementById(fieldId);
            const eyeIcon = document.getElementById(iconId);

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }

        // Password Strength Checker
        function checkPasswordStrength(password) {
            const bars = [
                document.getElementById('strength-bar-1'),
                document.getElementById('strength-bar-2'),
                document.getElementById('strength-bar-3'),
                document.getElementById('strength-bar-4')
            ];
            const strengthText = document.getElementById('strength-text');

            let strength = 0;

            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;

            // Reset bars
            bars.forEach(bar => {
                bar.classList.remove('bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500');
                bar.classList.add('bg-gray-200');
            });

            // Set strength bars
            for (let i = 0; i < strength; i++) {
                bars[i].classList.remove('bg-gray-200');
                if (strength <= 1) bars[i].classList.add('bg-red-500');
                else if (strength === 2) bars[i].classList.add('bg-orange-500');
                else if (strength === 3) bars[i].classList.add('bg-yellow-500');
                else bars[i].classList.add('bg-green-500');
            }

            // Update text
            if (password.length === 0) {
                strengthText.innerHTML = '<i class="fas fa-info-circle mr-1"></i>Gunakan minimal 8 karakter dengan kombinasi huruf dan angka';
                strengthText.className = 'text-xs text-gray-500 mt-1';
            } else if (strength <= 1) {
                strengthText.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i>Password terlalu lemah';
                strengthText.className = 'text-xs text-red-500 mt-1';
            } else if (strength === 2) {
                strengthText.innerHTML = '<i class="fas fa-chart-line mr-1"></i>Password cukup baik';
                strengthText.className = 'text-xs text-orange-500 mt-1';
            } else if (strength === 3) {
                strengthText.innerHTML = '<i class="fas fa-chart-line mr-1"></i>Password kuat';
                strengthText.className = 'text-xs text-yellow-600 mt-1';
            } else {
                strengthText.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Password sangat kuat!';
                strengthText.className = 'text-xs text-green-600 mt-1';
            }
        }

        // Check Password Match
        function checkPasswordMatch() {
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('password_confirmation').value;
            const messageDiv = document.getElementById('password-match-message');

            if (confirmPassword.length > 0) {
                if (password === confirmPassword) {
                    messageDiv.innerHTML = '<div class="flex items-center gap-1 text-green-600 text-xs"><i class="fas fa-check-circle"></i><span>Password cocok</span></div>';
                } else {
                    messageDiv.innerHTML = '<div class="flex items-center gap-1 text-red-500 text-xs"><i class="fas fa-times-circle"></i><span>Password tidak cocok</span></div>';
                }
            } else {
                messageDiv.innerHTML = '';
            }
        }

        // Toggle Custom Checkbox
        function toggleCheckbox() {
            const checkbox = document.getElementById('terms');
            const customCheckbox = document.getElementById('checkbox-custom');

            checkbox.checked = !checkbox.checked;

            if (checkbox.checked) {
                customCheckbox.classList.add('checked');
                customCheckbox.querySelector('i').classList.remove('hidden');
            } else {
                customCheckbox.classList.remove('checked');
                customCheckbox.querySelector('i').classList.add('hidden');
            }
        }

        // Sync custom checkbox with actual checkbox
        document.getElementById('terms').addEventListener('change', function() {
            const customCheckbox = document.getElementById('checkbox-custom');
            if (this.checked) {
                customCheckbox.classList.add('checked');
                customCheckbox.querySelector('i').classList.remove('hidden');
            } else {
                customCheckbox.classList.remove('checked');
                customCheckbox.querySelector('i').classList.add('hidden');
            }
        });

        // Auto-focus on name field
        document.addEventListener('DOMContentLoaded', function() {
            const nameField = document.getElementById('name');
            if (nameField && !nameField.value) {
                setTimeout(() => nameField.focus(), 100);
            }
        });
    </script>

</body>

</html>