489 lines
25 KiB
PHP
489 lines
25 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Detail Kesehatan Santri')
|
|
|
|
@section('content')
|
|
<div class="page-header">
|
|
<h2><i class="fas fa-file-medical-alt"></i> Detail Kesehatan Santri</h2>
|
|
</div>
|
|
|
|
<!-- Header Actions -->
|
|
<div class="content-box" style="margin-bottom: 25px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 11px;">
|
|
<div>
|
|
<h3 style="margin: 0; color: var(--primary-color);">
|
|
<i class="fas fa-info-circle"></i> ID Kesehatan: <span style="color: var(--text-color);">{{ $kesehatanSantri->id_kesehatan }}</span>
|
|
</h3>
|
|
<p style="margin: 5px 0 0 0; color: #7F8C8D; font-size: 0.9em;">
|
|
Terakhir diupdate: {{ $kesehatanSantri->updated_at->locale('id')->isoFormat('D MMMM Y, HH:mm') }} WIB
|
|
</p>
|
|
</div>
|
|
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
|
@if($kesehatanSantri->status == 'dirawat')
|
|
<button type="button"
|
|
class="btn btn-success"
|
|
onclick="keluarUkp({{ $kesehatanSantri->id }}, '{{ $kesehatanSantri->santri->nama_lengkap }}', '{{ $kesehatanSantri->tanggal_masuk->format('Y-m-d') }}')">
|
|
<i class="fas fa-sign-out-alt"></i> Keluar UKP
|
|
</button>
|
|
@endif
|
|
<a href="{{ route('admin.kesehatan-santri.edit', $kesehatanSantri) }}" class="btn btn-warning">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</a>
|
|
<a href="{{ route('admin.kesehatan-santri.index') }}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Card dengan Badge Besar -->
|
|
<div class="content-box" style="background: linear-gradient(135deg, {{ $kesehatanSantri->status == 'dirawat' ? '#FFE8EA' : ($kesehatanSantri->status == 'sembuh' ? '#E8F7F2' : '#FFF8E1') }} 0%, {{ $kesehatanSantri->status == 'dirawat' ? '#FFD5D8' : ($kesehatanSantri->status == 'sembuh' ? '#D4F1E3' : '#FFF3CD') }} 100%); border-left: 5px solid {{ $kesehatanSantri->status == 'dirawat' ? '#E74C3C' : ($kesehatanSantri->status == 'sembuh' ? '#6FBA9D' : '#FFD56B') }}; margin-bottom: 25px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
|
|
<div>
|
|
<h3 style="margin: 0 0 10px 0; color: var(--text-color); font-size: 1.3em;">
|
|
<i class="fas fa-{{ $kesehatanSantri->status == 'dirawat' ? 'bed' : ($kesehatanSantri->status == 'sembuh' ? 'check-circle' : 'home') }}"></i>
|
|
Status Kesehatan
|
|
</h3>
|
|
<div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
|
|
<span style="background: {{ $kesehatanSantri->status == 'dirawat' ? '#E74C3C' : ($kesehatanSantri->status == 'sembuh' ? '#6FBA9D' : '#FFD56B') }}; color: white; padding: 9px 18px; border-radius: 8px; font-size: 1.2em; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.15);">
|
|
{{ strtoupper($kesehatanSantri->status) }}
|
|
</span>
|
|
<div style="border-left: 3px solid {{ $kesehatanSantri->status == 'dirawat' ? '#E74C3C' : ($kesehatanSantri->status == 'sembuh' ? '#6FBA9D' : '#FFD56B') }}; padding-left: 15px;">
|
|
<p style="margin: 0; font-size: 0.9em; color: #7F8C8D;">Lama Dirawat</p>
|
|
<p style="margin: 0; font-size: 2em; font-weight: bold; color: {{ $kesehatanSantri->status == 'dirawat' ? '#E74C3C' : ($kesehatanSantri->status == 'sembuh' ? '#6FBA9D' : '#FFD56B') }};">
|
|
{{ $kesehatanSantri->lama_dirawat }} <span style="font-size: 0.5em;">Hari</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if($kesehatanSantri->status != 'dirawat')
|
|
<div style="text-align: center; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
|
|
<i class="fas fa-check-double" style="font-size: 2.5em; color: var(--success-color); margin-bottom: 5px;"></i>
|
|
<p style="margin: 0; font-weight: bold; color: var(--text-color);">Selesai Perawatan</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid Layout untuk Info Santri dan Tanggal -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 25px;">
|
|
|
|
<!-- Card: Informasi Santri -->
|
|
<div class="content-box" style="border-top: 4px solid var(--primary-color);">
|
|
<h3 style="color: var(--primary-color); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;">
|
|
<i class="fas fa-user-circle" style="font-size: 1.5em;"></i>
|
|
<span>Informasi Santri</span>
|
|
</h3>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 11px;">
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px;">
|
|
<i class="fas fa-id-badge" style="color: var(--primary-color); width: 20px;"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.85em; font-weight: 600;">ID SANTRI</span>
|
|
</div>
|
|
<div style="font-size: 1.3em; font-weight: bold; color: var(--primary-color); margin-left: 30px;">
|
|
{{ $kesehatanSantri->santri->id_santri }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px;">
|
|
<i class="fas fa-user" style="color: var(--primary-color); width: 20px;"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.85em; font-weight: 600;">NAMA LENGKAP</span>
|
|
</div>
|
|
<div style="font-size: 1.2em; font-weight: bold; color: var(--text-color); margin-left: 30px;">
|
|
{{ $kesehatanSantri->santri->nama_lengkap }}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding-top: 15px; border-top: 2px solid var(--primary-light);">
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-id-card" style="color: var(--primary-color); font-size: 0.9em;"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.8em;">NIS</span>
|
|
</div>
|
|
<div style="font-weight: 600; color: var(--text-color);">{{ $kesehatanSantri->santri->nis ?: '-' }}</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-school" style="color: var(--primary-color); font-size: 0.9em;"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.8em;">Kelas</span>
|
|
</div>
|
|
<div style="font-weight: 600; color: var(--text-color);">{{ $kesehatanSantri->santri->kelas_lengkap }}</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-venus-mars" style="color: var(--primary-color); font-size: 0.9em;"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.8em;">Jenis Kelamin</span>
|
|
</div>
|
|
<div style="font-weight: 600; color: var(--text-color);">{{ $kesehatanSantri->santri->jenis_kelamin }}</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-info-circle" style="color: var(--primary-color); font-size: 0.9em;"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.8em;">Status</span>
|
|
</div>
|
|
<div>{!! $kesehatanSantri->santri->status_badge !!}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding-top: 15px; border-top: 2px solid var(--primary-light);">
|
|
<div class="info-item">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-user-friends" style="color: var(--primary-color);"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.85em;">Orang Tua / Wali</span>
|
|
</div>
|
|
<div style="font-weight: 600; color: var(--text-color);">{{ $kesehatanSantri->santri->nama_orang_tua ?: '-' }}</div>
|
|
</div>
|
|
|
|
<div class="info-item" style="margin-top: 10px;">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-phone" style="color: var(--primary-color);"></i>
|
|
<span style="color: #7F8C8D; font-size: 0.85em;">Nomor HP</span>
|
|
</div>
|
|
<div style="font-weight: 600; color: var(--text-color);">
|
|
@if($kesehatanSantri->santri->nomor_hp_ortu)
|
|
<a href="tel:{{ $kesehatanSantri->santri->nomor_hp_ortu }}" style="color: var(--primary-color); text-decoration: none;">
|
|
<i class="fas fa-phone-alt"></i> {{ $kesehatanSantri->santri->nomor_hp_ortu }}
|
|
</a>
|
|
@else
|
|
-
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card: Timeline Perawatan -->
|
|
<div class="content-box" style="border-top: 4px solid var(--secondary-color);">
|
|
<h3 style="color: var(--secondary-color); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;">
|
|
<i class="fas fa-calendar-alt" style="font-size: 1.5em;"></i>
|
|
<span>Timeline Perawatan</span>
|
|
</h3>
|
|
|
|
<div style="position: relative; padding-left: 30px;">
|
|
<!-- Timeline Line -->
|
|
<div style="position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);"></div>
|
|
|
|
<!-- Tanggal Masuk -->
|
|
<div style="position: relative; margin-bottom: 22px;">
|
|
<div style="position: absolute; left: -26px; width: 20px; height: 20px; background: var(--primary-color); border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"></div>
|
|
<div style="background: linear-gradient(135deg, #E8F7F2 0%, #D4F1E3 100%); padding: 15px; border-radius: 8px; border-left: 4px solid var(--primary-color);">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-calendar-plus" style="color: var(--primary-color);"></i>
|
|
<span style="font-weight: 600; color: #7F8C8D; font-size: 0.85em;">MASUK UKP</span>
|
|
</div>
|
|
<div style="font-size: 1.3em; font-weight: bold; color: var(--primary-color); margin-bottom: 5px;">
|
|
{{ $kesehatanSantri->tanggal_masuk_formatted }}
|
|
</div>
|
|
<div style="color: #7F8C8D; font-size: 0.9em;">
|
|
{{ $kesehatanSantri->tanggal_masuk->locale('id')->isoFormat('dddd, D MMMM Y') }}
|
|
</div>
|
|
<div style="color: #7F8C8D; font-size: 0.85em; margin-top: 5px;">
|
|
<i class="fas fa-clock"></i> {{ $kesehatanSantri->tanggal_masuk->diffForHumans() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tanggal Keluar -->
|
|
<div style="position: relative;">
|
|
<div style="position: absolute; left: -26px; width: 20px; height: 20px; background: {{ $kesehatanSantri->tanggal_keluar ? 'var(--secondary-color)' : '#E0E0E0' }}; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"></div>
|
|
<div style="background: {{ $kesehatanSantri->tanggal_keluar ? 'linear-gradient(135deg, #FFE8EA 0%, #FFD5D8 100%)' : 'linear-gradient(135deg, #F5F5F5 0%, #E0E0E0 100%)' }}; padding: 15px; border-radius: 8px; border-left: 4px solid {{ $kesehatanSantri->tanggal_keluar ? 'var(--secondary-color)' : '#E0E0E0' }};">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
|
|
<i class="fas fa-{{ $kesehatanSantri->tanggal_keluar ? 'calendar-check' : 'hourglass-half' }}" style="color: {{ $kesehatanSantri->tanggal_keluar ? 'var(--secondary-color)' : '#999' }};"></i>
|
|
<span style="font-weight: 600; color: #7F8C8D; font-size: 0.85em;">KELUAR UKP</span>
|
|
</div>
|
|
@if($kesehatanSantri->tanggal_keluar)
|
|
<div style="font-size: 1.3em; font-weight: bold; color: var(--secondary-color); margin-bottom: 5px;">
|
|
{{ $kesehatanSantri->tanggal_keluar_formatted }}
|
|
</div>
|
|
<div style="color: #7F8C8D; font-size: 0.9em;">
|
|
{{ $kesehatanSantri->tanggal_keluar->locale('id')->isoFormat('dddd, D MMMM Y') }}
|
|
</div>
|
|
<div style="color: #7F8C8D; font-size: 0.85em; margin-top: 5px;">
|
|
<i class="fas fa-clock"></i> {{ $kesehatanSantri->tanggal_keluar->diffForHumans() }}
|
|
</div>
|
|
@else
|
|
<div style="font-size: 1.1em; font-weight: bold; color: #E74C3C;">
|
|
<i class="fas fa-exclamation-circle"></i> Belum Keluar
|
|
</div>
|
|
<div style="color: #7F8C8D; font-size: 0.9em; margin-top: 5px;">
|
|
Santri masih dalam perawatan
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card: Keluhan dan Catatan -->
|
|
<div class="content-box" style="border-top: 4px solid var(--warning-color); margin-bottom: 25px;">
|
|
<h3 style="color: var(--warning-color); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;">
|
|
<i class="fas fa-notes-medical" style="font-size: 1.5em;"></i>
|
|
<span>Informasi Medis</span>
|
|
</h3>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr; gap: 20px;">
|
|
<!-- Keluhan -->
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
|
|
<div style="background: var(--primary-color); color: white; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-stethoscope"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0; color: var(--text-color); font-size: 1.1em;">Keluhan / Diagnosa</h4>
|
|
<p style="margin: 0; font-size: 0.85em; color: #7F8C8D;">Gejala yang dialami</p>
|
|
</div>
|
|
</div>
|
|
<div style="background: linear-gradient(135deg, #E8F7F2 0%, #F8FBF9 100%); padding: 14px; border-radius: 8px; border-left: 4px solid var(--primary-color); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);">
|
|
<p style="margin: 0; line-height: 1.8; color: var(--text-color); font-size: 1.05em;">
|
|
{{ $kesehatanSantri->keluhan }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Catatan -->
|
|
@if($kesehatanSantri->catatan)
|
|
<div>
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
|
|
<div style="background: var(--warning-color); color: white; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-clipboard-list"></i>
|
|
</div>
|
|
<div>
|
|
<h4 style="margin: 0; color: var(--text-color); font-size: 1.1em;">Catatan Petugas</h4>
|
|
<p style="margin: 0; font-size: 0.85em; color: #7F8C8D;">Informasi tambahan dari petugas UKP</p>
|
|
</div>
|
|
</div>
|
|
<div style="background: linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%); padding: 14px; border-radius: 8px; border-left: 4px solid var(--warning-color); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);">
|
|
<p style="margin: 0; line-height: 1.8; color: var(--text-color); font-size: 1.05em;">
|
|
{{ $kesehatanSantri->catatan }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons (Fixed at Bottom) -->
|
|
<div class="content-box" style="background: linear-gradient(135deg, #F8FBF9 0%, #E8F7F2 100%); border-top: 3px solid var(--primary-color);">
|
|
<h4 style="color: var(--primary-color); margin-bottom: 15px;">
|
|
<i class="fas fa-tools"></i> Aksi Tersedia
|
|
</h4>
|
|
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
|
<a href="{{ route('admin.kesehatan-santri.cetak-surat', $kesehatanSantri) }}"
|
|
class="btn btn-secondary"
|
|
target="_blank">
|
|
<i class="fas fa-print"></i> Cetak Surat Izin
|
|
</a>
|
|
|
|
<a href="{{ route('admin.kesehatan-santri.riwayat', $kesehatanSantri->id_santri) }}"
|
|
class="btn btn-primary">
|
|
<i class="fas fa-history"></i> Riwayat Kesehatan
|
|
</a>
|
|
|
|
<form action="{{ route('admin.kesehatan-santri.destroy', $kesehatanSantri) }}"
|
|
method="POST"
|
|
style="display: inline;"
|
|
onsubmit="return confirm('⚠︠Yakin ingin menghapus data kesehatan ini?\n\nData yang dihapus tidak dapat dikembalikan!')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i> Hapus Data
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Riwayat Kesehatan Santri (5 data terakhir) -->
|
|
@if($riwayatKesehatan->count() > 0)
|
|
<div class="content-box" style="margin-top: 22px; border-top: 4px solid var(--info-color);">
|
|
<h3 style="color: var(--info-color); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between;">
|
|
<span>
|
|
<i class="fas fa-history"></i> Riwayat Kesehatan Lainnya
|
|
</span>
|
|
<span style="font-size: 0.8em; font-weight: normal; color: #7F8C8D;">
|
|
{{ $riwayatKesehatan->count() }} data terakhir
|
|
</span>
|
|
</h3>
|
|
|
|
<div class="table-wrapper">
|
|
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Tanggal Masuk</th>
|
|
<th>Keluhan</th>
|
|
<th>Tanggal Keluar</th>
|
|
<th>Status</th>
|
|
<th>Lama</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($riwayatKesehatan as $riwayat)
|
|
<tr>
|
|
<td><strong>{{ $riwayat->id_kesehatan }}</strong></td>
|
|
<td>
|
|
<strong>{{ $riwayat->tanggal_masuk_formatted }}</strong><br>
|
|
<small style="color: #7F8C8D;">{{ $riwayat->tanggal_masuk->format('D') }}</small>
|
|
</td>
|
|
<td>
|
|
<span title="{{ $riwayat->keluhan }}">
|
|
{{ Str::limit($riwayat->keluhan, 40) }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
@if($riwayat->tanggal_keluar)
|
|
<strong>{{ $riwayat->tanggal_keluar_formatted }}</strong>
|
|
@else
|
|
<span style="color: #E74C3C;">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="btn btn-{{ $riwayat->status_badge_color }} btn-sm"
|
|
style="cursor: default; padding: 5px 10px;">
|
|
{{ ucfirst($riwayat->status) }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center"><strong>{{ $riwayat->lama_dirawat }}</strong> hari</td>
|
|
<td>
|
|
<a href="{{ route('admin.kesehatan-santri.show', $riwayat) }}"
|
|
class="btn btn-primary btn-sm">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 14px;">
|
|
<a href="{{ route('admin.kesehatan-santri.riwayat', $kesehatanSantri->id_santri) }}"
|
|
class="btn btn-primary">
|
|
<i class="fas fa-list"></i> Lihat Semua Riwayat
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Modal Keluar UKP -->
|
|
<div id="keluarUkpModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; animation: fadeIn 0.3s ease;">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 22px; border-radius: 12px; min-width: 300px; max-width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.3); animation: slideDown 0.3s ease;">
|
|
<h3 style="margin-bottom: 14px; color: var(--primary-color); display: flex; align-items: center; gap: 10px;">
|
|
<div style="background: var(--primary-color); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</div>
|
|
<span>Keluar dari UKP</span>
|
|
</h3>
|
|
|
|
<form id="keluarUkpForm" method="POST">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
<div class="form-group">
|
|
<label><i class="fas fa-user form-icon"></i>Nama Santri</label>
|
|
<input type="text" id="modalNamaSantri" readonly class="form-control" style="background-color: #F8F9FA;">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="tanggal_keluar"><i class="fas fa-calendar form-icon"></i>Tanggal Keluar *</label>
|
|
<input type="date" name="tanggal_keluar" id="tanggal_keluar" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="status_keluar"><i class="fas fa-check-circle form-icon"></i>Status *</label>
|
|
<select name="status" id="status_keluar" class="form-control" required>
|
|
<option value="">Pilih Status</option>
|
|
<option value="sembuh">Sembuh</option>
|
|
<option value="izin">Izin Pulang</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px;">
|
|
<button type="button" class="btn btn-secondary" onclick="closeKeluarUkpModal()">
|
|
<i class="fas fa-times"></i> Batal
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -60%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.info-item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.info-item:hover {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
#keluarUkpModal > div {
|
|
min-width: 90%;
|
|
padding: 14px;
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 1.3rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function keluarUkp(id, namaSantri, tanggalMasuk) {
|
|
document.getElementById('modalNamaSantri').value = namaSantri;
|
|
document.getElementById('keluarUkpForm').action = `/admin/kesehatan-santri/${id}/keluar-ukp`;
|
|
document.getElementById('tanggal_keluar').value = new Date().toISOString().split('T')[0];
|
|
document.getElementById('tanggal_keluar').min = tanggalMasuk;
|
|
document.getElementById('tanggal_keluar').max = new Date().toISOString().split('T')[0];
|
|
document.getElementById('keluarUkpModal').style.display = 'block';
|
|
}
|
|
|
|
function closeKeluarUkpModal() {
|
|
document.getElementById('keluarUkpModal').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('keluarUkpModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeKeluarUkpModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeKeluarUkpModal();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@endsection |