perbarui tampilan prt 2
This commit is contained in:
parent
8715955fad
commit
d2e645c206
|
|
@ -30,7 +30,7 @@
|
|||
<i class="bi bi-search" style="color: #FF782D;"></i>
|
||||
</span>
|
||||
<input type="text" name="search" class="form-control border-start-0" id="search"
|
||||
placeholder="Cari nama..."
|
||||
placeholder="Cari nama balita..."
|
||||
value="{{ request('search') }}" style="border-radius: 0 10px 10px 0;">
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,73 +1,94 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Form Data Edukasi')
|
||||
@section('title', 'Tambah Data Edukasi')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #9c3a5b;">Form Data Edukasi</h1>
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Tambah Data Edukasi</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('edukasi.index') }}">Data Edukasi</a></li>
|
||||
<li class="breadcrumb-item active">Tambah Konten</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="col-lg-10">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10"> <div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="icon-box me-3" style="background: #fff5f0; padding: 10px; border-radius: 12px;">
|
||||
<i class="bi bi-journal-plus" style="color: #FF782D; font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Buat Konten Edukasi Baru</h5>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tambah Data Edukasi</h5>
|
||||
|
||||
<!-- General Form Elements -->
|
||||
<form action="{{ route('edukasi.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="kategori" class="col-sm-2 col-form-label">Kategori</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="kategori" class="form-control" required>
|
||||
<option value="">-- Pilih Kategori --</option>
|
||||
<option value="Sangat Pendek">Sangat Pendek</option>
|
||||
<option value="Pendek">Pendek</option>
|
||||
<option value="Normal">Normal</option>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Kategori Edukasi</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-tag text-muted"></i></span>
|
||||
<select name="kategori" class="form-select border-start-0 custom-input" required>
|
||||
<option value="" selected disabled>-- Pilih Kategori --</option>
|
||||
<optgroup label="Kategori Balita (Stunting)">
|
||||
<option value="Sangat Pendek">Sangat Pendek</option>
|
||||
<option value="Pendek">Pendek</option>
|
||||
<option value="Normal">Normal</option>
|
||||
</optgroup>
|
||||
<optgroup label="Kategori Ibu Hamil">
|
||||
<option value="ibu hamil gizi kurang">Gizi Kurang</option>
|
||||
<option value="ibu hamil gizi normal">Gizi Normal</option>
|
||||
<option value="ibu hamil gizi lebih">Gizi Lebih</option>
|
||||
<option value="ibu hamil obesitas">Obesitas</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<option value="ibu hamil gizi kurang">Ibu Hamil Gizi Kurang</option>
|
||||
<option value="ibu hamil gizi normal">Ibu Hamil Gizi Normal</option>
|
||||
<option value="ibu hamil gizi lebih">Ibu Hamil Gizi Lebih</option>
|
||||
<option value="ibu hamil obesitas">Ibu Hamil Obesitas</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="judul" class="col-sm-2 col-form-label">Judul</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" name="judul" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="konten" class="col-sm-2 col-form-label">Konten</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea name="konten" class="form-control" cols="80" rows="8"></textarea>
|
||||
{{-- <input type="text-area" class="form-control" name="konten" required> --}}
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Judul Edukasi</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-pencil text-muted"></i></span>
|
||||
<input type="text" class="form-control border-start-0 custom-input" name="judul" placeholder="Contoh: Tips Nutrisi Masa Kehamilan" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 mb-4">
|
||||
<label class="form-label fw-semibold">Isi Konten / Template Pesan</label>
|
||||
<textarea name="konten" class="form-control custom-input" rows="10" placeholder="Tuliskan materi edukasi atau template pesan edukasi di sini..." style="border-radius: 12px !important;"></textarea>
|
||||
<div class="form-text mt-2 text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i> Konten ini akan digunakan sebagai referensi atau dikirimkan kepada pasien.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- <div class="row mb-3">
|
||||
<label for="gambar" class="col-sm-2 col-form-label">Gambar</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="file" class="form-control" name="gambar" required>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Submit Form</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end gap-2 border-top pt-4">
|
||||
<a href="{{ route('edukasi.index') }}" class="btn btn-light px-4" style="border-radius: 10px;">Batal</a>
|
||||
<button type="submit" class="btn btn-orange px-4" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 600; border: none;">
|
||||
<i class="bi bi-send me-2"></i>Simpan Edukasi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form><!-- End General Form Elements -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.custom-input:focus {
|
||||
border-color: #FF782D !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 120, 45, 0.1) !important;
|
||||
}
|
||||
.input-group-text { border-radius: 10px 0 0 10px !important; }
|
||||
.form-select.custom-input { border-radius: 0 10px 10px 0 !important; }
|
||||
input.custom-input { border-radius: 0 10px 10px 0 !important; }
|
||||
</style>
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -5,107 +5,95 @@
|
|||
@section('content')
|
||||
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #9c3a5b;">Edit Data Edukasi</h1>
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Edit Data Edukasi</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('edukasi.index') }}">Edit Data Edukasi</a></li>
|
||||
<li class="breadcrumb-item active">Edit Edukasi</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="col-lg-10">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10"> <div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="icon-box me-3" style="background: #fff5f0; padding: 10px; border-radius: 12px;">
|
||||
<i class="bi bi-journal-plus" style="color: #FF782D; font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Edit Konten Edukasi</h5>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Edit Data Edukasi</h5>
|
||||
|
||||
<!-- General Form Elements -->
|
||||
<form action="{{ route('edukasi.update', $t_edukasi->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-2 col-form-label">Kategori</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Kategori Edukasi</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0">
|
||||
<i class="bi bi-tag text-muted"></i>
|
||||
</span>
|
||||
<select name="kategori" class="form-select border-start-0 custom-input" required>
|
||||
<option value="" disabled>-- Pilih Kategori --</option>
|
||||
|
||||
<select name="kategori" class="form-control">
|
||||
<optgroup label="Kategori Balita (Stunting)">
|
||||
<option value="Sangat Pendek" {{ old('kategori', $t_edukasi->kategori) == 'Sangat Pendek' ? 'selected' : '' }}>Sangat Pendek</option>
|
||||
<option value="Pendek" {{ old('kategori', $t_edukasi->kategori) == 'Pendek' ? 'selected' : '' }}>Pendek</option>
|
||||
<option value="Normal" {{ old('kategori', $t_edukasi->kategori) == 'Normal' ? 'selected' : '' }}>Normal</option>
|
||||
</optgroup>
|
||||
|
||||
<option value="Resiko Tinggi Stunting"
|
||||
{{ $t_edukasi->kategori == 'Resiko Tinggi Stunting' ? 'selected' : '' }}>
|
||||
Resiko Tinggi Stunting
|
||||
</option>
|
||||
<optgroup label="Kategori Ibu Hamil">
|
||||
<option value="ibu hamil gizi kurang" {{ old('kategori', $t_edukasi->kategori) == 'ibu hamil gizi kurang' ? 'selected' : '' }}>Gizi Kurang</option>
|
||||
<option value="ibu hamil gizi normal" {{ old('kategori', $t_edukasi->kategori) == 'ibu hamil gizi normal' ? 'selected' : '' }}>Gizi Normal</option>
|
||||
<option value="ibu hamil gizi lebih" {{ old('kategori', $t_edukasi->kategori) == 'ibu hamil gizi lebih' ? 'selected' : '' }}>Gizi Lebih</option>
|
||||
<option value="ibu hamil obesitas" {{ old('kategori', $t_edukasi->kategori) == 'ibu hamil obesitas' ? 'selected' : '' }}>Obesitas</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<option value="Stunting"
|
||||
{{ $t_edukasi->kategori == 'Stunting' ? 'selected' : '' }}>
|
||||
Stunting
|
||||
</option>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Judul Edukasi</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-pencil text-muted"></i></span>
|
||||
<input type="text" class="form-control border-start-0 custom-input" name="judul" value="{{ $t_edukasi->judul }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<option value="Normal"
|
||||
{{ $t_edukasi->kategori == 'Normal' ? 'selected' : '' }}>
|
||||
Normal
|
||||
</option>
|
||||
|
||||
<option value="Resiko Gizi Lebih"
|
||||
{{ $t_edukasi->kategori == 'Resiko Gizi Lebih' ? 'selected' : '' }}>
|
||||
Resiko Gizi Lebih
|
||||
</option>
|
||||
|
||||
<option value="ibu hamil gizi kurang"
|
||||
{{ $t_edukasi->kategori == 'ibu hamil gizi kurang' ? 'selected' : '' }}>
|
||||
Ibu Hamil Gizi Kurang
|
||||
</option>
|
||||
|
||||
<option value="ibu hamil gizi normal"
|
||||
{{ $t_edukasi->kategori == 'ibu hamil gizi normal' ? 'selected' : '' }}>
|
||||
Ibu Hamil Gizi Normal
|
||||
</option>
|
||||
|
||||
<option value="ibu hamil gizi lebih"
|
||||
{{ $t_edukasi->kategori == 'ibu hamil gizi lebih' ? 'selected' : '' }}>
|
||||
Ibu Hamil Gizi Lebih
|
||||
</option>
|
||||
|
||||
<option value="ibu hamil obesitas"
|
||||
{{ $t_edukasi->kategori == 'ibu hamil obesitas' ? 'selected' : '' }}>
|
||||
Ibu Hamil Obesitas
|
||||
</option>
|
||||
</select>
|
||||
<div class="col-md-12 mb-4">
|
||||
<label class="form-label fw-semibold">Isi Konten / Template Pesan</label>
|
||||
<textarea name="konten" class="form-control custom-input" rows="10">{{ old('konten', $t_edukasi->konten) }}</textarea>
|
||||
<div class="form-text mt-2 text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i> Konten ini akan digunakan sebagai referensi atau dikirimkan kepada pasien.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="judul" class="col-sm-2 col-form-label">Judul</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" name="judul" value="{{ $t_edukasi->judul }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="konten" class="col-sm-2 col-form-label">Konten</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea name="konten" class="form-control" cols="80" rows="8" value="" >{{ $t_edukasi->konten }}</textarea>
|
||||
{{-- <input type="text-area" class="form-control" name="konten" value="{{ $t_edukasi->konten }}"> --}}
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end gap-2 border-top pt-4">
|
||||
<a href="{{ route('edukasi.index') }}" class="btn btn-light px-4" style="border-radius: 10px;">Batal</a>
|
||||
<button type="submit" class="btn btn-orange px-4" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 600; border: none;">
|
||||
<i class="bi bi-send me-2"></i>Simpan Edukasi
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- <div class="row mb-3">
|
||||
<label class="col-sm-2 col-form-label">Gambar</label>
|
||||
<div class="col-sm-10">
|
||||
|
||||
@if($t_edukasi->gambar)
|
||||
<img src="{{ asset('storage/'.$t_edukasi->gambar) }}" width="120" class="mb-2">
|
||||
@endif
|
||||
|
||||
<input type="file" name="gambar" class="form-control">
|
||||
|
||||
</div>
|
||||
</div> --}}
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Submit Form</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form><!-- End General Form Elements -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.custom-input:focus {
|
||||
border-color: #FF782D !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 120, 45, 0.1) !important;
|
||||
}
|
||||
.input-group-text { border-radius: 10px 0 0 10px !important; }
|
||||
.form-select.custom-input { border-radius: 0 10px 10px 0 !important; }
|
||||
input.custom-input { border-radius: 0 10px 10px 0 !important; }
|
||||
</style>
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -4,91 +4,83 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<!-- Page Title -->
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #9c3a5b;">Data Edukasi</h1>
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Data Edukasi</h1>
|
||||
<p class="text-muted">Kelola konten informasi dan tips kesehatan untuk pengguna PosSehat.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body p-4">
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="card-title mb-0">Daftar Edukasi</h5>
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
|
||||
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Daftar Konten Edukasi</h5>
|
||||
|
||||
<a href="{{ route('edukasi.create') }}" class="btn btn-success btn-sm">
|
||||
<i class="bi bi-plus-circle me-1"></i> Tambah Data Edukasi
|
||||
</a>
|
||||
<div class="mt-3 mt-md-0">
|
||||
<a href="{{ route('edukasi.create') }}" class="btn btn-orange px-4 py-2 shadow-sm" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 500;">
|
||||
<i class="bi bi-plus-circle me-2"></i> Tambah Edukasi
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="{{ route('edukasi.index') }}" class="mb-3">
|
||||
<div class="input-group" style="max-width: 300px;">
|
||||
<input type="text" name="search" class="form-control" id="search"
|
||||
placeholder="Cari judul..."
|
||||
value="{{ request('search') }}">
|
||||
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="bi bi-search"></i> Cari
|
||||
</button>
|
||||
<form method="GET" action="{{ route('edukasi.index') }}" class="mb-4">
|
||||
<div class="input-group search-bar" style="max-width: 400px;">
|
||||
<span class="input-group-text bg-white border-end-0" style="border-radius: 10px 0 0 10px;">
|
||||
<i class="bi bi-search" style="color: #FF782D;"></i>
|
||||
</span>
|
||||
<input type="text" name="search" class="form-control border-start-0" id="search"
|
||||
placeholder="Cari judul edukasi..."
|
||||
value="{{ request('search') }}" style="border-radius: 0 10px 10px 0;">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle datatable">
|
||||
<thead class="table-light">
|
||||
<table class="table table-hover align-middle custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 5%">No</th>
|
||||
<th>Kategori</th>
|
||||
<th>Judul</th>
|
||||
<th>Konten</th>
|
||||
{{-- <th>Gambar</th> --}}
|
||||
<th style="width: 15%">Kategori</th>
|
||||
<th style="width: 25%">Judul</th>
|
||||
<th style="width: 40%">Ringkasan Konten</th>
|
||||
<th style="width: 15%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="edukasi-table">
|
||||
@forelse ($t_edukasi as $index => $t_edukasis)
|
||||
@forelse ($t_edukasi as $index => $item)
|
||||
<tr>
|
||||
<td>{{ $t_edukasi->firstItem() + $index }}</td>
|
||||
<td>{{ $t_edukasis->kategori }}</td>
|
||||
<td>{{ $t_edukasis->judul }}</td>
|
||||
<td>{{ $t_edukasis->konten }}</td>
|
||||
{{-- <td>
|
||||
@if($t_edukasis->gambar)
|
||||
<img src="{{ asset('storage/'.$t_edukasis->gambar) }}" width="100">
|
||||
@else
|
||||
Tidak ada gambar
|
||||
@endif
|
||||
</td> --}}
|
||||
<td class="fw-bold">{{ $t_edukasi->firstItem() + $index }}</td>
|
||||
<td>
|
||||
<span class="badge {{ strtolower($item->kategori) == 'Sangat Pendek' ? 'bg-danger-light' : 'bg-orange-light' }}">
|
||||
{{ $item->kategori }}
|
||||
</span>
|
||||
</td>
|
||||
<td><span class="fw-semibold text-dark">{{ $item->judul }}</span></td>
|
||||
<td class="text-muted small">
|
||||
{{ Str::limit($item->konten, 80, '...') }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="d-flex justify-content-center gap-2">
|
||||
<a href="{{ route('edukasi.edit', $item->id) }}"
|
||||
class="btn btn-sm btn-edit-custom" title="Edit">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
</a>
|
||||
|
||||
<!-- Edit -->
|
||||
<a href="{{ route('edukasi.edit', $t_edukasis->id) }}"
|
||||
class="btn btn-sm btn-warning me-1" title="Edit">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
</a>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ route('edukasi.destroy', $t_edukasis->id) }}"
|
||||
method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Yakin ingin menghapus data?')"
|
||||
title="Hapus">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action="{{ route('edukasi.destroy', $item->id) }}" method="POST" style="display:inline;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="btn btn-sm btn-delete-custom"
|
||||
onclick="return confirm('Yakin ingin menghapus edukasi ini?')"
|
||||
title="Hapus">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="text-center text-muted">
|
||||
Belum ada data edukasi
|
||||
<td colspan="5" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-journal-x d-block mb-2" style="font-size: 3rem; color: #dee2e6;"></i>
|
||||
Belum ada data edukasi ditemukan
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
|
|
@ -96,33 +88,72 @@ class="btn btn-sm btn-warning me-1" title="Edit">
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center mt-3">
|
||||
{{ $t_edukasi->withQueryString()->links() }}
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
<small class="text-muted">Menampilkan {{ $t_edukasi->firstItem() ?? 0 }} sampai {{ $t_edukasi->lastItem() ?? 0 }} dari {{ $t_edukasi->total() }} data</small>
|
||||
<div>
|
||||
{{ $t_edukasi->withQueryString()->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.custom-table thead { background-color: #f8f9fa; }
|
||||
.custom-table th { color: #7a7a7a; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; padding: 15px; border: none; }
|
||||
.custom-table td { padding: 15px; border-bottom: 1px solid #f1f1f1; }
|
||||
|
||||
/* Badge Warna Oranye & Merah Soft */
|
||||
.bg-orange-light { background-color: #fff5f0; color: #FF782D; border: 1px solid #ffccbc; border-radius: 6px; }
|
||||
.bg-danger-light { background-color: #fff5f5; color: #fa5252; border: 1px solid #ffc9c9; border-radius: 6px; }
|
||||
|
||||
/* Button Action */
|
||||
.btn-edit-custom { background-color: #fff9db; color: #f59f00; border: none; border-radius: 8px; }
|
||||
.btn-edit-custom:hover { background-color: #f59f00; color: white; }
|
||||
.btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
|
||||
.btn-delete-custom:hover { background-color: #fa5252; color: white; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
let delayTimer;
|
||||
|
||||
|
||||
|
||||
document.getElementById('search').addEventListener('keyup', function () {
|
||||
|
||||
clearTimeout(delayTimer);
|
||||
|
||||
|
||||
|
||||
let query = this.value;
|
||||
|
||||
|
||||
|
||||
delayTimer = setTimeout(() => {
|
||||
|
||||
fetch(`{{ route('edukasi.index') }}?search=` + query)
|
||||
|
||||
.then(response => response.text())
|
||||
|
||||
.then(html => {
|
||||
|
||||
let parser = new DOMParser();
|
||||
|
||||
let doc = parser.parseFromString(html, 'text/html');
|
||||
|
||||
|
||||
|
||||
let newTable = doc.querySelector('#edukasi-table').innerHTML;
|
||||
|
||||
document.getElementById('edukasi-table').innerHTML = newTable;
|
||||
|
||||
});
|
||||
|
||||
}, 300);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<i class="bi bi-search" style="color: #FF782D;"></i>
|
||||
</span>
|
||||
<input type="text" name="search" class="form-control border-start-0" id="search"
|
||||
placeholder="Cari nama..."
|
||||
placeholder="Cari nama ibu hamil..."
|
||||
value="{{ request('search') }}" style="border-radius: 0 10px 10px 0;">
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -5,56 +5,79 @@
|
|||
@section('content')
|
||||
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #9c3a5b;">Edit Data Ibu Hamil</h1>
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Edit Data Ibu Hamil</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('ibu_hamil.index') }}">Data Ibu Hamil</a></li>
|
||||
<li class="breadcrumb-item active">Edit Ibu Hamil</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="col-lg-10">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-9">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Edit Data Ibu Hamil</h5>
|
||||
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="icon-box me-3" style="background: #fff5f0; padding: 10px; border-radius: 12px;">
|
||||
<i class="bi bi-person-heart" style="color: #FF782D; font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Edit Data Ibu Hamil</h5>
|
||||
</div>
|
||||
|
||||
<!-- General Form Elements -->
|
||||
<form action="{{ route('ibu_hamil.update', $ibu_hamil->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="row mb-3">
|
||||
<label for="nik" class="col-sm-2 col-form-label">NIK</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" name="nik" value="{{ $ibu_hamil->nik }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="nama" class="col-sm-2 col-form-label">Nama</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" name="nama" value="{{ $ibu_hamil->nama }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="tgl_lahir" class="col-sm-2 col-form-label">Tanggal Lahir</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="date" class="form-control" name="tgl_lahir" value="{{ $ibu_hamil->tgl_lahir }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" name="alamat" value="{{ $ibu_hamil->alamat }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="no_hp" class="col-sm-2 col-form-label">NO HP</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" name="no_hp" value="{{ $ibu_hamil->no_hp }}">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">NIK</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-card-text text-muted"></i></span>
|
||||
<input type="text" class="form-control border-start-0 custom-input" name="nik" value="{{ $ibu_hamil->nik }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Nama Lengkap</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-person text-muted"></i></span>
|
||||
<input type="text" class="form-control border-start-0 custom-input" name="nama" id="nama" value="{{ $ibu_hamil->nama }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Tanggal Lahir</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-calendar-event text-muted"></i></span>
|
||||
<input type="date" class="form-control border-start-0 custom-input" name="tgl_lahir" value="{{ $ibu_hamil->tgl_lahir }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Nomor WhatsApp/HP</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-whatsapp text-muted"></i></span>
|
||||
<input type="text" class="form-control border-start-0 custom-input" name="no_hp" value="{{ $ibu_hamil->no_hp }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 mb-4">
|
||||
<label class="form-label fw-semibold">Alamat Lengkap</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-geo-alt text-muted"></i></span>
|
||||
<textarea class="form-control border-start-0 custom-input" name="alamat" rows="2">{{ old('alamat', $ibu_hamil->alamat) }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Submit Form</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end gap-2 border-top pt-4">
|
||||
<a href="{{ route('ibu_hamil.index') }}" class="btn btn-light px-4" style="border-radius: 10px;">Batal</a>
|
||||
<button type="submit" class="btn btn-orange px-4" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 600; border: none;">
|
||||
<i class="bi bi-save me-2"></i>Simpan Data Ibu Hamil
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
@ -64,4 +87,15 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.custom-input:focus {
|
||||
border-color: #FF782D !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 120, 45, 0.1) !important;
|
||||
}
|
||||
.input-group-text { border-radius: 10px 0 0 10px !important; }
|
||||
.custom-input { border-radius: 0 10px 10px 0 !important; }
|
||||
</style>
|
||||
|
||||
@endsection
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,95 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Laporan Hasil Pengukuran Balita</title>
|
||||
<title>Laporan Hasil Pengukuran Balita - {{ $pengukuran->balita->nama }}</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; font-size: 12px; }
|
||||
.header { text-align: center; margin-bottom: 20px; }
|
||||
.table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
|
||||
.table th, .table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
||||
.table th { background-color: #f2f2f2; }
|
||||
.chart-container { text-align: center; margin-top: 20px; }
|
||||
.chart-image { width: 100%; max-width: 600px; border: 1px solid #eee; }
|
||||
.footer { margin-top: 30px; font-style: italic; font-size: 10px; }
|
||||
.badge { padding: 5px 10px; border-radius: 5px; color: white; }
|
||||
.bg-danger { background-color: #dc3545; }
|
||||
.bg-warning { background-color: #ffc107; color: black; }
|
||||
.bg-success { background-color: #28a745; }
|
||||
.info-box {
|
||||
background-color: #f8f9fa;
|
||||
border-left: 5px solid #9c3a5b;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 12px; color: #333; line-height: 1.6; }
|
||||
.header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #FF782D; padding-bottom: 10px; }
|
||||
.header h2 { color: #FF782D; margin: 0; text-transform: uppercase; font-size: 18px; }
|
||||
.header p { margin: 5px 0; color: #777; font-size: 10px; letter-spacing: 1px; }
|
||||
|
||||
.section-title {
|
||||
background-color: #fff5f0;
|
||||
color: #FF782D;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
border-left: 4px solid #FF782D;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
.text-bold { font-weight: bold; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
|
||||
.table th, .table td { border: 1px solid #eee; padding: 10px; text-align: left; }
|
||||
.table th { background-color: #fafafa; color: #555; width: 30%; }
|
||||
|
||||
.info-box {
|
||||
background-color: #fdfdfd;
|
||||
border: 1px solid #eee;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.chart-container { text-align: center; margin: 20px 0; padding: 10px; border: 1px solid #f1f1f1; }
|
||||
.chart-image { width: 100%; max-width: 550px; }
|
||||
|
||||
.edukasi-item { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #eee; }
|
||||
.edukasi-item strong { color: #FF782D; display: block; margin-bottom: 5px; }
|
||||
|
||||
.rekomendasi {
|
||||
margin-top: 20px;
|
||||
background-color: #fffaf0;
|
||||
border: 1px solid #ffeccb;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 50px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
font-size: 9px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.bg-success { background-color: #28a745; }
|
||||
.bg-warning { background-color: #f39c12; }
|
||||
.bg-danger { background-color: #e74c3c; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h2>LAPORAN HASIL PENGUKURAN STUNTING</h2>
|
||||
<p>Aplikasi Possehat - Balita</p>
|
||||
<h2>LAPORAN HASIL PENGUKURAN BALITA</h2>
|
||||
<p>Aplikasi PosSehat Digital - Monitoring Stunting & Gizi Balita</p>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Informasi Dasar & Z-Score</div>
|
||||
<div class="info-box">
|
||||
<span class="text-bold">Panduan Rentang Z-Score (TB/U):</span><br>
|
||||
Z-Score adalah nilai standar WHO untuk mengukur tinggi badan anak dibanding anak seusianya:<br>
|
||||
• <span class="text-bold">Normal:</span> -2 SD sampai +3 SD (Tinggi badan sesuai usia).<br>
|
||||
• <span class="text-bold">Pendek (Stunted):</span> -3 SD sampai < -2 SD.<br>
|
||||
• <span class="text-bold">Sangat Pendek (Severely Stunted):</span> Di bawah -3 SD.
|
||||
<table class="table" style="margin-bottom: 0;">
|
||||
<tr>
|
||||
<th>Nama Balita</th>
|
||||
<td><strong>{{ $pengukuran->balita->nama }}</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Jenis Kelamin</th>
|
||||
<td>{{ ($pengukuran->balita->jenis_kelamin == '1') ? 'Laki-laki' : 'Perempuan' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Usia Saat Ukur</th>
|
||||
<td>{{ $pengukuran->usia_saat_ukur }} Bulan</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tanggal Periksa</th>
|
||||
<td>{{ \Carbon\Carbon::parse($pengukuran->tanggal)->translatedFormat('d F Y') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Hasil Pengukuran</th>
|
||||
<td>{{ $pengukuran->tinggi_badan }} cm / {{ $pengukuran->berat_badan }} kg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Z-Score TB/U</th>
|
||||
<td>{{ number_format($pengukuran->zs_tbu, 2) }} SD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Status Hasil</th>
|
||||
<td>
|
||||
@php
|
||||
$statusClass = match(strtolower($pengukuran->hasil)) {
|
||||
'normal' => 'bg-success',
|
||||
'pendek', 'risiko stunting' => 'bg-warning',
|
||||
'sangat pendek', 'stunting' => 'bg-danger',
|
||||
default => 'bg-success'
|
||||
};
|
||||
@endphp
|
||||
<span class="status-badge {{ $statusClass }}">{{ strtoupper($pengukuran->hasil) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<tr><th>Nama Balita</th><td>{{ $pengukuran->balita->nama }}</td></tr>
|
||||
<tr>
|
||||
<th>Jenis Kelamin</th>
|
||||
<td>
|
||||
@if($pengukuran->balita->jenis_kelamin == 'L' || $pengukuran->balita->jenis_kelamin == '1')
|
||||
Laki-laki
|
||||
@else
|
||||
Perempuan
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
<tr><th>Usia</th><td>{{ $pengukuran->usia_saat_ukur }} Bulan</td></tr>
|
||||
<tr><th>Tanggal Periksa</th><td>{{ $pengukuran->tanggal }}</td></tr>
|
||||
<tr><th>Tinggi / Berat</th><td>{{ $pengukuran->tinggi_badan }} cm / {{ $pengukuran->berat_badan }} kg</td></tr>
|
||||
<tr><th>Z-Score TB/U</th><td>{{ number_format($pengukuran->zs_tbu, 2) }}</td></tr>
|
||||
<tr>
|
||||
<th>Status Hasil</th>
|
||||
<td><strong>{{ $pengukuran->hasil }}</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Grafik Perkembangan</h3>
|
||||
<div class="section-title">Grafik Perkembangan</div>
|
||||
<div class="chart-container">
|
||||
@if($chartImage)
|
||||
<img src="{{ $chartImage }}" class="chart-image">
|
||||
@else
|
||||
<p>Grafik tidak tersedia</p>
|
||||
<p style="color: #999;">Data visual grafik tidak tersedia.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<h3>Edukasi Kesehatan</h3>
|
||||
@foreach($edukasi as $item)
|
||||
<div style="margin-bottom: 10px;">
|
||||
<strong>{{ $item->judul }}</strong>
|
||||
<p>{{ $item->konten }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;">
|
||||
<span class="text-bold">Rekomendasi Petugas:</span><br>
|
||||
<div class="section-title">Rekomendasi & Edukasi</div>
|
||||
<div class="rekomendasi">
|
||||
<strong>Pesan Petugas:</strong><br>
|
||||
@if($pengukuran->hasil == 'Normal')
|
||||
Pertahankan pola makan bergizi seimbang dan rutin datang ke Posyandu setiap bulan untuk memantau tumbuh kembang.
|
||||
Balita berada dalam kondisi <strong>Normal</strong>. Pertahankan asupan gizi yang baik dan rutinlah berkunjung ke Posyandu setiap bulan.
|
||||
@else
|
||||
Segera konsultasikan hasil ini dengan Tenaga Kesehatan atau Dokter di Puskesmas terdekat untuk penanganan lebih lanjut.
|
||||
Hasil menunjukkan kategori <strong>{{ $pengukuran->hasil }}</strong>. Disarankan untuk segera melakukan konsultasi intensif dengan petugas kesehatan puskesmas terdekat.
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
@foreach($edukasi as $item)
|
||||
<div class="edukasi-item">
|
||||
<strong><i class="bi bi-info-circle"></i> {{ $item->judul }}</strong>
|
||||
{{ $item->konten }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
Dicetak pada: {{ date('d-m-Y H:i:s') }} oleh Petugas: {{ $pengukuran->petugas->nama ?? 'Sistem' }}
|
||||
Dicetak pada: {{ date('d-m-Y H:i') }} | Petugas: {{ $pengukuran->petugas->nama ?? 'Sistem PosSehat' }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,33 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Pengukuran Balita')
|
||||
@section('title', 'Form Pengukuran Balita')
|
||||
|
||||
@section('content')
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #9c3a5b;">Form Pengukuran Balita</h1>
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Form Pengukuran Balita</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('pengukuran_balita.index') }}">Riwayat Pengukuran</a></li>
|
||||
<li class="breadcrumb-item active">Tambah Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tambah Data Pengukuran</h5>
|
||||
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="icon-box me-3" style="background: #fff5f0; padding: 10px; border-radius: 12px;">
|
||||
<i class="bi bi-rulers" style="color: #FF782D; font-size: 1.5rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Input Hasil Pengukuran Posyandu</h5>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul>
|
||||
<div class="alert alert-danger border-0 shadow-sm" style="border-radius: 12px;">
|
||||
<ul class="mb-0">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
|
|
@ -26,70 +37,76 @@
|
|||
|
||||
<form action="{{ route('pengukuran_balita.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="row mb-3">
|
||||
<label for="tanggal" class="col-sm-2 col-form-label">Tanggal Ukur</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="date" class="form-control" name="tanggal" id="tanggal_ukur" value="{{ date('Y-m-d') }}" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-2 col-form-label">Nama Balita</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="balita_id" id="balita_id" class="form-control select2" required>
|
||||
<option value="">-- Pilih Balita --</option>
|
||||
@foreach($balita as $b)
|
||||
<option value="{{ $b->id }}" data-tgl="{{ $b->tgl_lahir }}" data-jk="{{ $b->jenis_kelamin }}">
|
||||
{{ $b->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Tanggal Pengukuran</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-calendar-check text-muted"></i></span>
|
||||
<input type="date" class="form-control border-start-0 custom-input" name="tanggal" id="tanggal_ukur" value="{{ date('Y-m-d') }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label class="col-sm-2 col-form-label">Jenis Kelamin</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" id="jk_display" class="form-control" readonly placeholder="Otomatis">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold">Nama Balita</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
|
||||
<select name="balita_id" id="balita_id" class="form-select border-start-0 custom-input select2" required>
|
||||
<option value="" selected disabled>Cari nama balita...</option>
|
||||
@foreach($balita as $b)
|
||||
<option value="{{ $b->id }}" data-tgl="{{ $b->tgl_lahir }}" data-jk="{{ $b->jenis_kelamin }}">
|
||||
{{ $b->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold text-muted">Jenis Kelamin</label>
|
||||
<input type="text" id="jk_display" class="form-control bg-light border-0 px-3" readonly placeholder="Otomatis" style="border-radius: 10px;">
|
||||
<input type="hidden" name="jenis_kelamin" id="jk_input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="usia" class="col-sm-2 col-form-label">Usia (Bulan)</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" id="usia_display" class="form-control" readonly placeholder="Otomatis terisi dalam bulan">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold text-muted">Usia Saat Ini</label>
|
||||
<input type="text" id="usia_display" class="form-control bg-light border-0 px-3" readonly placeholder="Otomatis (Bulan)" style="border-radius: 10px;">
|
||||
<input type="hidden" name="usia" id="usia_input">
|
||||
</div>
|
||||
|
||||
<div class="col-12"><hr class="my-4 opacity-25"></div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label fw-semibold">Berat Badan (kg)</label>
|
||||
<div class="input-group">
|
||||
<input type="number" step="0.01" class="form-control custom-input text-center fs-5 fw-bold" name="berat_badan" required placeholder="0.00">
|
||||
<span class="input-group-text bg-light border-start-0 text-muted">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label fw-semibold">Tinggi Badan (cm)</label>
|
||||
<div class="input-group">
|
||||
<input type="number" step="0.1" class="form-control custom-input text-center fs-5 fw-bold" name="tinggi_badan" required placeholder="0.0">
|
||||
<span class="input-group-text bg-light border-start-0 text-muted">cm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label fw-semibold">Lingkar Kepala (cm)</label>
|
||||
<div class="input-group">
|
||||
<input type="number" step="0.1" class="form-control custom-input text-center fs-5 fw-bold" name="lingkar_kepala" required placeholder="0.0">
|
||||
<span class="input-group-text bg-light border-start-0 text-muted">cm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="berat_badan" class="col-sm-2 col-form-label">Berat Badan</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="number" step="0.01" class="form-control" name="berat_badan" required placeholder="kg">
|
||||
</div>
|
||||
<div class="d-flex justify-content-end gap-2 border-top mt-4 pt-4">
|
||||
<a href="{{ route('pengukuran_balita.index') }}" class="btn btn-light px-4" style="border-radius: 10px;">Batal</a>
|
||||
<button type="submit" class="btn btn-orange px-4 py-2" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 600; border: none;">
|
||||
<i class="bi bi-calculator me-2"></i>Simpan & Hitung Status
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="tinggi_badan" class="col-sm-2 col-form-label">Tinggi Badan</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="number" step="0.1" class="form-control" name="tinggi_badan" required placeholder="cm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="lingkar_kepala" class="col-sm-2 col-form-label">Lingkar Kepala</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="number" step="0.1" class="form-control" name="lingkar_kepala" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Submit Form</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,18 +114,29 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.custom-input:focus {
|
||||
border-color: #FF782D !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(255, 120, 45, 0.1) !important;
|
||||
}
|
||||
.input-group-text { border-radius: 10px 0 0 10px; }
|
||||
.custom-input { border-radius: 0 10px 10px 0 !important; }
|
||||
/* Untuk input angka di baris fisik */
|
||||
.col-md-4 .custom-input { border-radius: 10px 0 0 10px !important; }
|
||||
.col-md-4 .input-group-text { border-radius: 0 10px 10px 0; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// JavaScript kamu tetap sama, logikanya sudah benar
|
||||
function updateData() {
|
||||
let sel = document.getElementById("balita_id");
|
||||
let opt = sel.options[sel.selectedIndex];
|
||||
|
||||
if (opt.value) {
|
||||
// Update JK (1=Laki, 0=Perempuan)
|
||||
let jk = opt.getAttribute("data-jk");
|
||||
document.getElementById("jk_display").value = (jk == 1) ? "Laki-laki" : "Perempuan";
|
||||
document.getElementById("jk_input").value = jk;
|
||||
|
||||
// Hitung Usia
|
||||
let tglLahir = new Date(opt.getAttribute("data-tgl"));
|
||||
let tglUkur = new Date(document.getElementById("tanggal_ukur").value);
|
||||
let totalBulan = (tglUkur.getFullYear() - tglLahir.getFullYear()) * 12 + (tglUkur.getMonth() - tglLahir.getMonth());
|
||||
|
|
|
|||
|
|
@ -1,98 +1,106 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Data Pengukuran Balta')
|
||||
@section('title', 'Data Pengukuran Balita')
|
||||
|
||||
@section('content')
|
||||
|
||||
<!-- Page Title -->
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #9c3a5b;">Data Pengukuran Balita</h1>
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Data Pengukuran Balita</h1>
|
||||
<p class="text-muted">Pantau hasil pertumbuhan dan status gizi balita secara berkala.</p>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body p-4">
|
||||
|
||||
<!-- Card Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="card-title mb-0">Daftar Hasil Pengukuran</h5>
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
|
||||
<h5 class="card-title mb-0" style="color: #2c3e50; font-weight: 600;">Riwayat Pengukuran</h5>
|
||||
|
||||
<a href="{{ route('pengukuran_balita.create') }}" class="btn btn-success btn-sm">
|
||||
<i class="bi bi-plus-circle me-1"></i> Tambah Pengukuran
|
||||
</a>
|
||||
<div class="mt-3 mt-md-0">
|
||||
<a href="{{ route('pengukuran_balita.create') }}" class="btn btn-orange px-4 py-2 shadow-sm" style="background-color: #FF782D; color: white; border-radius: 10px; font-weight: 500;">
|
||||
<i class="bi bi-plus-circle me-2"></i> Tambah Pengukuran
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="{{ route('pengukuran_balita.index') }}" class="mb-3">
|
||||
<div class="input-group" style="max-width: 300px;">
|
||||
<input type="text" name="search" class="form-control" id="search"
|
||||
placeholder="Cari nama..."
|
||||
value="{{ request('search') }}">
|
||||
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="bi bi-search"></i> Cari
|
||||
</button>
|
||||
<form method="GET" action="{{ route('pengukuran_balita.index') }}" class="mb-4">
|
||||
<div class="input-group search-bar" style="max-width: 400px;">
|
||||
<span class="input-group-text bg-white border-end-0" style="border-radius: 10px 0 0 10px;">
|
||||
<i class="bi bi-search" style="color: #FF782D;"></i>
|
||||
</span>
|
||||
<input type="text" name="search" class="form-control border-start-0 custom-input" id="search"
|
||||
placeholder="Cari nama balita..."
|
||||
value="{{ request('search') }}" style="border-radius: 0 10px 10px 0;">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle datatable">
|
||||
<thead class="table-light">
|
||||
<table class="table table-hover align-middle custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 5%" >No</th>
|
||||
<th style="width: 5%">No</th>
|
||||
<th>Petugas</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Nama</th>
|
||||
<th>Usia</th>
|
||||
<th>Berat Badan</th>
|
||||
<th>Tinggi Badan</th>
|
||||
<th>Lingkar Kepala</th>
|
||||
<th>Hasil</th>
|
||||
<th>Z-score TBU</th>
|
||||
<th style="width: 15%" class="text-center">Aksi</th>
|
||||
<th>Nama Balita</th>
|
||||
<th>Detail Fisik (BB/TB/LK)</th>
|
||||
<th class="text-center">Hasil</th>
|
||||
<th class="text-center">Z-Score</th>
|
||||
<th style="width: 10%" class="text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pengukuran-balita-table">
|
||||
@forelse ($p_balita as $index => $balita)
|
||||
<tr>
|
||||
<td>{{ $p_balita->firstItem() + $index }}</td>
|
||||
<td>{{ $balita->petugas->nama ?? '-' }}</td>
|
||||
<td>{{ $balita->tanggal }}</td>
|
||||
<td>{{ $balita->balita->nama ?? '-' }}</td>
|
||||
<td>{{ \Carbon\Carbon::parse($balita->balita->tgl_lahir)->diffInMonths(\Carbon\Carbon::parse($balita->tanggal)) }} Bulan</td>
|
||||
<td>{{ $balita->berat_badan }}</td>
|
||||
<td>{{ $balita->tinggi_badan }}</td>
|
||||
<td>{{ $balita->lingkar_kepala }}</td>
|
||||
<td>{{ $balita->hasil }}</td>
|
||||
<td>{{ $balita->zs_tbu }}</td>
|
||||
<td class="fw-bold text-muted">{{ $p_balita->firstItem() + $index }}</td>
|
||||
<td><span class="small">{{ $balita->petugas->nama ?? '-' }}</span></td>
|
||||
<td>
|
||||
<div class="small fw-semibold text-dark">{{ \Carbon\Carbon::parse($balita->tanggal)->translatedFormat('d M Y') }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold text-dark">{{ $balita->balita->nama ?? '-' }}</div>
|
||||
<div class="badge bg-light text-muted fw-normal" style="font-size: 10px;">
|
||||
{{ \Carbon\Carbon::parse($balita->balita->tgl_lahir)->diffInMonths(\Carbon\Carbon::parse($balita->tanggal)) }} Bulan
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small">
|
||||
<span class="badge bg-blue-soft text-primary me-1">BB: {{ $balita->berat_badan }}kg</span>
|
||||
<span class="badge bg-green-soft text-success me-1">TB: {{ $balita->tinggi_badan }}cm</span>
|
||||
<span class="badge bg-purple-soft text-purple">LK: {{ $balita->lingkar_kepala }}cm</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<!-- Detail -->
|
||||
<a href="{{ route('pengukuran_balita.detail', $balita->id) }}"
|
||||
class="btn btn-sm btn-info"
|
||||
title="Detail">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
|
||||
<!-- Delete -->
|
||||
<form action="{{ route('pengukuran_balita.destroy', $balita->id) }}"
|
||||
method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Yakin ingin menghapus data?')"
|
||||
title="Hapus">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@php
|
||||
$statusClass = match(strtolower($balita->hasil)) {
|
||||
'normal' => 'bg-success',
|
||||
'pendek', 'stunting' => 'bg-danger',
|
||||
'sangat pendek' => 'bg-dark',
|
||||
default => 'bg-warning'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $statusClass }} px-3 py-2" style="border-radius: 8px;">
|
||||
{{ $balita->hasil }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center fw-bold text-secondary">{{ $balita->zs_tbu }}</td>
|
||||
<td class="text-center">
|
||||
<div class="d-flex justify-content-center gap-1">
|
||||
<a href="{{ route('pengukuran_balita.detail', $balita->id) }}" class="btn btn-sm btn-detail-custom" title="Detail">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<form action="{{ route('pengukuran_balita.destroy', $balita->id) }}" method="POST" style="display:inline;">
|
||||
@csrf @method('DELETE')
|
||||
<button class="btn btn-sm btn-delete-custom" onclick="return confirm('Hapus data ini?')" title="Hapus">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="12" class="text-center text-muted">
|
||||
Belum ada data pengukuran
|
||||
<td colspan="8" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-clipboard-x d-block mb-2" style="font-size: 3rem; color: #dee2e6;"></i>
|
||||
Belum ada data pengukuran ditemukan
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
|
|
@ -100,32 +108,51 @@ class="btn btn-sm btn-info"
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center mt-3">
|
||||
{{ $p_balita->withQueryString()->links() }}
|
||||
<div class="d-flex justify-content-between align-items-center mt-4">
|
||||
<small class="text-muted">Menampilkan {{ $p_balita->firstItem() ?? 0 }} sampai {{ $p_balita->lastItem() ?? 0 }} dari {{ $p_balita->total() }} data</small>
|
||||
<div>
|
||||
{{ $p_balita->withQueryString()->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.custom-table th { color: #7a7a7a; font-weight: 600; text-transform: uppercase; font-size: 11px; padding: 15px; border: none; }
|
||||
.custom-table td { padding: 15px; border-bottom: 1px solid #f8f9fa; }
|
||||
|
||||
/* Soft Badges for BB/TB/LK */
|
||||
.bg-blue-soft { background-color: #e7f3ff; color: #007bff; }
|
||||
.bg-green-soft { background-color: #eafff1; color: #28a745; }
|
||||
.bg-purple-soft { background-color: #f3e8ff; color: #6f42c1; }
|
||||
.text-purple { color: #6f42c1; }
|
||||
|
||||
/* Action Buttons */
|
||||
.btn-detail-custom { background-color: #e7f3ff; color: #007bff; border: none; border-radius: 8px; }
|
||||
.btn-detail-custom:hover { background-color: #007bff; color: white; }
|
||||
.btn-delete-custom { background-color: #fff5f5; color: #fa5252; border: none; border-radius: 8px; }
|
||||
.btn-delete-custom:hover { background-color: #fa5252; color: white; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let delayTimer;
|
||||
|
||||
document.getElementById('search').addEventListener('keyup', function () {
|
||||
clearTimeout(delayTimer);
|
||||
|
||||
let query = this.value;
|
||||
|
||||
delayTimer = setTimeout(() => {
|
||||
|
||||
fetch(`{{ route('pengukuran_balita.index') }}?search=` + query)
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
let parser = new DOMParser();
|
||||
let doc = parser.parseFromString(html, 'text/html');
|
||||
|
||||
let newTable = doc.querySelector('#pengukuran-balita-table').innerHTML;
|
||||
|
||||
document.getElementById('pengukuran-balita-table').innerHTML = newTable;
|
||||
});
|
||||
}, 300);
|
||||
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -1,94 +1,123 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title','Detail Edukasi Balita')
|
||||
@section('title','Detail Perkembangan Balita')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="pagetitle">
|
||||
<h1>Detail Edukasi & Perkembangan Balita</h1>
|
||||
<div class="pagetitle mb-4">
|
||||
<h1 style="color: #FF782D; font-weight: 700;">Laporan Perkembangan Balita</h1>
|
||||
<nav>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('pengukuran_balita.index') }}">Data Pengukuran</a></li>
|
||||
<li class="breadcrumb-item active">Detail Laporan</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="row align-items-top">
|
||||
<div class="col-lg-12">
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<form id="formPdf" action="/cetak-balita/{{ $pengukuran->id }}" method="POST" class="mt-3">
|
||||
@csrf
|
||||
<input type="hidden" name="chartImage" id="chartImage">
|
||||
<button type="submit" class="btn btn-danger">
|
||||
<i class="bi bi-file-pdf"></i> Cetak PDF
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<h5 class="card-title">Hasil Pengukuran Terakhir</h5>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Petugas</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Nama Balita</th>
|
||||
<th>Usia (Bulan)</th>
|
||||
<th>Berat Badan</th>
|
||||
<th>Tinggi Badan</th>
|
||||
<th>Z-Score TBU</th>
|
||||
<th>Hasil</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $pengukuran->petugas->nama ?? '-' }}</td>
|
||||
<td>{{ $pengukuran->tanggal }}</td>
|
||||
<td>{{ $pengukuran->balita->nama ?? '-' }}</td>
|
||||
<td>{{ $pengukuran->usia_saat_ukur }} Bulan</td>
|
||||
<td>{{ $pengukuran->berat_badan }} kg</td>
|
||||
<td>{{ $pengukuran->tinggi_badan }} cm</td>
|
||||
<td>{{ number_format($pengukuran->zs_tbu, 2) }}</td>
|
||||
<td>
|
||||
<span class="badge {{ $pengukuran->hasil == 'Normal' ? 'bg-success' : ($pengukuran->hasil == 'Risiko Stunting' ? 'bg-warning' : 'bg-danger') }}">
|
||||
{{ $pengukuran->hasil }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card shadow-sm border-0 mb-4" style="border-radius: 20px;">
|
||||
<div class="card-body pt-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="d-inline-flex align-items-center justify-content-center bg-orange-light rounded-circle mb-3" style="width: 80px; height: 80px;">
|
||||
<i class="bi bi-person-badge" style="font-size: 2.5rem; color: #FF782D;"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-0">{{ $pengukuran->balita->nama ?? '-' }}</h4>
|
||||
<span class="text-muted">{{ $pengukuran->usia_saat_ukur }} Bulan</span>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="status-box p-3 rounded-4 mb-3 text-center" style="background-color: #f8f9fa;">
|
||||
<small class="text-uppercase fw-bold text-muted d-block mb-1">Status Gizi (TBU)</small>
|
||||
@php
|
||||
$statusClass = match(strtolower($pengukuran->hasil)) {
|
||||
'normal' => 'bg-success',
|
||||
'risiko stunting', 'pendek' => 'bg-warning text-dark',
|
||||
'stunting', 'sangat pendek' => 'bg-danger',
|
||||
default => 'bg-secondary'
|
||||
};
|
||||
@endphp
|
||||
<span class="badge {{ $statusClass }} fs-6 px-4 py-2" style="border-radius: 10px;">
|
||||
{{ $pengukuran->hasil }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h5 class="card-title">Grafik Perkembangan Antropometri</h5>
|
||||
<div id="grafikBalita" style="min-height:350px;"></div>
|
||||
<ul class="list-group list-group-flush small">
|
||||
<li class="list-group-item d-flex justify-content-between px-0">
|
||||
<span class="text-muted">Petugas Pemeriksa:</span>
|
||||
<span class="fw-bold">{{ $pengukuran->petugas->nama ?? '-' }}</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between px-0">
|
||||
<span class="text-muted">Tanggal Ukur:</span>
|
||||
<span class="fw-bold">{{ \Carbon\Carbon::parse($pengukuran->tanggal)->translatedFormat('d F Y') }}</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between px-0">
|
||||
<span class="text-muted">Z-Score TBU:</span>
|
||||
<span class="fw-bold text-primary">{{ number_format($pengukuran->zs_tbu, 2) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<form id="formPdf" action="/cetak-balita/{{ $pengukuran->id }}" method="POST" class="mt-4">
|
||||
@csrf
|
||||
<input type="hidden" name="chartImage" id="chartImage">
|
||||
<button type="submit" class="btn btn-danger w-100 py-2 shadow-sm" style="border-radius: 12px;">
|
||||
<i class="bi bi-file-pdf me-2"></i> Cetak Laporan PDF
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="card-title">Edukasi dan Informasi Kesehatan</h5>
|
||||
<div class="edukasi-content p-3 bg-light rounded">
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow-sm border-0 mb-4" style="border-radius: 20px;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #2c3e50;"><i class="bi bi-graph-up-arrow me-2 text-orange"></i>Grafik Antropometri</h5>
|
||||
<div id="grafikBalita"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm border-0" style="border-radius: 20px;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" style="color: #2c3e50;"><i class="bi bi-lightbulb me-2 text-warning"></i>Rekomendasi Kesehatan</h5>
|
||||
<div class="edukasi-content mt-2">
|
||||
@forelse($edukasi as $item)
|
||||
<div class="mb-3">
|
||||
<h6 class="fw-bold text-primary"><i class="bi bi-info-circle-fill me-2"></i>{{ $item->judul }}</h6>
|
||||
<p class="mb-0">{{ $item->konten }}</p>
|
||||
<div class="d-flex align-items-start p-3 mb-3 border-0 shadow-sm rounded-4" style="background-color: #fffaf0;">
|
||||
<div class="icon-circle me-3" style="color: #FF782D;">
|
||||
<i class="bi bi-check2-circle fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-1" style="color: #FF782D;">{{ $item->judul }}</h6>
|
||||
<p class="mb-0 text-muted small" style="line-height: 1.6;">{{ $item->konten }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-danger">Edukasi belum tersedia untuk kategori ini.</p>
|
||||
<div class="alert alert-light border-0 text-center py-4">
|
||||
<i class="bi bi-info-circle d-block mb-2 fs-2 text-muted"></i>
|
||||
<p class="text-muted mb-0">Edukasi belum tersedia untuk kategori ini.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.bg-orange-light { background-color: #fff5f0; }
|
||||
.text-orange { color: #FF782D; }
|
||||
.rounded-4 { border-radius: 1rem !important; }
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
// Ambil data dari Controller
|
||||
// 1. Ambil data dari Controller
|
||||
var tanggal = @json($tanggal ?? []);
|
||||
var tb = @json($tb ?? []); // Tinggi Badan
|
||||
var bb = @json($bb ?? []); // Berat Badan
|
||||
|
||||
// 2. Konfigurasi Grafik
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
|
|
@ -101,52 +130,94 @@
|
|||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'line',
|
||||
type: 'area', // Menggunakan 'area' agar ada gradasi warna di bawah garis
|
||||
height: 350,
|
||||
zoom: { enabled: false }
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: 'easeinout',
|
||||
speed: 800,
|
||||
}
|
||||
},
|
||||
// Warna Oranye PosSehat dan Biru Teal sebagai penyeimbang
|
||||
colors: ['#FF782D', '#00B4D8'],
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.1,
|
||||
stops: [0, 90, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: [4, 4]
|
||||
width: 3
|
||||
},
|
||||
markers: {
|
||||
size: 5
|
||||
size: 5,
|
||||
strokeColors: '#fff',
|
||||
strokeWidth: 2,
|
||||
hover: { size: 7 }
|
||||
},
|
||||
xaxis: {
|
||||
categories: tanggal,
|
||||
title: { text: 'Tanggal Pengukuran' }
|
||||
title: {
|
||||
text: 'Riwayat Tanggal Pengukuran',
|
||||
style: { color: '#7a7a7a', fontWeight: 500 }
|
||||
},
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false }
|
||||
},
|
||||
yaxis: {
|
||||
title: { text: 'Nilai Pengukuran' }
|
||||
title: {
|
||||
text: 'Nilai (cm / kg)',
|
||||
style: { color: '#7a7a7a', fontWeight: 500 }
|
||||
}
|
||||
},
|
||||
colors: ['#9c3a5b', '#2ecc71'], // Warna disesuaikan
|
||||
legend: { position: 'top' }
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
fontWeight: 600
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(1);
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Inisialisasi Chart
|
||||
// 3. Inisialisasi & Render Chart
|
||||
var chart = new ApexCharts(document.querySelector("#grafikBalita"), options);
|
||||
chart.render();
|
||||
|
||||
// Handle Cetak PDF (Kirim gambar chart ke backend)
|
||||
document.getElementById("formPdf").addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
chart.dataURI().then(({ imgURI }) => {
|
||||
document.getElementById("chartImage").value = imgURI;
|
||||
e.target.submit();
|
||||
// 4. Handle Cetak PDF (Konversi Chart ke Gambar Base64)
|
||||
var formPdf = document.getElementById("formPdf");
|
||||
if (formPdf) {
|
||||
formPdf.addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Mengambil URI data gambar dari chart sebelum submit form
|
||||
chart.dataURI().then(({ imgURI }) => {
|
||||
document.getElementById("chartImage").value = imgURI;
|
||||
// Gunakan submit asli setelah value input hidden terisi
|
||||
this.submit();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Di show.blade.php
|
||||
var chart = new ApexCharts(document.querySelector("#grafikBalita"), options);
|
||||
chart.render();
|
||||
|
||||
document.getElementById("formPdf").addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
chart.dataURI().then(({ imgURI }) => {
|
||||
document.getElementById("chartImage").value = imgURI;
|
||||
e.target.submit();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<i class="bi bi-search" style="color: #FF782D;"></i>
|
||||
</span>
|
||||
<input type="text" name="search" class="form-control border-start-0" id="search"
|
||||
placeholder="Cari nama, email, no HP..."
|
||||
placeholder="Cari nama petugas"
|
||||
value="{{ request('search') }}" style="border-radius: 0 10px 10px 0;">
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue