@extends('layouts.app')

@section('title', 'Daftarkan Kelompok Baru')

@section('content')
<div class="container-fluid px-3 px-md-4 py-4">

    <x-ui.page-header
        title="Daftarkan Kelompok Baru"
        subtitle="Tahap 1: Data master kelompok — statis, tidak berubah per ronde"
        back="{{ route('kelompok.index') }}"
    />

    <x-ui.alert :flash="true" />

    @if($errors->any())
    <x-ui.alert type="danger" :dismissible="true">
        <strong>Periksa kembali form di bawah:</strong>
        <ul class="mb-0 mt-1">
            @foreach($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </x-ui.alert>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <form action="{{ route('kelompok.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                {{-- ══ A. IDENTITAS KELOMPOK ══ --}}
                <x-ui.section-card title="A. Identitas Kelompok" icon="bi-people-fill" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label fw-medium">Nama Kelompok Tani Hutan <span class="text-danger">*</span></label>
                            <input type="text" name="nama"
                                class="form-control @error('nama') is-invalid @enderror"
                                placeholder="Misal: KTH Buntu Rura"
                                value="{{ old('nama') }}" required>
                            @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Tanggal Berdiri <span class="text-danger">*</span></label>
                            <input type="date" name="tanggal_berdiri"
                                class="form-control @error('tanggal_berdiri') is-invalid @enderror"
                                value="{{ old('tanggal_berdiri') }}"
                                max="{{ date('Y-m-d') }}" required>
                            @error('tanggal_berdiri')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="row g-3 mt-1">
                        {{-- Legalitas: combined field --}}
                        <div class="col-md-9">
                            <label class="form-label fw-medium">Legalitas <span class="text-danger">*</span></label>
                            <input type="text" name="legalitas"
                                class="form-control @error('legalitas') is-invalid @enderror"
                                placeholder="Contoh: SK Dinas No. 001/2020"
                                value="{{ old('legalitas') }}" required>
                            @error('legalitas')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Jumlah Anggota <span class="text-danger">*</span></label>
                            <input type="number" name="jumlah_anggota_total"
                                class="form-control @error('jumlah_anggota_total') is-invalid @enderror"
                                min="1" placeholder="Total anggota"
                                value="{{ old('jumlah_anggota_total') }}" required>
                            @error('jumlah_anggota_total')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="mt-3">
                        <label class="form-label fw-medium">
                            Upload Dokumen Legalitas
                            <span class="text-muted fw-normal">(PDF/JPG, maks. 5 MB) — upload sekali, tidak perlu diulang tiap ronde</span>
                        </label>
                        <input type="file" name="file_legalitas"
                            class="form-control @error('file_legalitas') is-invalid @enderror"
                            accept=".pdf,.jpg,.jpeg,.png">
                        @error('file_legalitas')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </x-ui.section-card>

                {{-- ══ B. ALAMAT KELOMPOK ══ --}}
                <x-ui.section-card title="B. Alamat Kelompok" icon="bi-geo-alt-fill" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Provinsi <span class="text-danger">*</span></label>
                            <select id="sel-provinsi" name="provinsi_display"
                                class="form-select @error('kelurahan_id') is-invalid @enderror" required>
                                <option value="">— Memuat provinsi... —</option>
                            </select>
                            @error('kelurahan_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Kabupaten/Kota <span class="text-danger">*</span></label>
                            <select id="sel-kabupaten" name="kabupaten_display"
                                class="form-select" required disabled>
                                <option value="">— Pilih Provinsi dulu —</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Kecamatan <span class="text-danger">*</span></label>
                            <select id="sel-kecamatan" name="kecamatan_display"
                                class="form-select" required disabled>
                                <option value="">— Pilih Kabupaten dulu —</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Desa/Kelurahan <span class="text-danger">*</span></label>
                            <select id="sel-kelurahan" name="kelurahan_id"
                                class="form-select @error('kelurahan_id') is-invalid @enderror" required disabled>
                                <option value="">— Pilih Kecamatan dulu —</option>
                            </select>
                            @error('kelurahan_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium">Dusun <span class="text-danger">*</span></label>
                            <input type="text" name="dusun_desa"
                                class="form-control @error('dusun_desa') is-invalid @enderror"
                                placeholder="Misal: Dusun Buntu, Desa Contoh"
                                value="{{ old('dusun_desa') }}" required>
                            @error('dusun_desa')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </x-ui.section-card>

                {{-- ══ C. PENGURUS KELOMPOK ══ --}}
                <x-ui.section-card title="C. Pengurus Kelompok" icon="bi-person-badge-fill" class="mb-4">
                    <p class="text-muted small mb-3">
                        Masukkan nama ketua, wakil ketua, sekretaris, dan bendahara.
                        Snapshot pengurus per ronde disimpan saat Tahap 2.
                    </p>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Ketua <span class="text-danger">*</span></label>
                            <input type="text" name="nama_ketua"
                                class="form-control @error('nama_ketua') is-invalid @enderror"
                                placeholder="Nama lengkap ketua"
                                value="{{ old('nama_ketua') }}" required>
                            @error('nama_ketua')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Wakil Ketua <span class="text-danger">*</span></label>
                            <input type="text" name="nama_wakil_ketua"
                                class="form-control @error('nama_wakil_ketua') is-invalid @enderror"
                                placeholder="Nama lengkap wakil ketua"
                                value="{{ old('nama_wakil_ketua') }}" required>
                            @error('nama_wakil_ketua')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Sekretaris <span class="text-danger">*</span></label>
                            <input type="text" name="nama_sekretaris"
                                class="form-control @error('nama_sekretaris') is-invalid @enderror"
                                placeholder="Nama lengkap sekretaris"
                                value="{{ old('nama_sekretaris') }}" required>
                            @error('nama_sekretaris')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Bendahara <span class="text-danger">*</span></label>
                            <input type="text" name="nama_bendahara"
                                class="form-control @error('nama_bendahara') is-invalid @enderror"
                                placeholder="Nama lengkap bendahara"
                                value="{{ old('nama_bendahara') }}" required>
                            @error('nama_bendahara')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </x-ui.section-card>

                {{-- TOMBOL ACTION --}}
                <div class="d-flex gap-2 mb-5">
                    <a href="{{ route('kelompok.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i> Daftarkan Kelompok
                    </button>
                </div>

            </form>
        </div>

        {{-- SIDEBAR --}}
        <div class="col-lg-4">
            <x-ui.section-card title="Panduan" icon="bi-info-circle-fill" class="mb-3">
                <div style="font-size:.85rem; line-height:1.7;">
                    <p class="fw-semibold mb-1">Data master (diisi sekali):</p>
                    <ul class="mb-3">
                        <li>Identitas & alamat kelompok</li>
                        <li>Dokumen legalitas (AD/ART, SK)</li>
                        <li>Susunan pengurus</li>
                    </ul>
                    <p class="fw-semibold mb-1">Data per ronde (di Tahap 2):</p>
                    <ul class="mb-0">
                        <li>Nama & afiliasi pendamping</li>
                        <li>9 dokumen pengajuan kelompok</li>
                        <li>Penilaian 3 kriteria kelompok</li>
                    </ul>
                </div>
            </x-ui.section-card>

            <x-ui.section-card class="mb-3">
                <div style="font-size:.85rem;">
                    <p class="fw-semibold mb-1 text-warning">
                        <i class="bi bi-exclamation-triangle me-1"></i>Syarat lolos verifikasi:
                    </p>
                    <ul class="mb-0">
                        <li>Kelompok aktif <strong>≥ 6 bulan</strong></li>
                        <li>Memiliki legalitas AD/ART</li>
                        <li>Kelompok aktif <strong>≥ 1 tahun</strong> (syarat DA)</li>
                    </ul>
                </div>
            </x-ui.section-card>
        </div>
    </div>

</div>

@push('scripts')
<script>
// ══════════════════════════════════════════════════════════════════════
// CASCADE WILAYAH — Tahap 1 Registrasi Kelompok
// ══════════════════════════════════════════════════════════════════════

const WILAYAH_API = {
    provinsi:  '/api/wilayah/provinsi',
    kabupaten: '/api/wilayah/kabupaten',
    kecamatan: '/api/wilayah/kecamatan',
    kelurahan: '/api/wilayah/kelurahan',
};

// Get CSRF token dari meta tag
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

// Helper untuk fetch dengan CSRF token
async function fetchWithToken(url) {
    return fetch(url, {
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json',
        }
    });
}

// Nilai tersimpan (old input saat validasi gagal)
const savedWilayah = {
    provinsi:  @json(old('provinsi',  '')),
    kabupaten: @json(old('kabupaten', '')),
    kecamatan: @json(old('kecamatan', '')),
    desa:      @json(old('desa',      '')),
};

const els = {
    provinsi:  document.getElementById('sel-provinsi'),
    kabupaten: document.getElementById('sel-kabupaten'),
    kecamatan: document.getElementById('sel-kecamatan'),
    kelurahan: document.getElementById('sel-kelurahan'),
};

function fillSelect(el, items, selectVal = '', placeholder = '-- Pilih --', useId = false) {
    el.innerHTML = `<option value="">${placeholder}</option>`;
    items.forEach(item => {
        const opt = document.createElement('option');
        // For kelurahan, use ID as value; for others, use nama
        opt.value = useId ? item.id : item.nama;
        opt.dataset.kode = item.kode;
        opt.dataset.id = item.id;
        opt.textContent = item.nama;
        if (item.nama === selectVal) opt.selected = true;
        el.appendChild(opt);
    });
    el.disabled = items.length === 0;
}

function resetBelow(level) {
    const order = ['provinsi', 'kabupaten', 'kecamatan', 'kelurahan'];
    const idx   = order.indexOf(level);
    order.slice(idx + 1).forEach(key => {
        if (!els[key]) return;
        els[key].innerHTML = '<option value="">— Pilih —</option>';
        els[key].disabled  = true;
    });
}

async function loadKabupaten(provinsiKode, saved = {}) {
    try {
        const res  = await fetchWithToken(`${WILAYAH_API.kabupaten}?provinsi_kode=${provinsiKode}`);
        const data = await res.json();
        fillSelect(els.kabupaten, data, saved.kabupaten ?? '', '— Pilih Kabupaten/Kota —');
        if (saved.kabupaten) {
            const opt = [...els.kabupaten.options].find(o => o.value === saved.kabupaten);
            if (opt) await loadKecamatan(opt.dataset.kode, saved);
        }
    } catch (e) {
        console.error('Error loading kabupaten:', e);
    }
}

async function loadKecamatan(kabupatenKode, saved = {}) {
    try {
        const res  = await fetchWithToken(`${WILAYAH_API.kecamatan}?kabupaten_kode=${kabupatenKode}`);
        const data = await res.json();
        fillSelect(els.kecamatan, data, saved.kecamatan ?? '', '— Pilih Kecamatan —');
        if (saved.kecamatan) {
            const opt = [...els.kecamatan.options].find(o => o.value === saved.kecamatan);
            if (opt) await loadKelurahan(opt.dataset.kode, saved);
        }
    } catch (e) {
        console.error('Error loading kecamatan:', e);
    }
}

async function loadKelurahan(kecamatanKode, saved = {}) {
    try {
        const res  = await fetchWithToken(`${WILAYAH_API.kelurahan}?kecamatan_kode=${kecamatanKode}`);
        const data = await res.json();
        // Use ID as value for kelurahan (submittal field)
        fillSelect(els.kelurahan, data, saved.kelurahan ?? '', '— Pilih Desa/Kelurahan —', true);
    } catch (e) {
        console.error('Error loading kelurahan:', e);
    }
}

async function initCascade() {
    try {
        // Muat provinsi
        const provRes  = await fetchWithToken(WILAYAH_API.provinsi);
        const provData = await provRes.json();
        fillSelect(els.provinsi, provData, savedWilayah.provinsi, '— Pilih Provinsi —');

        // Chain-load jika ada saved value (old input)
        if (savedWilayah.provinsi) {
            const opt = [...els.provinsi.options].find(o => o.value === savedWilayah.provinsi);
            if (opt) await loadKabupaten(opt.dataset.kode, savedWilayah);
        }

        // Event listeners
        els.provinsi.addEventListener('change', async function () {
            const kode = this.options[this.selectedIndex]?.dataset?.kode ?? '';
            resetBelow('provinsi');
            if (kode) await loadKabupaten(kode);
        });
        els.kabupaten.addEventListener('change', async function () {
            const kode = this.options[this.selectedIndex]?.dataset?.kode ?? '';
            resetBelow('kabupaten');
            if (kode) await loadKecamatan(kode);
        });
        els.kecamatan.addEventListener('change', async function () {
            const kode = this.options[this.selectedIndex]?.dataset?.kode ?? '';
            resetBelow('kecamatan');
            if (kode) await loadKelurahan(kode);
        });
    } catch (e) {
        console.error('Error initializing cascade:', e);
    }
}

initCascade();
</script>
@endpush

@endsection