@extends('layouts.user')

@section('title', 'Diagnosa')

@section('content')

<div class="card shadow-sm border-0">
    <div class="card-body p-4">

        <!-- HEADER -->
        <div class="mb-4">
            <h4 class="fw-bold text-primary mb-1">
                Diagnosa Penyakit
            </h4>

            <p class="text-muted mb-0">
                Pilih gejala yang Anda alami beserta tingkat keyakinannya.
            </p>
        </div>

        <!-- ALERT -->
        <div class="alert alert-info border-0 rounded-4">
            <h6 class="fw-bold mb-2">
                <i class="fa fa-circle-info me-2"></i>
                Perhatian
            </h6>

            <p class="mb-0">
                Silakan pilih gejala sesuai kondisi yang Anda alami,
                kemudian tentukan tingkat keyakinan Anda terhadap
                gejala tersebut.
            </p>
        </div>

        <!-- ERROR -->
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <!-- FORM -->
        <form action="{{ route('diagnosa.proses') }}" method="POST">
            @csrf

            <div class="row">

                @foreach($gejalas as $g)

                <div class="col-md-6 mb-4">

                    <div class="border rounded-4 p-3 h-100 bg-light">

                        <!-- NAMA GEJALA -->
                        <label class="fw-semibold mb-2 d-block">
                            {{ $g->nama }}
                        </label>

                        <!-- SELECT -->
                        <select
                            name="gejala[{{ $g->id }}]"
                            class="form-select">

                            <option value="">
                                -- Pilih Tingkat Keyakinan --
                            </option>

                            <option value="0">
                                Tidak
                            </option>

                            <option value="0.2">
                                Tidak Yakin
                            </option>

                            <option value="0.4">
                                Sedikit Yakin
                            </option>

                            <option value="0.6">
                                Cukup Yakin
                            </option>

                            <option value="0.8">
                                Yakin
                            </option>

                            <option value="1">
                                Sangat Yakin
                            </option>

                        </select>

                    </div>

                </div>

                @endforeach

            </div>

            <!-- BUTTON -->
            <div class="d-grid mt-3">

                <button class="btn btn-primary btn-lg rounded-3">


                    Proses Diagnosa

                </button>

            </div>

        </form>

    </div>
</div>

@endsection