@extends('layouts.app')

@section('title', 'Leave Request Details')

@section('content')

@php
    $flow = [];
    // Step 0: Applied (always green - starting point)
    $flow[] = ['level' => 0, 'role' => 'Applied', 'is_applied' => true];
    $flow[] = ['level' => 1, 'role' => 'Training Officer', 'is_applied' => false];
    if ($leaveRequest->student_type === 'hostel') {
        $flow[] = ['level' => 2, 'role' => 'Warden', 'is_applied' => false];
        $flow[] = ['level' => 3, 'role' => 'Asst. Director', 'is_applied' => false];
    } else {
        $flow[] = ['level' => 2, 'role' => 'Asst. Director', 'is_applied' => false];
    }
    $totalSteps  = count($flow);
    $currentLvl  = $leaveRequest->current_level;
    $globalStatus = $leaveRequest->status;

    if ($globalStatus === 'approved') {
        $doneLevels = $totalSteps - 1; // all approval steps done (excluding applied)
    } elseif ($globalStatus === 'rejected') {
        $doneLevels = max(0, $currentLvl - 1);
    } else {
        $doneLevels = max(0, $currentLvl - 1);
    }
    // Add 1 to account for the "Applied" step which is always done
    $doneLevels += 1;
@endphp

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.lrd-wrap {
    font-family: 'Poppins', sans-serif;
    /* background: #f4f5f9; */
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

/* ── header row ── */
.lrd-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 1.6rem;
}
.lrd-title-group { display: flex; align-items: center; gap: 14px; }
.lrd-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lrd-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.lrd-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.lrd-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #414662;
    text-decoration: none; padding: 8px 14px;
    border: 1.5px solid #dde0ef; border-radius: 9px;
    background: #fff; transition: all .18s;
    font-family: 'Poppins', sans-serif;
}
.lrd-back:hover { background: #414662; color: #fff; border-color: #414662; }

/* ── card ── */
.lrd-card {
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.lrd-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
    background-size: 200% 100%;
    animation: lrd-shimmer 3s linear infinite;
}
@keyframes lrd-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.lrd-body { padding: 2rem 2.2rem; }

/* section head */
.lrd-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.lrd-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; flex-shrink: 0; }
.lrd-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.lrd-hr { border: none; border-top: 1.5px solid #f0f1f7; margin: 1.8rem 0; }

/* ── info grid ── */
.lrd-igrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.lrd-tile {
    position: relative;
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-radius: 13px;
    padding: 15px 16px 15px 16px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.lrd-tile:hover { border-color: #c0c5da; box-shadow: 0 4px 16px rgba(65,70,98,.07); }
.lrd-tile-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 13px 13px 0 0; background: #414662;
    opacity: 0; transition: opacity .2s;
}
.lrd-tile:hover .lrd-tile-bar { opacity: 1; }
.lrd-tile-gold .lrd-tile-bar { background: #f5a623; opacity: 1; }
.lrd-tlabel {
    font-size: 10px; font-weight: 700; color: #9099b8;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px;
    display: flex; align-items: center; gap: 6px;
}
.lrd-tlabel svg { flex-shrink: 0; }
.lrd-tval { font-size: 15px; font-weight: 700; color: #2d2f45; }
.lrd-tval-gold { font-size: 22px; font-weight: 700; color: #f5a623; }
.lrd-tval-gold span { font-size: 12px; color: #9099b8; font-weight: 500; }

/* status badges */
.lrd-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
}
.lrd-bdot { width: 7px; height: 7px; border-radius: 50%; }
.lrd-badge-pending   { background:#eff6ff; color:#2563eb; } .lrd-badge-pending   .lrd-bdot { background:#2563eb; animation:lrd-bpulse 1.4s ease-in-out infinite; }
.lrd-badge-forwarded { background:#fffbeb; color:#d97706; } .lrd-badge-forwarded .lrd-bdot { background:#d97706; animation:lrd-bpulse 1.4s ease-in-out infinite; }
.lrd-badge-approved  { background:#f0fdf4; color:#16a34a; } .lrd-badge-approved  .lrd-bdot { background:#16a34a; }
.lrd-badge-rejected  { background:#fef2f2; color:#dc2626; } .lrd-badge-rejected  .lrd-bdot { background:#dc2626; }
@keyframes lrd-bpulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ══════════ STEPPER ══════════ */
.lrd-stepper-outer { position: relative; padding: 8px 23px 4px; }

/* grey track — spans from centre of first circle to centre of last circle */
.lrd-track {
    position: absolute;
    top: 30px;
    left: 46px; right: 46px;
    height: 4px;
    background: #e8eaf2;
    border-radius: 4px;
    z-index: 0;
}
/* gold/green fill */
.lrd-fill {
    position: absolute;
    top: 30px; left: 46px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg,#16a34a,#16a34a 40%,#f5a623);
    z-index: 1;
    transition: width 1.2s ease;
}

.lrd-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.lrd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 92px;
}

/* First step pinned to the left edge */
.lrd-step:first-child {
    align-items: flex-start;
}
.lrd-step:first-child .lrd-srole,
.lrd-step:first-child .lrd-sstatus,
.lrd-step:first-child .lrd-sdate {
    text-align: left;
    padding-left: 0;
    width: 92px;
}

/* Last step pinned to the right edge */
.lrd-step:last-child {
    align-items: flex-end;
}
.lrd-step:last-child .lrd-srole,
.lrd-step:last-child .lrd-sstatus,
.lrd-step:last-child .lrd-sdate {
    text-align: right;
    width: 92px;
}

/* circle */
.lrd-circle {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    border: 3px solid #e8eaf2;
    background: #fff; color: #c0c5da;
    transition: all .4s;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    position: relative; z-index: 2;
}
/* Applied step - always green */
.lrd-circle-applied {
    background: #16a34a; border-color: #16a34a; color: #fff;
    box-shadow: 0 4px 16px rgba(22,163,74,.3);
}
.lrd-circle-done {
    background: #16a34a; border-color: #16a34a; color: #fff;
    box-shadow: 0 4px 16px rgba(22,163,74,.3);
}
.lrd-circle-active {
    background: #fff; border-color: #f5a623; border-width: 3px; color: #f5a623;
    box-shadow: 0 0 0 6px rgba(245,166,35,.12), 0 4px 16px rgba(245,166,35,.2);
    animation: lrd-ring 2s ease-in-out infinite;
}
@keyframes lrd-ring {
    0%,100%{ box-shadow: 0 0 0 6px rgba(245,166,35,.12), 0 4px 16px rgba(245,166,35,.2); }
    50%     { box-shadow: 0 0 0 11px rgba(245,166,35,.07), 0 4px 16px rgba(245,166,35,.2); }
}
.lrd-circle-rejected { background:#fef2f2; border-color:#dc2626; color:#dc2626; }

/* labels */
.lrd-srole {
    margin-top: 10px; text-align: center;
    font-size: 11px; font-weight: 700; color: #6b7194;
    line-height: 1.3;
}
.lrd-srole-done    { color: #16a34a; }
.lrd-srole-applied { color: #16a34a; }
.lrd-srole-active  { color: #f5a623; }

.lrd-sstatus {
    font-size: 10px; font-weight: 600; text-align: center;
    text-transform: uppercase; letter-spacing: .04em; margin-top: 3px;
}
.lrd-ss-done     { color: #16a34a; }
.lrd-ss-applied  { color: #16a34a; }
.lrd-ss-active   { color: #f5a623; }
.lrd-ss-pending  { color: #c0c5da; }
.lrd-ss-rejected { color: #dc2626; }

.lrd-sdate { font-size: 10px; color: #b0b4c8; text-align: center; margin-top: 2px; }

/* ── reason ── */
.lrd-reason {
    background: #f7f8fc;
    border: 1.5px solid #eceef6;
    border-left: 4px solid #414662;
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    font-size: 13px; color: #3a3d58; line-height: 1.8;
}

/* ── attachment buttons ── */
.lrd-attach-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.lrd-attach {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: #414662; color: #fff;
    font-size: 12px; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-decoration: none; transition: all .2s;
    border: 1.5px solid #414662;
    cursor: pointer;
}
.lrd-attach:hover {
    background: #f5a623;
    border-color: #f5a623;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245,166,35,.3);
}
.lrd-attach-view {
    background: #fff;
    color: #414662;
    border: 1.5px solid #414662;
}
.lrd-attach-view:hover {
    background: #414662;
    color: #fff;
    border-color: #414662;
}
.lrd-no-attach {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px;
    background: #f7f8fc; border: 1.5px solid #eceef6;
    font-size: 12px; color: #9099b8;
}

/* ── attachment preview modal ── */
.lrd-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(45,47,69,.75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.lrd-modal.active { display: flex; }
.lrd-modal-box {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.lrd-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1.5px solid #f0f1f7;
    background: #f7f8fc;
}
.lrd-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #2d2f45;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.lrd-modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lrd-modal-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #eceef6;
    color: #6b7194;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.lrd-modal-close:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.lrd-modal-body {
    flex: 1;
    overflow: auto;
    background: #f4f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 10px;
}
.lrd-modal-body img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}
.lrd-modal-body iframe {
    width: 100%;
    height: 75vh;
    border: none;
    background: #fff;
    border-radius: 8px;
}
.lrd-modal-unsupported {
    text-align: center;
    padding: 40px 20px;
    color: #6b7194;
}
.lrd-modal-unsupported svg {
    color: #9099b8;
    margin-bottom: 12px;
}

/* ── log items ── */
.lrd-log {
    display: flex; gap: 14px;
    background: #f7f8fc; border: 1.5px solid #eceef6;
    border-radius: 13px; padding: 16px 18px;
    margin-bottom: 10px; transition: border-color .2s;
}
.lrd-log:hover { border-color: #c0c5da; }
.lrd-log:last-child { margin-bottom: 0; }

.lrd-av {
    width: 42px; height: 42px; border-radius: 50%;
    background: #414662; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    text-transform: uppercase;
}
.lrd-av-rej { background: #dc2626; }

.lrd-lbody { flex: 1; min-width: 0; }
.lrd-lname { font-size: 13px; font-weight: 700; color: #2d2f45; margin-bottom: 1px; }
.lrd-lrole { font-size: 11px; color: #9099b8; margin-bottom: 4px; }
.lrd-ldate { font-size: 11px; color: #b0b4c8; }
.lrd-lrow  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.lrd-lremarks {
    margin-top: 8px; padding: 8px 12px;
    background: #fff; border: 1px solid #eceef6;
    border-radius: 8px; font-size: 12px; color: #6b7194; line-height: 1.6;
}

.lrd-nolog {
    background: #fffbeb; border: 1.5px solid #fde68a;
    border-radius: 12px; padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: #92400e;
}

@media(max-width:640px){
    .lrd-body { padding: 1.4rem 1rem; }
    .lrd-igrid { grid-template-columns: 1fr 1fr; }
    .lrd-top-row { flex-direction: column; align-items: flex-start; }
    .lrd-circle { width: 36px; height: 36px; font-size: 12px; }
    .lrd-srole { font-size: 10px; }
    .lrd-step { width: 72px; }
    .lrd-step:first-child .lrd-srole,
    .lrd-step:first-child .lrd-sstatus,
    .lrd-step:first-child .lrd-sdate,
    .lrd-step:last-child .lrd-srole,
    .lrd-step:last-child .lrd-sstatus,
    .lrd-step:last-child .lrd-sdate { width: 72px; }
    .lrd-stepper-outer { padding: 8px 18px 4px; }
    .lrd-fill, .lrd-track { top: 21px; }
    .lrd-track { left: 36px; right: 36px; }
    .lrd-fill { left: 36px; }
    .lrd-attach-group { flex-direction: column; }
    .lrd-attach { width: 100%; justify-content: center; }
}
@media(max-width:400px){
    .lrd-igrid { grid-template-columns: 1fr; }
}
</style>

<div class="lrd-wrap">

    {{-- ── Top row ── --}}
    <div class="lrd-top-row">
        <div class="lrd-title-group">
            <div class="lrd-icon-box">
                <svg width="22" height="22" 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>
            <div>
                <p class="lrd-title">Leave Request Details</p>
                <p class="lrd-sub">Applied on: {{ $leaveRequest->created_at->format('d M Y, h:i A') }}</p>
            </div>
        </div>
        <a href="{{ route('leave.history') }}" class="lrd-back">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
            Back to History
        </a>
    </div>

    {{-- ── Main card ── --}}
    <div class="lrd-card">
        <div class="lrd-bar"></div>
        <div class="lrd-body">

            {{-- Section: Overview --}}
            <div class="lrd-sh"><div class="lrd-dot"></div><span class="lrd-stitle">Request Overview</span></div>

            <div class="lrd-igrid">

                {{-- Student Type --}}
                <div class="lrd-tile">
                    <div class="lrd-tile-bar"></div>
                    <div class="lrd-tlabel">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 1.1 2.686 2 6 2s6-.9 6-2v-5"/></svg>
                        Student Type
                    </div>
                    <div class="lrd-tval">{{ ucfirst($leaveRequest->student_type ?? '—') }}</div>
                </div>

                {{-- Leave Type --}}
                <div class="lrd-tile">
                    <div class="lrd-tile-bar"></div>
                    <div class="lrd-tlabel">
                        <svg width="13" height="13" 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>
                        Leave Type
                    </div>
                    <div class="lrd-tval">{{ $leaveRequest->leave_type_label ?? '—' }}</div>
                </div>

                {{-- Status --}}
                <div class="lrd-tile">
                    <div class="lrd-tile-bar"></div>
                    <div class="lrd-tlabel">
                        <svg width="13" height="13" 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>
                        Status
                    </div>
                    <div style="margin-top:2px;">
                        @php $st = $leaveRequest->status; @endphp
                        <span class="lrd-badge lrd-badge-{{ $st }}">
                            <span class="lrd-bdot"></span>{{ ucfirst($st) }}
                        </span>
                    </div>
                </div>

                {{-- From Date --}}
                <div class="lrd-tile">
                    <div class="lrd-tile-bar"></div>
                    <div class="lrd-tlabel">
                        <svg width="13" height="13" 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>
                        From Date
                    </div>
                    <div class="lrd-tval">{{ $leaveRequest->from_date->format('d M Y') }}</div>
                </div>

                {{-- To Date --}}
                <div class="lrd-tile">
                    <div class="lrd-tile-bar"></div>
                    <div class="lrd-tlabel">
                        <svg width="13" height="13" 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>
                        To Date
                    </div>
                    <div class="lrd-tval">{{ $leaveRequest->to_date ? $leaveRequest->to_date->format('d M Y') : '—' }}</div>
                </div>

                {{-- Days --}}
                <div class="lrd-tile lrd-tile-gold">
                    <div class="lrd-tile-bar"></div>
                    <div class="lrd-tlabel">
                        <svg width="13" height="13" 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>
                        Total Days
                    </div>
                    <div class="lrd-tval-gold">{{ $leaveRequest->number_of_days }} <span>day(s)</span></div>
                </div>

            </div>{{-- /grid --}}

            <hr class="lrd-hr">

            {{-- ══════════ STEPPER ══════════ --}}
            <div class="lrd-sh"><div class="lrd-dot"></div><span class="lrd-stitle">Approval Progress</span></div>

            @php
                /* Width of fill: fraction of (totalSteps-1) segments completed */
                if ($totalSteps <= 1) {
                    $fillPct = 0;
                } elseif ($globalStatus === 'approved') {
                    $fillPct = 100;
                } else {
                    $fillPct = round(($doneLevels / ($totalSteps - 1)) * 100);
                    if ($fillPct > 100) $fillPct = 100;
                }
            @endphp

            <div class="lrd-stepper-outer">
                <div class="lrd-track"></div>
                <div class="lrd-fill" style="width: calc(({{ $fillPct }} / 100) * (100% - 92px));"></div>

                <div class="lrd-steps">
                @foreach ($flow as $step)
                    @php
                        $lvl = $step['level'];
                        $isApplied = $step['is_applied'];

                        if ($isApplied) {
                            // Applied step is always green/done
                            $cc = 'lrd-circle-applied';
                            $rc = 'lrd-srole-applied';
                            $sc = 'lrd-ss-applied';
                            $stxt = 'Submitted';
                            $log = null;
                        } else {
                            $log = $leaveRequest->approvalLogs->where('level', $lvl)->first();

                            if ($log && $log->decision === 'approved') {
                                $cc = 'lrd-circle-done'; $rc = 'lrd-srole-done'; $sc = 'lrd-ss-done'; $stxt = 'Approved';
                            } elseif ($log && $log->decision === 'rejected') {
                                $cc = 'lrd-circle-rejected'; $rc = ''; $sc = 'lrd-ss-rejected'; $stxt = 'Rejected';
                            } elseif ($currentLvl == $lvl && !in_array($globalStatus, ['approved','rejected'])) {
                                $cc = 'lrd-circle-active'; $rc = 'lrd-srole-active'; $sc = 'lrd-ss-active'; $stxt = 'In Review';
                            } else {
                                $cc = ''; $rc = ''; $sc = 'lrd-ss-pending'; $stxt = 'Pending';
                            }
                        }
                    @endphp
                    <div class="lrd-step">
                        <div class="lrd-circle {{ $cc }}">
                            @if($cc === 'lrd-circle-applied')
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
                            @elseif($cc === 'lrd-circle-done')
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            @elseif($cc === 'lrd-circle-rejected')
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                            @elseif($cc === 'lrd-circle-active')
                                <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" fill="#f5a623"/></svg>
                            @else
                                {{ $lvl }}
                            @endif
                        </div>
                        <p class="lrd-srole {{ $rc }}">{{ $step['role'] }}</p>
                        <p class="lrd-sstatus {{ $sc }}">{{ $stxt }}</p>
                        @if($isApplied)
                            <p class="lrd-sdate">{{ $leaveRequest->created_at->format('d M Y') }}</p>
                        @elseif($log && $log->approved_at)
                            <p class="lrd-sdate">{{ $log->approved_at->format('d M Y') }}</p>
                        @endif
                    </div>
                @endforeach
                </div>
            </div>

            <hr class="lrd-hr">

            {{-- Reason --}}
            <div class="lrd-sh"><div class="lrd-dot"></div><span class="lrd-stitle">Leave Reason</span></div>
            <div class="lrd-reason">{{ $leaveRequest->leave_reason }}</div>

            <hr class="lrd-hr">

            {{-- Attachment --}}
            <div class="lrd-sh"><div class="lrd-dot"></div><span class="lrd-stitle">Attachment</span></div>
            @if($leaveRequest->attachment)
                @php
                    $attachmentUrl = asset('storage/' . $leaveRequest->attachment);
                    $extension = strtolower(pathinfo($leaveRequest->attachment, PATHINFO_EXTENSION));
                    $fileName = basename($leaveRequest->attachment);
                @endphp
                <div class="lrd-attach-group">
                    <button type="button" class="lrd-attach lrd-attach-view" onclick="lrdOpenAttachment('{{ $attachmentUrl }}', '{{ $extension }}', '{{ $fileName }}')">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        View Attachment
                    </button>
                    <a href="{{ route('leave.download-attachment', $leaveRequest) }}" class="lrd-attach">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        Download Attachment
                    </a>
                </div>
            @else
                <div class="lrd-no-attach">
                    <svg width="15" height="15" 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"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    No attachment uploaded
                </div>
            @endif

            <hr class="lrd-hr">

            {{-- Approval History --}}
            <div class="lrd-sh"><div class="lrd-dot"></div><span class="lrd-stitle">Approval History</span></div>

            @if ($leaveRequest->approvalLogs->count() > 0)
                @foreach ($leaveRequest->approvalLogs as $log)
                    @php
                        $words = explode(' ', trim($log->approver->name));
                        $initials = strtoupper(substr($words[0],0,1) . (isset($words[1]) ? substr($words[1],0,1) : ''));
                        $avRej = $log->decision === 'rejected' ? 'lrd-av-rej' : '';
                    @endphp
                    <div class="lrd-log">
                        <div class="lrd-av {{ $avRej }}">{{ $initials }}</div>
                        <div class="lrd-lbody">
                            <div class="lrd-lrow">
                                <div>
                                    <p class="lrd-lname">{{ $log->approver->name }}</p>
                                    <p class="lrd-lrole">{{ $log->levelName }}</p>
                                </div>
                                <span class="lrd-badge lrd-badge-{{ $log->decision === 'approved' ? 'approved' : 'rejected' }}" style="animation:none;">
                                    <span class="lrd-bdot" style="animation:none;"></span>{{ ucfirst($log->decision) }}
                                </span>
                            </div>
                            <p class="lrd-ldate">{{ $log->approved_at->format('d M Y, h:i A') }}</p>
                            @if($log->remarks)
                                <div class="lrd-lremarks"><strong style="color:#414662;">Remarks:</strong> {{ $log->remarks }}</div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @else
                <div class="lrd-nolog">
                    <svg width="18" height="18" 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"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    No approvals yet — your request is pending review.
                </div>
            @endif

        </div>{{-- /card-body --}}
    </div>{{-- /card --}}

</div>{{-- /wrap --}}

{{-- ══════════ ATTACHMENT PREVIEW MODAL ══════════ --}}
<div class="lrd-modal" id="lrdAttachModal" onclick="lrdCloseAttachment(event)">
    <div class="lrd-modal-box" onclick="event.stopPropagation()">
        <div class="lrd-modal-head">
            <p class="lrd-modal-title">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#414662" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                <span id="lrdAttachFileName">Attachment Preview</span>
            </p>
            <div class="lrd-modal-actions">
                @if($leaveRequest->attachment)
                <a href="{{ route('leave.download-attachment', $leaveRequest) }}" class="lrd-attach" style="padding: 7px 14px; font-size: 11px;">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Download
                </a>
                @endif
                <button type="button" class="lrd-modal-close" onclick="lrdCloseAttachment()" aria-label="Close">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
        </div>
        <div class="lrd-modal-body" id="lrdAttachBody">
            {{-- Content injected by JS --}}
        </div>
    </div>
</div>

<script>
function lrdOpenAttachment(url, ext, fileName) {
    const modal = document.getElementById('lrdAttachModal');
    const body = document.getElementById('lrdAttachBody');
    const nameEl = document.getElementById('lrdAttachFileName');

    nameEl.textContent = fileName || 'Attachment Preview';

    const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
    const pdfExts   = ['pdf'];

    if (imageExts.includes(ext)) {
        body.innerHTML = '<img src="' + url + '" alt="Attachment">';
    } else if (pdfExts.includes(ext)) {
        body.innerHTML = '<iframe src="' + url + '" title="PDF Preview"></iframe>';
    } else {
        body.innerHTML = '<div class="lrd-modal-unsupported">' +
            '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>' +
            '<p style="margin-top:10px;font-weight:600;color:#414662;">Preview not available</p>' +
            '<p style="font-size:12px;margin-top:4px;">This file type (.' + ext + ') cannot be previewed in the browser.</p>' +
            '<p style="font-size:12px;margin-top:4px;">Please download the file to view it.</p>' +
            '</div>';
    }

    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
}

function lrdCloseAttachment(event) {
    if (event && event.target.id !== 'lrdAttachModal' && event.type === 'click') {
        // only close if backdrop clicked
        if (event.target.id !== 'lrdAttachModal') return;
    }
    const modal = document.getElementById('lrdAttachModal');
    const body = document.getElementById('lrdAttachBody');
    modal.classList.remove('active');
    body.innerHTML = '';
    document.body.style.overflow = '';
}

// Close on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        const modal = document.getElementById('lrdAttachModal');
        if (modal.classList.contains('active')) {
            lrdCloseAttachment();
        }
    }
});
</script>

@endsection