@extends('layouts.app', ['title' => 'Basis Pengetahuan - TB Expert'])

@section('page_title', 'Basis Pengetahuan')

@section('content')
<section class="admin-page">
    <div class="admin-page-header">
        <div>
            <h2>Basis Pengetahuan</h2>
            <p>Kelola nilai MB, MD, dan CF pakar untuk setiap relasi penyakit dan gejala.</p>
        </div>
    </div>

    <div class="admin-panel mb-4">
        <div class="panel-header">
            <h3 class="panel-title">Filter Data</h3>
            <span class="admin-badge accent">CF = MB - MD</span>
        </div>
        <div class="panel-body">
            <form action="{{ route('admin.knowledge_base') }}" method="GET" class="row g-3 align-items-end">
                <div class="col-md-8 col-lg-5">
                    <label for="filter-penyakit" class="form-label">Filter Penyakit</label>
                    <select id="filter-penyakit" name="penyakit" class="form-select" onchange="this.form.submit()">
                        <option value="">Semua Penyakit</option>
                        @foreach($diseases as $p)
                        <option value="{{ $p->id }}" {{ $filter_id == $p->id ? 'selected' : '' }}>{{ $p->kode }} - {{ $p->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-auto">
                    <a href="{{ route('admin.knowledge_base') }}" class="btn btn-admin-outline">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="admin-panel">
        <div class="panel-header">
            <h3 class="panel-title">Nilai CF Pakar</h3>
            <span class="admin-badge blue">{{ $rules->count() }} aturan</span>
        </div>
        <div class="table-responsive p-3">
            <table class="table-admin" id="cfTable">
                <thead>
                    <tr>
                        <th>Penyakit</th>
                        <th>Gejala</th>
                        <th class="text-center" width="120">MB</th>
                        <th class="text-center" width="120">MD</th>
                        <th class="text-center" width="120">CF Pakar</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($rules as $r)
                    <tr data-id="{{ $r->id }}">
                        <td class="fw-bold">
                            <span class="admin-badge accent">{{ $r->disease->kode }}</span>
                            <span class="ms-2">{{ $r->disease->nama }}</span>
                        </td>
                        <td>
                            <span class="admin-badge blue me-2">{{ $r->symptom->kode }}</span>
                            <span class="small">{{ $r->symptom->nama_gejala }}</span>
                        </td>
                        <td class="text-center">
                            <div class="editable-cell" onclick="makeEditable(this)">{{ $r->mb }}</div>
                            <input type="number" step="0.01" min="0" max="1" class="form-control form-control-sm d-none edit-input mb-input" value="{{ $r->mb }}" onblur="saveData(this)" onkeypress="handleEnter(event, this)">
                        </td>
                        <td class="text-center">
                            <div class="editable-cell" onclick="makeEditable(this)">{{ $r->md }}</div>
                            <input type="number" step="0.01" min="0" max="1" class="form-control form-control-sm d-none edit-input md-input" value="{{ $r->md }}" onblur="saveData(this)" onkeypress="handleEnter(event, this)">
                        </td>
                        <td class="text-center fw-bold cf-value" style="font-family:'JetBrains Mono',monospace;color:var(--admin-accent);">
                            {{ $r->cf_pakar }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="alert-admin warning m-3 mt-0">
            <i class="fas fa-circle-info"></i>
            <span>Klik nilai MB atau MD untuk mengedit inline. Nilai harus 0 sampai 1 dan MB + MD tidak boleh lebih dari 1.</span>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
function makeEditable(el) {
    const td = el.parentNode;
    const input = td.querySelector('.edit-input');
    el.classList.add('d-none');
    input.classList.remove('d-none');
    input.focus();
    input.select();
}

function handleEnter(e, input) {
    if (e.key === 'Enter') input.blur();
}

function saveData(input) {
    const tr = input.closest('tr');
    const id = tr.getAttribute('data-id');
    const mbInput = tr.querySelector('.mb-input');
    const mdInput = tr.querySelector('.md-input');

    let mb = parseFloat(mbInput.value);
    let md = parseFloat(mdInput.value);

    if (isNaN(mb)) mb = 0;
    if (isNaN(md)) md = 0;

    if (mb < 0 || mb > 1 || md < 0 || md > 1 || (mb + md > 1)) {
        Swal.fire('Error!', 'Nilai harus antara 0 dan 1, dan MB + MD <= 1', 'error');
        mbInput.value = mbInput.previousElementSibling.textContent;
        mdInput.value = mdInput.previousElementSibling.textContent;
        input.classList.add('d-none');
        input.previousElementSibling.classList.remove('d-none');
        return;
    }

    const formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('id', id);
    formData.append('mb', mb);
    formData.append('md', md);

    fetch('{{ route('admin.update_rule') }}', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if(data.success) {
            mbInput.previousElementSibling.textContent = mb.toFixed(2);
            mdInput.previousElementSibling.textContent = md.toFixed(2);
            tr.querySelector('.cf-value').textContent = Number(data.cf).toFixed(2);
        } else {
            Swal.fire('Error!', data.message, 'error');
            mbInput.value = mbInput.previousElementSibling.textContent;
            mdInput.value = mdInput.previousElementSibling.textContent;
        }
    });

    input.classList.add('d-none');
    input.previousElementSibling.classList.remove('d-none');
}
</script>
@endsection