<x-app-layout title="Izin & Sakit">

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
    --p:    #4f46e5;
    --pd:   #3730a3;
    --pl:   #eef2ff;
    --pm:   rgba(79,70,229,.12);
    --ok:   #059669;
    --okl:  #ecfdf5;
    --err:  #dc2626;
    --errl: #fef2f2;
    --warn: #d97706;
    --warnl:#fffbeb;
    --txt:  #0f172a;
    --mut:  #64748b;
    --mut2: #94a3b8;
    --bdr:  #e2e8f0;
    --bg:   #f0f4ff;
    --bg2:  #f8fafc;
    --wh:   #ffffff;
    --sh:   0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
    --sh2:  0 8px 32px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);
    --r:14px; --rs:9px; --rl:20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--txt);}

.pg{max-width:700px;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:24px;}
.pg-hd-l{display:flex;align-items:center;gap:12px;}
.pg-ico{width:46px;height:46px;border-radius:var(--r);background:linear-gradient(135deg,#f59e0b,#f97316);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(245,158,11,.25);flex-shrink:0;}
.pg-ico svg{width:22px;height:22px;stroke:white;}
.pg-title{font-size:1.3rem;font-weight:900;color:var(--txt);letter-spacing:-.03em;}
.pg-sub{font-size:.82rem;color:var(--mut);font-weight:500;margin-top:2px;}

/* alert */
.alert{display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:var(--r);margin-bottom:20px;font-size:.875rem;font-weight:600;}
.alert-ok{background:var(--okl);color:var(--ok);border:1px solid #a7f3d0;}
.alert-ok svg{width:15px;height:15px;stroke:var(--ok);flex-shrink:0;}
.alert-err{background:var(--errl);color:var(--err);border:1px solid #fecaca;}
.alert-err svg{width:15px;height:15px;stroke:var(--err);flex-shrink:0;}

/* btn */
.btn-primary{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--rs);background:var(--p);color:white;border:none;font-size:.875rem;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:0 2px 10px var(--pm);transition:all .2s;white-space:nowrap;}
.btn-primary svg{width:15px;height:15px;stroke:white;}
.btn-primary:hover{background:var(--pd);transform:translateY(-1px);}

.btn-back{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--rs);background:var(--wh);color:var(--mut);border:1.5px solid var(--bdr);font-size:.82rem;font-weight:600;text-decoration:none;transition:all .2s;}
.btn-back svg{width:13px;height:13px;stroke:currentColor;}
.btn-back:hover{background:var(--bg2);color:var(--txt);}

/* card */
.card{background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden;margin-bottom:16px;}

/* stat row */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.stat{background:var(--wh);border:1px solid var(--bdr);border-radius:var(--r);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:var(--r) var(--r) 0 0;}
.stat.sp::before{background:linear-gradient(90deg,var(--warn),#fbbf24);}
.stat.ss::before{background:linear-gradient(90deg,var(--ok),#34d399);}
.stat.se::before{background:linear-gradient(90deg,var(--err),#f87171);}
.stat-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mut2);margin-bottom:4px;}
.stat-val{font-size:1.6rem;font-weight:900;color:var(--txt);letter-spacing:-.04em;line-height:1;}
.stat-sub{font-size:.72rem;color:var(--mut);font-weight:500;margin-top:2px;}

/* izin item */
.izin-item{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-bottom:1px solid #f1f5f9;transition:background .12s;text-decoration:none;color:inherit;}
.izin-item:last-child{border-bottom:none;}
.izin-item:hover{background:#fafbff;}
.izin-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.izin-icon svg{width:18px;height:18px;}
.izin-icon.ji{background:#fffbeb;border:1px solid #fde68a;}
.izin-icon.ji svg{stroke:#d97706;}
.izin-icon.js{background:#eff6ff;border:1px solid #bfdbfe;}
.izin-icon.js svg{stroke:#3b82f6;}
.izin-body{flex:1;min-width:0;}
.izin-title{font-size:.9rem;font-weight:700;color:var(--txt);margin-bottom:3px;}
.izin-date{font-size:.78rem;color:var(--mut);font-weight:500;}
.izin-ket{font-size:.78rem;color:var(--mut2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.izin-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.izin-dur{font-size:.72rem;font-weight:700;color:var(--mut2);}

/* badge status */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:.72rem;font-weight:700;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.badge-pending{background:var(--warnl);color:var(--warn);border:1px solid #fde68a;}
.badge-pending::before{background:var(--warn);}
.badge-disetujui{background:var(--okl);color:var(--ok);border:1px solid #a7f3d0;}
.badge-disetujui::before{background:var(--ok);}
.badge-ditolak{background:var(--errl);color:var(--err);border:1px solid #fecaca;}
.badge-ditolak::before{background:var(--err);}

/* empty */
.empty{padding:52px 24px;text-align:center;}
.empty svg{stroke:#dde3ef;margin-bottom:14px;}
.empty-title{font-size:.95rem;font-weight:700;color:var(--mut2);margin-bottom:6px;}
.empty-sub{font-size:.82rem;color:var(--mut2);font-weight:400;margin-bottom:18px;}

/* card header */
.card-hd{padding:16px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;}
.card-hd-title{font-size:.88rem;font-weight:800;color:var(--txt);}
.card-hd-cnt{background:var(--pl);color:var(--p);font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:100px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fu1{animation:fadeUp .35s .00s ease both;}
.fu2{animation:fadeUp .35s .06s ease both;}
.fu3{animation:fadeUp .35s .12s ease both;}

@media(max-width:600px){
    .stat-row{grid-template-columns:repeat(3,1fr);gap:8px;}
    .stat-val{font-size:1.3rem;}
    .pg-hd{flex-direction:column;align-items:flex-start;}
    .btn-primary{width:100%;justify-content:center;}
    .izin-ket{max-width:160px;}
}
</style>
@endpush

<div class="pg">

    {{-- Header --}}
    <div class="pg-hd fu1">
        <div class="pg-hd-l">
            <div class="pg-ico">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                </svg>
            </div>
            <div>
                <h1 class="pg-title">Izin & Sakit</h1>
                <p class="pg-sub">Kelola pengajuan izin dan sakit kamu</p>
            </div>
        </div>
        <a href="{{ route('dashboard') }}" class="btn-back">
            <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>

    {{-- Alert --}}
    @if(session('success'))
    <div class="alert alert-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>
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="alert alert-err fu1">
        <svg viewBox="0 0 24 24" fill="none" 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>
        {{ session('error') }}
    </div>
    @endif

    {{-- Statistik --}}
    @php
        $pending   = $izinSakits->where('status','pending')->count();
        $disetujui = $izinSakits->where('status','disetujui')->count();
        $ditolak   = $izinSakits->where('status','ditolak')->count();
    @endphp
    <div class="stat-row fu2">
        <div class="stat sp">
            <div class="stat-lbl">Pending</div>
            <div class="stat-val">{{ $pending }}</div>
            <div class="stat-sub">Menunggu</div>
        </div>
        <div class="stat ss">
            <div class="stat-lbl">Disetujui</div>
            <div class="stat-val">{{ $disetujui }}</div>
            <div class="stat-sub">Approved</div>
        </div>
        <div class="stat se">
            <div class="stat-lbl">Ditolak</div>
            <div class="stat-val">{{ $ditolak }}</div>
            <div class="stat-sub">Rejected</div>
        </div>
    </div>

    {{-- Tombol Ajukan --}}
    <div class="fu2" style="margin-bottom:16px;">
        <a href="{{ route('karyawan.izin-sakit.create') }}" class="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 Izin / Sakit
        </a>
    </div>

    {{-- Daftar --}}
    <div class="card fu3">
        <div class="card-hd">
            <span class="card-hd-title">Riwayat Pengajuan</span>
            <span class="card-hd-cnt">{{ $izinSakits->count() }}</span>
        </div>

        @forelse($izinSakits as $item)
        @php
            $mulai    = \Carbon\Carbon::parse($item->tanggal_mulai);
            $selesai  = \Carbon\Carbon::parse($item->tanggal_selesai);
            $durasi   = $mulai->diffInDays($selesai) + 1;
            $isIzin   = $item->jenis === 'izin';
        @endphp
        <a href="{{ route('karyawan.izin-sakit.show', $item->id) }}" class="izin-item">
            <div class="izin-icon {{ $isIzin ? 'ji' : 'js' }}">
                @if($isIzin)
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                @else
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                @endif
            </div>
            <div class="izin-body">
                <div class="izin-title">{{ $isIzin ? 'Izin' : 'Sakit' }}</div>
                <div class="izin-date">
                    {{ $mulai->format('d M Y') }}
                    @if($mulai->ne($selesai)) — {{ $selesai->format('d M Y') }} @endif
                </div>
                @if($item->keterangan)
                <div class="izin-ket">{{ $item->keterangan }}</div>
                @endif
            </div>
            <div class="izin-right">
                <span class="badge badge-{{ $item->status }}">{{ ucfirst($item->status) }}</span>
                <span class="izin-dur">{{ $durasi }} hari</span>
            </div>
        </a>
        @empty
        <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">
                <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
            </svg>
            <div class="empty-title">Belum ada pengajuan</div>
            <div class="empty-sub">Kamu belum pernah mengajukan izin atau sakit.</div>
            <a href="{{ route('karyawan.izin-sakit.create') }}" class="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>
        @endforelse
    </div>

</div>
</x-app-layout>