@extends('layouts.app')

@section('title', 'Tambah Bank Soal IKK')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1"><i class="bi bi-plus-circle-fill me-2"></i>Tambah Bank Soal IKK</h3>
                    <p class="text-muted mb-0">Tambahkan indikator kinerja kunci baru</p>
                </div>
                <a href="{{ route('admin.ikk.bank-soal.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </a>
            </div>
        </div>
    </div>

    <div class="card card-gov shadow-sm">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Form Bank Soal</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.ikk.bank-soal.store') }}" method="POST">
                @csrf

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="kode_ikk" class="form-label">Kode IKK <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('kode_ikk') is-invalid @enderror"
                               id="kode_ikk" name="kode_ikk" value="{{ old('kode_ikk') }}"
                               placeholder="Contoh: 1.a.1" required>
                        @error('kode_ikk')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="urusan" class="form-label">Urusan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('urusan') is-invalid @enderror"
                               id="urusan" name="urusan" value="{{ old('urusan') }}"
                               placeholder="Contoh: Pendidikan" required>
                        @error('urusan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="bidang" class="form-label">Bidang <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('bidang') is-invalid @enderror"
                               id="bidang" name="bidang" value="{{ old('bidang') }}"
                               placeholder="Contoh: Pendidikan Dasar" required>
                        @error('bidang')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="opd_penanggung_jawab" class="form-label">OPD Penanggung Jawab <span class="text-danger">*</span></label>
                        <select class="form-select @error('opd_penanggung_jawab') is-invalid @enderror"
                                id="opd_penanggung_jawab" name="opd_penanggung_jawab" required>
                            <option value="">-- Pilih OPD --</option>
                            @foreach($opdList as $opd)
                                <option value="{{ $opd->name }}" {{ old('opd_penanggung_jawab') == $opd->name ? 'selected' : '' }}>
                                    {{ $opd->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('opd_penanggung_jawab')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-3">
                        <label for="ikk_output" class="form-label">IKK Output <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('ikk_output') is-invalid @enderror"
                               id="ikk_output" name="ikk_output" value="{{ old('ikk_output') }}" required>
                        @error('ikk_output')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-3">
                        <label for="ikk_outcome" class="form-label">IKK Outcome <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('ikk_outcome') is-invalid @enderror"
                                  id="ikk_outcome" name="ikk_outcome" rows="2" required>{{ old('ikk_outcome') }}</textarea>
                        @error('ikk_outcome')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-3">
                        <label for="rumus_perhitungan" class="form-label">Rumus Perhitungan <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('rumus_perhitungan') is-invalid @enderror"
                                  id="rumus_perhitungan" name="rumus_perhitungan" rows="2" required>{{ old('rumus_perhitungan') }}</textarea>
                        @error('rumus_perhitungan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="satuan" class="form-label">Satuan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('satuan') is-invalid @enderror"
                               id="satuan" name="satuan" value="{{ old('satuan') }}"
                               placeholder="Contoh: Persen (%)" required>
                        @error('satuan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="tahun_mulai" class="form-label">Tahun Mulai <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('tahun_mulai') is-invalid @enderror"
                               id="tahun_mulai" name="tahun_mulai"
                               value="{{ old('tahun_mulai', date('Y')) }}"
                               min="2020" required>
                        @error('tahun_mulai')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select @error('status') is-invalid @enderror"
                                id="status" name="status" required>
                            <option value="Aktif" {{ old('status') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                            <option value="Tidak Aktif" {{ old('status') == 'Tidak Aktif' ? 'selected' : '' }}>Tidak Aktif</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-3">
                        <label for="sumber_data" class="form-label">Sumber Data <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('sumber_data') is-invalid @enderror"
                               id="sumber_data" name="sumber_data" value="{{ old('sumber_data') }}" required>
                        @error('sumber_data')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <hr class="my-4">

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <h5 class="mb-3"><i class="bi bi-input-cursor-text me-2"></i>Konfigurasi Input Jawaban</h5>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="tipe_input" class="form-label">Tipe Input <span class="text-danger">*</span></label>
                        <select class="form-select @error('tipe_input') is-invalid @enderror"
                                id="tipe_input" name="tipe_input" required>
                            <option value="">Pilih Tipe Input</option>
                            <option value="text" {{ old('tipe_input') == 'text' ? 'selected' : '' }}>Text (Input singkat)</option>
                            <option value="textarea" {{ old('tipe_input') == 'textarea' ? 'selected' : '' }}>Textarea (Input panjang)</option>
                            <option value="radio" {{ old('tipe_input') == 'radio' ? 'selected' : '' }}>Radio Button (Pilihan tunggal)</option>
                            <option value="select" {{ old('tipe_input') == 'select' ? 'selected' : '' }}>Select Dropdown (Pilihan dari list)</option>
                        </select>
                        @error('tipe_input')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Pilih jenis input yang akan digunakan untuk menjawab</small>
                    </div>

                    <div class="col-md-6 mb-3" id="pilihanJawabanWrapper" style="display: none;">
                        <label for="pilihan_jawaban" class="form-label">Pilihan Jawaban <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('pilihan_jawaban') is-invalid @enderror"
                                  id="pilihan_jawaban" name="pilihan_jawaban" rows="5"
                                  placeholder="Masukkan pilihan jawaban (satu per baris)&#10;Contoh:&#10;Ya&#10;Tidak&#10;Tidak Tahu">{{ old('pilihan_jawaban') }}</textarea>
                        @error('pilihan_jawaban')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Masukkan setiap pilihan pada baris baru</small>
                    </div>
                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.ikk.bank-soal.index') }}" class="btn btn-secondary">
                        <i class="bi bi-x-circle me-1"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-gov-primary">
                        <i class="bi bi-save me-1"></i> Simpan Bank Soal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('tipe_input').addEventListener('change', function() {
    const pilihanWrapper = document.getElementById('pilihanJawabanWrapper');
    const pilihanInput = document.getElementById('pilihan_jawaban');

    if (this.value === 'radio' || this.value === 'select') {
        pilihanWrapper.style.display = 'block';
        pilihanInput.required = true;
    } else {
        pilihanWrapper.style.display = 'none';
        pilihanInput.required = false;
        pilihanInput.value = '';
    }
});

// Trigger on load if old value exists
document.addEventListener('DOMContentLoaded', function() {
    const tipeInput = document.getElementById('tipe_input');
    if (tipeInput.value === 'radio' || tipeInput.value === 'select') {
        document.getElementById('pilihanJawabanWrapper').style.display = 'block';
        document.getElementById('pilihan_jawaban').required = true;
    }
});
</script>
@endpush
@endsection
