@extends('layout.app')

@section('content')
    <div class="container">
        <div class="page-inner">
            <div class="page-header">
                <h3 class="fw-bold mb-3">Data Pengetahuan</h3>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#addModal"
                                    class="btn btn-primary btn-icon-split mb-3">
                                    <span class="icon text-white-50"><i class="fas fa-plus"></i></span>
                                    <span class="text">Tambah Data</span>
                                </a>
                                <table id="basic-datatables" class="display table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th style="width: 5%;" class="text-center">No</th>
                                            <th style="width: 5%;"class="text-center">Kode Basis</th>
                                            <th style="width: 25%;">Penyakit</th>
                                            <th style="width: 25%;">Gejala</th>
                                            <th style="width: 5%;"class="text-center">MB</th>
                                            <th style="width: 5%;" class="text-center">MD</th>
                                            <th style="width: 25%;" class="text-center">Aksi</th>
                                        </tr>

                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th style="width: 5%;" class="text-center">No</th>
                                            <th style="width: 5%;" class="text-center">Kode Basis</th>
                                            <th style="width: 25%;">Penyakit</th>
                                            <th style="width: 25%;">Gejala</th>
                                            <th style="width: 5%;" class="text-center">MB</th>
                                            <th style="width: 5%;" class="text-center">MD</th>
                                            <th style="width: 25%;" class="text-center">Aksi</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        @foreach ($rules as $item)
                                            <tr>
                                                <td class="text-center">{{ $loop->iteration }}</td>
                                                <td class="text-center">{{ $item->kode_basis }}</td>
                                                <td>{{ $item->penyakit->nama_penyakit }}</td>
                                                <td>{{ $item->gejala->gejala }}</td>
                                                <td class="text-center">{{ $item->mb }}</td>
                                                <td class="text-center">{{ $item->md }}</td>
                                                <td class="text-center">
                                                    <a href="#" data-bs-toggle="modal" data-bs-target="#updateModal"
                                                        class="btn btn-warning mb-3"
                                                        onclick="updateData({{ $item }})">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <a class="btn btn-danger mb-3" href="#" data-bs-toggle="modal"
                                                        data-bs-target="#deleteModal"
                                                        onclick="deleteData({{ $item->id }})">
                                                        <i class="fas fa-trash"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" id="customModalDialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">Tambah Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('rule.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group mb-1">
                            <label for="kode_penyakit" style="font-weight: bold">Penyakit</label>
                            <select name="kode_penyakit" id="kode_penyakit" class="form-control" required>
                                <option value="">Pilih Penyakit</option>
                                @foreach ($penyakits as $penyakit)
                                    <option value="{{ $penyakit->kode_penyakit }}">{{ $penyakit->nama_penyakit }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-1">
                            <label for="kode_gejala" style="font-weight: bold">Gejala</label>
                            <select name="kode_gejala" id="kode_gejala" class="form-control" required>
                                <option value="">Pilih Gejala</option>
                                @foreach ($gejalas as $gejala)
                                    <option value="{{ $gejala->kode_gejala }}">{{ $gejala->gejala }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-1">
                            <label for="mb" style="font-weight: bold">Nilai MB</label>
                            <select class="form-select" id="mb" name="mb">
                                <option value="0.00">0</option>
                                <option value="0.20">0.2</option>
                                <option value="0.40">0.4</option>
                                <option value="0.60">0.6</option>
                                <option value="0.80">0.8</option>
                                <option value="1.00">1</option>
                            </select>
                        </div>

                        <div class="form-group mb-1">
                            <label for="md" style="font-weight: bold">Nilai MD</label>
                            <select class="form-select" id="md" name="md">
                                <option value="0.00">0</option>
                                <option value="0.20">0.2</option>
                                <option value="0.40">0.4</option>
                                <option value="0.60">0.6</option>
                                <option value="0.80">0.8</option>
                                <option value="1.00">1</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalLabel">Update Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('rule.update', ':id') }}" method="POST" id="updateForm">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="updateKodePenyakit" class="form-label" style="font-weight: bold">Penyakit</label>
                            <select name="kode_penyakit" id="updateKodePenyakit" class="form-control" required>
                                <option value="">Pilih Penyakit</option>
                                @foreach ($penyakits as $penyakit)
                                    <option value="{{ $penyakit->kode_penyakit }}">{{ $penyakit->nama_penyakit }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="updateKodeGejala" class="form-label" style="font-weight: bold">Gejala</label>
                            <select name="kode_gejala" id="updateKodeGejala" class="form-control" required>
                                <option value="">Pilih Gejala</option>
                                @foreach ($gejalas as $gejala)
                                    <option value="{{ $gejala->kode_gejala }}">{{ $gejala->gejala }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="updateMb" class="form-label" style="font-weight: bold">Nilai MB</label>
                            <select name="mb" id="updateMb" class="form-select">
                                <option value="0.00">0</option>
                                <option value="0.20">0.2</option>
                                <option value="0.40">0.4</option>
                                <option value="0.60">0.6</option>
                                <option value="0.80">0.8</option>
                                <option value="1.00">1</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="updateMd" class="form-label" style="font-weight: bold">Nilai MD</label>
                            <select name="md" id="updateMd" class="form-select">
                                <option value="0.00">0</option>
                                <option value="0.20">0.2</option>
                                <option value="0.40">0.4</option>
                                <option value="0.60">0.6</option>
                                <option value="0.80">0.8</option>
                                <option value="1.00">1</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kembali</button>
                    <button type="submit" class="btn btn-primary" form="updateForm">Edit</button>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Hapus Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Apakah Anda yakin ingin menghapus data rule ini?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <form id="deleteForm" action="" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Hapus</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <style>
        #customModalDialog {
            max-width: 45%;
        }

        .modal-body .form-group {
            margin-bottom: 5px;
        }
    </style>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("#basic-datatables").DataTable({});
        });

        $(document).ready(function() {
            $('#addModal').on('shown.bs.modal', function() {
                $('#kode_penyakit, #kode_gejala').select2({
                    dropdownParent: $('#addModal'),
                    width: '100%',
                });
            });
        });

        function updateData(data) {
            const form = document.getElementById('updateForm');
            form.action = "{{ route('rule.update', ':id') }}".replace(':id', data.id);
            form.querySelector('#updateKodePenyakit').value = data.kode_penyakit;
            form.querySelector('#updateKodeGejala').value = data.kode_gejala;
            document.getElementById('updateMb').value = parseFloat(data.mb).toFixed(2);
            document.getElementById('updateMd').value = parseFloat(data.md).toFixed(2);
        }


        function deleteData(id) {
            const form = document.getElementById('deleteForm');
            form.action = "{{ route('rule.destroy', ':id') }}".replace(':id', id);
        }
    </script>
@endsection