<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambah Pelaporan IKK</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .header-section {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 2rem 0;
        }
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
        }
        .form-control:focus, .form-select:focus {
            border-color: #2a5298;
            box-shadow: 0 0 0 0.2rem rgba(42, 82, 152, 0.25);
        }
        .readonly-field {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }
        .section-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="mb-2">
                        <i class="fas fa-plus me-3"></i>
                        Tambah Pelaporan IKK
                    </h1>
                    <p class="mb-0 fs-5">Buat laporan capaian indikator kinerja kunci</p>
                </div>
                <div class="col-md-4 text-end">
                    <a href="{{ route('ikk.pelaporan.index') }}" class="btn btn-light">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <form method="POST" action="{{ route('ikk.pelaporan.store') }}" enctype="multipart/form-data">
            @csrf
            
            <!-- Informasi Umum -->
            <div class="section-header">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    A. Informasi Umum
                </h5>
            </div>
            
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="opd" class="form-label fw-semibold">
                                OPD <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('opd') is-invalid @enderror" 
                                    id="opd" name="opd" required>
                                <option value="">Pilih OPD</option>
                                @foreach($opdList as $opdItem)
                                    <option value="{{ $opdItem }}" {{ old('opd') == $opdItem ? 'selected' : '' }}>{{ $opdItem }}</option>
                                @endforeach
                            </select>
                            @error('opd')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="tahun" class="form-label fw-semibold">
                                Tahun Anggaran <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('tahun') is-invalid @enderror" 
                                    id="tahun" name="tahun" required>
                                <option value="">Pilih Tahun</option>
                                @foreach($tahunList as $thn)
                                    <option value="{{ $thn }}" {{ old('tahun', date('Y')) == $thn ? 'selected' : '' }}>{{ $thn }}</option>
                                @endforeach
                            </select>
                            @error('tahun')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pilih Indikator -->
            <div class="section-header">
                <h5 class="mb-0">
                    <i class="fas fa-target me-2"></i>
                    B. Pilih Indikator (Bank Soal SIKK)
                </h5>
            </div>
            
            <div class="card mb-4">
                <div class="card-body">
                    <div class="mb-3">
                        <label for="bank_soal_id" class="form-label fw-semibold">
                            Kode IKK <span class="text-danger">*</span>
                        </label>
                        <select class="form-select @error('bank_soal_id') is-invalid @enderror" 
                                id="bank_soal_id" name="bank_soal_id" required onchange="loadBankSoal()">
                            <option value="">Pilih Kode IKK</option>
                            @foreach($bankSoal as $soal)
                                <option value="{{ $soal['id'] }}" 
                                        data-output="{{ $soal['ikk_output'] }}"
                                        data-outcome="{{ $soal['ikk_outcome'] }}"
                                        data-rumus="{{ $soal['rumus'] }}"
                                        data-satuan="{{ $soal['satuan'] }}"
                                        data-opd="{{ $soal['opd_penanggung_jawab'] }}"
                                        {{ old('bank_soal_id') == $soal['id'] ? 'selected' : '' }}>
                                    {{ $soal['kode_ikk'] }} - {{ $soal['ikk_output'] }}
                                </option>
                            @endforeach
                        </select>
                        @error('bank_soal_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">IKK Output</label>
                            <input type="text" class="form-control readonly-field" id="ikk_output" readonly>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">IKK Outcome</label>
                            <input type="text" class="form-control readonly-field" id="ikk_outcome" readonly>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Rumus Perhitungan</label>
                        <textarea class="form-control readonly-field" id="rumus_perhitungan" rows="2" readonly></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Satuan</label>
                            <input type="text" class="form-control readonly-field" id="satuan" readonly>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">OPD Penanggung Jawab</label>
                            <input type="text" class="form-control readonly-field" id="opd_penanggung_jawab" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Input Pelaporan -->
            <div class="section-header">
                <h5 class="mb-0">
                    <i class="fas fa-edit me-2"></i>
                    C. Input Pelaporan
                </h5>
            </div>
            
            <div class="card mb-4">
                <div class="card-body">
                    <div class="mb-3">
                        <label for="capaian" class="form-label fw-semibold">
                            Capaian Tahun Berjalan <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <input type="number" step="0.01" class="form-control @error('capaian') is-invalid @enderror" 
                                   id="capaian" name="capaian" 
                                   value="{{ old('capaian') }}" 
                                   placeholder="Masukkan nilai capaian" required>
                            <span class="input-group-text" id="satuan_display">%</span>
                        </div>
                        @error('capaian')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="kendala" class="form-label fw-semibold">
                            Kendala / Masalah <span class="text-danger">*</span>
                        </label>
                        <textarea class="form-control @error('kendala') is-invalid @enderror" 
                                  id="kendala" name="kendala" rows="4" 
                                  placeholder="Jelaskan kendala atau masalah yang dihadapi dalam pencapaian indikator..." required>{{ old('kendala') }}</textarea>
                        @error('kendala')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="tindak_lanjut" class="form-label fw-semibold">
                            Upaya / Tindak Lanjut <span class="text-danger">*</span>
                        </label>
                        <textarea class="form-control @error('tindak_lanjut') is-invalid @enderror" 
                                  id="tindak_lanjut" name="tindak_lanjut" rows="4" 
                                  placeholder="Jelaskan upaya atau tindak lanjut untuk meningkatkan capaian..." required>{{ old('tindak_lanjut') }}</textarea>
                        @error('tindak_lanjut')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="file_bukti" class="form-label fw-semibold">
                            Upload Bukti Pendukung
                        </label>
                        <input type="file" class="form-control @error('file_bukti') is-invalid @enderror" 
                               id="file_bukti" name="file_bukti" 
                               accept=".pdf,.jpg,.jpeg,.png">
                        <div class="form-text">
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                Format: PDF, JPG, PNG. Maksimal 5MB
                            </small>
                        </div>
                        @error('file_bukti')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-success btn-lg px-5">
                    <i class="fas fa-save me-2"></i>
                    Simpan Pelaporan
                </button>
                <a href="{{ route('ikk.pelaporan.index') }}" class="btn btn-secondary btn-lg px-5 ms-2">
                    <i class="fas fa-times me-2"></i>
                    Batal
                </a>
            </div>
        </form>
    </div>

    <script>
        function loadBankSoal() {
            const select = document.getElementById('bank_soal_id');
            const selectedOption = select.options[select.selectedIndex];
            
            if (selectedOption.value) {
                document.getElementById('ikk_output').value = selectedOption.dataset.output || '';
                document.getElementById('ikk_outcome').value = selectedOption.dataset.outcome || '';
                document.getElementById('rumus_perhitungan').value = selectedOption.dataset.rumus || '';
                document.getElementById('satuan').value = selectedOption.dataset.satuan || '';
                document.getElementById('opd_penanggung_jawab').value = selectedOption.dataset.opd || '';
                document.getElementById('satuan_display').textContent = selectedOption.dataset.satuan || '%';
            } else {
                document.getElementById('ikk_output').value = '';
                document.getElementById('ikk_outcome').value = '';
                document.getElementById('rumus_perhitungan').value = '';
                document.getElementById('satuan').value = '';
                document.getElementById('opd_penanggung_jawab').value = '';
                document.getElementById('satuan_display').textContent = '%';
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>