<x-app-layout title="Detail Lembur">
@push('styles')
<style>
.wrap{max-width:560px;margin:0 auto;padding:28px 16px 80px;}

.back-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted,#64748b);text-decoration:none;margin-bottom:18px;padding:7px 14px;background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);border-radius:10px;transition:all .15s;}
.back-btn:hover{color:#4f46e5;border-color:#ddd6fe;background:#ede9fe;}
.back-btn svg{width:14px;height:14px;stroke:currentColor;}

/* HEADER CARD */
.detail-hero{background:linear-gradient(135deg,#3730a3,#4f46e5,#a78bfa);border-radius:20px;padding:24px 28px;margin-bottom:18px;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(79,70,229,.3);}
.detail-hero::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);top:-60px;right:-40px;}
.detail-hero::after{content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-30px;right:100px;}
.dh-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.dh-ico{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dh-ico svg{width:22px;height:22px;stroke:white;}
.dh-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:800;}
.dh-badge.pending{background:rgba(253,224,71,.2);color:#fef08a;border:1px solid rgba(253,224,71,.3);}
.dh-badge.disetujui{background:rgba(52,211,153,.2);color:#6ee7b7;border:1px solid rgba(52,211,153,.3);}
.dh-badge.ditolak{background:rgba(248,113,113,.2);color:#fca5a5;border:1px solid rgba(248,113,113,.3);}
.dh-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.dh-tanggal{font-size:1.3rem;font-weight:900;color:white;letter-spacing:-.02em;margin-bottom:4px;}
.dh-jam{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:6px;}
.dh-jam svg{width:13px;height:13px;stroke:rgba(255,255,255,.7);}
.dh-durasi{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:700;color:white;}
.dh-durasi svg{width:13px;height:13px;stroke:rgba(255,255,255,.8);}

/* INFO PANEL */
.panel{background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);border-radius:18px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:14px;}
.panel-hd{padding:14px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:9px;}
.panel-hd svg{width:15px;height:15px;stroke:#4f46e5;flex-shrink:0;}
.panel-hd-title{font-size:13px;font-weight:800;color:var(--text,#0f172a);}

.info-row{display:flex;align-items:flex-start;gap:14px;padding:13px 20px;border-bottom:1px solid #f8f9fc;}
.info-row:last-child{border-bottom:none;}
.info-ico{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.info-ico svg{width:15px;height:15px;}
.ico-cy{background:#ede9fe;} .ico-cy svg{stroke:#4f46e5;}
.ico-sl{background:#f1f5f9;} .ico-sl svg{stroke:#64748b;}
.ico-ok{background:#ecfdf5;} .ico-ok svg{stroke:#059669;}
.ico-wr{background:#fef9c3;} .ico-wr svg{stroke:#d97706;}
.ico-er{background:#fef2f2;} .ico-er svg{stroke:#dc2626;}
.info-label{font-size:10.5px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}
.info-val{font-size:13.5px;font-weight:700;color:var(--text,#0f172a);}
.info-val.muted{color:#64748b;font-weight:500;}

/* STATUS PANEL */
.status-panel{border-radius:14px;padding:16px 20px;margin-bottom:14px;display:flex;align-items:flex-start;gap:14px;}
.status-panel.pending{background:#fffbeb;border:1.5px solid #fde68a;}
.status-panel.disetujui{background:#ecfdf5;border:1.5px solid #a7f3d0;}
.status-panel.ditolak{background:#fef2f2;border:1.5px solid #fecaca;}
.sp-ico{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sp-ico svg{width:17px;height:17px;}
.pending .sp-ico{background:#fef3c7;} .pending .sp-ico svg{stroke:#d97706;}
.disetujui .sp-ico{background:#d1fae5;} .disetujui .sp-ico svg{stroke:#059669;}
.ditolak .sp-ico{background:#fee2e2;} .ditolak .sp-ico svg{stroke:#dc2626;}
.sp-title{font-size:13px;font-weight:800;margin-bottom:2px;}
.pending .sp-title{color:#92400e;}
.disetujui .sp-title{color:#065f46;}
.ditolak .sp-title{color:#991b1b;}
.sp-sub{font-size:12px;font-weight:500;}
.pending .sp-sub{color:#b45309;}
.disetujui .sp-sub{color:#047857;}
.ditolak .sp-sub{color:#b91c1c;}

/* ACTIONS */
.action-row{display:flex;gap:10px;margin-top:4px;}
.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;}
.btn svg{width:13px;height:13px;stroke:currentColor;}
.btn-ghost{background:var(--white,#fff);color:var(--muted,#64748b);border:1.5px solid var(--border,#e2e8f0);}
.btn-ghost:hover{background:#f8fafc;}
.btn-sm{padding:7px 16px;font-size:12.5px;}

@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;}
</style>
@endpush

@php
    $jam   = intdiv($lembur->durasi_menit, 60);
    $menit = $lembur->durasi_menit % 60;
    $dur   = ($jam > 0 ? $jam.' jam' : '') . ($menit > 0 ? ' '.$menit.' menit' : '');
    $statusClass = $lembur->status; // pending / disetujui / ditolak
@endphp

<div class="wrap">

    <a href="{{ route('karyawan.lembur.index') }}" class="back-btn fu1">
        <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>

    {{-- HERO --}}
    <div class="detail-hero fu1">
        <div class="dh-top">
            <div class="dh-ico">
                <svg viewBox="0 0 24 24" fill="none" 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="dh-badge {{ $statusClass }}">
                {{ ucfirst($statusClass) }}
            </span>
        </div>
        <div class="dh-tanggal">{{ \Carbon\Carbon::parse($lembur->tanggal)->isoFormat('dddd, D MMMM YYYY') }}</div>
        <div class="dh-jam">
            <svg viewBox="0 0 24 24" fill="none" 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>
            {{ \Carbon\Carbon::parse($lembur->jam_mulai)->format('H:i') }} – {{ \Carbon\Carbon::parse($lembur->jam_selesai)->format('H:i') }} WIB
        </div>
        <div>
            <span class="dh-durasi">
                <svg viewBox="0 0 24 24" fill="none" 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>
                {{ trim($dur) }}
            </span>
        </div>
    </div>

    {{-- STATUS PANEL --}}
    <div class="status-panel {{ $statusClass }} fu2">
        <div class="sp-ico">
            @if($statusClass === 'disetujui')
                <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>
            @elseif($statusClass === 'ditolak')
                <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="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            @else
                <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"/><polyline points="12 6 12 12 16 14"/></svg>
            @endif
        </div>
        <div>
            <div class="sp-title">
                @if($statusClass === 'disetujui') Lembur Disetujui
                @elseif($statusClass === 'ditolak') Lembur Ditolak
                @else Menunggu Persetujuan @endif
            </div>
            <div class="sp-sub">
                @if($statusClass === 'disetujui')
                    Disetujui oleh {{ $lembur->approver->name ?? 'Admin' }}
                    @if($lembur->updated_at) · {{ \Carbon\Carbon::parse($lembur->updated_at)->isoFormat('D MMM YYYY, H:mm') }} @endif
                @elseif($statusClass === 'ditolak')
                    Ditolak oleh {{ $lembur->approver->name ?? 'Admin' }}
                    @if($lembur->updated_at) · {{ \Carbon\Carbon::parse($lembur->updated_at)->isoFormat('D MMM YYYY, H:mm') }} @endif
                @else
                    Pengajuan sedang diproses oleh instansi
                @endif
            </div>
            @if($lembur->catatan_admin)
            <div style="margin-top:8px;font-size:12px;font-weight:600;padding:8px 12px;background:rgba(0,0,0,.05);border-radius:8px;">
                💬 "{{ $lembur->catatan_admin }}"
            </div>
            @endif
        </div>
    </div>

    {{-- DETAIL INFO --}}
    <div class="panel fu3">
        <div class="panel-hd">
            <svg viewBox="0 0 24 24" fill="none" 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 class="panel-hd-title">Detail Lembur</span>
        </div>

        <div class="info-row">
            <div class="info-ico ico-cy">
                <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>
                <div class="info-label">Tanggal Lembur</div>
                <div class="info-val">{{ \Carbon\Carbon::parse($lembur->tanggal)->isoFormat('dddd, D MMMM YYYY') }}</div>
            </div>
        </div>

        <div class="info-row">
            <div class="info-ico ico-cy">
                <svg viewBox="0 0 24 24" fill="none" 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="info-label">Jam Lembur</div>
                <div class="info-val">{{ \Carbon\Carbon::parse($lembur->jam_mulai)->format('H:i') }} – {{ \Carbon\Carbon::parse($lembur->jam_selesai)->format('H:i') }} WIB</div>
            </div>
        </div>

        <div class="info-row">
            <div class="info-ico ico-cy">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><line x1="14.5" y1="18" x2="19" y2="18"/><line x1="19" y1="15" x2="19" y2="21"/></svg>
            </div>
            <div>
                <div class="info-label">Total Durasi</div>
                <div class="info-val" style="color:#4f46e5;">{{ trim($dur) }}</div>
            </div>
        </div>

        <div class="info-row">
            <div class="info-ico ico-sl">
                <svg viewBox="0 0 24 24" fill="none" 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>
            <div>
                <div class="info-label">Keterangan Pekerjaan</div>
                <div class="info-val" style="font-weight:500;line-height:1.6;">{{ $lembur->keterangan ?? '—' }}</div>
            </div>
        </div>

        <div class="info-row">
            <div class="info-ico ico-sl">
                <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>
                <div class="info-label">Tanggal Pengajuan</div>
                <div class="info-val">{{ \Carbon\Carbon::parse($lembur->created_at)->isoFormat('D MMMM YYYY, H:mm') }} WIB</div>
            </div>
        </div>
    </div>

    <div class="fu3" style="display:flex;justify-content:flex-end;">
        <a href="{{ route('karyawan.lembur.index') }}" 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 ke Daftar
        </a>
    </div>

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