@extends('admin.layout.layout')

@section('title', 'Data Rule')

@section('content')
            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">Data Rule</h1>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                            <li class="breadcrumb-item active">Data Rule</li>
                        </ol>

                        <div class="card mb-4">
                            <div class="card-body">
                            <button class="btn btn-success" type="button" id="submitButton">Konfirmasi perubahan</button>
                            </div>
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                    <div style="text-align: center" class="alert alert-danger"><strong>{{ $error }}</strong></div>
                                    @endforeach
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success" style="text-align: center">
                                <strong>{{ session('success') }}</strong>
                            </div>
                        @endif

                        <div id="successMessage" class="alert alert-success" style="display: none; text-align: center;"></div>

                        <div class="card mb-4">
                            <div class="card-body">
                            <form id="rulesForm">
                                <table class="table table-hover">
                                    <thead style="background-color: #f2f2f2;">
                                        <tr>
                                            <th style="padding: 8px; text-align: left;">Gejala | Penyakit</th>
                                            @foreach($diseases as $index => $disease)
                                                <th>P{{ $index + 1 }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($rules2 as $rule)
                                            <tr>
                                                <td>{{ $rule->code }}</td>
                                                @foreach($diseases as $index => $disease)
                                                    <td>
                                                        <input type="checkbox" name="R{{ $disease->id }}[]" value="{{ $rule->id }}" {{ in_array($rule->id, $rulesByDisease[$disease->id]) ? 'checked' : '' }}>
                                                        <input type="hidden" name="rules[{{ $loop->parent->index }}][disease_id]" value="{{ $disease->id }}">
                                                        <input type="hidden" name="rules[{{ $loop->parent->index }}][symptom_id]" value="{{ $rule->id }}">
                                                        <input type="hidden" name="rules[{{ $loop->parent->index }}][code]" value="{{ $rule->code }}">
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </form>
                            </div>
                        </div>
                    </div>
                </main>

                <meta name="csrf-token" content="{{ csrf_token() }}">

                    <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const submitButton = document.getElementById('submitButton');

                        submitButton.addEventListener('click', function() {
                            const form = document.getElementById('rulesForm');
                            const formData = new FormData(form);
                            const selectedRules = [];
                            const uncheckedSymptoms = [];

                            form.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
                                const diseaseId = checkbox.name.match(/\d+/)[0];
                                const symptomId = checkbox.value;
                                const code = form.querySelector(`input[name="rules[${diseaseId - 1}][code]"]`).value;

                                if (checkbox.checked) {
                                    selectedRules.push({
                                        code: code,
                                        disease_id: parseInt(diseaseId),
                                        symptom_id: parseInt(symptomId)
                                    });
                                } else {
                                    uncheckedSymptoms.push({
                                        disease_id: parseInt(diseaseId),
                                        symptom_id: parseInt(symptomId)
                                    });
                                }
                            });

                            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                            // Kirim data rules yang dipilih
                            fetch('/save-rule', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': csrfToken
                                },
                                body: JSON.stringify({ rules: selectedRules })
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Save Success:', data);
                                showSuccessMessage('Perubahan berhasil disimpan.');
                            })
                            .catch((error) => {
                                console.error('Save Error:', error);
                            });

                            fetch('/delete-unchecked', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': csrfToken
                                },
                                body: JSON.stringify({ unchecked_symptoms: uncheckedSymptoms })
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Delete Success:', data);
                                showSuccessMessage('Perubahan berhasil disimpan.');
                            })
                            .catch((error) => {
                                console.error('Delete Error:', error);
                            });
                        });
                        function showSuccessMessage(message) {
                            successMessage.textContent = message;
                            successMessage.style.display = 'block';

                            setTimeout(function() {
                                successMessage.style.display = 'none';
                            }, 5000);
                        }
                    });
                    </script>
@endsection