@extends('layouts.app', ['title' => 'Konsultasi - Deteksi Dini TB'])

@section('content')
<section class="consult-hero py-5">
    <div class="container py-3">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <div class="badge-luxury mb-3"><i class="fas fa-stethoscope"></i><span>Konsultasi Gejala</span></div>
                <h1 class="fw-bold mb-3">Jawab gejala sesuai kondisi Anda.</h1>
                <p class="text-white-50 mb-0">Setiap gejala perlu diberi tingkat keyakinan. Sistem kemudian menghitung kemungkinan TB dengan metode Certainty Factor.</p>
            </div>
            <div class="col-lg-4">
                <div class="consult-progress mb-3"><span></span></div>
                <div class="d-flex justify-content-between text-white-50 small">
                    <span>Langkah 1: Gejala</span>
                    <span>Langkah 2: Hasil</span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-soft py-5 min-vh-100">
    <div class="container">
        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
            <i class="fas fa-triangle-exclamation me-2"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        <form action="{{ route('konsultasi.process') }}" method="POST" id="form-konsultasi" data-total-gejala="{{ $symptoms->count() }}">
            @csrf
            <div class="row g-4">
                <div class="col-lg-8">
                    <div class="consult-card p-4">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
                            <div>
                                <h4 class="fw-bold text-primary-custom mb-1">Daftar Gejala Klinis</h4>
                                <p class="text-muted small mb-0">Isi tingkat keyakinan untuk setiap gejala sebelum melihat hasil.</p>
                            </div>
                            <span class="badge badge-soft rounded-pill px-3 py-2">{{ $symptoms->count() }} gejala</span>
                        </div>

                        @foreach($symptoms as $g)
                        @php $oldBobot = old("bobot.$g->id"); @endphp
                        <div class="gejala-item {{ $oldBobot !== null ? ((float) $oldBobot > 0 ? 'answered active' : 'answered') : '' }}" id="gejala-item-{{ $g->id }}">
                            <input class="gejala-checkbox" type="checkbox" name="gejala[]" value="{{ $g->id }}" id="gejala{{ $g->id }}" @checked($oldBobot !== null)>
                            <div class="gejala-toggle mb-0">
                                <span class="toggle-pill" aria-hidden="true"></span>
                                <span class="flex-grow-1">
                                    <span class="d-flex align-items-start gap-2">
                                        <span class="badge symptom-code rounded-pill mt-1">{{ $g->kode }}</span>
                                        <span class="fw-bold symptom-name">{{ $g->nama_gejala }}</span>
                                    </span>
                                    @if(!empty($g->deskripsi_gejala))
                                        <span class="d-block text-muted small mt-1">{{ $g->deskripsi_gejala }}</span>
                                    @endif
                                </span>
                            </div>

                            <div class="mt-4 bobot-group" id="bobot-div-{{ $g->id }}">
                                <p class="small text-muted mb-2"><i class="fas fa-circle-question me-1"></i> Seberapa yakin Anda dengan gejala ini?</p>
                                <div class="certainty-group">
                                    <input type="radio" class="btn-check" name="bobot[{{ $g->id }}]" id="b0_{{ $g->id }}" value="0.0" @checked($oldBobot === '0.0')>
                                    <label class="btn btn-bobot" for="b0_{{ $g->id }}">Tidak Ada<br><span class="small">0.0</span></label>

                                    <input type="radio" class="btn-check" name="bobot[{{ $g->id }}]" id="b1_{{ $g->id }}" value="0.2" @checked($oldBobot === '0.2')>
                                    <label class="btn btn-bobot" for="b1_{{ $g->id }}">Tidak Yakin<br><span class="small">0.2</span></label>

                                    <input type="radio" class="btn-check" name="bobot[{{ $g->id }}]" id="b2_{{ $g->id }}" value="0.4" @checked($oldBobot === '0.4')>
                                    <label class="btn btn-bobot" for="b2_{{ $g->id }}">Mungkin<br><span class="small">0.4</span></label>

                                    <input type="radio" class="btn-check" name="bobot[{{ $g->id }}]" id="b3_{{ $g->id }}" value="0.6" @checked($oldBobot === '0.6')>
                                    <label class="btn btn-bobot" for="b3_{{ $g->id }}">Cukup Yakin<br><span class="small">0.6</span></label>

                                    <input type="radio" class="btn-check" name="bobot[{{ $g->id }}]" id="b4_{{ $g->id }}" value="0.8" @checked($oldBobot === '0.8')>
                                    <label class="btn btn-bobot" for="b4_{{ $g->id }}">Yakin<br><span class="small">0.8</span></label>

                                    <input type="radio" class="btn-check" name="bobot[{{ $g->id }}]" id="b5_{{ $g->id }}" value="1.0" @checked($oldBobot === '1.0')>
                                    <label class="btn btn-bobot" for="b5_{{ $g->id }}">Sangat Yakin<br><span class="small">1.0</span></label>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="col-lg-4">
                    <aside class="consult-card consult-sidebar p-4">
                        <div class="text-center mb-4">
                            <div class="counter-circle mb-3">
                                <span id="gejala-counter">0</span>
                            </div>
                            <h5 class="fw-bold mb-1">Soal Dijawab</h5>
                            <p class="text-muted small mb-0">Semua gejala wajib diberi pilihan.</p>
                        </div>

                        <div class="recommendation-card p-3 mb-4">
                            <div class="d-flex gap-3">
                                <i class="fas fa-shield-heart text-gradient mt-1"></i>
                                <div class="small text-muted">Pilih <strong>Tidak Ada</strong> bila gejala tidak Anda alami. Jawaban itu tetap dihitung sebagai pilihan.</div>
                            </div>
                        </div>

                        <div class="mb-4" id="selected-symptom-list">
                            <div class="text-muted small">Belum ada gejala dijawab.</div>
                        </div>

                        <button type="submit" id="btn-proses" class="btn btn-primary-custom btn-ripple w-100 py-3 fw-bold" disabled>
                            Analisis Sekarang <i class="fas fa-magnifying-glass-chart ms-2"></i>
                        </button>
                    </aside>
                </div>
            </div>
        </form>
    </div>
</section>
@endsection