293 lines
13 KiB
PHP
293 lines
13 KiB
PHP
@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') |