@extends('admin.layouts.app')
@section('title', 'Edit Kriteria')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4><i class="bi bi-pencil-square me-2"></i>Edit Kriteria</h4>
</div>

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Terjadi kesalahan:</strong>
    <ul class="mb-0 mt-2">
        @foreach($errors->all() as $e)
        <li>{{ $e }}</li>
        @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card">
    <div class="card-header">
        <i class="bi bi-pencil-square me-2"></i>Edit Kriteria — {{ strtoupper($kriteria->kode) }}
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.kriteria.update', $kriteria) }}">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label class="form-label fw-semibold">Kode</label>
                <input type="text" class="form-control bg-light" value="{{ strtoupper($kriteria->kode) }}" disabled>
                <small class="text-muted">Kode tidak dapat diubah</small>
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">Nama Kriteria <span class="text-danger">*</span></label>
                <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama', $kriteria->nama) }}" required>
                @error('nama')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label fw-semibold">Jenis Atribut <span class="text-danger">*</span></label>
                <select name="jenis" id="jenis" class="form-select @error('jenis') is-invalid @enderror" required>
                    <option value="benefit" {{ old('jenis', $kriteria->jenis) === 'benefit' ? 'selected' : '' }}>
                        Benefit (semakin tinggi makin baik)
                    </option>
                    <option value="cost" {{ old('jenis', $kriteria->jenis) === 'cost' ? 'selected' : '' }}>
                        Cost (semakin rendah makin baik)
                    </option>
                </select>
                @error('jenis')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold">Bobot <span class="text-danger">*</span></label>
                <input type="number" name="bobot" class="form-control @error('bobot') is-invalid @enderror" step="0.01" min="0" max="1" value="{{ old('bobot', $kriteria->bobot) }}" required>
                <small class="text-muted">
                    Nilai antara 0.00 - 1.00 (contoh: 0.25 untuk 25%). Total semua bobot harus = 1.00
                </small>
                @error('bobot')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            @php
                $subs = $kriteria->subKriteria->keyBy('nilai');
            @endphp
            <!-- Section: Edit Sub-Kriteria (Nilai 1-5) -->
            <div class="card border-primary-subtle mb-4" style="background: rgba(13, 110, 253, 0.02);">
                <div class="card-body">
                    <h6 class="card-title fw-bold text-primary mb-3"><i class="bi bi-list-stars me-1"></i>Definisikan Sub-Kriteria (Skala Nilai 1 s.d. 5)</h6>
                    
                    <!-- Panduan Pengisian Berdasarkan Jenis Kriteria -->
                    <div class="alert alert-info mb-3 py-3" id="panduan-subkriteria">
                        <span id="panduan-text">Pilih <strong>Jenis Atribut</strong> di atas terlebih dahulu untuk melihat panduan skala prioritas.</span>
                    </div>

                    <p class="text-muted small">Tuliskan keterangan detail untuk masing-masing opsi pilihan nilai 1 sampai 5 agar mempermudah pengisian nilai kelak.</p>
                    
                    <div class="row g-3">
                        @for($i = 1; $i <= 5; $i++)
                        @php
                            $subKeterangan = isset($subs[$i]) ? $subs[$i]->keterangan : '';
                        @endphp
                        <div class="col-md-12">
                            <div class="input-group">
                                <span class="input-group-text bg-{{ $i == 1 ? 'danger' : ($i == 2 ? 'warning' : ($i == 3 ? 'info' : ($i == 4 ? 'primary' : 'success'))) }} text-{{ $i == 2 ? 'dark' : 'white' }} fw-bold" style="width: 45px;">{{ $i }}</span>
                                <input type="text" name="sub_keterangan[{{ $i }}]" class="form-control" placeholder="Keterangan untuk nilai {{ $i }}" value="{{ old('sub_keterangan.'.$i, $subKeterangan) }}" required>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-check-circle me-1"></i>Update
                </button>
                <a href="{{ route('admin.kriteria.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Kembali
                </a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Panduan Benefit/Cost untuk Sub-Kriteria
    const jenisSelect = document.getElementById('jenis');
    const panduanEl = document.getElementById('panduan-subkriteria');
    const panduanText = document.getElementById('panduan-text');

    function updatePanduan() {
        const val = jenisSelect.value;
        if (val === 'benefit') {
            panduanEl.className = 'alert alert-primary mb-3 py-3';
            panduanText.innerHTML = '<i class="bi bi-info-circle-fill me-2"></i>Kriteria <strong>Benefit (Semakin Besar Nilai = Semakin Prioritas/Baik)</strong>:<br>' +
                '• <strong>Nilai 5</strong> = Kondisi terbaik / prioritas tertinggi (contoh: Tanggungan > 4 orang).<br>' +
                '• <strong>Nilai 1</strong> = Kondisi terkecil / prioritas terendah (contoh: Tanggungan 1 orang).';
        } else if (val === 'cost') {
            panduanEl.className = 'alert alert-warning mb-3 py-3 text-dark';
            panduanText.innerHTML = '<i class="bi bi-info-circle-fill me-2"></i>Kriteria <strong>Cost (Semakin Kecil Nilai = Semakin Prioritas/Baik)</strong>:<br>' +
                '• <strong>Nilai 5</strong> = Kondisi terkecil / prioritas tertinggi (contoh: Belum pernah menerima bantuan / Pendapatan terendah).<br>' +
                '• <strong>Nilai 1</strong> = Kondisi terbesar / prioritas terendah (contoh: Aktif menerima banyak jenis bantuan / Pendapatan tertinggi).';
        } else {
            panduanEl.className = 'alert alert-info mb-3 py-3';
            panduanText.innerHTML = 'Pilih <strong>Jenis Atribut</strong> di atas terlebih dahulu untuk melihat panduan skala prioritas.';
        }
    }

    if (jenisSelect) {
        jenisSelect.addEventListener('change', updatePanduan);
        updatePanduan();
    }
});
</script>
@endpush
@endsection