<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Akun - GasKu</title>
    <link rel="icon" type="image/jpeg" href="<?php echo e(asset('fix.jpeg')); ?>">
    <link rel="manifest" href="<?php echo e(asset('manifest.json')); ?>?v=8">
    <meta name="theme-color" content="#22c55e">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="GASKU">
    <link class="apple-touch-icon" href="<?php echo e(asset('fix.jpeg')); ?>">

    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register("<?php echo e(asset('sw.js')); ?>")
                    .then(reg => console.log('Service Worker registered', reg))
                    .catch(err => console.error('Service Worker registration failed', err));
            });
        }
    </script>
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- Alpine.js & SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #f8fafc;
        }
        
        .floating-shape {
            position: absolute;
            z-index: 0;
            filter: blur(80px);
            opacity: 0.15;
            pointer-events: none;
        }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.1); }
            100% { transform: translate(-20px, 20px) scale(0.9); }
        }

        .animate-float {
            animation: float 15s infinite alternate ease-in-out;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 40px -2px rgba(34, 197, 94, 0.08), 0 0 20px -2px rgba(0, 0, 0, 0.03);
        }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="antialiased text-slate-800 min-h-screen relative overflow-x-hidden flex items-center justify-center p-4 py-8" x-data="registerForm()">
    
    <!-- PWA Standalone Splash Screen -->
    <div id="pwaSplashScreen" class="fixed inset-0 z-[99999] flex flex-col items-center justify-between bg-slate-950 transition-opacity duration-300 ease-out" style="display: none;">
        <div></div>
        <div class="flex flex-col items-center gap-6">
            <!-- Animated SVG Loader (No white background, pure CSS) -->
            <div class="relative w-16 h-16 flex items-center justify-center">
                <div class="absolute inset-0 rounded-full border-4 border-emerald-500/10 animate-pulse"></div>
                <div class="absolute inset-0 rounded-full border-4 border-transparent border-t-emerald-500 animate-spin"></div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7 text-emerald-500 animate-pulse">
                    <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
                </svg>
            </div>
            <div class="text-center space-y-1">
                <h2 class="text-2xl font-black text-white tracking-tight">Gas<span class="text-emerald-400">Ku</span></h2>
                <p class="text-xs font-bold text-slate-400 tracking-wider uppercase">Selamat Datang</p>
            </div>
            <div class="w-32 h-1 bg-slate-800 rounded-full overflow-hidden mt-2 relative">
                <div id="splashProgressBar" class="absolute top-0 bottom-0 left-0 bg-emerald-500 rounded-full transition-all duration-[600ms] ease-out w-0"></div>
            </div>
        </div>
        <div class="pb-8">
            <p class="text-[9px] font-bold text-slate-600 uppercase tracking-widest">Sistem Inventaris & Pengiriman LPG</p>
        </div>
    </div>
    <script>
        (function() {
            const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
            if (isStandalone && !sessionStorage.getItem('splash_shown')) {
                const splash = document.getElementById('pwaSplashScreen');
                splash.style.display = 'flex';
                setTimeout(() => {
                    const bar = document.getElementById('splashProgressBar');
                    if (bar) bar.style.width = '100%';
                }, 50);
                setTimeout(() => {
                    splash.classList.add('opacity-0');
                    setTimeout(() => {
                        splash.style.display = 'none';
                    }, 350);
                }, 800);
                sessionStorage.setItem('splash_shown', 'true');
            }
        })();
    </script>

    <!-- Ambient Background -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="floating-shape animate-float w-96 h-96 bg-gas3kg rounded-full top-[-10%] right-[-10%]"></div>
        <div class="floating-shape animate-float w-80 h-80 bg-green-400 rounded-full bottom-[-10%] left-[-5%]" style="animation-delay: -5s;"></div>
        <div class="floating-shape animate-float w-64 h-64 bg-gas12kg rounded-full top-[30%] left-[10%]" style="animation-delay: -2s; opacity: 0.05;"></div>
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-[0.02]"></div>
    </div>

    <div class="w-full max-w-[520px] relative z-10 animate-in fade-in zoom-in-95 duration-500">
        <!-- Main Card -->
        <div class="glass-card rounded-[2.5rem] p-6 sm:p-10 transition-all">
            
            <!-- Logo & Header -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-14 h-14 bg-gradient-to-br from-gas3kg to-green-500 rounded-2xl shadow-lg shadow-gas3kg/30 mb-4 relative group">
                    <div class="absolute inset-0 bg-white/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <i data-lucide="flame" class="w-7 h-7 text-white"></i>
                </div>
                <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 mb-2">Buat Akun Baru</h1>
                <p class="text-sm text-slate-500 font-medium">Silakan lengkapi data untuk mendaftar akun</p>
            </div>

            <!-- Alerts -->
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('success')): ?>
                <div class="bg-emerald-50 text-emerald-700 p-4 rounded-2xl text-xs sm:text-sm mb-6 border border-emerald-100 flex items-start">
                    <i data-lucide="check-circle" class="w-5 h-5 mr-3 shrink-0 mt-0.5 text-emerald-600"></i>
                    <div>
                        <div class="font-bold mb-1">Berhasil!</div>
                        <p class="opacity-90"><?php echo e(rtrim(session('success'), '.')); ?></p>
                    </div>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
                <div class="bg-red-50 text-red-600 p-4 rounded-2xl text-xs sm:text-sm mb-6 border border-red-100 flex items-start">
                    <i data-lucide="alert-circle" class="w-5 h-5 mr-3 shrink-0 mt-0.5"></i>
                    <div>
                        <div class="font-bold mb-1">Terjadi Kesalahan:</div>
                        <ul class="list-none space-y-0.5 opacity-90 pl-0">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                                <li><?php echo e(rtrim($error, '.')); ?></li>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                        </ul>
                    </div>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <!-- Form -->
            <form action="<?php echo e(route('register')); ?>" method="POST" class="space-y-4" id="registerForm" @submit="handleSubmit($event)" novalidate>
                <?php echo csrf_field(); ?>
                
                <!-- Alert Blocked State (Tailwind CSS Alert) -->
                <div x-show="status === 'blocked'" x-cloak
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 -translate-y-4"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="shadow-lg rounded-2xl mb-6 flex items-start border border-red-200 bg-red-50 text-red-700 p-4">
                    <i data-lucide="alert-triangle" class="w-5 h-5 mr-3 shrink-0 mt-0.5 text-red-600"></i>
                    <div class="text-xs sm:text-sm font-bold text-left">
                        <span x-text="apiMessage"></span>
                    </div>
                </div>
                
                <div class="space-y-1.5">
                    <label for="name" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">Nama Lengkap</label>
                    <div class="relative group">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-gas3kg transition-colors pointer-events-none">
                            <i data-lucide="user" class="w-4.5 h-4.5"></i>
                        </span>
                        <input id="name" name="name" type="text" value="<?php echo e(old('name')); ?>" required autofocus
                            class="block w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white"
                            placeholder="Contoh: Budi Santoso" oninput="valNama(this)">
                        <p id="err-name" class="text-[10px] text-red-500 font-bold mt-1.5 ml-1 hidden"></p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label for="email" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">Email</label>
                        <div class="relative group">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-gas3kg transition-colors pointer-events-none">
                                <i data-lucide="mail" class="w-4.5 h-4.5"></i>
                            </span>
                            <input id="email" name="email" type="email" value="<?php echo e(old('email')); ?>" required
                                class="block w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white"
                                placeholder="budi@example.com" oninput="valEmail(this)">
                        </div>
                    </div>
                    <div class="space-y-1.5">
                        <label for="phone" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">WhatsApp</label>
                        <div class="relative group">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-gas3kg transition-colors pointer-events-none">
                                <i data-lucide="phone" class="w-4.5 h-4.5"></i>
                            </span>
                            <input id="phone" name="phone" type="tel" value="<?php echo e(old('phone')); ?>" required
                                inputmode="numeric" pattern="[0-9]*"
                                class="block w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white"
                                placeholder="08XXXXXXXXXX" oninput="valPhone(this)" onkeydown="blockNonNumeric(event)">
                        </div>
                    </div>
                </div>
                <div class="flex gap-4">
                    <p id="err-email" class="w-1/2 text-[10px] text-red-500 font-bold hidden ml-1"></p>
                    <p id="err-phone" class="w-1/2 text-[10px] text-red-500 font-bold hidden ml-1"></p>
                </div>

                <div class="space-y-2">
                    <div class="flex items-center justify-between ml-1">
                        <label for="address" class="text-xs font-bold text-slate-500 tracking-wider uppercase">Alamat Lengkap (Melalui GPS)</label>
                    </div>

                    <button type="button" @click="getLocation()" id="btn-location" class="w-full flex items-center justify-center gap-2 py-3 px-4 text-xs font-extrabold text-gas12kg hover:text-pink-600 bg-pink-50 hover:bg-pink-100 rounded-2xl border-2 border-dashed border-pink-200 transition-all hover:scale-[1.01] active:scale-[0.99] shadow-sm">
                        <i data-lucide="map-pin" class="w-4.5 h-4.5"></i>
                        <span>DAPATKAN ALAMAT DARI LOKASI GPS</span>
                    </button>

                    
                    <input type="hidden" name="titik_koordinat" x-model="titikKoordinat" id="titik_koordinat">

                    <div class="relative group">
                        <span class="absolute left-4 top-4 text-slate-400 transition-colors pointer-events-none">
                            <i data-lucide="map" class="w-4.5 h-4.5"></i>
                        </span>
                        <textarea id="address" name="address" required rows="2" x-model="address" readonly
                            class="block w-full pl-11 pr-4 py-3 bg-slate-100 border border-slate-200 rounded-2xl text-sm font-semibold placeholder-slate-400 focus:outline-none transition-all cursor-not-allowed resize-none"
                            placeholder="Alamat lengkap Anda akan otomatis terisi setelah mengeklik tombol GPS di atas..."><?php echo e(old('address')); ?></textarea>
                    </div>

                    
                    <div x-show="titikKoordinat" x-cloak
                         class="flex items-center gap-2 px-3 py-2 bg-green-50 border border-green-200 rounded-xl text-[11px] font-bold text-green-700">
                        <i data-lucide="map-pin" class="w-3.5 h-3.5 shrink-0 text-green-600"></i>
                        <span>Koordinat GPS tersimpan:</span>
                        <span class="font-mono text-green-600" x-text="titikKoordinat"></span>
                        <span class="ml-auto text-[10px] bg-green-200 text-green-800 px-1.5 py-0.5 rounded-full font-black">✓ Akurat</span>
                    </div>

                    <p id="location-status" class="text-[10px] text-gas3kg font-bold ml-1 hidden italic"></p>
                </div>

                <!-- Input Kabupaten & Kecamatan (Real-Time Delivery Validation) -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label for="kabupaten" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">Kabupaten / Kota</label>
                        <div class="relative group">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-gas3kg transition-colors pointer-events-none">
                                <i data-lucide="building" class="w-4.5 h-4.5"></i>
                            </span>
                            <select id="kabupaten" name="kabupaten" x-model="kabupaten" @change="onKabupatenChange" required
                                class="block w-full pl-11 pr-4 py-3 bg-slate-50 border rounded-2xl text-sm font-bold placeholder-slate-400 focus:outline-none focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white"
                                :class="status === 'blocked' ? 'border-red-500 bg-red-50/20 text-red-700' : 'border-slate-200 focus:border-gas3kg'">
                                <option value="">-- Pilih Kabupaten --</option>
                                <option value="Kabupaten Tangerang">Kabupaten Tangerang (Tersedia)</option>
                                <option value="Kabupaten Bogor">Kabupaten Bogor (Di Luar Jangkauan)</option>
                                <option value="Kota Tangerang">Kota Tangerang (Di Luar Jangkauan)</option>
                                <option value="DKI Jakarta">DKI Jakarta (Di Luar Jangkauan)</option>
                            </select>
                        </div>
                    </div>
                    <div class="space-y-1.5">
                        <label for="kecamatan" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">Kecamatan</label>
                        <div class="relative group">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-gas3kg transition-colors pointer-events-none">
                                <i data-lucide="map" class="w-4.5 h-4.5"></i>
                            </span>
                            <select id="kecamatan" name="kecamatan" x-model="kecamatan" @change="validateZone" :disabled="status === 'blocked' || !kabupaten || kabupaten !== 'Kabupaten Tangerang'" required
                                class="block w-full pl-11 pr-4 py-3 bg-slate-50 border rounded-2xl text-sm font-bold focus:outline-none focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white disabled:opacity-50 disabled:cursor-not-allowed"
                                :class="status === 'blocked' ? 'border-slate-200 bg-slate-100' : 'border-slate-200 focus:border-gas3kg'">
                                <option value="">-- Pilih Kecamatan --</option>
                                <template x-for="item in allowedKecamatans" :key="item">
                                    <option :value="item" x-text="item"></option>
                                </template>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Tampilan Rincian Ongkos Kirim Dinamis untuk Pendaftaran -->
                <div x-show="status === 'success' || status === 'warning'" x-cloak
                     x-transition
                     class="rounded-2xl p-4 space-y-3 text-left border"
                     :class="{
                        'bg-emerald-50 border-emerald-200': zoneType === 'local',
                        'bg-yellow-50 border-yellow-200': zoneType === 'nearby',
                        'bg-orange-50 border-orange-200': zoneType === 'far'
                     }">
                    <div class="flex items-center gap-2 mb-1">
                        <i data-lucide="map-pin" class="w-4 h-4"
                           :class="{'text-emerald-600': zoneType==='local','text-yellow-600': zoneType==='nearby','text-orange-600': zoneType==='far'}"></i>
                        <span class="text-xs font-extrabold uppercase tracking-wider"
                              :class="{'text-emerald-700': zoneType==='local','text-yellow-700': zoneType==='nearby','text-orange-700': zoneType==='far'}">
                            Informasi Zona Pengiriman
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-[11px] font-bold text-slate-500">Zona Layanan</span>
                        <span class="text-xs font-black px-2.5 py-1 rounded-xl"
                              :class="{
                                'bg-emerald-100 text-emerald-700': zoneType === 'local',
                                'bg-yellow-100 text-yellow-700': zoneType === 'nearby',
                                'bg-orange-100 text-orange-700': zoneType === 'far'
                              }"
                              x-text="zoneType === 'local' ? '📍 Zona 1 — Dekat' : (zoneType === 'nearby' ? '🚴 Zona 2 — Sedang' : '🚛 Zona 3 — Jauh')">
                        </span>
                    </div>
                    <div class="flex justify-between items-start">
                        <span class="text-[11px] font-bold text-slate-500">Ongkos Kirim</span>
                        <div class="text-right">
                            <div class="text-xs font-extrabold" :class="{'text-emerald-700': zoneType==='local','text-yellow-700': zoneType==='nearby','text-orange-700': zoneType==='far'}">
                                Gas 3kg: Rp <span x-text="shippingCost3kg.toLocaleString('id-ID')"></span>/tbg
                            </div>
                            <div class="text-xs font-extrabold mt-0.5" :class="{'text-emerald-700': zoneType==='local','text-yellow-700': zoneType==='nearby','text-orange-700': zoneType==='far'}">
                                Gas 5,5 & 12kg: Rp <span x-text="shippingCostBig.toLocaleString('id-ID')"></span>/tbg
                            </div>
                        </div>
                    </div>
                    <div class="border-t border-slate-200/50 pt-2 mt-2" x-show="apiMessage">
                        <span class="text-[11px] font-medium leading-relaxed block"
                              :class="{
                                'text-emerald-800/80': zoneType === 'local',
                                'text-yellow-800/80': zoneType === 'nearby',
                                'text-orange-800/80': zoneType === 'far'
                              }"
                              x-text="apiMessage">
                        </span>
                    </div>
                    <div x-show="status === 'warning' && !zone3Confirmed"
                         class="text-[11px] text-orange-700 font-semibold bg-orange-100 rounded-xl px-3 py-2 flex items-start gap-2">
                        <i data-lucide="alert-triangle" class="w-3.5 h-3.5 shrink-0 mt-0.5"></i>
                        <span>Zona jauh — ongkos kirim tambahan akan dikenakan. Konfirmasi di bawah.</span>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label for="password" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">Password</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none transition-colors group-focus-within:text-gas3kg text-slate-400">
                                <i data-lucide="lock" class="h-4.5 w-4.5"></i>
                            </div>
                            <input id="password" name="password" type="password" required
                                class="block w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white"
                                placeholder="••••••••" oninput="valPass(this)">
                            <button type="button" onclick="togglePass('password', this)" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-gas3kg focus:outline-none transition-colors">
                                <i data-lucide="eye" class="w-4.5 h-4.5 show-icon"></i>
                                <i data-lucide="eye-off" class="w-4.5 h-4.5 hide-icon hidden"></i>
                            </button>
                        </div>
                    </div>
                    <div class="space-y-1.5">
                        <label for="password_confirmation" class="text-xs font-bold text-slate-500 tracking-wider uppercase ml-1">Konfirmasi</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none transition-colors group-focus-within:text-gas3kg text-slate-400">
                                <i data-lucide="lock" class="h-4.5 w-4.5"></i>
                            </div>
                            <input id="password_confirmation" name="password_confirmation" type="password" required
                                class="block w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-semibold placeholder-slate-400 focus:outline-none focus:border-gas3kg focus:ring-4 focus:ring-gas3kg/10 transition-all focus:bg-white"
                                placeholder="••••••••" oninput="checkMatch()">
                            <button type="button" onclick="togglePass('password_confirmation', this)" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-gas3kg focus:outline-none transition-colors">
                                <i data-lucide="eye" class="w-4.5 h-4.5 show-icon"></i>
                                <i data-lucide="eye-off" class="w-4.5 h-4.5 hide-icon hidden"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="space-y-1.5">
                    <p id="err-match" class="text-[10px] text-red-500 font-bold hidden ml-1">Konfirmasi tidak sesuai!</p>
                </div>



                <div class="pt-4">
                    <button type="submit"
                        class="group relative flex w-full justify-center items-center py-4 px-4 border border-transparent rounded-2xl shadow-lg shadow-gas3kg/25 text-sm font-bold text-white bg-gas3kg hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-gas3kg/30 transition-all active:scale-[0.98] overflow-hidden">
                        <span class="relative z-10 flex items-center">
                            Daftar Akun
                            <i data-lucide="arrow-right-circle" class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
                        </span>
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:animate-[shimmer_1.5s_infinite]"></div>
                    </button>
                </div>

            </form>

            <style>
                @keyframes shimmer {
                    100% { transform: translateX(100%); }
                }
            </style>
        </div>

        <!-- Footer link -->
        <div class="mt-8 text-center text-sm font-medium text-slate-500">
            Sudah memiliki akun?
            <a href="<?php echo e(route('login')); ?>" class="font-extrabold text-slate-800 hover:text-gas3kg hover:underline decoration-gas3kg decoration-2 underline-offset-4 transition-all">Masuk ke Sistem</a>
        </div>
    </div>

    <script>
        lucide.createIcons();

        function togglePass(id, btn) {
            const el = document.getElementById(id);
            const show = btn.querySelector('.show-icon');
            const hide = btn.querySelector('.hide-icon');
            if (el.type === 'password') {
                el.type = 'text';
                show.classList.add('hidden');
                hide.classList.remove('hidden');
            } else {
                el.type = 'password';
                show.classList.remove('hidden');
                hide.classList.add('hidden');
            }
        }

        function valPass(el) {
            const confirmField = document.getElementById('password_confirmation');
            if (confirmField) {
                confirmField.value = el.value;
            }
            checkMatch();
        }

        function checkMatch() {
            const p = document.getElementById('password').value;
            const c = document.getElementById('password_confirmation').value;
            const err = document.getElementById('err-match');
            const el = document.getElementById('password_confirmation');
            if (c.length > 0 && p !== c) {
                err.classList.remove('hidden');
                el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
            } else {
                err.classList.add('hidden');
                el.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.add('focus:border-gas3kg', 'focus:ring-gas3kg/10');
            }
        }

        function valNama(el) {
            const err = document.getElementById('err-name');
            const hasAngka = /\d/.test(el.value);
            if (el.value.length > 25) {
                err.innerText = 'Nama maksimal 25 karakter!';
                err.classList.remove('hidden');
                el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
            } else if (hasAngka) {
                err.innerText = 'Nama tidak boleh mengandung angka!';
                err.classList.remove('hidden');
                el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
            } else {
                err.classList.add('hidden');
                el.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.add('focus:border-gas3kg', 'focus:ring-gas3kg/10');
            }
        }

        function blockNonNumeric(event) {
            // Izinkan: backspace, delete, tab, enter, arrow keys, home, end
            const allowed = ['Backspace','Delete','Tab','Enter','ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Home','End'];
            if (allowed.includes(event.key)) return;
            // Blokir jika bukan angka
            if (!/^[0-9]$/.test(event.key)) {
                event.preventDefault();
            }
        }

        let tE = null;
        function valEmail(el) {
            const err = document.getElementById('err-email');
            if (el.value.length > 50) {
                err.innerText = 'Email terlalu panjang!';
                err.classList.remove('hidden');
                el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                return;
            }
            clearTimeout(tE);
            tE = setTimeout(() => {
                if(el.value.includes('@')) {
                    fetch(`<?php echo e(url('check-email')); ?>?email=${el.value}`).then(r => r.json()).then(d => {
                        if (d.exists) {
                            err.innerText = 'Email sudah digunakan!';
                            err.classList.remove('hidden');
                            el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                            el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                        } else {
                            err.classList.add('hidden');
                            el.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                            el.classList.add('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                        }
                    });
                }
            }, 500);
        }

        let tP = null;
        function valPhone(el) {
            const err = document.getElementById('err-phone');
            // Hapus semua karakter non-angka secara otomatis
            const cleaned = el.value.replace(/[^0-9]/g, '');
            if (el.value !== cleaned) {
                const pos = el.selectionStart - (el.value.length - cleaned.length);
                el.value = cleaned;
                el.setSelectionRange(pos, pos);
            }
            if (el.value.length > 12) {
                err.innerText = 'Nomor HP terlalu panjang!';
                err.classList.remove('hidden');
                el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                return;
            }
            if (el.value.length > 0 && !/^[0-9]+$/.test(el.value)) {
                err.innerText = 'Nomor WhatsApp hanya boleh berisi angka!';
                err.classList.remove('hidden');
                el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                return;
            }
            clearTimeout(tP);
            tP = setTimeout(() => {
                if(el.value.length >= 10) {
                    fetch(`<?php echo e(url('check-phone')); ?>?phone=${el.value}`).then(r => r.json()).then(d => {
                        if (d.exists) {
                            err.innerText = 'Nomor sudah digunakan!';
                            err.classList.remove('hidden');
                            el.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                            el.classList.remove('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                        } else {
                            err.classList.add('hidden');
                            el.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                            el.classList.add('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                        }
                    });
                } else {
                    err.classList.add('hidden');
                    el.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500/10');
                    el.classList.add('focus:border-gas3kg', 'focus:ring-gas3kg/10');
                }
            }, 500);
        }

        // Alpine.js Register Zone Validation Component
        function registerForm() {
            return {
                address: '<?php echo e(old('address', '')); ?>',
                titikKoordinat: '<?php echo e(old('titik_koordinat', '')); ?>',
                kabupaten: '<?php echo e(old('kabupaten', '')); ?>',
                kecamatan: '<?php echo e(old('kecamatan', '')); ?>',
                async getLocation() {
                    const btn = document.getElementById('btn-location');
                    const status = document.getElementById('location-status');
                    
                    if (!navigator.geolocation) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Geolocation tidak didukung oleh browser Anda'
                        });
                        return;
                    }

                    btn.disabled = true;
                    btn.classList.add('opacity-50', 'cursor-not-allowed');
                    status.innerText = '🕒 Sedang mengambil lokasi...';
                    status.classList.remove('hidden', 'text-red-500');
                    status.classList.add('text-slate-500');

                    navigator.geolocation.getCurrentPosition(
                        async (pos) => {
                            const lat = pos.coords.latitude;
                            const lng = pos.coords.longitude;
                            
                            status.innerText = '🕒 Menentukan wilayah dari koordinat GPS...';
                            status.classList.remove('hidden');
                            
                            try {
                                // ── Panggil proxy reverse-geocode internal di server ──
                                const geocodeUrl = `<?php echo e(url('/reverse-geocode')); ?>?lat=${lat}&lng=${lng}`;
                                const response = await fetch(geocodeUrl);
                                
                                if (!response.ok) throw new Error('Proxy geocode gagal');
                                
                                const data = await response.json();
                                if (data.error) throw new Error(data.error);

                                const cleanKec = (data.kecamatan || '').replace(/(kecamatan|kec\.?\s*)/i, '').trim();
                                const cleanKel = (data.kelurahan || '').replace(/(kelurahan|kel\.?\s*|desa\s*)/i, '').trim();
                                const cleanKab = (data.kabupaten || '').trim();
                                
                                // ── Koordinat disimpan TERPISAH di titikKoordinat, bukan di alamat ──
                                this.titikKoordinat = `${lat}, ${lng}`;
                                this.address = data.formatted_address || (cleanKel ? 'Kel. ' + cleanKel : (cleanKec || 'Lokasi GPS'));
                                
                                // ── Cocokkan kecamatan dengan daftar yang tersedia ──
                                const matchedKec = this.allowedKecamatans.find(
                                    k => k.toLowerCase() === cleanKec.toLowerCase()
                                );
                                
                                const isTangerangRegency = 
                                    cleanKab.toLowerCase().includes('tangerang') &&
                                    !cleanKab.toLowerCase().includes('kota') &&
                                    !cleanKab.toLowerCase().includes('selatan');
                                
                                if (isTangerangRegency && matchedKec) {
                                    this.kabupaten = 'Kabupaten Tangerang';
                                    this.kecamatan = matchedKec;
                                    
                                    status.innerText = `✅ Lokasi ditemukan: Kec. ${matchedKec}, Kabupaten Tangerang`;
                                    status.classList.remove('text-slate-500', 'text-red-500');
                                    status.classList.add('text-gas3kg');
                                    
                                    // Panggil validateZone agar zona muncul otomatis
                                    await this.validateZoneAsync();
                                } else {
                                    const displayArea = `${cleanKec ? 'Kec. ' + cleanKec : ''}${cleanKec && cleanKab ? ', ' : ''}${cleanKab || ''}` || 'Luar Wilayah';
                                    
                                    let mappedKab = 'Kota Tangerang'; // fallback
                                    const lowerKab = cleanKab.toLowerCase();
                                    if (lowerKab.includes('bogor')) {
                                        mappedKab = 'Kabupaten Bogor';
                                    } else if (lowerKab.includes('jakarta')) {
                                        mappedKab = 'DKI Jakarta';
                                    } else if (lowerKab.includes('tangerang')) {
                                        if (lowerKab.includes('kota') || lowerKab.includes('selatan')) {
                                            mappedKab = 'Kota Tangerang';
                                        } else {
                                            mappedKab = 'Kabupaten Tangerang';
                                        }
                                    }
                                    
                                    this.kabupaten = '';
                                    this.kecamatan = '';
                                    this.status = 'blocked';
                                    
                                    if (isTangerangRegency && !matchedKec) {
                                        const kecName = cleanKec ? ` (${cleanKec})` : '';
                                        this.apiMessage = `Maaf, kecamatan Anda${kecName} belum masuk dalam area jangkauan pengiriman kami. Kami hanya melayani beberapa kecamatan tertentu di Kabupaten Tangerang.`;
                                        status.innerText = `❌ Kecamatan di luar jangkauan${cleanKec ? ': Kec. ' + cleanKec : ''}`;
                                    } else {
                                        this.apiMessage = `Maaf, lokasi GPS Anda terdeteksi berada di luar area layanan kami (Terdeteksi: ${displayArea}). Kami hanya melayani wilayah Kabupaten Tangerang.`;
                                        status.innerText = `❌ Terdeteksi di luar wilayah layanan: ${displayArea}`;
                                    }
                                    status.classList.remove('text-slate-500', 'text-gas3kg');
                                    status.classList.add('text-red-500');

                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Di Luar Wilayah Layanan',
                                        text: this.apiMessage,
                                        confirmButtonColor: '#22c55e'
                                    });
                                }
                            } catch (err) {
                                // ── Fallback: koordinat tetap diisi walau nama wilayah gagal terdeteksi ──
                                console.error('Reverse geocoding error:', err);
                                this.titikKoordinat = `${lat}, ${lng}`;
                                this.address = 'Lokasi GPS (nama tidak terdeteksi)';
                                status.innerText = '⚠️ Koordinat GPS berhasil diambil. Silakan ketik nama jalan/kelurahan secara manual.';
                                status.classList.remove('text-slate-500', 'text-red-500');
                                status.classList.add('text-gas3kg');
                            }
                            
                            btn.disabled = false;
                            btn.classList.remove('opacity-50', 'cursor-not-allowed');
                        },
                        (err) => {
                            status.innerText = '❌ Gagal mengambil lokasi. Pastikan izin GPS aktif.';
                            status.classList.remove('text-slate-500');
                            status.classList.add('text-red-500');
                            
                            btn.disabled = false;
                            btn.classList.remove('opacity-50', 'cursor-not-allowed');
                            console.error(err);
                        },
                        { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
                    );
                },
                status: 'idle',
                zoneType: '',
                shippingCost3kg: 0,
                shippingCostBig: 0,
                apiMessage: '',
                zone3Confirmed: false,
                showModal: false,
                timeout: null,
                allowedKecamatans: [
                    'Curug', 'Binong', 'Cikupa', 'Panongan', 'Legok', 'Kelapa Dua', 'Cisauk', 'Pagedangan', 
                    'Balaraja', 'Jayanti', 'Tigaraksa', 'Jambe', 'Cisoka', 'Kronjo', 'Mekar Baru', 'Mauk', 
                    'Kemiri', 'Sukadiri', 'Rajeg', 'Sepatan', 'Sepatan Timur', 'Pakuhaji', 'Teluknaga', 
                    'Kosambi', 'Sindang Jaya', 'Gunung Kaler', 'Sukamulya'
                ],

                init() {
                    if (this.kabupaten || this.kecamatan || this.address) {
                        this.validateZone();
                    }
                },

                hasKecOrKab() {
                    if (!this.address) return false;
                    if (this.address.toLowerCase().includes('latitude') || this.address.toLowerCase().includes('longitude')) {
                        return false;
                    }
                    const regex = /\b(kec|kecamatan|kab|kabupaten)\b/i;
                    return regex.test(this.address);
                },

                onKabupatenChange() {
                    this.kecamatan = '';
                    this.zone3Confirmed = false;
                    this.showModal = false;
                    if (this.kabupaten && this.kabupaten !== 'Kabupaten Tangerang') {
                        this.status = 'blocked';
                        this.apiMessage = 'Maaf, demi keamanan pengiriman, kami hanya melayani area Kabupaten Tangerang. Silakan cari agen terdekat di lokasi Anda.';
                        Swal.fire({
                            icon: 'error',
                            title: 'Di Luar Wilayah Layanan',
                            text: this.apiMessage,
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }
                    this.validateZone();
                },

                detectKecamatanFromAddress() {
                    if (!this.address) return;
                    
                    // Regex mencocokkan kelurahan dan kecamatan
                    // Contoh: "Kec. Curug" atau "Kecamatan Curug"
                    const regex = /(?:kecamatan|kec\.?)\s+([a-zA-Z\s]{3,20})/i;
                    const match = this.address.match(regex);
                    
                    if (match && match[1]) {
                        const detected = match[1].trim().toLowerCase();
                        
                        // Cari kecamatan di daftar
                        const found = this.allowedKecamatans.find(
                            k => k.toLowerCase() === detected
                        );
                        
                        if (found && this.kecamatan !== found) {
                            this.kecamatan = found;
                            // Set kabupaten ke Kabupaten Tangerang jika terdeteksi kecamatan di Tangerang
                            if (this.kabupaten !== 'Kabupaten Tangerang') {
                                this.kabupaten = 'Kabupaten Tangerang';
                            }
                        }
                    }
                },

                validateZone() {
                    // Coba ekstrasi kecamatan secara real-time dari alamat lengkap
                    this.detectKecamatanFromAddress();

                    clearTimeout(this.timeout);
                    this.timeout = setTimeout(async () => {
                        // Jangan validasi jika kabupaten & alamat kosong
                        if (!this.kabupaten && !this.address) {
                            this.status = 'idle';
                            this.zoneType = '';
                            this.shippingCost3kg = 0;
                            this.shippingCostBig = 0;
                            this.apiMessage = '';
                            return;
                        }

                        // Proteksi instan jika memilih Kabupaten di luar Tangerang
                        if (this.kabupaten !== 'Kabupaten Tangerang') {
                            this.status = 'blocked';
                            this.apiMessage = 'Maaf, demi keamanan pengiriman, kami hanya melayani area Kabupaten Tangerang. Silakan cari agen terdekat di lokasi Anda.';
                            this.zoneType = '';
                            this.shippingCost3kg = 0;
                            this.shippingCostBig = 0;
                            this.zone3Confirmed = false;
                            this.showModal = false;
                            Swal.fire({
                                icon: 'error',
                                title: 'Di Luar Wilayah Layanan',
                                text: this.apiMessage,
                                confirmButtonColor: '#22c55e'
                            });
                            return;
                        }

                        try {
                            const response = await fetch(`<?php echo e(url('check-zone')); ?>?kabupaten=${encodeURIComponent(this.kabupaten)}&kecamatan=${encodeURIComponent(this.kecamatan)}&address=${encodeURIComponent(this.address)}&coords=${encodeURIComponent(this.titikKoordinat)}`);
                            const data = await response.json();

                            this.status = data.status;
                            this.apiMessage = data.message;
                            this.zoneType = data.zone_type;
                            this.shippingCost3kg = data.cost_3kg || 0;
                            this.shippingCostBig = data.cost_big || 0;

                            if (this.status === 'blocked') {
                                this.zone3Confirmed = false;
                                this.showModal = false;
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Di Luar Wilayah Layanan',
                                    text: this.apiMessage,
                                    confirmButtonColor: '#22c55e'
                                });
                            } else if (this.status === 'warning' && this.zoneType === 'far') {
                                if (!this.zone3Confirmed) {
                                    this.showModal = true;
                                    this.$nextTick(() => {
                                        if (typeof lucide !== 'undefined') {
                                            lucide.createIcons();
                                        }
                                    });
                                }
                            } else {
                                this.zone3Confirmed = false;
                                this.showModal = false;
                            }
                        } catch (error) {
                            console.error('Error validating zone:', error);
                        }
                    }, 500);
                },

                confirmZone3() {
                    this.zone3Confirmed = true;
                    this.showModal = false;
                },

                cancelZone3() {
                    this.kecamatan = '';
                    this.zone3Confirmed = false;
                    this.showModal = false;
                    this.validateZone();
                },

                isSubmitDisabled() {
                    if (this.status === 'blocked') return true;
                    if (this.zoneType === 'far' && !this.zone3Confirmed) return true;
                    if (this.hasKecOrKab()) return true;
                    return false;
                },

                // Versi async tanpa debounce — dipakai setelah GPS berhasil
                async validateZoneAsync() {
                    if (!this.kabupaten && !this.address) {
                        this.status = 'idle'; this.zoneType = ''; this.shippingCost3kg = 0; this.shippingCostBig = 0; return;
                    }
                    if (this.kabupaten !== 'Kabupaten Tangerang') {
                        this.status = 'blocked';
                        this.apiMessage = 'Maaf, kami hanya melayani area Kabupaten Tangerang.';
                        this.zoneType = ''; this.shippingCost3kg = 0; this.shippingCostBig = 0;
                        Swal.fire({
                            icon: 'error',
                            title: 'Di Luar Wilayah Layanan',
                            text: this.apiMessage,
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }
                    try {
                        const res = await fetch(`<?php echo e(url('check-zone')); ?>?kabupaten=${encodeURIComponent(this.kabupaten)}&kecamatan=${encodeURIComponent(this.kecamatan)}&address=${encodeURIComponent(this.address)}&coords=${encodeURIComponent(this.titikKoordinat)}`);
                        const data = await res.json();
                        this.status      = data.status;
                        this.apiMessage  = data.message;
                        this.zoneType    = data.zone_type;
                        this.shippingCost3kg = data.cost_3kg || 0;
                        this.shippingCostBig = data.cost_big || 0;
                        if (this.status === 'blocked') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Di Luar Wilayah Layanan',
                                text: this.apiMessage,
                                confirmButtonColor: '#22c55e'
                            });
                        } else if (this.status === 'warning' && this.zoneType === 'far' && !this.zone3Confirmed) {
                            this.showModal = true;
                        }
                        this.$nextTick(() => { if (typeof lucide !== 'undefined') lucide.createIcons(); });
                    } catch(e) { console.error('validateZoneAsync error:', e); }
                },

                handleSubmit(e) {
                    // 1. Ambil data form
                    const form = document.getElementById('registerForm');
                    const name = form.querySelector('#name')?.value.trim();
                    const email = form.querySelector('#email')?.value.trim();
                    const whatsapp = form.querySelector('#phone')?.value.trim();
                    const password = form.querySelector('#password')?.value;
                    const passwordConfirm = form.querySelector('#password_confirmation')?.value;

                    // 2. Cek apakah ada kolom yang kosong
                    if (!name || !email || !whatsapp || !this.address || !this.titikKoordinat || !this.kabupaten || !this.kecamatan || !password || !passwordConfirm) {
                        e.preventDefault();
                        
                        let emptyFieldMsg = 'Harap isi semua kolom pendaftaran terlebih dahulu.';
                        if (!this.titikKoordinat || !this.address) {
                            emptyFieldMsg = 'Harap dapatkan alamat Anda melalui lokasi GPS terlebih dahulu sebelum mendaftar.';
                        } else if (!this.kabupaten || !this.kecamatan) {
                            emptyFieldMsg = 'Harap pilih wilayah Kabupaten dan Kecamatan terlebih dahulu.';
                        }
                        
                        Swal.fire({
                            icon: 'warning',
                            title: 'Formulir Belum Lengkap',
                            text: emptyFieldMsg,
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }

                    // Cek nomor HP jika lebih dari 12 digit
                    if (whatsapp.length > 12) {
                        e.preventDefault();
                        Swal.fire({
                            icon: 'warning',
                            title: 'Nomor HP Terlalu Panjang',
                            text: 'Nomor HP tidak boleh lebih dari 12 digit.',
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }

                    // 3. Cek apakah status terblokir (di luar area)
                    if (this.status === 'blocked') {
                        e.preventDefault();
                        Swal.fire({
                            icon: 'error',
                            title: 'Pendaftaran Ditolak',
                            text: this.apiMessage || 'Maaf, lokasi Anda di luar wilayah layanan kami.',
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }
                    
                    // 4. Cek konfirmasi password sesuai
                    if (password !== passwordConfirm) {
                        e.preventDefault();
                        Swal.fire({
                            icon: 'warning',
                            title: 'Konfirmasi Password',
                            text: 'Password konfirmasi tidak sesuai dengan password yang diisi!',
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }

                    // 5. Cek zona far
                    if (this.zoneType === 'far' && !this.zone3Confirmed) {
                        e.preventDefault();
                        this.showModal = true;
                        return;
                    }
                    
                    // 6. Cek format alamat mengandung kec/kab
                    if (this.hasKecOrKab()) {
                        e.preventDefault();
                        Swal.fire({
                            icon: 'error',
                            title: 'Format Alamat Salah',
                            text: 'Cukup tuliskan alamat lengkap Anda sampai nama Kelurahan/Desa saja. Tidak perlu menuliskan Kecamatan dan Kabupaten/Kota di kolom alamat.',
                            confirmButtonColor: '#22c55e'
                        });
                        return;
                    }
                }
            }
        }
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('registerForm');
            if (form) {
                form.addEventListener('submit', (e) => {
                    if (e.defaultPrevented) {
                        return;
                    }
                    if (form.checkValidity()) {
                        const overlay = document.getElementById('loadingOverlay');
                        if (overlay) {
                            overlay.style.display = 'flex';
                        }
                    }
                });
            }
        });
    </script>

    <!-- Zone 3 Confirmation Modal (Pure Tailwind CSS) -->
    <div id="zone3_modal" 
         x-show="showModal" 
         x-cloak 
         class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm transition-opacity duration-300"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        
        <!-- Modal Card -->
        <div class="bg-white rounded-3xl border border-slate-100 shadow-2xl p-6 sm:p-8 max-w-md w-full text-left transition-transform duration-300 transform"
             x-show="showModal"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="scale-95 translate-y-4"
             x-transition:enter-end="scale-100 translate-y-0"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="scale-100 translate-y-0"
             x-transition:leave-end="scale-95 translate-y-4"
             @click.away="cancelZone3()">
             
            <div class="flex items-center gap-3.5 mb-4 text-amber-500">
                <div class="p-3 bg-amber-50 rounded-2xl">
                    <i data-lucide="alert-triangle" class="w-7 h-7"></i>
                </div>
                <div>
                    <h3 class="font-black text-lg text-slate-800">Konfirmasi Ongkos Kirim Zona 3</h3>
                    <p class="text-xs text-slate-400 font-medium">Wilayah Jauh / Luar Area</p>
                </div>
            </div>
            
            <p class="text-sm text-slate-600 leading-relaxed font-semibold">
                Lokasi Kecamatan <span class="text-slate-800 font-extrabold" x-text="kecamatan"></span> termasuk dalam <span class="text-amber-600 font-extrabold">Zona 3 (Jauh)</span>. 
                Akan dikenakan ongkos kirim tambahan per tabung:
                <span class="block mt-1 text-slate-800 font-black">
                     &bull; Gas 3kg: Rp <span x-text="shippingCost3kg.toLocaleString('id-ID')"></span>/tabung
                </span>
                <span class="block text-slate-800 font-black">
                     &bull; Gas 5,5kg & 12kg: Rp <span x-text="shippingCostBig.toLocaleString('id-ID')"></span>/tabung
                </span>
                Apakah Anda setuju?
            </p>

            <div class="mt-6 flex gap-3">
                <button type="button" 
                        @click="cancelZone3" 
                        class="border border-slate-200 hover:bg-slate-50 text-slate-500 font-bold rounded-2xl flex-1 py-3 text-sm transition-colors text-center focus:outline-none">
                    Batal
                </button>
                <button type="button" 
                        @click="confirmZone3" 
                        class="bg-amber-500 hover:bg-amber-600 text-white font-black rounded-2xl flex-1 py-3 text-sm transition-colors text-center focus:outline-none">
                    Ya, Lanjutkan
                </button>
            </div>
        </div>
    </div>

    <!-- Glassmorphic Loading Overlay -->
    <div id="loadingOverlay" style="display: none;" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-slate-950/70 backdrop-blur-md">
        <div class="glass-card rounded-[2.5rem] p-8 sm:p-10 max-w-[360px] w-full mx-4 text-center border border-white/25 shadow-2xl flex flex-col items-center gap-5">
            <!-- Loading Spinner -->
            <div class="relative w-16 h-16 flex items-center justify-center">
                <div class="absolute inset-0 rounded-full border-4 border-slate-200/20"></div>
                <div class="absolute inset-0 rounded-full border-4 border-t-gas3kg animate-spin"></div>
                <i data-lucide="flame" class="w-6 h-6 text-gas3kg animate-pulse absolute"></i>
            </div>
            <div class="space-y-2">
                <h3 class="text-xl font-extrabold text-slate-950">Selamat Datang</h3>
                <p class="text-xs font-bold text-slate-500 uppercase tracking-wider">Memproses Pendaftaran Akun...</p>
            </div>
        </div>
    </div>
</body>
</html>
<?php /**PATH C:\laragon\www\LPG\resources\views/auth/register.blade.php ENDPATH**/ ?>