@extends('layouts.app')

@section('judul', 'Referensi')
@section('subjudul', 'Data pilihan yang dipakai di seluruh form aplikasi')

@section('aksi-header')
    <button type="button" class="btn btn-primary" id="tombol-tambah"><i class="fas fa-plus mr-1"></i> Tambah {{ \Illuminate\Support\Str::lower($def['judul']) }}</button>
@endsection

@section('konten')
    @php
        $kolomIsian = collect($def['isian'])->reject(fn ($i) => $i['tipe'] === 'textarea');
        $barisLama = old('_baris');
    @endphp

    <div class="row">
        <div class="col-lg-3 mb-3">
            <div class="card mb-0">
                <div class="list-group list-group-flush">
                    @foreach ($daftarJenis as $kunci => $d)
                        <a href="{{ route('referensi.index', $kunci) }}" class="list-group-item list-group-item-action {{ $kunci === $jenis ? 'active' : '' }}">{{ $d['judul'] }}</a>
                    @endforeach
                </div>
            </div>
            <p class="small teks-redup mt-2 px-1"><i class="fas fa-circle-info mr-1"></i> Kode tidak dapat diubah setelah dibuat. Data yang tidak dipakai lagi dinonaktifkan, bukan dihapus, agar data lama tetap utuh.</p>
        </div>

        <div class="col-lg-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">{{ $def['judul'] }}</h3>
                    <span class="small teks-redup">{{ $baris->where('aktif', true)->count() }} aktif dari {{ $baris->count() }}</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                            <tr>
                                <th>Kode</th>
                                <th>Nama</th>
                                @foreach ($kolomIsian as $kolom => $isian)
                                    <th>{{ \Illuminate\Support\Str::before($isian['label'], ' (') }}</th>
                                @endforeach
                                <th>Status</th>
                                <th class="text-right">Aksi</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse ($baris as $b)
                                <tr class="{{ $b->aktif ? '' : 'teks-redup' }}">
                                    <td><code>{{ $b->{$def['kode']} }}</code></td>
                                    <td>
                                        {{ $b->{$def['nama']} }}
                                        @if (isset($def['isian']['keterangan']) && $b->keterangan)<div class="small teks-redup">{{ $b->keterangan }}</div>@endif
                                        @if ($jenis === 'unit' && ($jumlahPemakai[$b->id] ?? 0))<div class="small teks-redup">{{ $jumlahPemakai[$b->id] }} pengguna aktif</div>@endif
                                    </td>
                                    @foreach ($kolomIsian as $kolom => $isian)
                                        <td>{{ $isian['tipe'] === 'select' ? ($opsi[$kolom][$b->$kolom] ?? '—') : $b->$kolom }}</td>
                                    @endforeach
                                    <td>{!! $b->aktif ? '<span class="badge badge-lembut-success">Aktif</span>' : '<span class="badge badge-lembut-secondary">Nonaktif</span>' !!}</td>
                                    <td class="text-right text-nowrap">
                                        <button type="button" class="btn btn-sm btn-outline-primary tombol-ubah" title="Ubah"
                                                data-baris="{{ json_encode(['id' => $b->id, 'kode' => $b->{$def['kode']}, 'nama' => $b->{$def['nama']}] + $b->only(array_keys($def['isian']))) }}"><i class="fas fa-pen"></i></button>
                                        <x-form-aksi :action="route('referensi.aktif', [$jenis, $b->id])" label="" :ikon="$b->aktif ? 'fa-eye-slash' : 'fa-eye'"
                                                     :warna="$b->aktif ? 'outline-secondary' : 'outline-success'" class="btn-sm"
                                                     :judul="($b->aktif ? 'Nonaktifkan ' : 'Aktifkan ').$b->{$def['nama']}.'?'"
                                                     :pesan="$b->aktif ? 'Data tidak muncul lagi di pilihan form. Data lama yang memakainya tidak berubah.' : 'Data muncul kembali di pilihan form.'"
                                                     :tombol-konfirmasi="$b->aktif ? 'Ya, nonaktifkan' : 'Ya, aktifkan'" />
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="{{ 4 + $kolomIsian->count() }}"><x-kosong judul="Belum ada data" ikon="fa-database" /></td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-referensi" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" id="form-referensi" class="modal-content form-validasi"
                  data-aksi-tambah="{{ route('referensi.store', $jenis) }}" data-aksi-ubah="{{ url('referensi/'.$jenis) }}">
                @csrf
                <input type="hidden" name="_method" value="POST" id="metode">
                <input type="hidden" name="_baris" value="{{ $barisLama }}" id="id-baris">
                <div class="modal-header">
                    <h5 class="modal-title" id="judul-modal">Tambah {{ \Illuminate\Support\Str::lower($def['judul']) }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="isian-kode">Kode <span class="wajib">*</span></label>
                        <input type="text" id="isian-kode" name="{{ $def['kode'] }}" maxlength="20" value="{{ old($def['kode']) }}"
                               class="form-control text-uppercase @error($def['kode']) is-invalid @enderror" placeholder="mis. SMA-2">
                        @error($def['kode'])<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <small class="form-text teks-redup">Huruf, angka, titik, garis bawah, atau tanda hubung. Tidak dapat diubah setelah disimpan.</small>
                    </div>
                    <div class="form-group">
                        <label for="isian-nama">Nama <span class="wajib">*</span></label>
                        <input type="text" id="isian-nama" name="{{ $def['nama'] }}" maxlength="100" required value="{{ old($def['nama']) }}"
                               class="form-control @error($def['nama']) is-invalid @enderror">
                        @error($def['nama'])<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    @foreach ($def['isian'] as $kolom => $isian)
                        <div class="form-group">
                            <label for="isian-{{ $kolom }}">{{ $isian['label'] }} @if ($isian['wajib'] ?? false)<span class="wajib">*</span>@endif</label>
                            @if ($isian['tipe'] === 'select')
                                <select id="isian-{{ $kolom }}" name="{{ $kolom }}" class="custom-select isian-tambahan @error($kolom) is-invalid @enderror" @required($isian['wajib'] ?? false)>
                                    <option value="">— {{ ($isian['wajib'] ?? false) ? 'Pilih' : 'Tidak ada' }} —</option>
                                    @foreach ($opsi[$kolom] as $id => $label)
                                        <option value="{{ $id }}" @selected(old($kolom) == $id)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            @elseif ($isian['tipe'] === 'textarea')
                                <textarea id="isian-{{ $kolom }}" name="{{ $kolom }}" rows="2" maxlength="1000" class="form-control isian-tambahan @error($kolom) is-invalid @enderror">{{ old($kolom) }}</textarea>
                            @else
                                <input type="{{ $isian['tipe'] === 'integer' ? 'number' : 'text' }}" id="isian-{{ $kolom }}" name="{{ $kolom }}" value="{{ old($kolom) }}"
                                       min="{{ $isian['min'] ?? 0 }}" max="{{ $isian['maks'] ?? 9999 }}" @required($isian['wajib'] ?? false)
                                       class="form-control isian-tambahan @error($kolom) is-invalid @enderror">
                            @endif
                            @error($kolom)<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    @endforeach
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk mr-1"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script>
$(function () {
    const $form = $('#form-referensi');
    const judul = @json(\Illuminate\Support\Str::lower($def['judul']));

    // baris: null = tambah, objek = ubah. kosongkan=false dipakai setelah galat validasi
    // agar isian lama (old input dari server) tidak tertimpa.
    function siapkan(baris, kosongkan = true) {
        const ubah = !!baris;
        $form.attr('action', ubah ? `${$form.data('aksi-ubah')}/${baris.id}` : $form.data('aksi-tambah'));
        $('#metode').val(ubah ? 'PUT' : 'POST');
        $('#id-baris').val(ubah ? baris.id : '');
        $('#judul-modal').text(ubah ? `Ubah ${judul}` : `Tambah ${judul}`);
        $('#isian-kode').prop('disabled', ubah).prop('required', !ubah);
        if (ubah) $('#isian-kode').val(baris.kode);
        if (kosongkan) {
            $form.find('.is-invalid').removeClass('is-invalid');
            if (!ubah) $('#isian-kode').val('');
            $('#isian-nama').val(ubah ? baris.nama : '');
            $('.isian-tambahan').each(function () { $(this).val(ubah ? (baris[this.name] ?? '') : ''); });
        }
        $('#modal-referensi').modal('show');
    }

    $('#tombol-tambah').on('click', () => siapkan(null));
    $('.tombol-ubah').on('click', function () { siapkan(JSON.parse(this.dataset.baris)); });

    @if ($errors->any())
        const idGagal = $('#id-baris').val();
        const $asal = $('.tombol-ubah').filter((i, el) => idGagal && JSON.parse(el.dataset.baris).id == idGagal);
        siapkan($asal.length ? JSON.parse($asal[0].dataset.baris) : null, false);
    @endif
});
</script>
@endpush