@php
    use App\Models\Penyakit;
    use App\Models\Indikator;
    use App\Models\Aturan;
@endphp

@include('admin.layout.header', ['title' => 'Cek Penyakit'])
@include('layouts.navbar')

<div class="container">
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white text-center py-3">
            <h4 class="mb-0"><i class="bi bi-clipboard-pulse me-2"></i><span style="color: white;">Lengkapi Informasi Dibawah Ini</span></h4>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger mx-3 mt-3">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Progress Bar -->
        <div class="progress mb-4 mx-3" style="height: 20px;">
            <div class="progress-bar bg-info" id="progressBar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Step 1 of 2</div>
        </div>

        <div id="carouselExampleIndicators" class="carousel slide" data-bs-interval="false">
            <form id="diagnosisForm" action="{{ url('temukan-penyakit') }}" method="POST">
                @csrf
                <div class="carousel-inner">
                    <!-- Form Bagian 1 -->
                    <div class="carousel-item {{ !session('riwayat_id') ? 'active' : '' }}">
                        <div class="card-body p-4">
                            <h5 class="text-primary mb-4"><i class="bi bi-person-lines-fill me-2"></i>Informasi Pemilik dan Kucing</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="nama" class="form-label">Nama Lengkap</label>
                                    <input type="text" class="form-control" name="nama" id="nama" required value="{{ session('nama') }}">
                                    <div class="invalid-feedback">Harap isi nama lengkap menggunakan huruf saja.</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" name="email" id="email" required value="{{ session('email') }}">
                                    <div class="invalid-feedback">Harap isi email yang valid (contoh: user@example.com).</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="nama_kucing" class="form-label">Nama Kucing</label>
                                    <input type="text" class="form-control" name="nama_kucing" id="nama_kucing" required value="{{ session('nama_kucing') }}">
                                    <div class="invalid-feedback">Harap isi nama kucing menggunakan huruf saja.</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="usia_kucing" class="form-label">Usia Kucing (dalam bulan)</label>
                                    <input type="number" class="form-control" name="usia_kucing" id="usia_kucing" min="1" max="240" placeholder="Contoh: 6 (untuk 6 bulan)" required value="{{ session('usia_kucing') }}">
                                    <div class="invalid-feedback">Harap isi usia kucing minimal 1 bulan.</div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-primary" type="button" id="nextStep">
                                    Selanjutnya <i class="bi bi-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Form Bagian 2 -->
                    <div class="carousel-item {{ session('riwayat_id') ? 'active' : '' }}">
                        <div class="card-body p-4">
                            <h5 class="text-primary mb-4"><i class="bi bi-clipboard2-pulse me-2"></i>Pilih Gejala yang Dialami</h5>
                            <p class="text-muted mb-4">Pilihlah gejala yang dialami oleh kucing Anda (minimal 2, maksimal 5 gejala).</p>
                            <div class="text-danger mb-3" id="indikatorError" style="display: none;">
                                Harap pilih minimal 2 dan maksimal 5 gejala sebelum melanjutkan!
                            </div>
                            <!-- Fitur Pencarian Gejala -->
                            <div class="mb-3">
                                <input type="text" class="form-control" id="searchGejala" placeholder="Cari gejala...">
                            </div>
                            <!-- Card Layout untuk Gejala -->
                            <div class="row" id="gejalaContainer">
                                @foreach (Indikator::all() as $indikator)
                                    <div class="col-md-4 mb-3">
                                        <div class="card h-100 shadow-sm">
                                            <div class="card-body">
                                                <h5 class="card-title">
                                                    <span class="badge bg-secondary me-2">G{{ ltrim($indikator->kode, 'A') }}</span>
                                                    {{ Str::title($indikator->indikator) }}
                                                </h5>                                                
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input indikator-checkbox" type="checkbox" name="indikator[]" value="{{ $indikator->id }}"
                                                    {{ in_array($indikator->id, session('indikator_terpilih', [])) ? 'checked' : '' }}>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <!-- Tombol Navigasi -->
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-outline-danger" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                    <i class="bi bi-arrow-left me-2"></i>Sebelumnya
                                </button>
                                <button class="btn btn-primary" type="submit" id="submitBtn">
                                    Temukan Penyakitnya <i class="bi bi-arrow-right ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>

<!-- Floating Action Button (FAB) -->
<div class="fab-container">
    <button class="btn btn-primary fab" type="button" id="nextStep">
        <i class="bi bi-arrow-right"></i>
    </button>
