<x-app-layout title="Detail Pengajuan">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
    :root{--ink:#0f172a;--mut:#64748b;--mut2:#94a3b8;--bdr:#e2e8f0;--bg:#f0f4ff;--wh:#ffffff;--bg2:#f8fafc;--p:#4f46e5;--pl:#eef2ff;--ok:#059669;--okl:#ecfdf5;--err:#dc2626;--errl:#fef2f2;--warn:#d97706;--warnl:#fffbeb;--blue:#3b82f6;--bluel:#eff6ff;--sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);--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(--ink);}

    .pg{max-width:600px;margin:0 auto;padding:28px 16px 80px;}

    /* back */
    .back-link{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--mut);text-decoration:none;margin-bottom:20px;padding:7px 13px;border-radius:var(--rs);border:1.5px solid var(--bdr);background:var(--wh);transition:all .18s;}
    .back-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
    .back-link:hover{color:var(--ink);background:var(--bg2);}

    /* hero */
    .hero{background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--sh);padding:28px 24px;margin-bottom:14px;text-align:center;animation:fadeUp .35s ease both;}
    .hero-ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
    .hero-ico svg{width:28px;height:28px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .hero-ico.izin{background:var(--warnl);border:2px solid #fde68a;}
    .hero-ico.izin svg{stroke:var(--warn);}
    .hero-ico.sakit{background:var(--bluel);border:2px solid #bfdbfe;}
    .hero-ico.sakit svg{stroke:var(--blue);}
    .hero-jenis{font-size:1.4rem;font-weight:900;color:var(--ink);letter-spacing:-.03em;margin-bottom:6px;}
    .hero-date{font-size:.9rem;color:var(--mut);font-weight:500;margin-bottom:14px;}
    .hero-dur{display:inline-flex;align-items:center;gap:6px;background:var(--pl);color:var(--p);font-size:.82rem;font-weight:700;padding:5px 14px;border-radius:100px;margin-bottom:16px;}

    /* badge */
    .badge{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:100px;font-size:.8rem;font-weight:700;}
    .badge::before{content:'';width:7px;height:7px;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);}

    /* info card */
    .info-card{background:var(--wh);border:1px solid var(--bdr);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden;margin-bottom:14px;animation:fadeUp .35s .06s ease both;}
    .info-card-hd{padding:14px 20px;border-bottom:1px solid var(--bdr);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--mut2);}
    .info-row{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-bottom:1px solid #f1f5f9;}
    .info-row:last-child{border-bottom:none;}
    .info-ico{width:32px;height:32px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .info-ico svg{width:14px;height:14px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .info-lbl{font-size:.72rem;color:var(--mut2);font-weight:600;margin-bottom:2px;}
    .info-val{font-size:.875rem;font-weight:600;color:var(--ink);}
    .info-val.mut{color:var(--mut);font-weight:400;font-style:italic;}

    /* bukti */
    .bukti-link{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--rs);background:var(--pl);color:var(--p);font-size:.82rem;font-weight:700;text-decoration:none;border:1px solid #c7d2fe;transition:all .18s;margin-top:2px;}
    .bukti-link svg{width:13px;height:13px;stroke:var(--p);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
    .bukti-link:hover{background:#e0e7ff;}

    /* pending banner */
    .pending-banner{background:var(--warnl);border:1px solid #fde68a;border-radius:var(--r);padding:14px 18px;margin-bottom:14px;display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:var(--warn);animation:fadeUp .35s .12s ease both;}
    .pending-banner svg{width:16px;height:16px;stroke:var(--warn);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

    @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
</style>

<div class="pg">

    <a href="{{ route('karyawan.izin-sakit.index') }}" class="back-link">
        <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
        Kembali ke Daftar
    </a>

    @php
        $mulai   = \Carbon\Carbon::parse($izinSakit->tanggal_mulai);
        $selesai = \Carbon\Carbon::parse($izinSakit->tanggal_selesai);
        $durasi  = $mulai->diffInDays($selesai) + 1;
        $isIzin  = $izinSakit->jenis === 'izin';
    @endphp

    {{-- Hero --}}
    <div class="hero">
        <div class="hero-ico {{ $isIzin ? 'izin' : 'sakit' }}">
            @if($isIzin)
            <svg viewBox="0 0 24 24"><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"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
            @endif
        </div>
        <div class="hero-jenis">{{ $isIzin ? 'Izin' : 'Sakit' }}</div>
        <div class="hero-date">
            {{ $mulai->format('d M Y') }}
            @if($mulai->ne($selesai)) &mdash; {{ $selesai->format('d M Y') }} @endif
        </div>
        <div class="hero-dur">
            <svg viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><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>
            {{ $durasi }} hari
        </div>
        <span class="badge badge-{{ $izinSakit->status }}">{{ ucfirst($izinSakit->status) }}</span>
    </div>

    {{-- Pending banner --}}
    @if($izinSakit->status === 'pending')
    <div class="pending-banner">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        Pengajuan sedang menunggu persetujuan dari atasan.
    </div>
    @endif

    {{-- Detail --}}
    <div class="info-card">
        <div class="info-card-hd">Detail Pengajuan</div>

        <div class="info-row">
            <div class="info-ico"><svg viewBox="0 0 24 24"><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-lbl">Tanggal Mulai</div>
                <div class="info-val">{{ $mulai->translatedFormat('l, d F Y') }}</div>
            </div>
        </div>

        <div class="info-row">
            <div class="info-ico"><svg viewBox="0 0 24 24"><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-lbl">Tanggal Selesai</div>
                <div class="info-val">{{ $selesai->translatedFormat('l, d F Y') }}</div>
            </div>
        </div>

        <div class="info-row">
            <div class="info-ico"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
            <div>
                <div class="info-lbl">Keterangan</div>
                <div class="info-val {{ !$izinSakit->keterangan ? 'mut' : '' }}">
                    {{ $izinSakit->keterangan ?: 'Tidak ada keterangan' }}
                </div>
            </div>
        </div>

        @if($izinSakit->bukti_file)
        <div class="info-row">
            <div class="info-ico"><svg viewBox="0 0 24 24"><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="info-lbl">Bukti Lampiran</div>
                <a href="{{ asset('storage/' . $izinSakit->bukti_file) }}" target="_blank" class="bukti-link">
                    <svg viewBox="0 0 24 24"><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>
                    Lihat File Bukti
                </a>
            </div>
        </div>
        @endif

        @if($izinSakit->approver)
        <div class="info-row">
            <div class="info-ico"><svg viewBox="0 0 24 24"><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="info-lbl">Diproses Oleh</div>
                <div class="info-val">{{ $izinSakit->approver->name }}</div>
            </div>
        </div>
        @endif

        <div class="info-row">
            <div class="info-ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
            <div>
                <div class="info-lbl">Diajukan Pada</div>
                <div class="info-val">{{ $izinSakit->created_at->translatedFormat('d F Y, H:i') }}</div>
            </div>
        </div>
    </div>

</div>

</x-app-layout>