<?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' => 'Cuti Saya']); ?>
<?php $__env->startPush('styles'); ?>
<style>
.wrap{max-width:720px;margin:0 auto;padding:28px 16px 80px;}

/* header */
.pg-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.pg-ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#7c3aed,#a78bfa);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(124,58,237,.25);flex-shrink:0;}
.pg-ico svg{width:22px;height:22px;stroke:white;}
.pg-title{font-size:1.3rem;font-weight:900;color:var(--text);letter-spacing:-.03em;}
.pg-sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;}

/* flash */
.flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;margin-bottom:18px;font-size:13px;font-weight:700;}
.flash svg{width:14px;height:14px;flex-shrink:0;}
.flash-ok{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;}
.flash-ok svg{stroke:#059669;}
.flash-err{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
.flash-err svg{stroke:#dc2626;}

/* jatah card */
.jatah-card{background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:20px;padding:20px 24px;margin-bottom:18px;display:flex;align-items:center;gap:18px;box-shadow:0 8px 24px rgba(124,58,237,.3);}
.jatah-ico{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.jatah-ico svg{width:24px;height:24px;stroke:white;}
.jatah-info{flex:1;}
.jatah-tahun{font-size:12px;font-weight:700;color:rgba(255,255,255,.65);margin-bottom:4px;}
.jatah-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.jatah-num{font-size:2rem;font-weight:900;color:white;letter-spacing:-.04em;line-height:1;}
.jatah-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;}
.jatah-sep{width:1px;height:32px;background:rgba(255,255,255,.2);flex-shrink:0;}
.jatah-bar-wrap{margin-top:10px;height:6px;background:rgba(255,255,255,.2);border-radius:100px;overflow:hidden;}
.jatah-bar-fill{height:100%;border-radius:100px;background:white;}

/* stat row */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.stat{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--sh);position:relative;overflow:hidden;}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;}
.stat.sp::before{background:linear-gradient(90deg,var(--warning,#d97706),#fbbf24);}
.stat.ss::before{background:linear-gradient(90deg,var(--success,#059669),#34d399);}
.stat.sr::before{background:linear-gradient(90deg,var(--danger,#dc2626),#f87171);}
.stat-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:4px;}
.stat-val{font-size:1.5rem;font-weight:900;letter-spacing:-.04em;line-height:1;}
.stat-val.cp{color:var(--warning,#d97706);}.stat-val.cs{color:var(--success,#059669);}.stat-val.cr{color:var(--danger,#dc2626);}

/* btn */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:100px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;border:none;text-decoration:none;transition:all .18s;white-space:nowrap;}
.btn svg{width:13px;height:13px;stroke:currentColor;}
.btn-primary{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:white;box-shadow:0 4px 14px rgba(124,58,237,.25);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(124,58,237,.35);}
.btn-ghost{background:var(--white,#fff);color:var(--muted,#64748b);border:1.5px solid var(--border,#e2e8f0);}
.btn-ghost:hover{background:#f8fafc;color:var(--text,#0f172a);}
.btn-sm{padding:7px 14px;font-size:12.5px;}

/* panel */
.panel{background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);border-radius:20px;overflow:hidden;box-shadow:var(--sh);}
.panel-hd{padding:15px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;}
.panel-hd-title{font-size:13.5px;font-weight:800;color:var(--text,#0f172a);}
.panel-hd-cnt{background:#f1f5f9;color:var(--muted,#64748b);font-size:11px;font-weight:700;padding:2px 9px;border-radius:100px;}

/* cuti item */
.cuti-item{display:flex;align-items:flex-start;gap:14px;padding:15px 20px;border-bottom:1px solid #f8f9fc;transition:background .12s;text-decoration:none;color:inherit;}
.cuti-item:last-child{border-bottom:none;}
.cuti-item:hover{background:#fafbff;}
.cuti-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cuti-ico svg{width:18px;height:18px;}
.ci-violet{background:#ede9fe;border:1px solid #ddd6fe;} .ci-violet svg{stroke:#7c3aed;}
.ci-sky{background:#e0f2fe;border:1px solid #bae6fd;} .ci-sky svg{stroke:#0284c7;}
.ci-pink{background:#fce7f3;border:1px solid #f9a8d4;} .ci-pink svg{stroke:#db2777;}
.ci-amber{background:#fef3c7;border:1px solid #fde68a;} .ci-amber svg{stroke:#d97706;}
.ci-slate{background:#f1f5f9;border:1px solid #e2e8f0;} .ci-slate svg{stroke:#64748b;}
.cuti-body{flex:1;min-width:0;}
.cuti-jenis{font-size:13.5px;font-weight:800;color:var(--text,#0f172a);margin-bottom:3px;}
.cuti-date{font-size:12.5px;color:var(--muted,#64748b);font-weight:500;}
.cuti-ket{font-size:12px;color:#94a3b8;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.cuti-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.cuti-dur{font-size:11.5px;font-weight:700;color:var(--muted,#64748b);}

/* badge */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:700;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.bp{background:#fffbeb;color:#d97706;border:1px solid #fde68a;} .bp::before{background:#d97706;}
.bs{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;} .bs::before{background:#059669;}
.br{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;} .br::before{background:#dc2626;}

/* empty */
.empty{padding:52px 20px;text-align:center;}
.empty svg{stroke:#e2e8f0;margin-bottom:12px;}
.empty p{font-size:13px;color:#94a3b8;font-weight:600;margin-bottom:16px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fu1{animation:fadeUp .35s ease both;}
.fu2{animation:fadeUp .35s .06s ease both;}
.fu3{animation:fadeUp .35s .12s ease both;}
@media(max-width:480px){.stat-row{grid-template-columns:repeat(3,1fr);gap:8px;}.jatah-row{gap:10px;}}
</style>
<?php $__env->stopPush(); ?>

<?php
$pending   = $cutis->where('status','pending')->count();
$disetujui = $cutis->where('status','disetujui')->count();
$ditolak   = $cutis->where('status','ditolak')->count();
$pct       = $jatah->jatah_hari > 0 ? round(($jatah->terpakai_hari / $jatah->jatah_hari) * 100) : 0;
$icoMap = ['tahunan'=>'ci-violet','besar'=>'ci-sky','melahirkan'=>'ci-pink','penting'=>'ci-amber','lainnya'=>'ci-slate'];
?>

<div class="wrap">

    
    <div class="pg-hd fu1">
        <div style="display:flex;align-items:center;gap:12px;">
            <div class="pg-ico">
                <svg viewBox="0 0 24 24" fill="none" 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"/><path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"/></svg>
            </div>
            <div>
                <div class="pg-title">Cuti Saya</div>
                <div class="pg-sub">Kelola pengajuan cuti kamu</div>
            </div>
        </div>
        <a href="<?php echo e(route('dashboard')); ?>" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            Kembali
        </a>
    </div>

    
    <?php if(session('success')): ?>
    <div class="flash flash-ok fu1">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" 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>
        <?php echo e(session('success')); ?>

    </div>
    <?php endif; ?>

    
    <div class="jatah-card fu1">
        <div class="jatah-ico">
            <svg viewBox="0 0 24 24" fill="none" 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>
        </div>
        <div class="jatah-info">
            <div class="jatah-tahun">Jatah Cuti Tahunan <?php echo e(now()->year); ?></div>
            <div class="jatah-row">
                <div>
                    <div class="jatah-num"><?php echo e($jatah->sisa_hari); ?></div>
                    <div class="jatah-lbl">Hari Tersisa</div>
                </div>
                <div class="jatah-sep"></div>
                <div>
                    <div class="jatah-num"><?php echo e($jatah->terpakai_hari); ?></div>
                    <div class="jatah-lbl">Terpakai</div>
                </div>
                <div class="jatah-sep"></div>
                <div>
                    <div class="jatah-num"><?php echo e($jatah->jatah_hari); ?></div>
                    <div class="jatah-lbl">Total Jatah</div>
                </div>
            </div>
            <div class="jatah-bar-wrap">
                <div class="jatah-bar-fill" style="width:<?php echo e($pct); ?>%;"></div>
            </div>
        </div>
    </div>

    
    <div class="stat-row fu2">
        <div class="stat sp"><div class="stat-lbl">Pending</div><div class="stat-val cp"><?php echo e($pending); ?></div></div>
        <div class="stat ss"><div class="stat-lbl">Disetujui</div><div class="stat-val cs"><?php echo e($disetujui); ?></div></div>
        <div class="stat sr"><div class="stat-lbl">Ditolak</div><div class="stat-val cr"><?php echo e($ditolak); ?></div></div>
    </div>

    
    <div class="fu2" style="margin-bottom:16px;">
        <a href="<?php echo e(route('karyawan.cuti.create')); ?>" class="btn btn-primary">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Ajukan Cuti
        </a>
    </div>

    
    <div class="panel fu3">
        <div class="panel-hd">
            <span class="panel-hd-title">Riwayat Pengajuan</span>
            <span class="panel-hd-cnt"><?php echo e($cutis->count()); ?></span>
        </div>

        <?php $__empty_1 = true; $__currentLoopData = $cutis; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <?php
            $icoClass = $icoMap[$c->jenis] ?? 'ci-slate';
            $mulai    = \Carbon\Carbon::parse($c->tanggal_mulai);
            $selesai  = \Carbon\Carbon::parse($c->tanggal_selesai);
        ?>
        <a href="<?php echo e(route('karyawan.cuti.show', $c->id)); ?>" class="cuti-item">
            <div class="cuti-ico <?php echo e($icoClass); ?>">
                <svg viewBox="0 0 24 24" fill="none" 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>
            </div>
            <div class="cuti-body">
                <div class="cuti-jenis"><?php echo e($c->jenis_label); ?></div>
                <div class="cuti-date">
                    <?php echo e($mulai->format('d M Y')); ?>

                    <?php if($mulai->ne($selesai)): ?> &mdash; <?php echo e($selesai->format('d M Y')); ?> <?php endif; ?>
                </div>
                <?php if($c->keterangan): ?>
                <div class="cuti-ket"><?php echo e($c->keterangan); ?></div>
                <?php endif; ?>
            </div>
            <div class="cuti-right">
                <span class="badge <?php echo e($c->status==='pending'?'bp':($c->status==='disetujui'?'bs':'br')); ?>">
                    <?php echo e(ucfirst($c->status)); ?>

                </span>
                <span class="cuti-dur"><?php echo e($c->durasi_hari); ?> hari</span>
            </div>
        </a>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <div class="empty">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="1.3" 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>
            <p>Belum ada pengajuan cuti</p>
            <a href="<?php echo e(route('karyawan.cuti.create')); ?>" class="btn btn-primary" style="display:inline-flex;">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Ajukan Sekarang
            </a>
        </div>
        <?php endif; ?>
    </div>

</div>
 <?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/cuti/index.blade.php ENDPATH**/ ?>