{{-- resources/views/admin/rule/form.blade.php --}}
@extends('admin.layouts.app')
@section('title', isset($rule) ? 'Edit Rule' : 'Tambah Rule')
@section('content')
@php $isEdit = isset($rule); @endphp

<div class="page-header">
  <div class="page-header-left">
    <div class="breadcrumb">Admin / <a href="{{ route('admin.rule.index') }}">Rule CF</a> / {{ $isEdit ? 'Edit' : 'Tambah' }}</div>
    <h1>{{ $isEdit ? 'Edit Rule: '.$rule->kode_rule : 'Tambah Rule Baru' }}</h1>
    <p>Tentukan relasi penyakit–gejala dan nilai keyakinan pakar.</p>
  </div>
  <a href="{{ route('admin.rule.index') }}" class="btn">← Kembali</a>
</div>

<div style="max-width:620px;">
  <div class="card">
    <div class="card-header"><div class="card-title">Form Rule CF</div></div>
    <div class="card-body">
      <form method="POST" action="{{ $isEdit ? route('admin.rule.update', $rule->id) : route('admin.rule.store') }}">
        @csrf
        @if($isEdit) @method('PUT') @endif

        <div class="form-group">
          <label class="form-label">Kode Rule</label>
          <input type="text" name="kode_rule" value="{{ old('kode_rule', $rule->kode_rule ?? '') }}" placeholder="Kosongkan untuk auto-generate" maxlength="10" {{ $isEdit ? 'readonly style=background:#f8f9fa' : '' }}>
          <div class="form-hint">Contoh: R061. Biarkan kosong untuk generate otomatis.</div>
        </div>

        <div class="form-group">
          <label class="form-label">Penyakit / Hama *</label>
          <select name="id_penyakit">
            <option value="">— Pilih Penyakit —</option>
            @foreach($penyakit as $p)
              <option value="{{ $p->id }}" {{ old('id_penyakit', $rule->id_penyakit ?? '') == $p->id ? 'selected' : '' }}>
                {{ $p->kode }} — {{ $p->nama }} ({{ $p->jenis }})
              </option>
            @endforeach
          </select>
          @error('id_penyakit') <div class="form-error">{{ $message }}</div> @enderror
        </div>

        <div class="form-group">
          <label class="form-label">Gejala *</label>
          <select name="id_gejala">
            <option value="">— Pilih Gejala —</option>
            @foreach($gejala as $g)
              <option value="{{ $g->id }}" {{ old('id_gejala', $rule->id_gejala ?? '') == $g->id ? 'selected' : '' }}>
                {{ $g->kode }} — {{ $g->nama }}
              </option>
            @endforeach
          </select>
          @error('id_gejala') <div class="form-error">{{ $message }}</div> @enderror
        </div>

        {{-- MB dan MD --}}
        <div class="form-row-2">
          <div class="form-group">
            <label class="form-label">Nilai MB (Measure of Belief) *</label>
            <input type="number" name="nilai_mb" id="nilaiMB"
              value="{{ old('nilai_mb', $rule->nilai_mb ?? '0.5') }}"
              min="0" max="1" step="0.1"
              oninput="hitungOtomatis()"
              placeholder="0.0 – 1.0">
            <div class="form-hint">Tingkat keyakinan pakar (0–1).</div>
            @error('nilai_mb') <div class="form-error">{{ $message }}</div> @enderror
          </div>
          <div class="form-group">
            <label class="form-label">Nilai MD (Measure of Disbelief) *</label>
            <input type="number" name="nilai_md" id="nilaiMD"
              value="{{ old('nilai_md', $rule->nilai_md ?? '0.1') }}"
              min="0" max="1" step="0.1"
              oninput="hitungOtomatis()"
              placeholder="0.0 – 1.0">
            <div class="form-hint">Tingkat ketidakyakinan pakar (0–1).</div>
            @error('nilai_md') <div class="form-error">{{ $message }}</div> @enderror
          </div>
        </div>

        {{-- Nilai CF dan Nilai Pakar (otomatis) --}}
        <div class="form-row-2">
          <div class="form-group">
            <label class="form-label">Nilai CF (otomatis)</label>
            <input type="text" name="nilai_cf" id="nilaiCF"
              value="{{ old('nilai_cf', $rule->nilai_cf ?? '0.4') }}"
              readonly style="background:#f8f9fa; font-weight:700; font-size:1.1rem; color:var(--red); text-align:center;">
            <div class="form-hint">CF = MB − MD (otomatis).</div>
          </div>
          <div class="form-group">
            <label class="form-label">Nilai Pakar (otomatis)</label>
            <input type="text" name="nilai_pakar" id="nilaiPakar"
              value="{{ old('nilai_pakar', $rule->nilai_pakar ?? '3') }}"
              readonly style="background:#f8f9fa; font-weight:700; font-size:1.1rem; color:var(--red); text-align:center;">
            <div class="form-hint">Skala 1–5 dari nilai CF.</div>
          </div>
        </div>

        {{-- Panduan --}}
        <div style="background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:0.85rem 1rem; margin-bottom:1rem;">
          <div style="font-size:0.75rem; font-weight:600; margin-bottom:8px;">Panduan Nilai CF → Nilai Pakar:</div>
          <div style="display:grid; grid-template-columns:repeat(5,1fr); gap:6px; text-align:center;">
            <div><div style="font-family:monospace; font-weight:700; color:var(--red); font-size:0.85rem;">≤0.2 → 1</div><div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">Tidak Yakin</div></div>
            <div><div style="font-family:monospace; font-weight:700; color:var(--red); font-size:0.85rem;">≤0.4 → 2</div><div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">Mungkin</div></div>
            <div><div style="font-family:monospace; font-weight:700; color:var(--red); font-size:0.85rem;">≤0.6 → 3</div><div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">Cukup Yakin</div></div>
            <div><div style="font-family:monospace; font-weight:700; color:var(--red); font-size:0.85rem;">≤0.8 → 4</div><div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">Yakin</div></div>
            <div><div style="font-family:monospace; font-weight:700; color:var(--red); font-size:0.85rem;">>0.8 → 5</div><div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">Sangat Yakin</div></div>
          </div>
        </div>

        <div style="display:flex; gap:10px; justify-content:flex-end;">
          <a href="{{ route('admin.rule.index') }}" class="btn">Batal</a>
          <button type="submit" class="btn btn-primary">{{ $isEdit ? 'Simpan Perubahan' : 'Simpan Rule' }}</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
function hitungOtomatis() {
    const mb = parseFloat(document.getElementById('nilaiMB').value) || 0;
    const md = parseFloat(document.getElementById('nilaiMD').value) || 0;

    // Hitung CF = MB - MD
    let cf = mb - md;
    cf = Math.round(cf * 10000) / 10000; // bulatkan 4 desimal

    document.getElementById('nilaiCF').value = cf.toFixed(4);

    // Tentukan nilai pakar dari CF
    let pakar;
    if (cf <= 0.2)      pakar = 1;
    else if (cf <= 0.4) pakar = 2;
    else if (cf <= 0.6) pakar = 3;
    else if (cf <= 0.8) pakar = 4;
    else                pakar = 5;

    document.getElementById('nilaiPakar').value = pakar;
}

// Jalankan saat halaman load
hitungOtomatis();
</script>
@endpush
@endsection