@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-sky-100 px-4 py-8 md:py-12">
    <div class="max-w-6xl mx-auto">
        <!-- Header Section -->
        <div class="text-center mb-10 md:mb-12">
            <div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8 mb-6">
                <img src="{{ asset('images/logo-pondok.png') }}" 
                        class="h-20 sm:h-24 md:h-28 mb-4 drop-shadow-lg" 
                        alt="Logo Pondok">
                <div>
                    <h1 class="text-2xl md:text-4xl font-bold text-gray-800 mb-2">
                        Formulir Pendaftaran Santri Baru
                    </h1>
                    <div class="inline-flex items-center gap-2 bg-blue-100 text-blue-700 px-4 py-2 rounded-full text-sm font-medium">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        <span>{{ $jenis == 'putra' ? 'Santri Putra' : 'Santri Putri' }}</span>
                    </div>
                </div>
            </div>
            
            <!-- Progress Steps -->
            <div class="max-w-2xl mx-auto mb-8">
                <div class="flex justify-between items-center relative">
                    <!-- Progress Line -->
                    <div class="absolute top-1/2 left-0 right-0 h-0.5 bg-gray-200 -translate-y-1/2 -z-10"></div>
                    <div id="progressLine" class="absolute top-1/2 left-0 h-0.5 bg-blue-600 -translate-y-1/2 -z-10 transition-all duration-500" style="width: 0%"></div>
                    
                    <!-- Steps -->
                    @foreach(['Informasi', 'Sekolah', 'Orang Tua', 'Alamat'] as $index => $step)
                    <div class="flex flex-col items-center">
                        <div class="step-circle w-8 h-8 md:w-10 md:h-10 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center mb-2 transition-all duration-300"
                             data-step="{{ $index + 1 }}">
                            <span class="text-sm font-semibold text-gray-400">{{ $index + 1 }}</span>
                        </div>
                        <span class="text-xs md:text-sm font-medium text-gray-500 hidden md:block">{{ $step }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        @if(session('status') === 'success')
        <div x-data="{ open: true }"
            x-show="open"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90"
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
            <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl p-6 md:p-8 relative transform transition-all duration-300">
                <button @click="open = false" 
                        class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>

                <div class="text-center">
                    <div class="w-16 h-16 md:w-20 md:h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 md:mb-6">
                        <svg class="w-8 h-8 md:w-10 md:h-10 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <h3 class="text-xl md:text-2xl font-bold text-gray-800 mb-3">Pendaftaran Berhasil!</h3>
                    <p class="text-gray-600 mb-6 md:mb-8 text-sm md:text-base">
                        Terima kasih, formulir pendaftaran Anda telah berhasil dikirim. Tim kami akan menghubungi Anda segera.
                    </p>
                    <div class="space-y-3">
                        <a href="{{ url('/pendaftaran-pilih') }}"
                            class="inline-block w-full bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
                            Kembali ke Halaman Awal
                        </a>
                        <a href="{{ url('/') }}"
                            class="inline-block w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-6 py-3 rounded-lg transition-colors duration-300">
                            Ke Beranda
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Form Container -->
        <form method="POST" action="{{ route('pendaftaran.submit') }}" 
              class="bg-white rounded-2xl shadow-xl overflow-hidden">
            @csrf
            <input type="hidden" name="jenis" value="{{ $jenis }}">

            <!-- Step 1 -->
            <div id="step-1" class="form-step p-6 md:p-8">
                <div class="flex items-center gap-3 mb-6 md:mb-8">
                    <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-800">Informasi Santri</h2>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                    @foreach([
                        ['label' => 'NIK Santri', 'name' => 'nik_santri', 'type' => 'text', 'icon' => 'fingerprint'],
                        ['label' => 'Nama Santri', 'name' => 'nama_santri', 'type' => 'text', 'icon' => 'user'],
                        ['label' => 'Tempat Lahir', 'name' => 'tempat_lahir', 'type' => 'text', 'icon' => 'location-marker'],
                        ['label' => 'Tanggal Lahir', 'name' => 'tanggal_lahir', 'type' => 'date', 'icon' => 'calendar'],
                        ['label' => 'Anak Ke', 'name' => 'anak_ke', 'type' => 'number', 'icon' => 'users'],
                        ['label' => 'Jumlah Saudara', 'name' => 'jumlah_saudara', 'type' => 'number', 'icon' => 'user-group']
                    ] as $field)
                    <div class="space-y-2">
                        <label class="block font-medium text-gray-700">
                            <div class="flex items-center gap-2 mb-1">
                                @if($field['icon'] == 'fingerprint')
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
                                </svg>
                                @endif
                                {{ $field['label'] }}
                            </div>
                            <input type="{{ $field['type'] }}" 
                                   name="{{ $field['name'] }}" 
                                   required
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200">
                        </label>
                    </div>
                    @endforeach
                </div>

                <div class="flex justify-end mt-8 pt-6 border-t border-gray-100">
                    <button type="button" 
                            onclick="nextStep(1)"
                            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center gap-2">
                        Lanjut
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Step 2 -->
            <div id="step-2" class="form-step hidden p-6 md:p-8">
                <div class="flex items-center gap-3 mb-6 md:mb-8">
                    <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-800">Sekolah & Tes</h2>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
                    <div class="space-y-2">
                        <label class="block font-medium text-gray-700 mb-1">Nomor Tes</label>
                        <input type="text" 
                               name="nomor_tes" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                               placeholder="Masukkan nomor tes">
                    </div>
                    
                    <div class="space-y-2">
                        <label class="block font-medium text-gray-700 mb-1">Sekolah Tujuan</label>
                        <select name="sekolah_tujuan" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 bg-white">
                            <option disabled selected class="text-gray-400">-- Pilih Sekolah Tujuan --</option>
                            @foreach ([
                                'MTsN 3 Jombang', 'MTs Bahrul Ulum', 'MTs Fattah Hasyim Bahrul Ulum', 'SMP Bahrul Ulum',
                                'MMA Bahrul Ulum', 'MAN 3 Jombang', 'MA Unggulan KH. Abd. Wahab Hasbullah', 'MA Bahrul Ulum',
                                'MA Fattah Hasyim Bahrul Ulum', 'MA Al-I\'dadiyah Bahrul Ulum', 'SMK Kreatif Bahrul Ulum',
                                'SMK TI Annajiyah Bahrul Ulum', 'IAIBAFA Bahrul Ulum', 'STIKES Bahrul Ulum', 'UNWAHA Bahrul Ulum'
                            ] as $sekolah)
                            <option value="{{ $sekolah }}" class="text-gray-700">{{ $sekolah }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex justify-between mt-8 pt-6 border-t border-gray-100">
                    <button type="button" 
                            onclick="prevStep(2)"
                            class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-8 py-3 rounded-lg transition-colors duration-300 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        Kembali
                    </button>
                    <button type="button" 
                            onclick="nextStep(2)"
                            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center gap-2">
                        Lanjut
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Step 3 -->
            <div id="step-3" class="form-step hidden p-6 md:p-8">
                <div class="flex items-center gap-3 mb-6 md:mb-8">
                    <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-3-3.87M3 20h5v-2a4 4 0 00-3-3.87M15 11a3 3 0 100-6 3 3 0 000 6zM9 11a3 3 0 100-6 3 3 0 000 6z" />
                        </svg>
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-800">Data Orang Tua</h2>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
                    @foreach(['Ayah', 'Ibu'] as $parent)
                    <div class="space-y-4">
                        <h3 class="text-lg font-semibold text-gray-700 border-l-4 border-blue-500 pl-3">{{ $parent }}</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block font-medium text-gray-700 mb-1">Nama {{ $parent }}</label>
                                <input type="text" 
                                       name="nama_{{ strtolower($parent) }}" 
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200">
                            </div>
                            <div>
                                <label class="block font-medium text-gray-700 mb-1">Pekerjaan {{ $parent }}</label>
                                <select name="pekerjaan_{{ strtolower($parent) }}" 
                                        required
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 bg-white">
                                    <option value="" class="text-gray-400">-- Pilih Pekerjaan --</option>
                                    @foreach (['pns','asn','tni-polri','petani','nelayan','buruh','pedagang','wirausaha','guru','dosen','dokter','perawat','pengacara','seniman','freelancer','lainnya'] as $job)
                                    <option value="{{ $job }}" class="text-gray-700">{{ ucfirst($job) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="flex justify-between mt-8 pt-6 border-t border-gray-100">
                    <button type="button" 
                            onclick="prevStep(3)"
                            class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-8 py-3 rounded-lg transition-colors duration-300 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        Kembali
                    </button>
                    <button type="button" 
                            onclick="nextStep(3)"
                            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center gap-2">
                        Lanjut
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Step 4 -->
            <div id="step-4" class="form-step hidden p-6 md:p-8">
                <div class="flex items-center gap-3 mb-6 md:mb-8">
                    <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-800">Kontak & Alamat</h2>
                </div>

                <div class="space-y-6 md:space-y-8">
                    <div>
                        <label class="block font-medium text-gray-700 mb-2">Nomor Telepon</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <input type="text" 
                                   name="nomor_telepon" 
                                   required
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                                   placeholder="08xxxxxxxxxx">
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">Alamat Lengkap</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
                            @foreach([
                                ['id' => 'provinsi', 'label' => 'Provinsi', 'icon' => 'location-marker'],
                                ['id' => 'kabupaten', 'label' => 'Kabupaten/Kota', 'icon' => 'office-building'],
                                ['id' => 'kecamatan', 'label' => 'Kecamatan', 'icon' => 'map'],
                                ['id' => 'desa', 'label' => 'Desa/Kelurahan', 'icon' => 'home']
                            ] as $field)
                            <div class="space-y-2">
                                <label class="block font-medium text-gray-700 mb-1">{{ $field['label'] }}</label>
                                <select id="{{ $field['id'] }}" 
                                        name="{{ $field['id'] }}" 
                                        required
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 bg-white">
                                    <option value="" class="text-gray-400">Pilih {{ $field['label'] }}</option>
                                    @if($field['id'] == 'provinsi')
                                        @foreach ($provinsi as $prov)
                                        <option value="{{ $prov->kode }}" class="text-gray-700">{{ $prov->nama }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="flex justify-between mt-8 pt-6 border-t border-gray-100">
                    <button type="button" 
                            onclick="prevStep(4)"
                            class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-8 py-3 rounded-lg transition-colors duration-300 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        Kembali
                    </button>
                    <button type="submit" 
                            class="bg-green-600 hover:bg-green-700 text-white font-semibold px-8 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        Kirim Pendaftaran
                    </button>
                </div>
            </div>
        </form>

        <!-- Footer Note -->
        <div class="mt-8 text-center text-sm text-gray-500">
            <p>Pastikan data yang Anda masukkan sudah benar sebelum mengirimkan formulir.</p>
        </div>
    </div>
</div>

<!-- Alert Modal -->
<div x-data="alertModal" 
     x-show="showAlert"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 scale-90"
     x-transition:enter-end="opacity-100 scale-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 scale-90"
     class="fixed inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-50 p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md transform transition-all duration-300">
        <div class="text-center">
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">Perhatian</h3>
            <p class="text-gray-600 mb-6" x-text="message"></p>
            <button @click="showAlert = false" 
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition-colors duration-300">
                OK, Saya Mengerti
            </button>
        </div>
    </div>
</div>

<style>
    .form-step.hidden {
        display: none;
    }
    
    .step-circle.active {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
        transform: scale(1.1);
    }
    
    .step-circle.active span {
        color: white;
    }
</style>

<script>
    let currentStep = 1;
    const formSteps = document.querySelectorAll('.form-step');

    function updateProgress(step) {
        // Update progress line
        const progressLine = document.getElementById('progressLine');
        const progressPercentage = ((step - 1) / 3) * 100;
        progressLine.style.width = `${progressPercentage}%`;
        
        // Update step circles
        document.querySelectorAll('.step-circle').forEach((circle, index) => {
            if (index < step) {
                circle.classList.add('active');
                circle.classList.remove('border-gray-300');
                circle.classList.add('border-blue-600');
            } else {
                circle.classList.remove('active');
                circle.classList.add('border-gray-300');
                circle.classList.remove('border-blue-600');
            }
        });
    }

    function showStep(step) {
        formSteps.forEach(s => s.classList.add('hidden'));
        const stepElement = document.getElementById(`step-${step}`);
        if (stepElement) {
            stepElement.classList.remove('hidden');
            updateProgress(step);
            
            // Scroll ke atas form
            stepElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }

    function validateStep(step) {
        const currentStepDiv = document.getElementById(`step-${step}`);
        const requiredInputs = currentStepDiv.querySelectorAll('input[required], select[required]');
        let isValid = true;
        let emptyFields = [];

        requiredInputs.forEach(input => {
            if (input.value.trim() === '') {
                isValid = false;
                emptyFields.push(input.previousElementSibling?.textContent || input.name);
                input.classList.add('border-red-500', 'bg-red-50');
                input.classList.remove('border-gray-300');
                
                // Remove error class after correction
                input.addEventListener('input', function() {
                    if (this.value.trim() !== '') {
                        this.classList.remove('border-red-500', 'bg-red-50');
                        this.classList.add('border-gray-300');
                    }
                });
            }
        });

        return { isValid, emptyFields };
    }

    function nextStep(step) {
        const validation = validateStep(step);
        
        if (!validation.isValid) {
            window.dispatchEvent(new CustomEvent('show-alert', {
                detail: { 
                    message: 'Mohon lengkapi semua data yang diperlukan:\n' + 
                            validation.emptyFields.map(field => `• ${field}`).join('\n')
                }
            }));
            return;
        }

        currentStep = step + 1;
        showStep(currentStep);
    }

    function prevStep(step) {
        currentStep = step - 1;
        showStep(currentStep);
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Initialize
        showStep(currentStep);
        updateProgress(currentStep);

        // Wilayah Script
        const baseUrl = "{{ url('/') }}";

        function loadWilayah(parentId, type, target) {
            fetch(`${baseUrl}/get-wilayah?id=${parentId}&data=${type}`)
                .then(res => res.json())
                .then(data => {
                    target.innerHTML = `<option value="">Pilih ${type}</option>`;
                    data.forEach(item => {
                        target.innerHTML += `<option value="${item.kode}">${item.nama}</option>`;
                    });
                })
                .catch(error => console.error('Error loading wilayah:', error));
        }

        const provinsi = document.getElementById('provinsi');
        const kabupaten = document.getElementById('kabupaten');
        const kecamatan = document.getElementById('kecamatan');
        const desa = document.getElementById('desa');

        if (provinsi) {
            provinsi.addEventListener('change', function() {
                loadWilayah(this.value, 'kabupaten', kabupaten);
                kabupaten.innerHTML = '<option value="">Pilih Kabupaten/Kota</option>';
                kecamatan.innerHTML = '<option value="">Pilih Kecamatan</option>';
                desa.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
            });
        }

        if (kabupaten) {
            kabupaten.addEventListener('change', function() {
                loadWilayah(this.value, 'kecamatan', kecamatan);
                kecamatan.innerHTML = '<option value="">Pilih Kecamatan</option>';
                desa.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
            });
        }

        if (kecamatan) {
            kecamatan.addEventListener('change', function() {
                loadWilayah(this.value, 'desa', desa);
            });
        }
    });

    // Alpine.js Alert Modal
    document.addEventListener('alpine:init', () => {
        Alpine.data('alertModal', () => ({
            showAlert: false,
            message: '',
            init() {
                window.addEventListener('show-alert', (event) => {
                    this.message = event.detail.message;
                    this.showAlert = true;
                });
            }
        }));
    });
</script>
@endsection