@extends('layouts.app')
@section('landingTitle', 'KlinikSapi.Go | Diagnosa Penyakit')
@section('content')
<section class="bg-white dark:bg-gray-900 pt-20">
  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-4xl lg:text-5xl dark:text-white">Diagnosa Penyakit Sapi</h1>
    <p class="text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">Kami menyediakan catatan lengkap dari diagnosa sebelumnya untuk membantu Anda memantau dan mengelola kesehatan ternak dengan lebih efektif.</p>
  </div>
</section>

<section class="flex px-44 pb-24">
    <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full">
        <form action="{{ route('diagnosa.get') }}" method="post" autocomplete="off">
            @csrf
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-6 text-center">
                            #No
                        </th>
                        {{-- <th scope="col" class="px-6 py-6 text-center">
                            Kode Gejala
                        </th> --}}
                        <th scope="col" class="px-6 py-6 text-center">
                            Nama Gejala
                        </th>
                        <th scope="col" class="px-6 py-6 text-center">
                            Pilih Gejala
                        </th>
                        {{-- <th scope="col" class="px-6 py-6 text-right">
                            Nilai Keyakinan
                        </th> --}}
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rule as $data)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-center">
                        <td class="px-6 py-4 text-center">
                            {{ $numtab++ }}
                        </td>
                        {{-- <td class="px-6 py-4 text-center">
                            <strong class="text-blue-600">{{ $data->gejala->gejalaId }}</strong>
                        </td> --}}
                        <td class="px-6 py-4 text-center">
                            <strong>{{ $data->gejala->gejala }}</strong>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <input id="default-checkbox" type="checkbox" value="{{ $data->gejala->gejalaId }}" name="gejala[]" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
                            {{-- @error('gejala')
                                <div class="text-red-600 text-sm mt-2">{{ $message }}</div>
                            @enderror --}}
                        </td>
                        {{-- <td class="px-6 py-4 text-center">
                            <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 px-3 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="nilaiKeyakinan[]">
                                <option class="text-center" value="">---</option>
                                @foreach ($bobot as $item)
                                    <option value="{{ $item->nilai }}">{{ $item->bobot }} ({{ $item->nilai }})</option>
                                @endforeach
                            </select>
                            @error('nilaiKeyakinan') <!-- Menampilkan error jika ada -->
                                <div class="text-red-600 text-sm">{{ $message }}</div>
                            @enderror
                        </td> --}}
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center px-6 py-4">
                            <span class="text-xl text-red-500"> ! - belum ada data gejala - ! </span>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6" class="text-right px-6 py-10">
                            <button type="submit" class="text-white w-full bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Lanjutkan Diagnosa</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>
</section>
@if ($errors->any())
    <div id="popup-modal-diagnosa" tabindex="-1" class="fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full flex">
        <div class="relative p-4 w-full max-w-md max-h-full">
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" onclick="closeModal()">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
                <div class="p-4 md:p-5 text-center">
                    <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                    </svg>
                    <h3 class="text-lg font-normal text-gray-500 dark:text-gray-400">Terdapat Kesalahan Input</h3>
                    @foreach ($errors->all() as $error)
                        <strong class="text-red-600">{{ $error }}</strong>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <script>
        function closeModal() {
            document.getElementById('popup-modal-diagnosa').classList.add('hidden');
        }
        document.getElementById('popup-modal-diagnosa').classList.remove('hidden');
    </script>
@endif
@endsection
@push('addScripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function () {
                const select = this.closest('tr').querySelector('select');
                if (this.checked) {
                    select.disabled = false;
                    select.classList.remove('bg-gray-50');
                } else {
                    select.disabled = true;
                    select.classList.add('bg-gray-50');
                    select.value = "";
                }
            });

            const select = checkbox.closest('tr').querySelector('select');
            select.disabled = !checkbox.checked;
            if (!checkbox.checked) {
                select.classList.add('bg-gray-50');
            }
        });
    });
</script>
@endpush