<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => 'Dashboard Karyawan']); ?>

<?php $__env->startPush('styles'); ?>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
    --primary:   #5b4fcf;
    --primary-d: #4338ca;
    --primary-l: #ede9fe;
    --green:     #10b981;
    --red:       #ef4444;
    --amber:     #f59e0b;
    --bg:        #eef0f5;
    --white:     #ffffff;
    --border:    #e5e7eb;
    --text:      #111827;
    --muted:     #6b7280;
    --muted2:    #9ca3af;
    --bottom-h:  68px;
    --nav-h:     58px;
    --pad:       16px;
}
html, body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
/* ── TOPNAV ── */
.topnav { background: var(--primary); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); position: sticky; top: 0; z-index: 90; box-shadow: 0 2px 12px rgba(91,79,207,.35); }
.topnav-left { display: flex; align-items: center; gap: 10px; }
.topnav-hamburger { background: rgba(255,255,255,.12); border: none; cursor: pointer; padding: 8px; border-radius: 10px; display: flex; flex-direction: column; gap: 5px; }
.topnav-hamburger span { display: block; width: 18px; height: 2px; background: rgba(255,255,255,.9); border-radius: 2px; }
.topnav-brand { font-size: 15px; font-weight: 800; color: white; letter-spacing: 2px; display: flex; align-items: center; gap: 9px; }
.topnav-brand-ico { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.topnav-brand-ico svg { width: 17px; height: 17px; fill: white; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; font-weight: 800; border: 1.5px solid rgba(255,255,255,.3); cursor: pointer; }

/* ── SCROLL BODY ── */
.scroll-body { padding-bottom: calc(var(--bottom-h) + 16px); }
.page-wrap { padding: var(--pad); display: flex; flex-direction: column; gap: 12px; }

/* ── PILLS ── */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.pill-green  { background: #d1fae5; color: #065f46; }
.pill-yellow { background: #fef9c3; color: #92400e; }
.pill-red    { background: #fee2e2; color: #991b1b; }
.pill-blue   { background: #dbeafe; color: #1e40af; }
.pill-purple { background: #ede9fe; color: #5b21b6; }
.pill-dot    { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }

/* ── ALERTS ── */
.alert-box { padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.alert-box svg { width: 15px; height: 15px; flex-shrink: 0; }
.alert-ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-err { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── HERO ── */
.hero { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-sub  { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.hero-name { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px; line-height: 1.15; }
.hero-meta { font-size: 12px; color: var(--muted2); margin-top: 5px; font-weight: 500; }
.hero-date-badge { flex-shrink: 0; background: var(--primary-l); border: 1px solid rgba(91,79,207,.15); border-radius: 12px; padding: 8px 14px; text-align: center; line-height: 1.3; }
.hero-date-day  { font-size: 22px; font-weight: 800; color: var(--primary); display: block; }
.hero-date-mon  { font-size: 11px; font-weight: 700; color: var(--primary); opacity: .7; }

/* ── QUICK MENU ── */
.quick-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px 20px; }
.quick-lbl { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 14px; }
.quick-grid { display: flex; justify-content: space-around; }
.qi { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; flex: 1; position: relative; }
.qi-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.qi-icon svg { width: 24px; height: 24px; }
.qi:active .qi-icon { transform: scale(.92); }
.qi-icon.red    { background: linear-gradient(135deg,#f87171,#dc2626); box-shadow:0 3px 10px rgba(220,38,38,.25); }
.qi-icon.amber  { background: linear-gradient(135deg,#fbbf24,#d97706); box-shadow:0 3px 10px rgba(217,119,6,.25); }
.qi-icon.violet { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow:0 3px 10px rgba(124,58,237,.25); }
.qi-icon.green  { background: linear-gradient(135deg,#34d399,#059669); box-shadow:0 3px 10px rgba(5,150,105,.25); }
.qi-icon.cyan   { background: linear-gradient(135deg,#22d3ee,#0891b2); box-shadow:0 3px 10px rgba(8,145,178,.25); }
.qi-lbl { font-size: 11.5px; font-weight: 700; color: var(--text); }

/* ── ABSEN CARDS ── */
.absen-section { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; gap: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.absen-card { padding: 18px; position: relative; overflow: hidden; }
.absen-card::before { content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,.1); }
.absen-card.masuk  { background: linear-gradient(140deg,var(--primary),#7c3aed); }
.absen-card.pulang { background: linear-gradient(140deg,#6b7280,#374151); }
.absen-card.done   { background: linear-gradient(140deg,#059669,var(--green)); }
.ac-label  { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
.ac-time   { font-size: 22px; font-weight: 800; color: white; letter-spacing: -.5px; line-height: 1; }
.ac-time.empty { font-size: 15px; opacity: .45; }
.ac-status { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.65); margin-top: 5px; }
.ac-status.ok { color: #a7f3d0; }
.ac-status.warn { color: #fde68a; }

/* ── SECTION HEAD ── */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.section-link  { font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 3px; }
.month-badge { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-l); padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(91,79,207,.15); }

/* ── STAT GRID ── */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.stat-card { background: var(--white); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.09); }
.stat-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.stat-ico svg { width: 18px; height: 18px; }
.stat-ico.blue   { background: #dbeafe; }
.stat-ico.green  { background: #d1fae5; }
.stat-ico.orange { background: #ffedd5; }
.stat-ico.red    { background: #fee2e2; }
.stat-val { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.stat-lbl { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: -4px; }

/* ── JADWAL ── */
.jadwal-card { background: var(--white); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.jadwal-ico { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg,var(--primary),#7c3aed); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(91,79,207,.3); }
.jadwal-ico svg { width: 22px; height: 22px; }
.jadwal-name  { font-size: 13px; font-weight: 700; }
.jadwal-times { display: flex; gap: 20px; margin-top: 5px; }
.jadwal-time  { font-size: 11px; color: var(--muted); font-weight: 600; }
.jadwal-time strong { display: block; font-size: 16px; font-weight: 800; color: var(--primary); margin-top: 2px; }
.jadwal-tol { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--amber); background: #fef9c3; padding: 3px 9px; border-radius: 100px; border: 1px solid rgba(245,158,11,.2); }

/* ── HISTORY TABLE (Premium) ── */
.history-section { background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* Filter Bar */
.history-filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    padding: 16px 18px 14px;
    background: #fafbff;
    border-bottom: 1px solid var(--border);
}
.hf-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; }
.hf-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.hf-input {
    width: 100%; padding: 8px 12px;
    border: 1.5px solid var(--border); border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--text); background: var(--white); outline: none; transition: all .2s;
}
.hf-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,79,207,.12); }
.hf-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700;
    cursor: pointer; border: none; transition: all .18s; white-space: nowrap;
}
.hf-btn-primary { background: var(--primary); color: white; box-shadow: 0 3px 10px rgba(91,79,207,.25); }
.hf-btn-primary:hover { background: var(--primary-d); transform: translateY(-1px); }
.hf-btn-ghost { background: var(--white); color: var(--muted); border: 1.5px solid var(--border); }
.hf-btn-ghost:hover { background: var(--primary-l); color: var(--primary); border-color: rgba(91,79,207,.3); }
.hf-btn-export { background: #d1fae5; color: #065f46; border: 1.5px solid rgba(16,185,129,.2); }
.hf-btn-export:hover { background: var(--green); color: white; transform: translateY(-1px); }
.hf-btn svg, .hf-btn i { font-size: 11px; }

/* Stats mini strip */
.history-stats-strip {
    display: grid; grid-template-columns: repeat(4,1fr);
    border-bottom: 1px solid var(--border);
}
.hss-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 8px; gap: 2px;
    border-right: 1px solid var(--border); transition: background .15s;
}
.hss-item:last-child { border-right: none; }
.hss-item:hover { background: #fafbff; }
.hss-num { font-size: 20px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.hss-lbl { font-size: 9.5px; font-weight: 700; color: var(--muted2); text-transform: uppercase; letter-spacing: .06em; }
.hss-bar { width: 32px; height: 3px; border-radius: 2px; margin-top: 4px; transition: width 1s; }
.hss-item.c-hadir     .hss-num { color: var(--green); }
.hss-item.c-terlambat .hss-num { color: var(--amber); }
.hss-item.c-izin      .hss-num { color: #7c3aed; }
.hss-item.c-alpha     .hss-num { color: var(--red); }
.hss-item.c-hadir     .hss-bar { background: var(--green); }
.hss-item.c-terlambat .hss-bar { background: var(--amber); }
.hss-item.c-izin      .hss-bar { background: #7c3aed; }
.hss-item.c-alpha     .hss-bar { background: var(--red); }

/* Table header row */
.history-table-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 12px;
    background: linear-gradient(90deg, var(--primary) 0%, #7c3aed 100%);
}
.hth-left { display: flex; align-items: center; gap: 9px; }
.hth-ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.hth-ico svg { width: 15px; height: 15px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hth-title { font-size: 13.5px; font-weight: 800; color: white; }
.hth-badge { background: rgba(255,255,255,.2); color: white; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(255,255,255,.25); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #a7f3d0; display: inline-block; margin-right: 5px; animation: pulse-live 2s infinite; }
@keyframes pulse-live { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)} }

/* DataTable Wrapper */
.table-wrapper { padding: 0 16px 16px; overflow-x: auto; }

/* DataTable overrides */
.dataTables_wrapper .dataTables_filter { padding: 14px 0 8px; }
.dataTables_wrapper .dataTables_filter label { font-size: 13px; font-weight: 600; color: var(--muted); }
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg); border: 1.5px solid var(--border); border-radius: 100px;
    padding: 7px 16px; font-family: inherit; font-size: 13px; color: var(--text);
    transition: all .2s; outline: none; margin-left: 8px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,79,207,.1); }
.dataTables_wrapper .dataTables_length select { border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 13px; outline: none; }
.dataTables_wrapper .dataTables_info { font-size: 12px; color: var(--muted2); font-weight: 500; padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 5px 11px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 600; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary) !important; color: white !important; border: none !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) { background: var(--primary-l) !important; color: var(--primary) !important; border: none !important; }

table.dataTable { width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; }
table.dataTable thead th {
    background: #f8faff !important; color: var(--muted2) !important;
    font-weight: 800 !important; font-size: 10px !important;
    text-transform: uppercase !important; letter-spacing: .06em !important;
    padding: 12px 14px !important; border-bottom: 1px solid var(--border) !important; border-top: none !important;
    white-space: nowrap;
}
table.dataTable tbody td { padding: 12px 14px !important; font-size: 13px; font-weight: 500; color: var(--text); border-bottom: 1px solid #f3f4f6 !important; vertical-align: middle; }
table.dataTable tbody tr:last-child td { border-bottom: none !important; }
table.dataTable tbody tr { transition: background .12s; }
table.dataTable tbody tr:hover td { background-color: #fafbff !important; }

/* Cell styles */
.cell-date { font-weight: 700; }
.cell-date .day-name { display: block; font-size: 10px; font-weight: 700; color: var(--muted2); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 1px; }
.cell-date .date-full { font-size: 13px; }
.time-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.time-chip.in { background: var(--primary-l); color: var(--primary); }
.time-chip.out { background: #d1fae5; color: #065f46; }
.time-chip.empty { background: #f9fafb; color: var(--muted2); }
.time-chip i { font-size: 10px; }

/* Status pills for table */
.s-hadir     { background: #d1fae5; color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.s-terlambat { background: #fef9c3; color: #92400e; border: 1px solid rgba(245,158,11,.2); }
.s-izin      { background: #dbeafe; color: #1e40af; border: 1px solid rgba(59,130,246,.2); }
.s-sakit     { background: #ede9fe; color: #5b21b6; border: 1px solid rgba(139,92,246,.2); }
.s-alpha     { background: #fee2e2; color: #991b1b; border: 1px solid rgba(239,68,68,.2); }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700; }
.status-pill i { font-size: 9px; }

/* Action btn */
.action-btn { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: all .18s; font-size: 12px; }
.action-btn:hover { background: var(--primary-l); border-color: rgba(91,79,207,.3); color: var(--primary); }

/* Empty state */
.empty-state-row td { text-align: center; padding: 48px 24px !important; }
.empty-state-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-icon-wrap { width: 56px; height: 56px; background: #f9fafb; border-radius: 16px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border); }
.empty-icon-wrap i { font-size: 22px; color: var(--muted2); }
.empty-state-inner h4 { font-size: 14px; font-weight: 700; color: var(--text); }
.empty-state-inner p { font-size: 12px; color: var(--muted); }

/* ── DRAWER ── */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(4px); }
.drawer-overlay.open { opacity:1; pointer-events:all; }
.drawer { position:fixed; top:0; left:0; bottom:0; width:280px; background:var(--white); z-index:201; transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:6px 0 32px rgba(0,0,0,.14); }
.drawer.open { transform:translateX(0); }
.drawer-head { background:linear-gradient(140deg,var(--primary),#7c3aed); padding:50px 22px 26px; }
.drawer-ava { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:white; border:2px solid rgba(255,255,255,.3); margin-bottom:12px; }
.drawer-name { font-size:16px; font-weight:800; color:white; }
.drawer-role { font-size:12px; color:rgba(255,255,255,.6); font-weight:600; margin-top:3px; }
.drawer-body { flex:1; padding:12px; overflow-y:auto; }
.drawer-slbl { font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); padding:10px 10px 6px; }
.drawer-item { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px; text-decoration:none; color:var(--text); font-size:13.5px; font-weight:600; margin-bottom:2px; transition:all .15s; }
.drawer-item svg { width:17px; height:17px; flex-shrink:0; color:var(--muted); transition:color .15s; }
.drawer-item:hover, .drawer-item.active { background:var(--primary-l); color:var(--primary); }
.drawer-item.active svg, .drawer-item:hover svg { color:var(--primary); }
.drawer-foot { padding:14px; border-top:1px solid var(--border); }
.logout-btn { width:100%; padding:12px; border-radius:11px; background:#fef2f2; border:1px solid #fecaca; color:var(--red); font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .2s; }
.logout-btn:hover { background:var(--red); color:white; border-color:var(--red); }
.logout-btn svg { width:15px; height:15px; }

/* ── BOTTOM NAV ── */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:var(--bottom-h); background:var(--white); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-around; padding:0 8px 6px; z-index:100; box-shadow:0 -3px 20px rgba(0,0,0,.07); }
.bnav-item { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; text-decoration:none; cursor:pointer; padding:8px 0; }
.bnav-ico svg { width:22px; height:22px; }
.bnav-lbl { font-size:10px; font-weight:700; color:var(--muted2); }
.bnav-lbl.act { color:var(--primary); }
.bnav-center { flex:1; display:flex; flex-direction:column; align-items:center; margin-top:-22px; }
.bnav-center-btn { width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,var(--primary),#7c3aed); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(91,79,207,.45); text-decoration:none; transition:transform .15s; }
.bnav-center-btn svg { width:24px; height:24px; }
.bnav-center-lbl { font-size:10px; font-weight:700; color:var(--primary); margin-top:4px; }

/* ── ANIMATIONS ── */
.fade-in { animation: fi .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes fi { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.d1{animation-delay:.05s} .d2{animation-delay:.1s} .d3{animation-delay:.16s} .d4{animation-delay:.22s} .d5{animation-delay:.28s}

/* ── TOAST ── */
.toast-notif { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:10px 20px; border-radius:100px; font-size:13px; font-weight:700; z-index:9999; white-space:nowrap; animation:toastIn .3s ease; }
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── RESPONSIVE ── */
@media (min-width: 768px) {
    body { overflow-y: auto; }
    .bottom-nav { display: none; }
    .scroll-body { padding-bottom: 0; }
    .topnav { padding: 0; }
    .topnav-inner, .page-wrap { max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; width: 100%; }
    .topnav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
    .page-wrap { padding-top: 24px; padding-bottom: 32px; gap: 16px; }
    .hero-name { font-size: 26px; }
    .stat-grid { gap: 14px; }
    .stat-val  { font-size: 28px; }
    .absen-card { padding: 24px 26px 20px; }
    .ac-time { font-size: 28px; }
    .history-filter-bar { padding: 18px 22px 16px; }
    .table-wrapper { padding: 0 22px 20px; }
    .hss-num { font-size: 22px; }
}
@media (max-width: 600px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .hero-date-badge { display: none; }
    .history-stats-strip { grid-template-columns: repeat(2,1fr); }
    .history-stats-strip .hss-item:nth-child(2) { border-right: none; }
    .history-stats-strip .hss-item:nth-child(3) { border-top: 1px solid var(--border); }
    .history-filter-bar { flex-direction: column; align-items: stretch; }
    .hf-group { min-width: unset; }
}
</style>
<?php $__env->stopPush(); ?>

<?php
    $karyawan       = auth()->user()->karyawan;
    $absensiHariIni = \App\Models\Absensi::where('karyawan_id', $karyawan->id)->whereDate('tanggal', today())->first();
    $totalHadir     = \App\Models\Absensi::where('karyawan_id', $karyawan->id)->whereMonth('tanggal', now()->month)->whereNotNull('jam_masuk')->count();
    $totalTerlambat = \App\Models\Absensi::where('karyawan_id', $karyawan->id)->whereMonth('tanggal', now()->month)->where('status_waktu', 'terlambat')->count();
    $totalTepat     = max(0, $totalHadir - $totalTerlambat);
    $totalIzin      = \App\Models\IzinSakit::where('karyawan_id', $karyawan->id)->whereMonth('created_at', now()->month)->where('status','disetujui')->count();
    $jamKerja       = $karyawan->jamKerja;
    $riwayat        = \App\Models\Absensi::where('karyawan_id', $karyawan->id)->whereMonth('tanggal', now()->month)->latest('tanggal')->get();
    $totalAlpha     = \App\Models\Absensi::where('karyawan_id', $karyawan->id)->whereMonth('tanggal', now()->month)->where('status_waktu', 'alpha')->count();
    $h              = now()->hour;
    $greetingEmoji  = $h < 11 ? '🌤️' : ($h < 15 ? '☀️' : ($h < 18 ? '🌇' : '🌙'));
    $greetingWord   = $h < 11 ? 'Selamat Pagi' : ($h < 15 ? 'Selamat Siang' : ($h < 18 ? 'Selamat Sore' : 'Selamat Malam'));
?>

<div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
    <div class="drawer-head">
        <div class="drawer-ava"><?php echo e(strtoupper(substr(auth()->user()->name,0,1))); ?></div>
        <div class="drawer-name"><?php echo e(auth()->user()->name); ?></div>
        <div class="drawer-role"><?php echo e(ucfirst(auth()->user()->role)); ?> &bull; <?php echo e($karyawan->instansi->nama_instansi ?? '-'); ?></div>
    </div>
    <div class="drawer-body">
        <div class="drawer-slbl">Menu Utama</div>
        <a href="<?php echo e(route('dashboard')); ?>" class="drawer-item active">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
            Dashboard
        </a>
        <a href="<?php echo e(route('karyawan.absensis.index')); ?>" class="drawer-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            Absensi
        </a>
        <div class="drawer-slbl">Pengajuan</div>
        <a href="<?php echo e(route('karyawan.izin-sakit.index')); ?>" class="drawer-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            Izin & Sakit
        </a>
        <a href="<?php echo e(route('karyawan.cuti.index')); ?>" class="drawer-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            Cuti
        </a>
        <a href="<?php echo e(route('karyawan.lembur.index')); ?>" class="drawer-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            Lembur
        </a>
        <div class="drawer-slbl">Lainnya</div>
        <a href="<?php echo e(route('karyawan.absensis.index')); ?>" class="drawer-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
            History
        </a>
    </div>
    <div class="drawer-foot">
        <form method="POST" action="<?php echo e(route('logout')); ?>"><?php echo csrf_field(); ?>
            <button type="submit" class="logout-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                Keluar
            </button>
        </form>
    </div>
</div>

<div class="scroll-body">

    <nav class="topnav">
        <div class="topnav-inner">
            <div class="topnav-left">
                <button class="topnav-hamburger" onclick="openDrawer()"><span></span><span></span><span></span></button>
                <div class="topnav-brand">
                    <div class="topnav-brand-ico"><svg viewBox="0 0 24 24" fill="white"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9l2 2 4-4"/></svg></div>
                    ABSENSI
                </div>
            </div>
            <div class="topnav-avatar" onclick="openDrawer()"><?php echo e(strtoupper(substr(auth()->user()->name,0,1))); ?></div>
        </div>
    </nav>

    <div class="page-wrap">

        <?php if(session('success')): ?>
        <div class="alert-box alert-ok fade-in">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <?php echo e(session('success')); ?>

        </div>
        <?php endif; ?>
        <?php if(session('error')): ?>
        <div class="alert-box alert-err fade-in">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            <?php echo e(session('error')); ?>

        </div>
        <?php endif; ?>

        
        <div class="hero fade-in d1">
            <div class="hero-inner">
                <div>
                    <div class="hero-sub"><?php echo e($greetingEmoji); ?> <?php echo e($greetingWord); ?></div>
                    <div class="hero-name"><?php echo e(auth()->user()->name); ?></div>
                    <div class="hero-meta"><?php echo e($karyawan->jabatan->nama_jabatan ?? 'Karyawan'); ?> &bull; <?php echo e($karyawan->instansi->nama_instansi ?? ''); ?></div>
                </div>
                <div class="hero-date-badge">
                    <span class="hero-date-day"><?php echo e(now()->format('d')); ?></span>
                    <span class="hero-date-mon"><?php echo e(now()->isoFormat('MMM YYYY')); ?></span>
                </div>
            </div>
        </div>

        
        <div class="quick-wrap fade-in d1">
            <div class="quick-lbl">Menu Cepat</div>
            <div class="quick-grid">
                <a href="<?php echo e(route('karyawan.absensis.index')); ?>" class="qi">
                    <div class="qi-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></div>
                    <span class="qi-lbl">Absen</span>
                </a>
                <a href="<?php echo e(route('karyawan.izin-sakit.index')); ?>" class="qi">
                    <div class="qi-icon amber"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
                    <span class="qi-lbl">Izin</span>
                </a>
                <a href="<?php echo e(route('karyawan.cuti.index')); ?>" class="qi">
                    <div class="qi-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
                    <span class="qi-lbl">Cuti</span>
                </a>
                <a href="<?php echo e(route('karyawan.history.index')); ?>" class="qi">
                    <div class="qi-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
                    <span class="qi-lbl">History</span>
                </a>
                <a href="<?php echo e(route('karyawan.lembur.index')); ?>" class="qi">
                    <div class="qi-icon cyan"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
                    <span class="qi-lbl">Lembur</span>
                </a>
            </div>
        </div>

        
        <div class="absen-section fade-in d2">
            <div class="absen-card <?php echo e($absensiHariIni?->jam_masuk ? 'done' : 'masuk'); ?>">
                <div class="ac-label">Absen Masuk</div>
                <?php if($absensiHariIni?->jam_masuk): ?>
                    <div class="ac-time"><?php echo e(\Carbon\Carbon::parse($absensiHariIni->jam_masuk)->format('H:i')); ?></div>
                    <div class="ac-status <?php echo e($absensiHariIni->status_waktu === 'tepat_waktu' ? 'ok' : 'warn'); ?>"><?php echo e($absensiHariIni->status_waktu === 'tepat_waktu' ? '✓ Tepat Waktu' : '⚠ Terlambat '.$absensiHariIni->terlambat_menit.' menit'); ?></div>
                <?php else: ?>
                    <div class="ac-time empty">Belum absen</div>
                    <div class="ac-status">—</div>
                <?php endif; ?>
            </div>
            <div class="absen-card <?php echo e($absensiHariIni?->jam_pulang ? 'done' : 'pulang'); ?>">
                <div class="ac-label">Absen Pulang</div>
                <?php if($absensiHariIni?->jam_pulang): ?>
                    <div class="ac-time"><?php echo e(\Carbon\Carbon::parse($absensiHariIni->jam_pulang)->format('H:i')); ?></div>
                    <div class="ac-status ok">✓ Selesai</div>
                <?php else: ?>
                    <div class="ac-time empty">Belum absen</div>
                    <div class="ac-status"><?php echo e($absensiHariIni?->jam_masuk ? 'Sedang bekerja' : '—'); ?></div>
                <?php endif; ?>
            </div>
        </div>

        
        <div class="fade-in d2">
            <div class="section-head">
                <span class="section-title">Rekap Absensi</span>
                <span class="month-badge"><?php echo e(now()->isoFormat('MMMM YYYY')); ?></span>
            </div>
            <div class="stat-grid">
                <div class="stat-card">
                    <div class="stat-ico blue"><svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
                    <div><div class="stat-val"><?php echo e($totalHadir); ?></div><div class="stat-lbl">Hadir</div></div>
                </div>
                <div class="stat-card">
                    <div class="stat-ico green"><svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
                    <div><div class="stat-val"><?php echo e($totalTepat); ?></div><div class="stat-lbl">Tepat Waktu</div></div>
                </div>
                <div class="stat-card">
                    <div class="stat-ico orange"><svg viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
                    <div><div class="stat-val"><?php echo e($totalIzin); ?></div><div class="stat-lbl">Izin</div></div>
                </div>
                <div class="stat-card">
                    <div class="stat-ico red"><svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
                    <div><div class="stat-val"><?php echo e($totalTerlambat); ?></div><div class="stat-lbl">Terlambat</div></div>
                </div>
            </div>
        </div>

        
        <?php if($jamKerja): ?>
        <div class="fade-in d3">
            <div class="section-head"><span class="section-title">Jadwal Kerja</span></div>
            <div class="jadwal-card">
                <div class="jadwal-ico"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
                <div>
                    <div class="jadwal-name"><?php echo e($karyawan->instansi->nama_instansi ?? 'Instansi'); ?></div>
                    <div class="jadwal-times">
                        <div class="jadwal-time">Masuk<strong><?php echo e(\Carbon\Carbon::parse($jamKerja->jam_masuk)->format('H:i')); ?></strong></div>
                        <div class="jadwal-time">Pulang<strong><?php echo e(\Carbon\Carbon::parse($jamKerja->jam_pulang)->format('H:i')); ?></strong></div>
                    </div>
                    <span class="jadwal-tol">⏱ Toleransi <?php echo e($jamKerja->toleransi_menit); ?> menit</span>
                </div>
            </div>
        </div>
        <?php endif; ?>

      
    
    <nav class="bottom-nav">
        <a href="<?php echo e(route('dashboard')); ?>" class="bnav-item">
            <span class="bnav-ico"><svg viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></span>
            <span class="bnav-lbl act">Home</span>
        </a>
        <a href="<?php echo e(route('karyawan.izin-sakit.index')); ?>" class="bnav-item">
            <span class="bnav-ico"><svg viewBox="0 0 24 24" fill="none" stroke="var(--muted2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></span>
            <span class="bnav-lbl">Izin</span>
        </a>
        <div class="bnav-center">
            <a href="<?php echo e(route('karyawan.absensis.index')); ?>" class="bnav-center-btn"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></a>
            <span class="bnav-center-lbl">Absen</span>
        </div>
        <a href="<?php echo e(route('karyawan.lembur.index')); ?>" class="bnav-item">
            <span class="bnav-ico"><svg viewBox="0 0 24 24" fill="none" stroke="var(--muted2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></span>
            <span class="bnav-lbl">Lembur</span>
        </a>
        <a href="#" class="bnav-item" onclick="openDrawer();return false;">
            <span class="bnav-ico"><svg viewBox="0 0 24 24" fill="none" stroke="var(--muted2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
            <span class="bnav-lbl">Profil</span>
        </a>
    </nav>

</div>

<?php $__env->startPush('scripts'); ?>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
/* ── Drawer ── */
function openDrawer(){document.getElementById('drawer').classList.add('open');document.getElementById('drawerOverlay').classList.add('open');document.body.style.overflow='hidden';}
function closeDrawer(){document.getElementById('drawer').classList.remove('open');document.getElementById('drawerOverlay').classList.remove('open');document.body.style.overflow='';}

/* ── DataTable ── */
var historyDT;
$(function(){
    if($('#historyTable tbody tr.empty-state-row').length) return;
    historyDT = $('#historyTable').DataTable({
        responsive: true,
        language: {
            search: "",
            searchPlaceholder: "🔍  Cari tanggal / status...",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
            infoEmpty: "Tidak ada data",
            paginate: { next: "›", previous: "‹" }
        },
        pageLength: 10,
        order: [[1, 'desc']],
        dom: '<"top"fl>rt<"bottom"ip><"clear">'
    });

    /* Filter by date range */
    $('#btnFilter').click(function(){
        var dari   = $('#filterDari').val();
        var sampai = $('#filterSampai').val();
        if(!dari || !sampai){ showToast('Pilih rentang tanggal terlebih dahulu!'); return; }
        if(new Date(dari) > new Date(sampai)){ showToast('Tanggal awal tidak boleh melebihi tanggal akhir!'); return; }

        historyDT.rows().every(function(){
            var row  = this.node();
            var tgl  = $(row).data('tanggal');
            if(!tgl){ this.nodes().to$().show(); return; }
            var d = new Date(tgl+'T00:00:00');
            var from = new Date(dari+'T00:00:00');
            var to   = new Date(sampai+'T23:59:59');
            $(row).toggle(d >= from && d <= to);
        });
        historyDT.draw();
        showToast('Filter diterapkan ✓');
    });

    $('#btnReset').click(function(){
        $('#filterDari').val('<?php echo e(now()->startOfMonth()->format("Y-m-d")); ?>');
        $('#filterSampai').val('<?php echo e(now()->endOfMonth()->format("Y-m-d")); ?>');
        historyDT.rows().nodes().to$().show();
        historyDT.draw();
        showToast('Filter direset');
    });

    /* Export print */
    $('#btnExport').click(function(){
        var dari   = $('#filterDari').val();
        var sampai = $('#filterSampai').val();
        var win = window.open();
        win.document.write(
            '<html><head><title>Export Absensi</title>' +
            '<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap" rel="stylesheet">' +
            '<style>body{font-family:\'Plus Jakarta Sans\',sans-serif;padding:32px;color:#111827}h2{color:#5b4fcf;margin-bottom:4px}p{color:#6b7280;font-size:13px;margin-bottom:20px}table{border-collapse:collapse;width:100%}th{background:#f8faff;color:#9ca3af;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:2px solid #e5e7eb;text-align:left}td{padding:10px 12px;border-bottom:1px solid #f3f4f6;font-size:13px}.dataTables_filter,.dataTables_length,.dataTables_info,.dataTables_paginate{display:none}</style>' +
            '</head><body>' +
            '<h2>History Absensi — <?php echo e(auth()->user()->name); ?></h2>' +
            '<p>Periode: '+dari+' s/d '+sampai+' &nbsp;·&nbsp; Dicetak: '+new Date().toLocaleString('id-ID')+'</p>' +
            document.querySelector('.table-wrapper').innerHTML +
            '</body></html>'
        );
        win.document.close();
        setTimeout(function(){ win.print(); }, 500);
        showToast('Membuka dialog print...');
    });
});

/* ── Detail action ── */
function showDetail(btn){
    var id = $(btn).data('id');
    showToast('Detail absensi #'+id+' — segera hadir 📋');
}

/* ── Toast ── */
function showToast(msg){
    var old = document.querySelector('.toast-notif');
    if(old) old.remove();
    var t = document.createElement('div');
    t.className = 'toast-notif';
    t.textContent = msg;
    document.body.appendChild(t);
    setTimeout(function(){ t.remove(); }, 2400);
}
</script>
<?php $__env->stopPush(); ?>.

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\absen_gw\resources\views/karyawan/dashboard.blade.php ENDPATH**/ ?>