</div>

<!-- Validasi JavaScript -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const nextBtn = document.getElementById("nextStep");
        const submitBtn = document.getElementById("submitBtn");
        const indikatorError = document.getElementById("indikatorError");
        const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleIndicators'));
        const progressBar = document.getElementById("progressBar");

        function isAlphabetOnly(value) {
            return /^[a-zA-Z\s]+$/.test(value);
        }

        function isValidEmail(email) {
            const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return pattern.test(email);
        }

        // Slide ke 2 saat klik "Selanjutnya" dan validasi
        nextBtn.addEventListener("click", function () {
            let valid = true;
            const nama = document.getElementById("nama");
            const email = document.getElementById("email");
            const namaKucing = document.getElementById("nama_kucing");
            const usiaKucing = document.getElementById("usia_kucing");

            if (!isAlphabetOnly(nama.value.trim())) {
                nama.classList.add("is-invalid");
                valid = false;
            } else {
                nama.classList.remove("is-invalid");
            }

            if (!isValidEmail(email.value.trim())) {
                email.classList.add("is-invalid");
                valid = false;
            } else {
                email.classList.remove("is-invalid");
            }

            if (!isAlphabetOnly(namaKucing.value.trim())) {
                namaKucing.classList.add("is-invalid");
                valid = false;
            } else {
                namaKucing.classList.remove("is-invalid");
            }

            if (parseInt(usiaKucing.value.trim()) < 1) {
                usiaKucing.classList.add("is-invalid");
                valid = false;
            } else {
                usiaKucing.classList.remove("is-invalid");
            }

            if (valid) {
                carousel.next();
                progressBar.style.width = "100%";
                progressBar.innerText = "Step 2 of 2";
            }
        });

        // Tombol prev slide
        document.querySelector('[data-bs-slide="prev"]').addEventListener("click", function () {
            carousel.prev();
            progressBar.style.width = "50%";
            progressBar.innerText = "Step 1 of 2";
        });

        // Validasi checkbox indikator
        function validateIndikator() {
            const checked = document.querySelectorAll(".indikator-checkbox:checked");
            if (checked.length < 2 || checked.length > 5) {
                indikatorError.style.display = "block";
            } else {
                indikatorError.style.display = "none";
            }
        }

        // Validasi saat checkbox diubah
        document.querySelectorAll(".indikator-checkbox").forEach(cb => {
            cb.addEventListener("change", validateIndikator);
        });

        // Validasi sebelum submit
        document.getElementById("diagnosisForm").addEventListener("submit", function (e) {
            const checked = document.querySelectorAll(".indikator-checkbox:checked");
            if (checked.length < 2) {
                e.preventDefault();
                alert("Harus memilih minimal 2 gejala");
            } else if (checked.length > 5) {
                e.preventDefault();
                alert("Maksimal 5 gejala");
            }
        });

        // Pencarian gejala
        document.getElementById("searchGejala").addEventListener("input", function () {
            const filter = this.value.toUpperCase();
            document.querySelectorAll("#gejalaContainer .card").forEach(card => {
                const text = card.querySelector(".card-title").innerText.toUpperCase();
                card.style.display = text.includes(filter) ? "" : "none";
            });
        });

        // Jika session 'riwayat_id' ada, otomatis pindah slide
        @if(session('riwayat_id'))
            const carouselAuto = new bootstrap.Carousel(document.getElementById('carouselExampleIndicators'));
            carouselAuto.to(1);
            document.getElementById("progressBar").style.width = "100%";
            document.getElementById("progressBar").innerText = "Step 2 of 2";
        @endif
    });
</script>

<!-- Loading saat submit -->
<script>
    document.getElementById("diagnosisForm").addEventListener("submit", function () {
        document.getElementById("submitBtn").innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Memproses...';
    });
</script>

<!-- SweetAlert2 Notifikasi -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@if(session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Berhasil!',
        text: '{{ session('success') }}',
    });
</script>
@endif

<!-- CSS Tambahan -->
<style>
    .fab-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
    .fab {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 1.2rem;
    }
    .btn-primary:hover {
        transform: scale(1.05);
        transition: transform 0.2s ease;
    }
    .card {
        border: 1px solid #e0e0e0;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .form-switch .form-check-input {
        width: 3em;
        height: 1.5em;
    }
    .progress-bar {
        font-size: 14px;
        font-weight: bold;
    }
</style>

@include('admin.layout.footer')