@extends('admin.layouts.main', ['title' => 'Tambah Rule'])
@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Tambah Rule
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-xl">
            <div class="row d-flex justify-content-center">
                <div class="col-10">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('rule.store') }}" method="POST">
                                @csrf

                                <div class="form-group mb-3">
                                    <label class="form-label">Penyakit</label>
                                    <select name="id_penyakit" id="id_penyakit"
                                        class="form-select @error('id_penyakit') is-invalid @enderror">
                                        <option value="">Pilih Penyakit</option>
                                        @foreach ($penyakit as $p)
                                            <option value="{{ $p->id }}"
                                                {{ old('id_penyakit') == $p->id ? 'selected' : '' }}>
                                                {{ $p->code }} - {{ $p->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('id_penyakit')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group mb-3" id="gejalaContainer">
                                    <label class="form-label">Gejala</label>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                @foreach ($gejala->chunk(ceil($gejala->count() / 3)) as $chunk)
                                                    <div class="col-md-4">
                                                        @foreach ($chunk as $g)
                                                            <div class="form-check mb-2">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="id_gejala[]" value="{{ $g->id }}"
                                                                    id="gejala_{{ $g->id }}"
                                                                    {{ is_array(old('id_gejala')) && in_array($g->id, old('id_gejala')) ? 'checked' : '' }}>
                                                                <label class="form-check-label"
                                                                    for="gejala_{{ $g->id }}">
                                                                    {{ $g->code }} - {{ $g->name }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    @error('id_gejala')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler icon-tabler-square-rounded-plus" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path d="M9 12h6"></path>
                                            <path d="M12 9v6"></path>
                                            <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
                                        </svg>Simpan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#id_penyakit').change(function() {
                var penyakitId = $(this).val();
                if (penyakitId) {
                    // Clear all checkboxes first
                    $('input[name="id_gejala[]"]').prop('checked', false);

                    // If a disease is selected, make an AJAX call to get existing rules
                    $.ajax({
                        url: '/admin/rule/get-existing/' + penyakitId,
                        type: 'GET',
                        success: function(data) {
                            // Check checkboxes for existing symptoms
                            $.each(data, function(index, gejalaId) {
                                $('#gejala_' + gejalaId).prop('checked', true);
                            });
                        }
                    });
                }
            });
        });
    </script>
@endpush