<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skyrent Photo – Masuk atau Daftar</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 flex items-center justify-center min-h-screen">

    <!-- Background Gradient -->
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-black via-gray-800 to-white z-0"></div>

    <!-- Container -->
    <div class="relative z-10 flex flex-col sm:flex-row justify-center items-center bg-transparent rounded-3xl shadow-xl min-h-screen sm:min-h-0 w-full max-w-6xl px-6">

        <!-- Redesigned Organic Left Section -->
        <div class="hidden lg:flex relative w-1/2 h-[550px] p-10 overflow-hidden rounded-tl-[100px] rounded-bl-[100px] bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white shadow-xl">
            
            <!-- Decorative Red Blobs -->
            <div class="absolute -top-10 -left-10 w-72 h-72 bg-red-600 rounded-full filter blur-3xl opacity-20 animate-pulse"></div>
            <div class="absolute bottom-0 right-0 w-80 h-80 bg-red-400 rounded-full filter blur-2xl opacity-10 animate-pulse delay-300"></div>
        
            <!-- Decorative white shapes -->
            <div class="absolute top-20 right-20 w-40 h-40 bg-white rounded-full filter blur-xl opacity-5 animate-ping delay-500"></div>
        
            <!-- Content Wrapper -->
            <div class="relative z-10 flex flex-col justify-between h-full space-y-6">
                <!-- Header -->
                <div>
                    <h1 class="text-4xl font-extrabold mb-2 text-white">Skyrent Photo</h1>
                    <p class="text-base text-gray-300 leading-relaxed max-w-sm">
                        Studio fotografi profesional untuk mengabadikan momen istimewa Anda. Kami melayani:
                    </p>
                    <ul class="mt-4 list-disc list-inside text-sm text-red-300 space-y-1">
                        <li>Wisuda & Keluarga</li>
                        <li>Prewedding & Wedding</li>
                        <li>Event & Komersial</li>
                        <li>Produk & Fashion</li>
                    </ul>
                </div>
        
                <!-- Kontak -->
                <div class="space-y-4 mt-8">
                    <!-- Email -->
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20 4H4a2 2 0 00-2 2v1.5l10 6.5 10-6.5V6a2 2 0 00-2-2zM2 8.25v9.75A2.25 2.25 0 004.25 20h15.5A2.25 2.25 0 0022 18V8.25l-10 6.5-10-6.5z" />
                        </svg>
                        <span class="text-sm text-gray-100">skyrentphoto@gmail.com</span>
                    </div>
                
                    <!-- WhatsApp -->
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-green-400" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.52 3.48A11.94 11.94 0 0012 0C5.37 0 0 5.37 0 12a11.94 11.94 0 001.64 6.08L0 24l6.35-1.67A11.94 11.94 0 0012 24c6.63 0 12-5.37 12-12 0-3.19-1.24-6.18-3.48-8.52zM12 22a9.94 9.94 0 01-5.06-1.36l-.36-.21-3.76.99.99-3.76-.21-.36A9.94 9.94 0 012 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10zm5.45-7.55c-.28-.14-1.65-.81-1.91-.91-.26-.1-.45-.14-.64.14-.19.28-.74.91-.9 1.1-.17.19-.33.21-.61.07a8.01 8.01 0 01-2.36-1.46 8.88 8.88 0 01-1.64-2.02c-.17-.3-.02-.46.13-.6.13-.13.3-.34.45-.51.15-.17.2-.28.3-.47.1-.19.05-.35-.02-.5-.07-.14-.64-1.54-.88-2.11-.23-.56-.47-.49-.65-.5h-.55c-.19 0-.5.07-.76.35s-1 1-.96 2.46c.04 1.46 1.04 2.88 1.19 3.08.15.2 2.05 3.12 4.96 4.38.69.3 1.23.48 1.65.61.69.22 1.32.19 1.81.12.55-.08 1.65-.67 1.88-1.31.23-.64.23-1.19.16-1.31-.07-.12-.26-.2-.54-.34z"/>
                        </svg>
                        <span class="text-sm text-gray-100">+62 812-3456-7890</span>
                    </div>
                
                    <!-- Facebook -->
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M22 12.07C22 6.54 17.52 2 12 2S2 6.54 2 12.07c0 5 3.66 9.14 8.44 9.93v-7.03h-2.54V12h2.54V9.79c0-2.5 1.5-3.89 3.78-3.89 1.1 0 2.25.2 2.25.2v2.47h-1.27c-1.25 0-1.63.78-1.63 1.58V12h2.78l-.44 2.97h-2.34v7.03C18.34 21.21 22 17.07 22 12.07z"/>
                        </svg>
                        <a href="https://facebook.com/skyrentphoto" target="_blank" class="text-sm text-gray-100 hover:underline">
                            facebook.com/skyrentphoto
                        </a>
                    </div>
                
                    <!-- Instagram -->
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M7.75 2h8.5A5.76 5.76 0 0122 7.75v8.5A5.76 5.76 0 0116.25 22h-8.5A5.76 5.76 0 012 16.25v-8.5A5.76 5.76 0 017.75 2zm0 2A3.75 3.75 0 004 7.75v8.5A3.75 3.75 0 007.75 20h8.5A3.75 3.75 0 0020 16.25v-8.5A3.75 3.75 0 0016.25 4h-8.5zM12 7a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6zm5.25-.5a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z"/>
                        </svg>
                        <a href="https://instagram.com/skyrentphoto" target="_blank" class="text-sm text-gray-100 hover:underline">
                            @skyrentphoto
                        </a>
                    </div>
                </div>

        
                <!-- Quote -->
                <div>
                    <p class="text-xs text-gray-400 italic">"Kunjungi kami di Jl. Serayu No. 38 Panderejo, Banyuwangi, Jawa Timur"</p>
                </div>

            </div>
        </div>


        <!-- Right Section (Login Box) -->
        <div class="bg-white h-[550px] p-12 rounded-tr-[100px] rounded-br-[100px] w-full max-w-md shadow-lg flex flex-col justify-center">
            <div class="mb-7 text-center">
                <h3 class="font-semibold text-2xl text-gray-800">Login</h3>
            </div>
        
            <form method="POST" action="{{ route('login') }}" class="space-y-3">
                @csrf
                <input type="email" name="email" placeholder="Email atau Nomor Telepon" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-red-400">
                <input type="password" name="password" placeholder="Password" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-red-400">
                <button type="submit" class="w-full bg-red-800 hover:bg-red-700 text-white font-semibold py-3 rounded-lg">Masuk</button>
            </form>
        
            <div class="flex items-center justify-center space-x-2 my-4">
                <span class="h-px w-16 bg-gray-300"></span>
                <span class="text-gray-400 text-sm">atau</span>
                <span class="h-px w-16 bg-gray-300"></span>
            </div>
        
            <!-- Google Login -->
            <div class="flex justify-center">
                <a href="{{ route('google.login') }}" class="w-full flex items-center justify-center border border-gray-300 hover:bg-gray-900 text-sm text-gray-500 p-3 rounded-lg transition">
                    <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google" class="w-5 mr-2" loading="lazy">
                    Login dengan Google
                </a>
            </div>
        
            <!-- Register Button -->
            <button class="w-full bg-red-700 hover:bg-red-600 text-white font-semibold py-3 rounded-lg mt-5" onclick="openPopup()">Buat Akun Baru</button>
        </div>


