223 lines
5.3 KiB
PHP
223 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Detail Riwayat Ambulans</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body{
|
|
background: linear-gradient(135deg,#eef2f7,#dfe6ee);
|
|
font-family: 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.container-app{
|
|
max-width:1200px;
|
|
margin:auto;
|
|
padding:20px;
|
|
}
|
|
|
|
.cardx{
|
|
border:none;
|
|
border-radius:16px;
|
|
padding:16px;
|
|
background:#fff;
|
|
box-shadow:0 10px 25px rgba(0,0,0,.06);
|
|
margin-bottom:15px;
|
|
}
|
|
|
|
.title{font-size:12px;color:#6c757d}
|
|
.value{font-size:14px;font-weight:600}
|
|
|
|
.badge-status{
|
|
padding:6px 12px;
|
|
border-radius:20px;
|
|
font-size:12px;
|
|
font-weight:600;
|
|
}
|
|
|
|
.fase-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(6,1fr);
|
|
gap:10px;
|
|
}
|
|
|
|
.fase-box{
|
|
padding:10px;
|
|
border-radius:12px;
|
|
text-align:center;
|
|
font-size:12px;
|
|
}
|
|
|
|
.done{background:#d1e7dd;}
|
|
.active{
|
|
background:#fff3cd;
|
|
animation:pulse 1.5s infinite;
|
|
}
|
|
.locked{background:#e9ecef;color:#999}
|
|
|
|
@keyframes pulse{
|
|
0%{box-shadow:0 0 0 0 rgba(255,193,7,.5);}
|
|
70%{box-shadow:0 0 0 10px rgba(255,193,7,0);}
|
|
100%{box-shadow:0 0 0 0 rgba(255,193,7,0);}
|
|
}
|
|
|
|
.progress{
|
|
height:8px;
|
|
border-radius:10px;
|
|
}
|
|
|
|
.print-btn{
|
|
position:fixed;
|
|
right:20px;
|
|
bottom:20px;
|
|
border:none;
|
|
background:#0d6efd;
|
|
color:white;
|
|
padding:10px 16px;
|
|
border-radius:30px;
|
|
}
|
|
.system{
|
|
font-weight:800;
|
|
color:#ef4444;
|
|
animation: blink 2s infinite;
|
|
}
|
|
@keyframes blink{
|
|
50%{opacity:.4}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-app">
|
|
|
|
<?php
|
|
// ================= FASE HELPER =================
|
|
function syncFase($p){
|
|
if (!isset($p['waktuFase'])) return "pre_dispatch";
|
|
if (!empty($p['waktuFase']['post'])) return "post";
|
|
if (!empty($p['waktuFase']['transfer'])) return "transfer";
|
|
if (!empty($p['waktuFase']['atScene'])) return "atScene";
|
|
if (!empty($p['waktuFase']['enRoute'])) return "enRoute";
|
|
if (!empty($p['waktuFase']['dispatch'])) return "dispatch";
|
|
return "pre_dispatch";
|
|
}
|
|
|
|
$fase = syncFase($p ?? []);
|
|
?>
|
|
|
|
<!-- ================= HEADER ================= -->
|
|
<div class="cardx">
|
|
<div class="d-flex justify-content-between">
|
|
<h5>
|
|
👤 <?= ucwords(strtolower(trim(($p['atribut'] ?? '') . ' ' . ($p['nama'] ?? '-')))) ?>
|
|
</h5>
|
|
<span class="system">Riwayat Detail Pasien - Silaras 119</span>
|
|
</div>
|
|
|
|
<div class="row mt-2 small">
|
|
<div class="col-md-4">RM: <b><?= $p['rm'] ?? '-' ?></b></div>
|
|
<div class="col-md-4">Register: <b><?= $p['register'] ?? '-' ?></b></div>
|
|
<div class="col-md-4">
|
|
Tanggal Lahir:
|
|
<b>
|
|
<?= !empty($p['tgl_lahir'])
|
|
? date('d-m-Y', strtotime($p['tgl_lahir']))
|
|
: '-' ?>
|
|
</b>
|
|
</div>
|
|
<div class="col-md-4">Jenis Kelamin: <b><?= $p['gender'] ?? '-' ?></b></div>
|
|
</div>
|
|
|
|
<div class="mt-2 small">
|
|
Alamat: <b><?= $p['alamat'] ?? '-' ?></b>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= STATUS ================= -->
|
|
<div class="cardx">
|
|
<?php
|
|
$order = $p['order_type'] ?? 'Pending Order';
|
|
$color = $order == 'True Emergency' ? '#dc3545' : ($order == 'Non Emergency' ? '#ffc107' : '#198754');
|
|
?>
|
|
|
|
<span class="badge-status" style="background:<?= $color ?>;color:white;">
|
|
<?= $order ?> - <?= strtoupper($fase) ?>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- ================= PROGRESS ================= -->
|
|
<div class="cardx">
|
|
<div class="progress mb-2">
|
|
<?php
|
|
$steps = ["pre_dispatch","dispatch","enRoute","atScene","transfer","post"];
|
|
$index = array_search($fase, $steps);
|
|
$percent = (($index+1)/count($steps))*100;
|
|
?>
|
|
<div class="progress-bar" style="width:<?= $percent ?>%"></div>
|
|
</div>
|
|
|
|
<div class="fase-grid">
|
|
<?php foreach($steps as $s): ?>
|
|
<?php
|
|
$class =
|
|
$fase == $s ? 'active' :
|
|
(array_search($s,$steps) < array_search($fase,$steps) ? 'done' : 'locked');
|
|
?>
|
|
|
|
<?php if($s == 'pre_dispatch'): ?>
|
|
|
|
<a href="<?= base_url('pasien/predispatch/'.$p['id']) ?>"
|
|
class="fase-box <?= $class ?>"
|
|
style="text-decoration:none;">
|
|
<?= strtoupper($s) ?>
|
|
</a>
|
|
|
|
<?php else: ?>
|
|
|
|
<div class="fase-box <?= $class ?>">
|
|
<?= strtoupper($s) ?>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================= DETAIL ================= -->
|
|
<div class="row">
|
|
|
|
<div class="col-md-6">
|
|
<div class="cardx">
|
|
<div class="title">Petugas</div>
|
|
<div class="value">
|
|
Dokter: <?= $p['dokter'] ?? '-' ?><br>
|
|
Perawat: <?= is_array($p['perawatPelaksana'] ?? null) ? implode(', ',$p['perawatPelaksana']) : '-' ?><br>
|
|
Driver: <?= is_array($p['driver'] ?? null) ? implode(', ',$p['driver']) : '-' ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="cardx">
|
|
<div class="title">Operasional</div>
|
|
<div class="value">
|
|
KM: <?= $p['kmAwal'] ?? '-' ?> → <?= $p['kmAkhir'] ?? '-' ?><br>
|
|
Biaya: <?= $p['biaya'] ?? '-' ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- PRINT -->
|
|
<button class="print-btn" onclick="window.print()">🖨 Print</button>
|
|
|
|
</body>
|
|
</html>
|