@extends('layouts.app')

@section('title', 'Buat Pengajuan Ronde Baru')

@section('content')

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

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show mb-4">
    <i class="bi bi-exclamation-triangle-fill me-2"></i>
    <strong>Periksa kembali:</strong>
    <ul class="mb-0 mt-1">
        @foreach($errors->all() as $e)
            <li>{{ $e }}</li>
        @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<x-ui.page-header
    title="Buat Pengajuan Ronde Baru"
    subtitle="Data per-ronde pembiayaan kelompok"
    back="{{ route('pengajuan-kelompok.index') }}" />

<form action="{{ route('pengajuan-kelompok.store') }}" method="POST" enctype="multipart/form-data">
@csrf

    {{-- ── SEKSI 1: PILIH KELOMPOK & PENDAMPING ───────────────────────────── --}}
    <x-form.section title="Pilih Kelompok & Pendamping" icon="bi-people">

        <div class="row g-3">
            <div class="col-12">
                <label class="form-label fw-medium">
                    Kelompok Tani Hutan <span class="text-danger">*</span>
                </label>
                <select name="kelompok_id" id="kelompok_id"
                    class="form-select @error('kelompok_id') is-invalid @enderror"
                    required>
                    <option value="">— Pilih kelompok —</option>
                    @foreach($kelompokList as $k)
                    <option value="{{ $k->id }}"
                        data-jumlah="{{ $k->jumlah_anggota_total }}"
                        data-tanggal-berdiri="{{ $k->tanggal_berdiri->format('Y-m-d') }}"
                        {{ (old('kelompok_id', $selectedKelompokId) === $k->id) ? 'selected' : '' }}>
                        {{ $k->nama }} — {{ $k->kecamatan }}, {{ $k->kabupaten }}
                    </option>
                    @endforeach
                </select>
                @error('kelompok_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                <div class="form-text">
                    Kelompok belum ada?
                    <a href="{{ route('kelompok.create') }}" target="_blank" class="fw-semibold">
                        Daftarkan Kelompok Baru <i class="bi bi-box-arrow-up-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-md-6">
                <label class="form-label fw-medium">
                    Nama Pendamping <span class="text-danger">*</span>
                </label>
                <input type="text" name="nama_pendamping"
                    class="form-control @error('nama_pendamping') is-invalid @enderror"
                    value="{{ old('nama_pendamping') }}"
                    placeholder="Nama lengkap pendamping"
                    required>
                @error('nama_pendamping')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="col-md-6">
                <label class="form-label fw-medium">
                    Afiliasi Instansi <span class="text-danger">*</span>
                </label>
                <select name="afiliasi_pendamping"
                    class="form-select @error('afiliasi_pendamping') is-invalid @enderror"
                    required>
                    <option value="">— Pilih instansi —</option>
                    @foreach($afiliasiList as $aff)
                    <option value="{{ $aff }}" {{ old('afiliasi_pendamping') === $aff ? 'selected' : '' }}>
                        {{ $aff }}
                    </option>
                    @endforeach
                </select>
                @error('afiliasi_pendamping')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="col-md-6">
                <label class="form-label fw-medium">
                    Jumlah Anggota Total <span class="text-danger">*</span>
                </label>
                <input type="number" name="jumlah_anggota_total" id="jumlah_anggota_total"
                    class="form-control @error('jumlah_anggota_total') is-invalid @enderror"
                    min="1" value="{{ old('jumlah_anggota_total') }}" required>
                <div class="form-text">Value dari data kelompok, bisa diubah jika ada perubahan.</div>
                @error('jumlah_anggota_total')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="col-md-6">
                <label class="form-label fw-medium">
                    Jumlah Anggota yang Mengajukan <span class="text-danger">*</span>
                </label>
                <input type="number" name="jumlah_anggota_mengajukan"
                    class="form-control @error('jumlah_anggota_mengajukan') is-invalid @enderror"
                    min="1" value="{{ old('jumlah_anggota_mengajukan') }}" required>
                @error('jumlah_anggota_mengajukan')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

    </x-form.section>

    {{-- ── SEKSI 2: PENILAIAN 3 KRITERIA KELOMPOK ─────────────────────────── --}}
    <x-form.section
        title="Penilaian 3 Kriteria Kelompok"
        icon="bi-clipboard-check">

        @php
        $kriteriaDef = [
            [
                'label' => 'Kelompok telah berdiri dan beraktivitas lebih dari 6 bulan',
                'hint'  => 'dari tanggal berdiri kelompok.',
                'auto'  => true,
            ],
            [
                'label' => 'Pendamping jelas dan terafiliasi pada instansi terpercaya',
                'hint'  => 'Berdasarkan afiliasi pendamping yang diinput di atas.',
                'auto'  => false,
            ],
            [
                'label' => 'Izin akses/perjanjian masih berlaku hingga berakhir masa pinjaman',
                'hint'  => 'Cek dari dokumen izin kelompok yang diupload.',
                'auto'  => false,
            ],
        ];
        @endphp

        <div class="d-flex flex-column gap-3">
        @foreach($kriteriaDef as $i => $kr)
        <div class="card border rounded-3">
            <div class="card-body">
                <div class="d-flex align-items-start gap-3 mb-3">
                    <span class="badge bg-secondary rounded-pill flex-shrink-0 mt-1">{{ $i + 1 }}</span>
                    <div class="flex-grow-1">
                        <p class="mb-1 fw-semibold">{{ $kr['label'] }}</p>
                        <small class="text-muted">{{ $kr['hint'] }}</small>
                        @if($kr['auto'])
                        <span id="kriteria-0-auto" class="badge ms-2" style="display:none;"></span>
                        @endif
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-md-4">
                        <label class="form-label small fw-medium">Status</label>
                        <select name="kriteria[{{ $i }}][status]"
                            id="kriteria-status-{{ $i }}"
                            class="form-select form-select-sm @error('kriteria.' . $i . '.status') is-invalid @enderror"
                            required>
                            <option value="">— Pilih —</option>
                            <option value="valid" {{ old('kriteria.' . $i . '.status') === 'valid' ? 'selected' : '' }}>
                                Valid
                            </option>
                            <option value="tidak" {{ old('kriteria.' . $i . '.status') === 'tidak' ? 'selected' : '' }}>
                                Tidak Valid
                            </option>
                        </select>
                        @error('kriteria.' . $i . '.status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-8">
                        <label class="form-label small fw-medium">Catatan (opsional)</label>
                        <input type="text" name="kriteria[{{ $i }}][catatan]"
                            class="form-control form-control-sm"
                            placeholder="Override / justifikasi jika ada perbedaan"
                            value="{{ old('kriteria.' . $i . '.catatan') }}">
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        </div>

    </x-form.section>

    {{-- ── SEKSI 3: UPLOAD 9 DOKUMEN KELOMPOK ─────────────────────────────── --}}
    <x-form.section title="Dokumen Kelompok" icon="bi-folder2-open">

        <div class="d-flex flex-column gap-3">
        @foreach($jenisDokulList as $jenis => $label)
        @php
            $wajib = in_array($jenis, \App\Models\DokumenKelompok::WAJIB);
        @endphp
        <div class="card border rounded-3">
            <div class="card-body py-3">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <i class="bi bi-file-earmark-text text-muted"></i>
                    <span class="fw-semibold small flex-grow-1">{{ $label }}</span>
                    @if($wajib)
                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle">Wajib</span>
                    @else
                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Opsional</span>
                    @endif
                    @if($jenis === 'survey_harga')
                        <span class="badge bg-info-subtle text-info border border-info-subtle">
                            <i class="bi bi-database-fill me-1"></i>Data Master
                        </span>
                    @endif
                </div>
                <div class="row g-2">
                    <div class="col-md-5">
                        <input type="file"
                            name="dokumen[{{ $jenis }}][file]"
                            class="form-control form-control-sm @error('dokumen.' . $jenis . '.file') is-invalid @enderror"
                            accept=".pdf,.jpg,.jpeg,.png">
                        @error('dokumen.' . $jenis . '.file')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3">
                        <select name="dokumen[{{ $jenis }}][validasi_data]"
                            class="form-select form-select-sm">
                            <option value="">— Validasi —</option>
                            <option value="sesuai" {{ old('dokumen.' . $jenis . '.validasi_data') === 'sesuai' ? 'selected' : '' }}>
                                Sesuai
                            </option>
                            <option value="belum_sesuai" {{ old('dokumen.' . $jenis . '.validasi_data') === 'belum_sesuai' ? 'selected' : '' }}>
                                Belum Sesuai
                            </option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <input type="text"
                            name="dokumen[{{ $jenis }}][catatan]"
                            class="form-control form-control-sm"
                            placeholder="Catatan"
                            value="{{ old('dokumen.' . $jenis . '.catatan') }}">
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        </div>

    </x-form.section>

    {{-- ── ACTION BUTTONS ───────────────────────────────────────────────────── --}}
    <div class="d-flex gap-2 justify-content-end mb-5">
        <a href="{{ route('pengajuan-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>
            <span class="d-none d-md-inline">Simpan &amp; Lanjutkan</span>
            <span class="d-md-none">Simpan</span>
        </button>
    </div>

</form>

@push('scripts')
<script>
const kelompokSel   = document.getElementById('kelompok_id');
const kriteria0Sel  = document.getElementById('kriteria-status-0');
const kriteria0Auto = document.getElementById('kriteria-0-auto');

function onKelompokChange() {
    const opt = kelompokSel.options[kelompokSel.selectedIndex];

    // Auto-isi jumlah anggota
    if (opt.dataset.jumlah) {
        document.getElementById('jumlah_anggota_total').value = opt.dataset.jumlah;
    }

    // Auto-check Kriteria 1: aktif > 6 bulan dari tanggal_berdiri
    const tglBerdiri = opt.dataset.tanggalBerdiri;
    if (!tglBerdiri) {
        kriteria0Auto.style.display = 'none';
        return;
    }

    const berdiri   = new Date(tglBerdiri);
    const now       = new Date();
    const diffMs    = now - berdiri;
    const diffBulan = diffMs / (1000 * 60 * 60 * 24 * 30.44);
    const autoValid = diffBulan >= 6;
    const autoStatus = autoValid ? 'valid' : 'tidak';

    // Set dropdown hanya jika belum ada pilihan dari old() (server-side)
    @if(!old('kriteria.0.status'))
    kriteria0Sel.value = autoStatus;
    @endif

    // Tampilkan badge info hasil auto-deteksi
    kriteria0Auto.style.display = '';
    kriteria0Auto.textContent   = autoValid
        ? 'Data: ' + Math.floor(diffBulan) + ' bulan (≥ 6 bulan)'
        : 'Data: ' + Math.floor(diffBulan) + ' bulan (< 6 bulan)';
    kriteria0Auto.className = 'badge ms-2 ' + (autoValid ? 'bg-success' : 'bg-warning text-dark');
}

kelompokSel.addEventListener('change', onKelompokChange);
// Trigger on page load jika sudah ada nilai terpilih
onKelompokChange();
</script>
@endpush

@endsection