@extends('teacher.teacher_dashboard')

@section('customcss')
    <style>
        .teacher-dashboard-hero {
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 24px;
            background: linear-gradient(135deg, #103f38 0%, #1f6f63 45%, #d6f2e8 100%);
            color: #fff;
            box-shadow: 0 18px 40px rgba(16, 63, 56, 0.18);
        }

        .teacher-dashboard-hero::after {
            content: '';
            position: absolute;
            inset: auto -100px -120px auto;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.09);
        }

        .teacher-dashboard-hero .hero-chip,
        .dashboard-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 0.45rem 0.8rem;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            background: rgba(255, 255, 255, 0.14);
            color: #fff;
            backdrop-filter: blur(8px);
        }

        .metric-card {
            border: 0;
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
            height: 100%;
        }

        .metric-card .metric-value {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }

        .metric-card .metric-label {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 0.35rem;
        }

        .section-card {
            border: 0;
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
        }

        .section-heading {
            font-size: 1.05rem;
            font-weight: 800;
            margin: 0;
            color: #0f172a;
        }

        .badge-soft-success {
            background: #e7f7ef;
            color: #166534;
        }

        .badge-soft-warning {
            background: #fff4db;
            color: #92330e;
        }

        .badge-soft-info {
            background: #e3f2fd;
            color: #0c4a6e;
        }

        .badge-soft-danger {
            background: #fdecec;
            color: #b42318;
        }

        .badge-soft-secondary {
            background: #f1f5f9;
            color: #475569;
        }

        .routine-table th,
        .routine-table td,
        .attendance-table th,
        .attendance-table td {
            vertical-align: middle;
        }

        .routine-table thead th,
        .attendance-table thead th {
            background: #f8fafc;
            color: #334155;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e2e8f0;
        }

        .routine-title {
            font-weight: 700;
            color: #0f172a;
        }

        .subtle {
            color: #64748b;
            font-size: 0.88rem;
        }

        .info-card {
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            background: #fff;
        }

        .info-card .label {
            color: #64748b;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .info-card .value {
            font-size: 0.98rem;
            font-weight: 700;
            color: #0f172a;
        }

        .status-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .shift-punch-card {
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            padding: 12px;
            margin-bottom: 10px;
        }
        .shift-punch-card.is-punched {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }
        .shift-punch-card.is-late {
            background: #fefce8;
            border-color: #fef08a;
        }
        .shift-punch-card.is-missing {
            background: #fef2f2;
            border-color: #fecaca;
        }

        .alert-banner-card {
            border-radius: 14px;
            border-left: 5px solid;
        }
    </style>
@endsection

