@extends('layouts.auth.tampil', [
    'title' => 'Halaman Login'
])

@section('content')
<style>
    /* Animasi untuk keseluruhan Card (Zoom In) */
    @keyframes zoomIn {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    .animate-zoom-in {
        animation: zoomIn 0.5s ease-out forwards;
    }

    /* Animasi untuk konten di dalam Card (Slide Down) */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-down {
        opacity: 0; /* Mulai dengan tidak terlihat */
        animation: slideDown 0.6s ease-out forwards;
    }

    /* Delay untuk setiap elemen di dalam form agar animasinya berurutan */
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.25s; }
    .delay-3 { animation-delay: 0.4s; }
    .delay-4 { animation-delay: 0.55s; }
    .delay-5 { animation-delay: 0.7s; }
</style>
    
<!-- Pembungkus Utama untuk Menengahkan Card di Layar -->
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-300">

    <!-- Container Card dengan Animasi Zoom In -->
    <div class="w-full max-w-md animate-zoom-in">
        
        <!-- Kartu Login dengan Efek Glass / Bayangan Modern -->
        <div class="bg-white/90 backdrop-blur-md border border-white/50 shadow-2xl rounded-3xl p-8 sm:p-10 transition-all duration-300 hover:shadow-3xl">
            
            <!-- Bagian Logo & Judul (slideDown delay-1) -->
            <div class="text-center mb-8 animate-slide-down delay-1">
                <img src="{{ asset('img/dirahome.png') }}" 
                    alt="Logo Dirahome" 
                    width="200" 
                    height="112" 
                    class="w-35 h-25 mx-auto mb-4 rounded-2xl shadow-lg object-cover transform transition hover:rotate-[5deg] duration-300">
                <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight">Login Billing Dirahome</h3>
            </div>

            <!-- Form Login -->
            <form action="{{ route('login') }}" method="POST" class="space-y-5" id="loginForm">
                @csrf

                <!-- Input Tersembunyi untuk Koordinat GPS -->
                <input type="hidden" name="latitude" id="latitude">
                <input type="hidden" name="longitude" id="longitude">

                <!-- Input Email (slideDown delay-3) -->
                <div class="animate-slide-down delay-3">
                    <label for="email" class="block text-sm font-semibold text-gray-800 mb-1.5">Alamat Email</label>
                    <div class="relative">
                        <input type="email" name="email" id="email" value="{{ old('email') }}" required autofocus
                            class="w-full px-4 py-3.5 bg-white border border-gray-300 rounded-xl text-gray-900 placeholder-gray-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500/40 focus:border-sky-500 transition duration-200 shadow-inner"
                            placeholder="nama@gmail.com">
                    </div>
                </div>

                <!-- Input Password (slideDown delay-4) -->
                <div class="animate-slide-down delay-4">
                    <label for="password" class="block text-sm font-semibold text-gray-800 mb-1.5">Kata Sandi</label>
                    <div class="relative">
                        <input type="password" name="password" id="password" required autocomplete="current-password"
                            class="w-full px-4 py-3.5 bg-white border border-gray-300 rounded-xl text-gray-900 placeholder-gray-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-500/40 focus:border-sky-500 transition duration-200 shadow-inner"
                            placeholder="••••••••">
                    </div>
                </div>

                <!-- Tombol Submit / Login (slideDown delay-5) -->
                <div class="pt-3 animate-slide-down delay-5">
                    <button type="submit" 
                        class="w-full py-4 px-4 bg-linear-to-r from-sky-500 to-sky-600 hover:from-sky-600 hover:to-sky-700 text-white font-extrabold text-lg rounded-xl shadow-lg shadow-sky-600/30 active:scale-[0.98] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 cursor-pointer">
                        Masuk Sekarang
                    </button>
                </div>
            </form>

        </div>
    </div>

</div>

<!-- Script untuk Mengambil Titik Koordinat GPS Perangkat Saat Login -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                document.getElementById('latitude').value = position.coords.latitude;
                document.getElementById('longitude').value = position.coords.longitude;
            }, function(error) {
                console.warn("Akses GPS ditolak atau tidak tersedia, menggunakan fallback IP.");
            }, {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            });
        }
    });
</script>
@endsection