@if ($errors->any())
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            @if (old('name'))
                openPopup();
                @if ($errors->has('email'))
                    alert("Email ini sudah terdaftar. Silakan gunakan email lain.");
                @else
                    let errorMessages = `{!! implode('\n', $errors->all()) !!}`;
                    alert(errorMessages);
                @endif
            @else
                let errorMessages = `{!! implode('\n', $errors->all()) !!}`;
                alert(errorMessages);
            @endif
        });
    </script>
@endif

    <!-- Popup Registrasi -->
    <div id="overlay" class=" fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
        <div class="bg-white p-6 rounded-lg shadow-lg w-96 relative">
            <button class="absolute top-2 right-3 text-red-600 text-lg font-bold" onclick="closePopup()">✕</button>
            <h3 class="text-xl font-semibold mb-4">Registrasi Akun Baru</h3>
            <form method="POST" action="{{ route('register.customer') }}" onsubmit="return validatePhone()">
                @csrf
                <input type="text" name="name" placeholder="Nama Lengkap" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm mb-3">
                <input type="email" name="email" placeholder="Email" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm mb-3">
                    @error('email')
                        <div class="text-sm text-red-600 mb-2">
                            Email ini sudah terdaftar. Silakan gunakan email lain.
                        </div>
                    @enderror

                <input type="tel" name="phone" placeholder="Nomor Telepon" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm mb-3">
                <input type="text" name="address" placeholder="Alamat" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm mb-3">
                <input type="password" name="password" placeholder="Password" required class="w-full px-4 py-3 bg-gray-200 border border-gray-300 rounded-lg text-sm mb-3">
                <button type="submit" class="w-full bg-red-700 hover:bg-red-600 text-white font-semibold py-3 rounded-lg">Daftar</button>
            </form>
        </div>
    </div>

    <script>
        let currentIndex = 0;
        const totalSlides = document.querySelectorAll('.carousel-item').length;

        function prevSlide() {
            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
            updateSlides();
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % totalSlides;
            updateSlides();
        }

        function updateSlides() {
            const slides = document.querySelectorAll('.carousel-item');
            slides.forEach((slide, index) => {
                slide.classList.toggle('opacity-100', index === currentIndex);
                slide.classList.toggle('opacity-0', index !== currentIndex);
            });
        }

        function openPopup() {
            document.getElementById('overlay').classList.remove('hidden');
        }

        function closePopup() {
            document.getElementById('overlay').classList.add('hidden');
        }
    </script>
    <script>
    function validatePhone() {
        const phone = document.querySelector('input[name="phone"]').value;
        const isNumeric = /^\d+$/;

        if (!isNumeric.test(phone)) {
            alert('Nomor telepon hanya boleh berisi angka.');
            return false;
        }

        return true;
    }
    </script>

</body>
</html>