@section('admin')
    <div class="content-body">
        <div class="container-fluid">
            
            {{-- HERO BANNER --}}
            <div class="teacher-dashboard-hero p-4 p-lg-5 mb-4">
                <div class="row align-items-center position-relative" style="z-index: 1;">
                    <div class="col-lg-8">
                        <div class="hero-chip mb-3">
                            <span class="status-dot" style="background:#facc15"></span>
                            Welcome to your teacher dashboard
                        </div>
                        <h2 class="mb-2 text-white fw-bold">{{ $teacher->name }}</h2>
                        <p class="mb-2 text-white-50">
                            {{ $todayName }} · {{ \Carbon\Carbon::parse($todayDate)->format('d M, Y') }}
                        </p>
                    </div>
                    <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                        <div class="dashboard-chip mb-2">
                            Current time: {{ $now->format('h:i A') }}
                        </div>
                        <div class="dashboard-chip d-block d-lg-inline-flex">
                            Assigned periods today: {{ $routines->count() }}
                        </div>
                    </div>
                </div>
            </div>

            {{-- ATTENDANCE REAL-TIME NOTIFICATIONS & SMART ALERTS --}}
            @if(isset($attendanceAlerts) && $attendanceAlerts->isNotEmpty())
                <div class="row g-2 mb-4">
                    @foreach($attendanceAlerts as $alert)
                        @php
                            $styleConfig = match($alert['type']) {
                                'danger' => [
                                    'bg' => '#fef2f2',
                                    'border' => '#fecaca',
                                    'left_border' => '#ef4444',
                                    'icon_color' => '#dc2626',
                                    'title_color' => '#7f1d1d',
                                    'text_color' => '#991b1b',
                                ],
                                'warning' => [
                                    'bg' => '#fffbeb',
                                    'border' => '#fde68a',
                                    'left_border' => '#f59e0b',
                                    'icon_color' => '#d97706',
                                    'title_color' => '#78350f',
                                    'text_color' => '#92400e',
                                ],
                                'success' => [
                                    'bg' => '#f0fdf4',
                                    'border' => '#bbf7d0',
                                    'left_border' => '#10b981',
                                    'icon_color' => '#16a34a',
                                    'title_color' => '#14532d',
                                    'text_color' => '#166534',
                                ],
                                default => [
                                    'bg' => '#eff6ff',
                                    'border' => '#bfdbfe',
                                    'left_border' => '#3b82f6',
                                    'icon_color' => '#2563eb',
                                    'title_color' => '#1e3a8a',
                                    'text_color' => '#1e40af',
                                ],
                            };
                        @endphp
                        <div class="col-12">
                            <div class="alert alert-dismissible fade show shadow-sm d-flex align-items-center p-3 mb-0" 
                                 style="background-color: {{ $styleConfig['bg'] }} !important; border: 1px solid {{ $styleConfig['border'] }} !important; border-left: 5px solid {{ $styleConfig['left_border'] }} !important; border-radius: 12px;" 
                                 role="alert">
                                <div class="fs-4 me-3 d-flex align-items-center justify-content-center" style="color: {{ $styleConfig['icon_color'] }}; min-width: 32px;">
                                    <i class="fa {{ $alert['icon'] }}"></i>
                                </div>
                                <div class="flex-grow-1 pe-3">
                                    <h6 class="fw-bold mb-1" style="color: {{ $styleConfig['title_color'] }}; font-size: 14.5px;">{{ $alert['title'] }}</h6>
                                    <p class="mb-0 fw-medium" style="color: {{ $styleConfig['text_color'] }}; font-size: 12.5px; opacity: 0.95;">{{ $alert['message'] }}</p>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- ROUTINE METRICS ROW --}}
            <div class="row g-3 mb-4">
                <div class="col-md-6 col-xl-2">
                    <div class="card metric-card">
                        <div class="card-body">
                            <div class="metric-label">Today's classes</div>
                            <div class="metric-value">{{ $routines->count() }}</div>
                            <div class="subtle mt-2">All assigned routine rows for today.</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-2">
                    <div class="card metric-card">
                        <div class="card-body">
                            <div class="metric-label">Completed</div>
                            <div class="metric-value text-success">{{ $completedRoutines->count() }}</div>
                            <div class="subtle mt-2">Classes already finished.</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-2">
                    <div class="card metric-card">
                        <div class="card-body">
                            <div class="metric-label">Ongoing</div>
                            <div class="metric-value text-warning">{{ $ongoingRoutines->count() }}</div>
                            <div class="subtle mt-2">Classes happening right now.</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-2">
                    <div class="card metric-card">
                        <div class="card-body">
                            <div class="metric-label">Remaining</div>
                            <div class="metric-value text-info">{{ $remainingRoutines->count() }}</div>
                            <div class="subtle mt-2">Classes still to come.</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-2">
                    <div class="card metric-card">
                        <div class="card-body">
                            <div class="metric-label">Diary given</div>
                            <div class="metric-value text-success">{{ $diaryDoneRoutines->count() }}</div>
                            <div class="subtle mt-2">Periods with a lesson plan entry.</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xl-2">
                    <div class="card metric-card">
                        <div class="card-body">
                            <div class="metric-label">Diary pending</div>
                            <div class="metric-value text-danger">{{ $diaryPendingRoutines->count() }}</div>
                            <div class="subtle mt-2">Periods without a diary entry.</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- FIRST PERIOD ATTENDANCE --}}
            @if($firstPeriodAttendance->isNotEmpty())
                <div class="card section-card mb-4">
                    <div class="card-body">
                        <div class="mb-3">
                            <h5 class="section-heading mb-1">First period attendance</h5>
                            <div class="subtle">
                                First period classes are checked against student attendance records.
                            </div>
                        </div>

                        @foreach($firstPeriodAttendance as $firstPeriodItem)
                            <div class="border rounded p-3 mb-3">
                                <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
                                    <strong>{{ $firstPeriodItem['shift_name'] }}</strong>

                                    <span class="badge {{ $firstPeriodItem['attendance_taken'] ? 'badge-success' : 'badge-info' }} px-3 py-2">
                                        {{ $firstPeriodItem['status_label'] }}
                                    </span>
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <div class="info-card p-3 h-100">
                                            <div class="value">Class: {{ $firstPeriodItem['class_name'] }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-card p-3 h-100">
                                            <div class="value">Section: {{ $firstPeriodItem['section_name'] }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-card p-3 h-100">
                                            <div class="value">Shift: {{ $firstPeriodItem['shift_name'] }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-card p-3 h-100">
                                            <div class="value">Subject: {{ $firstPeriodItem['subject_name'] }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-card p-3 h-100">
                                            <div class="value">Time: {{ $firstPeriodItem['time_range'] }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- MAIN SECTION: ROUTINE & TEACHER ATTENDANCE DASHBOARD --}}
            <div class="row">
                
                {{-- LEFT COLUMN: ROUTINE TABLE --}}
                <div class="col-lg-7">
                    <div class="card section-card mb-4">
                        <div class="card-body">
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
                                <div>
                                    <h5 class="section-heading">Today's Routine</h5>
                                </div>
                                <span class="dashboard-chip text-dark" style="background:#f8fafc;color:#0f172a;">
                                    {{ $todayName }} Routine
                                </span>
                            </div>

                            <div class="table-responsive">
                                <table class="table routine-table align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th>Period</th>
                                            <th>Time</th>
                                            <th>Class</th>
                                            <th>Section</th>
                                            <th>Shift</th>
                                            <th>Subject</th>
                                            <th>Status</th>
                                            <th>Diary</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($routines as $routine)
                                            @php
                                                $routineStatusClass = match ($routine['status']) {
                                                    'completed' => 'badge-success',
                                                    'ongoing' => 'badge-warning',
                                                    'upcoming' => 'badge-info',
                                                    default => 'badge-secondary',
                                                };
                                                $diaryStatusClass = $routine['diary_status'] === 'done' ? 'badge-success' : 'badge-danger';
                                            @endphp
                                            <tr>
                                                <td>
                                                    <div class="routine-title">{{ $routine['period_name'] }}</div>
                                                </td>
                                                <td>{{ $routine['time_range'] }}</td>
                                                <td>
                                                    <div class="routine-title">{{ $routine['class_name'] }}</div>
                                                </td>
                                                <td>{{ $routine['section_name'] }}</td>
                                                <td>{{ $routine['shift_name'] }}</td>
                                                <td>{{ $routine['subject_name'] }}</td>
                                                <td>
                                                    <span class="badge {{ $routineStatusClass }} px-3 py-2">{{ $routine['status_label'] }}</span>
                                                </td>
                                                <td>
                                                    <span class="badge {{ $diaryStatusClass }} px-3 py-2">{{ $routine['diary_status_label'] }}</span>
                                                    @if($routine['diary_topic'])
                                                        <div class="subtle mt-1">{{ $routine['diary_topic'] }}</div>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="8" class="text-center py-5 text-muted">
                                                    No routine is assigned for today.
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- QUICK SNAPSHOT CARD --}}
                    <div class="card section-card mb-4">
                        <div class="card-body">
                            <h5 class="section-heading mb-3">Today's Class Snapshot</h5>
                            <div class="d-flex justify-content-between mb-2 pb-1 border-bottom">
                                <span class="subtle">Completed periods</span>
                                <strong class="text-success">{{ $completedRoutines->count() }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2 pb-1 border-bottom">
                                <span class="subtle">Remaining periods</span>
                                <strong class="text-info">{{ $remainingRoutines->count() }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2 pb-1 border-bottom">
                                <span class="subtle">Diary given</span>
                                <strong class="text-success">{{ $diaryDoneRoutines->count() }}</strong>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="subtle">Diary pending</span>
                                <strong class="text-danger">{{ $diaryPendingRoutines->count() }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- RIGHT COLUMN: TEACHER ATTENDANCE & SHIFT STATUS --}}
                <div class="col-lg-5">
                    
                    {{-- TODAY'S LIVE SHIFT STATUS CARD --}}
                    <div class="card section-card mb-4">
                        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="section-heading mb-0">
                                    <i class="fa fa-fingerprint text-primary me-2"></i>My Attendance Today
                                </h5>
                                <small class="text-muted">{{ \Carbon\Carbon::parse($todayDate)->format('d M, Y') }} ({{ $todayName }})</small>
                            </div>
                            @php
                                $dailyStatus = strtolower($todayTeacherAttendance->attendance_status ?? 'no_punch');
                                $dailyBadge = match($dailyStatus) {
                                    'present', 'p' => 'bg-success',
                                    'partial' => 'bg-warning text-dark',
                                    'absent' => 'bg-danger',
                                    'leave' => 'bg-info',
                                    'off_day', 'weeklyoff' => 'bg-secondary',
                                    default => 'bg-light text-dark border',
                                };
                            @endphp
                            <span class="badge {{ $dailyBadge }} px-3 py-2 fs-6">
                                {{ ucfirst(str_replace('_', ' ', $todayTeacherAttendance->attendance_status ?? 'Not Marked')) }}
                            </span>
                        </div>

                        <div class="card-body">
                            
                            {{-- TODAY'S ASSIGNED SHIFTS --}}
                            @if(isset($todayShiftsData) && $todayShiftsData->isNotEmpty())
                                <h6 class="fw-bold text-dark mb-2" style="font-size: 13px;">
                                    <i class="fa fa-business-time me-1 text-secondary"></i> Shift Punch Details:
                                </h6>

                                @foreach($todayShiftsData as $sData)
                                    @php
                                        $isMorning = str_contains(strtolower($sData['shift']->name ?? ''), 'morning');
                                        $cardClass = 'shift-punch-card';
                                        if ($sData['in_time'] && $sData['out_time']) {
                                            $cardClass .= ' is-punched';
                                        } elseif ($sData['late_minutes'] > 0) {
                                            $cardClass .= ' is-late';
                                        } elseif (!$sData['in_time'] && !$sData['is_off']) {
                                            $cardClass .= ' is-missing';
                                        }
                                    @endphp
                                    
                                    <div class="{{ $cardClass }}">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <div class="fw-bold text-dark">
                                                <i class="fa {{ $isMorning ? 'fa-sun text-warning' : 'fa-cloud-sun text-info' }} me-1"></i>
                                                {{ $sData['shift']->name }}
                                            </div>
                                            <div>
                                                @if($sData['is_off'])
                                                    <span class="badge bg-secondary">Weekly Off</span>
                                                @elseif($sData['in_time'] && $sData['out_time'])
                                                    <span class="badge bg-success">Complete</span>
                                                @elseif($sData['in_time'])
                                                    <span class="badge bg-warning text-dark">Missing Out</span>
                                                @else
                                                    <span class="badge bg-danger">Not Punched</span>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="row g-2 text-center" style="font-size: 12px;">
                                            <div class="col-4">
                                                <div class="bg-white border rounded p-1">
                                                    <span class="text-muted d-block" style="font-size: 10.5px;">Schedule</span>
                                                    <span class="fw-semibold text-dark">{{ $sData['start_time'] }}</span>
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="bg-white border rounded p-1">
                                                    <span class="text-muted d-block" style="font-size: 10.5px;">Punch In</span>
                                                    <span class="fw-bold {{ $sData['in_time'] ? 'text-primary' : 'text-danger' }}">
                                                        {{ $sData['in_time'] ?? '-' }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="bg-white border rounded p-1">
                                                    <span class="text-muted d-block" style="font-size: 10.5px;">Punch Out</span>
                                                    <span class="fw-bold {{ $sData['out_time'] ? 'text-success' : 'text-muted' }}">
                                                        {{ $sData['out_time'] ?? '-' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        @if($sData['late_minutes'] > 0 || $sData['worked_minutes'] > 0)
                                            <div class="d-flex justify-content-between align-items-center mt-2 pt-1 border-top" style="font-size: 11.5px;">
                                                @if($sData['late_minutes'] > 0)
                                                    <span class="text-danger fw-bold">
                                                        <i class="fa fa-exclamation-circle me-1"></i>Late: {{ $sData['late_minutes'] }} mins
                                                    </span>
                                                @else
                                                    <span class="text-success"><i class="fa fa-check me-1"></i>On time</span>
                                                @endif

                                                @if($sData['worked_minutes'] > 0)
                                                    <span class="text-dark fw-bold">Worked: {{ $sData['worked_formatted'] }}</span>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @else
                                <div class="alert alert-light border text-center py-3 mb-3">
                                    <i class="fa fa-info-circle text-muted mb-1 fs-5 d-block"></i>
                                    <small class="text-muted">No specific shift work rules assigned yet.</small>
                                </div>
                            @endif

                            {{-- MONTHLY SNAPSHOT SUMMARY --}}
                            <hr class="my-3">
                            <h6 class="fw-bold text-dark mb-2" style="font-size: 13px;">
                                <i class="fa fa-chart-pie me-1 text-primary"></i> Monthly Attendance Summary ({{ now()->format('F Y') }}):
                            </h6>

                            <div class="row g-2 text-center mb-3">
                                <div class="col-3">
                                    <div class="p-2 rounded border" style="background: #eefdf5; border-color: #bbf7d0 !important;">
                                        <div class="small fw-bold" style="color: #166534; font-size: 11px;">Present</div>
                                        <div class="fs-5 fw-bold" style="color: #15803d;">{{ $monthStats['present_days'] }}</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="p-2 rounded border" style="background: #fefce8; border-color: #fef08a !important;">
                                        <div class="small fw-bold" style="color: #854d0e; font-size: 11px;">Late</div>
                                        <div class="fs-5 fw-bold" style="color: #ca8a04;">{{ $monthStats['late_days'] }}</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="p-2 rounded border" style="background: #fef2f2; border-color: #fecaca !important;">
                                        <div class="small fw-bold" style="color: #991b1b; font-size: 11px;">Absent</div>
                                        <div class="fs-5 fw-bold" style="color: #dc2626;">{{ $monthStats['absent_days'] }}</div>
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="p-2 rounded border" style="background: #eff6ff; border-color: #bfdbfe !important;">
                                        <div class="small fw-bold" style="color: #1e40af; font-size: 11px;">Rate</div>
                                        <div class="fs-5 fw-bold" style="color: #2563eb;">{{ $monthStats['attendance_rate'] }}%</div>
                                    </div>
                                </div>
                            </div>

                            {{-- LAST 7 DAYS HISTORY TABLE --}}
                            <h6 class="fw-bold text-dark mb-2" style="font-size: 13px;">
                                <i class="fa fa-history me-1 text-secondary"></i> Last 7 Recorded Days:
                            </h6>

                            <div class="table-responsive">
                                <table class="table table-sm attendance-table align-middle mb-0 text-center" style="font-size: 12px;">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Morning</th>
                                            <th>Day</th>
                                            <th>Hours</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($teacherAttendance as $record)
                                            @php
                                                $attendanceClass = match (strtolower($record['status'])) {
                                                    'present', 'p' => 'badge-success',
                                                    'absent', 'a' => 'badge-danger',
                                                    'partial' => 'badge-warning text-dark',
                                                    'leave' => 'badge-info',
                                                    'off_day', 'weeklyoff' => 'badge-secondary',
                                                    default => 'badge-light text-dark border',
                                                };
                                            @endphp
                                            <tr>
                                                <td class="text-start">
                                                    <div class="fw-bold text-dark">{{ $record['date'] }}</div>
                                                    <small class="text-muted">{{ $record['day'] }}</small>
                                                </td>
                                                <td>
                                                    @if($record['morning_in'] !== '-')
                                                        <span class="d-block text-primary fw-semibold">{{ $record['morning_in'] }}</span>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($record['day_in'] !== '-')
                                                        <span class="d-block text-warning fw-semibold">{{ $record['day_in'] }}</span>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="fw-bold text-dark">{{ $record['worked_formatted'] }}</span>
                                                </td>
                                                <td>
                                                    <span class="badge {{ $attendanceClass }} px-2 py-1">
                                                        {{ $record['status_label'] }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center py-3 text-muted">
                                                    No attendance history found.
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection