@extends('adminlte::page')

@section('title', 'Employee Dashboard')

@include('partials.ui-polish')

@section('content_header')
    <div class="d-flex align-items-center justify-content-between flex-wrap employee-page-heading">
        <div class="d-flex align-items-center employee-page-title-block">
            <img src="{{ asset('images/logo.jpg') }}" alt="SarielERP Logo" class="employee-page-logo">
            <div>
                <h1 class="m-0" id="employee-page-title">Employee Dashboard</h1>
                <span class="text-muted" id="employee-page-subtitle">Personal dashboard, announcements, requests, leave, attendance, payslips, and timesheets</span>
            </div>
        </div>
        <div class="btn-group btn-group-sm mt-2 mt-sm-0 employee-heading-actions">
            <a href="#leave-management" class="btn btn-outline-primary">
                <i class="fas fa-calendar-plus mr-1"></i> Leave
            </a>
            <a href="#self-service-timesheets" class="btn btn-outline-primary">
                <i class="fas fa-clock mr-1"></i> Timesheets
            </a>
            @if($advanceModuleActive)
                <a href="#my-advances" class="btn btn-outline-primary">
                    <i class="fas fa-hand-holding-usd mr-1"></i> Advances
                </a>
            @endif
        </div>
    </div>
@stop

@section('css')
    <style>
        .employee-portal-main {
            min-width: 0;
        }

        .employee-module-section.is-hidden,
        .employee-module-column.is-hidden,
        [data-employee-module].is-hidden {
            display: none !important;
        }

        .employee-page-heading h1 {
            color: #1f2d3d;
            font-size: 1.85rem;
            font-weight: 700;
        }

        .employee-page-title-block {
            gap: .85rem;
            min-width: 0;
        }

        .employee-page-logo {
            border-radius: 12px;
            flex: 0 0 54px;
            height: 54px;
            object-fit: cover;
            width: 54px;
        }

        .employee-page-heading .btn {
            border-radius: 10px;
            font-weight: 600;
        }

        .employee-heading-actions {
            flex-wrap: wrap;
            gap: .35rem;
            justify-content: flex-end;
        }

        .employee-heading-actions .btn {
            border-radius: 10px !important;
            margin-left: 0 !important;
            min-width: 112px;
        }

        .employee-portal-main .card {
            border: 1px solid #e6ecf5;
            border-radius: 18px;
            box-shadow: 0 14px 36px rgba(31, 45, 61, .06);
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .employee-portal-main .card-header {
            align-items: center;
            background: #f4f7fb !important;
            border-bottom: 1px solid #e6ecf5;
            color: #1f2d3d;
            display: flex;
            min-height: 45px;
        }

        .employee-portal-main .card-header .card-title,
        .employee-portal-main .card-header .card-tools,
        .employee-portal-main .card-header i {
            color: #1f2d3d !important;
        }

        .employee-portal-main .card-body {
            background: #ffffff;
            padding: 1.35rem;
        }

        .employee-portal-main .table {
            border-collapse: separate;
            border-spacing: 0 0.55rem;
            margin-bottom: 0;
        }

        .employee-portal-main .table thead th {
            border-bottom: 1px solid rgba(148, 163, 184, .16);
            color: #4b5563;
            font-size: .78rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .95rem .75rem;
        }

        .employee-portal-main .table tbody tr {
            background: #ffffff;
            box-shadow: 0 1px 0 rgba(148, 163, 184, .08);
        }

        .employee-portal-main .table tbody td {
            border-top: 0;
            vertical-align: middle;
            padding: .9rem .75rem;
        }

        .employee-portal-main .table-sm th,
        .employee-portal-main .table-sm td {
            padding: .65rem .75rem;
        }

        .employee-portal-main .table-responsive {
            -webkit-overflow-scrolling: touch;
        }

        .employee-portal-main .table-responsive > .table {
            min-width: 720px;
        }

        .employee-portal-main .form-control,
        .employee-portal-main .custom-file-label {
            border-color: #d8e0ec;
            border-radius: 10px;
        }

        .employee-portal-main .btn {
            border-radius: 10px;
            font-weight: 600;
        }

        .employee-profile-photo {
            align-items: center;
            background: #eef6ff;
            border-radius: 50%;
            display: inline-flex;
            height: 84px;
            justify-content: center;
            margin-bottom: .85rem;
            overflow: hidden;
            width: 84px;
        }

        .employee-profile-photo img {
            height: 100%;
            object-fit: cover;
            width: 100%;
        }

        .employee-profile-photo span {
            color: #2f80ed;
            font-size: 2rem;
            font-weight: 700;
        }

        .profile-quick-list {
            border-top: 1px solid #e5e9f2;
            text-align: left;
            margin-top: 1rem;
            padding-top: 1rem;
        }

        .profile-quick-list div,
        .employee-notification-item {
            align-items: center;
            border-bottom: 1px solid #e5e9f2;
            display: flex;
            justify-content: space-between;
            padding: .75rem 0;
        }

        .profile-quick-list span {
            color: #6b778c;
            text-align: right;
        }

        .attendance-today-panel,
        .employee-at-glance-card,
        .leave-balance-card,
        .module-summary-tile {
            background: #ffffff;
            border: 1px solid #e6ecf5;
            border-radius: 16px;
            box-shadow: 0 14px 32px rgba(31, 45, 61, .05);
            padding: 1rem;
        }

        .employee-at-glance-card label,
        .leave-balance-card label {
            color: #6b778c;
            display: block;
            font-size: .78rem;
            margin-bottom: .35rem;
            text-transform: uppercase;
        }

        .employee-at-glance-card strong,
        .leave-balance-card strong {
            display: block;
            font-size: 1.15rem;
            color: #1f2d3d;
        }

        .attendance-action-row {
            display: grid;
            gap: .75rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .attendance-action-row .btn {
            min-height: 46px;
        }

        .employee-notification-item {
            justify-content: flex-start;
            gap: .85rem;
            padding: .85rem;
            border-radius: 14px;
            background: #f8fafc;
            margin-bottom: .8rem;
        }

        .employee-notification-item i {
            align-items: center;
            background: #eef6ff;
            border-radius: 50%;
            color: #2f80ed;
            display: inline-flex;
            height: 38px;
            justify-content: center;
            width: 38px;
        }

        .employee-dashboard-hero {
            background: #f7fbff;
            border: 1px solid #e6ecf5;
            border-radius: 18px;
            box-shadow: 0 18px 45px rgba(31, 45, 61, .06);
            margin-bottom: 1.3rem;
            padding: 1.5rem;
        }

        .dashboard-hero-inner {
            gap: 1rem;
        }

        .dashboard-hero-inner h2 {
            font-size: 1.55rem;
            margin-bottom: .35rem;
        }

        .dashboard-actions .btn {
            min-width: 130px;
        }

        .employee-quick-grid {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-bottom: 1.3rem;
        }

        .employee-quick-card {
            align-items: center;
            border-radius: 16px;
            color: #1f2d3d;
            display: flex;
            gap: .75rem;
            min-height: 100px;
            padding: 1rem;
            background: #ffffff;
            border: 1px solid rgba(148, 163, 184, .18);
            text-decoration: none;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .employee-quick-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(31, 45, 61, .08);
            text-decoration: none;
        }

        .employee-quick-card i {
            align-items: center;
            border-radius: 12px;
            display: inline-flex;
            flex: 0 0 44px;
            height: 44px;
            justify-content: center;
            width: 44px;
            color: #0d7cf2;
            background: rgba(13, 124, 242, .12);
        }

        .employee-quick-card strong {
            display: block;
            font-size: 1.2rem;
            line-height: 1.1;
            color: #1f2d3d;
        }

        .employee-quick-card span {
            color: #64748b;
            display: block;
            font-size: .84rem;
            margin-top: .15rem;
        }

        .employee-quick-card.primary {
            background: #eef4ff;
            color: #0d3c91;
        }

        .employee-quick-card.success {
            background: #ecf9ee;
            color: #14532d;
        }

        .employee-quick-card.warning {
            background: #fffbeb;
            color: #713f12;
        }

        .employee-quick-card.dark {
            background: #f8fafc;
            color: #0f172a;
        }

        .employee-quick-card.primary i {
            background: rgba(13, 124, 242, .18);
            color: #0d3c91;
        }

        .employee-quick-card.success i {
            background: rgba(16, 185, 129, .18);
            color: #14532d;
        }

        .employee-quick-card.warning i {
            background: rgba(251, 191, 36, .18);
            color: #713f12;
        }

        .employee-quick-card.dark i {
            background: rgba(15, 23, 42, .08);
            color: #0f172a;
        }

        .employee-module-card {
            border: 1px solid rgba(148, 163, 184, .22);
            border-radius: 16px;
            height: 100%;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .employee-module-card:hover {
            box-shadow: 0 14px 32px rgba(31, 45, 61, .08);
            transform: translateY(-2px);
        }

        .employee-module-card .card-body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 205px;
        }

        .employee-module-card__top {
            align-items: flex-start;
            display: flex;
            gap: .75rem;
            justify-content: space-between;
        }

        .employee-module-card__icon {
            align-items: center;
            border-radius: 12px;
            color: #fff;
            display: inline-flex;
            flex: 0 0 42px;
            height: 42px;
            justify-content: center;
            width: 42px;
        }

        .employee-module-card__metric {
            color: #1f2d3d;
            font-size: 1.85rem;
            font-weight: 700;
            line-height: 1.05;
        }

        .employee-module-card__links {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: auto;
        }

        .employee-module-card__links .btn {
            border-radius: 8px;
            font-size: .82rem;
            padding: .38rem .75rem;
        }

        .employee-at-glance {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-bottom: 1.3rem;
        }

        .leave-balance-grid,
        .module-summary-grid {
            display: grid;
            gap: 1rem;
        }

        .leave-balance-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .module-summary-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .module-summary-tile {
            align-items: center;
            border-radius: 16px;
            color: #fff;
            display: flex;
            gap: .85rem;
            min-height: 90px;
            padding: 1rem 1.1rem;
            box-shadow: 0 14px 32px rgba(31, 45, 61, .06);
        }

        .module-summary-tile i {
            align-items: center;
            background: rgba(255, 255, 255, .2);
            border-radius: 50%;
            display: inline-flex;
            flex: 0 0 42px;
            height: 42px;
            justify-content: center;
            width: 42px;
        }

        .module-summary-tile label {
            display: block;
            font-weight: 700;
            margin: 0 0 .2rem;
            color: rgba(255, 255, 255, .85);
        }

        .module-summary-tile strong {
            display: block;
            font-size: 1.05rem;
            color: #fff;
            overflow-wrap: anywhere;
        }

        .module-summary-tile span {
            display: block;
            font-size: .82rem;
            font-weight: 700;
            color: rgba(255, 255, 255, .85);
            line-height: 1.2;
        }

        .module-summary-tile.teal {
            background: #3fa9bd;
        }

        .module-summary-tile.blue {
            background: #0d7cf2;
        }

        .module-summary-tile.green {
            background: #49a942;
        }

        .module-summary-tile.yellow {
            background: #ffc533;
            color: #1f2d3d;
        }

        .module-summary-tile.yellow span,
        .module-summary-tile.yellow strong {
            color: #1f2d3d;
        }

        .timesheet-toolbar {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .module-panel {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 14px 32px rgba(31, 45, 61, .05);
            overflow: hidden;
        }

        .module-panel-heading {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
            padding: .75rem 1rem;
        }

        .timesheet-register-panel {
            margin-top: 1rem;
        }

        .weekly-timesheet-table th,
        .weekly-timesheet-table td {
            min-width: 78px;
        }

        .weekly-timesheet-table th:first-child,
        .weekly-timesheet-table td:first-child,
        .weekly-timesheet-table th:nth-child(2),
        .weekly-timesheet-table td:nth-child(2) {
            min-width: 170px;
        }

        @media (max-width: 1199px) {
            .employee-quick-grid,
            .employee-at-glance,
            .module-summary-grid,
            .leave-balance-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            .employee-page-heading {
                align-items: stretch !important;
                gap: .75rem;
            }

            .employee-page-heading h1 {
                font-size: 1.45rem;
            }

            .employee-page-heading > div {
                width: 100%;
            }

            .employee-page-logo {
                flex-basis: 46px;
                height: 46px;
                width: 46px;
            }

            .employee-heading-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
            }

            .employee-heading-actions .btn {
                min-width: 0;
                width: 100%;
            }

            .employee-portal-main .card {
                border-radius: 12px;
                margin-bottom: 1rem;
            }

            .employee-portal-main .card-body {
                padding: 1rem;
            }

            .employee-dashboard-hero {
                border-radius: 12px;
                padding: 1rem;
            }

            .dashboard-hero-inner {
                align-items: stretch !important;
            }

            .dashboard-actions {
                display: grid;
                gap: .5rem;
                grid-template-columns: 1fr;
                width: 100%;
            }

            .dashboard-actions .btn {
                min-width: 0;
                width: 100%;
            }

            .timesheet-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .timesheet-toolbar .btn,
            .timesheet-toolbar a.btn,
            .timesheet-toolbar button {
                width: 100%;
            }

            .attendance-action-row {
                grid-template-columns: 1fr;
            }

            .module-summary-tile {
                min-height: 78px;
            }

            .employee-module-card .card-body {
                min-height: 0;
            }

            .employee-quick-grid,
            .employee-at-glance,
            .module-summary-grid,
            .leave-balance-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575px) {
            .employee-heading-actions {
                grid-template-columns: 1fr;
            }

            .employee-quick-card {
                min-height: 86px;
            }

            .employee-quick-card strong,
            .employee-at-glance-card strong,
            .leave-balance-card strong {
                font-size: 1rem;
            }

            .employee-portal-main .table-responsive > .table {
                min-width: 640px;
            }
        }
    </style>
@stop

@section('js')
    <script>
	        if (navigator.geolocation) {
	            navigator.geolocation.getCurrentPosition((position) => {
	                const input = document.getElementById('self-service-gps-location');
	                if (input) {
	                    input.value = `${position.coords.latitude},${position.coords.longitude}`;
	                }
	            });
	        }

	        (() => {
	            const body = document.getElementById('advance-items-body');
	            const addButton = document.getElementById('add-advance-item-row');

	            if (!body || !addButton) {
	                return;
	            }

	            function rowTemplate(index) {
	                return `
	                    <tr>
	                        <td><input name="items[${index}][project]" list="advance-project-options" class="form-control form-control-sm" placeholder="Select or type"></td>
	                        <td><input name="items[${index}][activity]" list="advance-activity-options" class="form-control form-control-sm" placeholder="Select or type"></td>
	                        <td><input name="items[${index}][item_requested]" class="form-control form-control-sm" placeholder="Per diem, fuel, hotel" required></td>
	                        <td><input name="items[${index}][number_of_days]" type="number" min="1" class="form-control form-control-sm advance-item-days"></td>
	                        <td><input name="items[${index}][location]" class="form-control form-control-sm" placeholder="Location"></td>
	                        <td><input name="items[${index}][start_date]" type="date" class="form-control form-control-sm"></td>
	                        <td><input name="items[${index}][end_date]" type="date" class="form-control form-control-sm"></td>
	                        <td><input name="items[${index}][rate_amount]" type="number" min="0" step="0.01" class="form-control form-control-sm advance-item-rate" required></td>
	                        <td><input name="items[${index}][quantity]" type="number" min="1" class="form-control form-control-sm advance-item-quantity" value="1"></td>
	                        <td><input type="text" class="form-control form-control-sm advance-item-total" value="0.00" readonly></td>
	                        <td class="text-center">
	                            <button type="button" class="btn btn-xs btn-outline-danger remove-advance-item-row">
	                                <i class="fas fa-trash"></i>
	                            </button>
	                        </td>
	                    </tr>
	                `;
	            }

	            function calculateRow(row) {
	                const days = Number(row.querySelector('.advance-item-days')?.value || 0);
	                const quantity = Number(row.querySelector('.advance-item-quantity')?.value || 1);
	                const rate = Number(row.querySelector('.advance-item-rate')?.value || 0);
	                const multiplier = days > 0 ? days : Math.max(quantity, 1);
	                const total = row.querySelector('.advance-item-total');

	                if (total) {
	                    total.value = (rate * multiplier).toFixed(2);
	                }
	            }

	            addButton.addEventListener('click', () => {
	                const index = Number(body.dataset.nextIndex || body.children.length);
	                body.insertAdjacentHTML('beforeend', rowTemplate(index));
	                body.dataset.nextIndex = String(index + 1);
	            });

	            body.addEventListener('input', (event) => {
	                if (event.target.matches('.advance-item-days, .advance-item-rate, .advance-item-quantity')) {
	                    calculateRow(event.target.closest('tr'));
	                }
	            });

	            body.addEventListener('click', (event) => {
	                const button = event.target.closest('.remove-advance-item-row');

	                if (!button) {
	                    return;
	                }

	                if (body.querySelectorAll('tr').length > 1) {
	                    button.closest('tr').remove();
	                }
	            });

	            body.querySelectorAll('tr').forEach(calculateRow);
	        })();

            (() => {
                const tbody = document.getElementById('employee-timesheet-entry-rows');
                const addButton = document.getElementById('add-employee-timesheet-row');

                if (!tbody || !addButton) {
                    return;
                }

                const dayCount = {{ count($weekDays) }};

                const recalculateTotals = () => {
                    for (let day = 0; day < dayCount; day += 1) {
                        const total = [...tbody.querySelectorAll(`[data-day="${day}"]`)]
                            .reduce((sum, input) => sum + (Number.parseFloat(input.value) || 0), 0);
                        const totalCell = document.querySelector(`[data-employee-day-total="${day}"]`);

                        if (totalCell) {
                            totalCell.textContent = total.toFixed(2);
                        }
                    }
                };

                const makeRow = () => {
                    const index = Number(tbody.dataset.nextIndex || tbody.querySelectorAll('tr').length);
                    const tr = document.createElement('tr');
                    let html = `
                        <td><input type="text" list="employee-project-options" name="entries[${index}][project]" class="form-control form-control-sm" placeholder="Select or type project"></td>
                        <td><input type="text" list="employee-activity-options" name="entries[${index}][activity]" class="form-control form-control-sm" placeholder="Select or type activity"></td>
                    `;

                    for (let day = 0; day < dayCount; day += 1) {
                        html += `<td><input type="number" name="entries[${index}][hours][${day}]" class="form-control form-control-sm employee-day-hours" min="0" max="24" step="0.25" data-day="${day}"></td>`;
                    }

                    html += `
                        <td class="text-center no-print">
                            <button type="button" class="btn btn-xs btn-outline-danger remove-employee-timesheet-row">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    `;
                    tr.innerHTML = html;
                    tbody.dataset.nextIndex = String(index + 1);

                    return tr;
                };

                addButton.addEventListener('click', () => {
                    tbody.appendChild(makeRow());
                    recalculateTotals();
                });

                tbody.addEventListener('input', (event) => {
                    if (event.target.classList.contains('employee-day-hours')) {
                        recalculateTotals();
                    }
                });

                tbody.addEventListener('click', (event) => {
                    const button = event.target.closest('.remove-employee-timesheet-row');

                    if (!button || tbody.querySelectorAll('tr').length === 1) {
                        return;
                    }

                    button.closest('tr').remove();
                    recalculateTotals();
                });

                recalculateTotals();
            })();

	        (() => {
            const moduleHashMap = {
                '#employee-dashboard': 'dashboard',
                '#pending-requests': 'dashboard',
                '#employee-announcements': 'dashboard',
                '#attendance-summary': 'dashboard',
                '#leave-management': 'leave',
                '#employee-attendance': 'attendance',
                '#self-service-timesheets': 'timesheets',
                '#employee-payroll': 'payroll',
                '#employee-documents': 'documents',
                '#employee-notifications': 'notifications',
                '#my-advances': 'requests',
            };

            const moduleMeta = {
                dashboard: ['Employee Dashboard', 'Personal overview, announcements, pending requests, and module shortcuts'],
                leave: ['Leave Management', 'Apply for leave and track current approval status'],
                attendance: ['Attendance', 'Clock in, clock out, and request attendance corrections'],
                timesheets: ['Timesheets', 'Weekly project and activity time records'],
                payroll: ['Payroll & Payslips', 'Payslip history, salary breakdown, and PDF downloads'],
                documents: ['Documents', 'Personal documents, contracts, policies, and training materials'],
                notifications: ['Notifications', 'HR announcements, approvals, payroll alerts, and reminders'],
                requests: ['Advance Request & Retirement', 'Request advances and upload retirement evidence'],
            };

            const moduleItems = document.querySelectorAll('[data-employee-module]');
            const pageTitle = document.getElementById('employee-page-title');
            const pageSubtitle = document.getElementById('employee-page-subtitle');

            function activeModule() {
                return moduleHashMap[window.location.hash] || 'dashboard';
            }

            function showModule() {
                const current = activeModule();
                const meta = moduleMeta[current] || moduleMeta.dashboard;

                moduleItems.forEach((item) => {
                    const modules = (item.dataset.employeeModule || '').split(' ');
                    item.classList.toggle('is-hidden', !modules.includes(current));
                });

                if (pageTitle) {
                    pageTitle.textContent = meta[0];
                }

                if (pageSubtitle) {
                    pageSubtitle.textContent = meta[1];
                }
            }

            window.addEventListener('hashchange', showModule);
            showModule();
        })();
    </script>
@stop

@section('content')
    @if(session('success'))
        <x-adminlte-alert theme="success" title="Done" dismissable>
            {{ session('success') }}
        </x-adminlte-alert>
    @endif

    @if($errors->any())
        <x-adminlte-alert theme="danger" title="Please review the self-service form" dismissable>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </x-adminlte-alert>
    @endif

    @unless($employee)
        <x-adminlte-alert theme="warning" title="No employee match">
            No employee record was found for this user.
        </x-adminlte-alert>
    @endunless

    <datalist id="employee-project-options">
        @foreach($projectOptions as $project)
            <option value="{{ $project }}"></option>
        @endforeach
    </datalist>
    <datalist id="employee-activity-options">
        @foreach($activityOptions as $activity)
            <option value="{{ $activity['name'] }}" label="{{ $activity['project'] ? $activity['project'].' project' : 'Activity' }}"></option>
        @endforeach
    </datalist>

    <div class="employee-portal-main">
    <x-adminlte-card id="my-profile" title="My Profile" icon="fas fa-id-badge" theme="primary" class="employee-module-section" data-employee-module="dashboard">
        @if($employee)
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <div class="d-flex align-items-center">
                        <div class="employee-profile-photo mr-3 mb-0">
                            @if($employee->profile_photo_path)
                                <img src="{{ asset('storage/'.$employee->profile_photo_path) }}" alt="{{ $employee->full_name }}">
                            @else
                                <span>{{ strtoupper(substr($employee->full_name, 0, 1)) }}</span>
                            @endif
                        </div>
                        <div>
                            <h5 class="mb-1">{{ $employee->full_name }}</h5>
                            <div class="text-muted small">{{ $employee->employee_code }} · {{ $employee->position->title ?? 'Employee' }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 mt-3 mt-lg-0">
                    <div class="row">
                        <div class="col-sm-4"><strong>Phone</strong><div class="text-muted small">{{ $employee->phone ?? 'Not set' }}</div></div>
                        <div class="col-sm-4"><strong>Emergency</strong><div class="text-muted small">{{ $employee->emergency_contact ?? 'Not set' }}</div></div>
                        <div class="col-sm-4"><strong>2FA</strong><div class="text-muted small">{{ auth()->user()?->two_factor_enabled ? 'Enabled' : 'Disabled' }}</div></div>
                    </div>
                </div>
                <div class="col-lg-3 mt-3 mt-lg-0 text-lg-right">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#profile-edit-form">
                        <i class="fas fa-user-edit mr-1"></i> Edit Profile
                    </button>
                    <button type="button" class="btn btn-outline-dark btn-sm" data-toggle="collapse" data-target="#security-settings-form">
                        <i class="fas fa-shield-alt mr-1"></i> Security
                    </button>
                </div>
            </div>

            <div class="collapse mt-3 {{ $errors->has('phone') || $errors->has('address') || $errors->has('emergency_contact') || $errors->has('profile_photo') ? 'show' : '' }}" id="profile-edit-form">
                <form method="POST" action="{{ route('self-service.profile.update') }}" enctype="multipart/form-data" class="border rounded p-3">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-md-3"><x-adminlte-input name="phone" label="Phone" value="{{ old('phone', $employee->phone) }}"/></div>
                        <div class="col-md-3"><x-adminlte-input name="emergency_contact" label="Emergency Contact" value="{{ old('emergency_contact', $employee->emergency_contact) }}"/></div>
                        <div class="col-md-3"><x-adminlte-input-file name="profile_photo" label="Profile Picture" placeholder="Choose image"/></div>
                        <div class="col-md-3"><x-adminlte-textarea name="address" label="Address" rows="1">{{ old('address', $employee->address) }}</x-adminlte-textarea></div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fas fa-save mr-1"></i> Save Profile
                    </button>
                </form>
            </div>

            <div class="collapse mt-3 {{ $errors->has('current_password') || $errors->has('password') || $errors->has('two_factor_enabled') ? 'show' : '' }}" id="security-settings-form">
                <div class="row">
                    <div class="col-lg-7">
                        <form method="POST" action="{{ route('self-service.password.update') }}" class="border rounded p-3 mb-3">
                            @csrf
                            @method('PUT')
                            <x-adminlte-input name="current_password" label="Current Password" type="password" required/>
                            <x-adminlte-input name="password" label="New Password" type="password" required/>
                            <x-adminlte-input name="password_confirmation" label="Confirm New Password" type="password" required/>
                            <button type="submit" class="btn btn-dark btn-sm">
                                <i class="fas fa-key mr-1"></i> Change Password
                            </button>
                        </form>
                    </div>
                    <div class="col-lg-5">
                        <form method="POST" action="{{ route('self-service.two-factor.update') }}" class="border rounded p-3">
                            @csrf
                            @method('PUT')
                            <x-adminlte-input name="current_password" label="Current Password" type="password" required/>
                            <input type="hidden" name="two_factor_enabled" value="0">
                            <div class="custom-control custom-switch mb-3">
                                <input type="checkbox" name="two_factor_enabled" value="1" class="custom-control-input" id="two-factor-enabled" @checked(auth()->user()?->two_factor_enabled)>
                                <label class="custom-control-label" for="two-factor-enabled">Enable email multi-factor authentication</label>
                            </div>
                            <button type="submit" class="btn btn-outline-dark btn-sm">
                                <i class="fas fa-shield-alt mr-1"></i> Save Security Preference
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @else
            <div class="text-muted">No employee profile linked.</div>
        @endif
    </x-adminlte-card>
    @php
        $employeeModuleCards = [
            [
                'title' => 'Leave Management',
                'subtitle' => 'Apply and track leave',
                'icon' => 'fas fa-calendar-check',
                'theme' => 'primary',
                'metric' => number_format((float) $metrics['remainingLeave'], 1),
                'metricLabel' => 'Leave Balance days available',
                'url' => '#leave-management',
                'actions' => [
                    ['label' => 'Apply', 'url' => '#leave-management'],
                    ['label' => 'History', 'url' => '#leave-management'],
                ],
            ],
            [
                'title' => 'Attendance',
                'subtitle' => 'Clock in and corrections',
                'icon' => 'fas fa-user-clock',
                'theme' => 'success',
                'metric' => $metrics['attendanceThisMonth'],
                'metricLabel' => 'records this month',
                'url' => '#employee-attendance',
                'actions' => [
                    ['label' => 'Clock In', 'url' => '#employee-attendance'],
                    ['label' => 'Correction', 'url' => '#employee-attendance'],
                ],
            ],
            [
                'title' => 'Timesheets',
                'subtitle' => 'Project/activity hours',
                'icon' => 'fas fa-clock',
                'theme' => 'info',
                'metric' => $metrics['latestTimesheetStatus'],
                'metricLabel' => 'Timesheet Status',
                'url' => '#self-service-timesheets',
                'actions' => [
                    ['label' => 'Submit', 'url' => '#self-service-timesheets'],
                    ['label' => 'Status', 'url' => '#self-service-timesheets'],
                ],
            ],
            [
                'title' => 'Payroll & Payslips',
                'subtitle' => 'Salary and PDF payslips',
                'icon' => 'fas fa-receipt',
                'theme' => 'warning',
                'metric' => $metrics['latestPayslip'],
                'metricLabel' => 'Latest Payslip',
                'url' => '#employee-payroll',
                'actions' => [
                    ['label' => 'Payslips', 'url' => '#employee-payroll'],
                    ['label' => 'Download', 'url' => '#employee-payroll'],
                ],
            ],
            [
                'title' => 'Documents',
                'subtitle' => 'Contracts and HR files',
                'icon' => 'fas fa-folder-open',
                'theme' => 'secondary',
                'metric' => $documents->count(),
                'metricLabel' => 'personal documents',
                'url' => '#employee-documents',
                'actions' => [
                    ['label' => 'Upload', 'url' => '#employee-documents'],
                    ['label' => 'Contracts', 'url' => '#employee-documents'],
                ],
            ],
            [
                'title' => 'Requests',
                'subtitle' => 'Advance and retirement',
                'icon' => 'fas fa-hand-holding-usd',
                'theme' => 'teal',
                'metric' => $metrics['openAdvances'],
                'metricLabel' => 'open advances',
                'url' => '#my-advances',
                'actions' => [
                    ['label' => 'Request', 'url' => '#my-advances'],
                    ['label' => 'Retire', 'url' => '#my-advances'],
                ],
                'active' => $advanceModuleActive,
            ],
        ];

        $employeeModuleCards = collect($employeeModuleCards)
            ->filter(fn ($card) => $card['active'] ?? true)
            ->values();
    @endphp

    <section class="employee-dashboard-hero employee-module-section" data-employee-module="dashboard">
        <div class="dashboard-hero-inner d-flex justify-content-between align-items-center flex-wrap">
            <div>
                <div class="text-muted small text-uppercase font-weight-bold">Personal Dashboard</div>
                <h2>Welcome, {{ $employee?->full_name ?? auth()->user()?->name }}</h2>
                <p class="text-muted mb-0">Use the cards below to open a module. Detailed records can stay inside reports and registers.</p>
            </div>
            <div class="dashboard-actions d-flex flex-wrap gap-2 mt-3 mt-sm-0">
                <a href="#leave-management" class="btn btn-outline-primary btn-sm">Request Leave</a>
                <a href="#self-service-timesheets" class="btn btn-outline-primary btn-sm">Submit Timesheet</a>
                <a href="#employee-notifications" class="btn btn-outline-secondary btn-sm">Notifications</a>
            </div>
        </div>
    </section>

    <section class="employee-at-glance employee-module-section" data-employee-module="dashboard">
        <div class="employee-at-glance-card">
            <label>Pending Requests</label>
            <strong>{{ $metrics['pendingRequests'] }}</strong>
        </div>
        <div class="employee-at-glance-card">
            <label>Announcements</label>
            <strong>{{ count($announcements) }} active</strong>
        </div>
        <div class="employee-at-glance-card">
            <label>Attendance Summary</label>
            <strong>{{ $metrics['attendanceThisMonth'] }} records</strong>
        </div>
    </section>

    <section class="row employee-module-section" data-employee-module="dashboard">
        @foreach($employeeModuleCards as $card)
            <div class="col-xl-4 col-md-6 mb-3">
                <div class="card employee-module-card">
                    <div class="card-body">
                        <div class="employee-module-card__top">
                            <div>
                                <div class="text-muted small text-uppercase font-weight-bold">{{ $card['subtitle'] }}</div>
                                <h5 class="mb-0">{{ $card['title'] }}</h5>
                            </div>
                            <span class="employee-module-card__icon bg-{{ $card['theme'] }}">
                                <i class="{{ $card['icon'] }}"></i>
                            </span>
                        </div>
                        <div>
                            <div class="employee-module-card__metric">{{ $card['metric'] }}</div>
                            <div class="text-muted small">{{ $card['metricLabel'] }}</div>
                        </div>
                        <div class="employee-module-card__links">
                            @foreach($card['actions'] as $action)
                                <a href="{{ $action['url'] }}" class="btn btn-sm btn-light border">{{ $action['label'] }}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </section>

    <div class="row employee-module-section" id="pending-requests" data-employee-module="dashboard">
        <div class="col-lg-7">
            <x-adminlte-card id="employee-announcements" title="Announcements" icon="fas fa-bullhorn" theme="info">
                <ul class="list-unstyled mb-0">
                    @foreach($announcements as $announcement)
                        <li class="py-2 border-bottom">{{ $announcement }}</li>
                    @endforeach
                </ul>
            </x-adminlte-card>
        </div>
        <div class="col-lg-5">
            <x-adminlte-card title="Work Queue" icon="fas fa-list-check" theme="warning">
                <div class="d-flex justify-content-between py-2 border-bottom">
                    <span>Leave requests</span>
                    <strong>{{ $metrics['pendingLeave'] }}</strong>
                </div>
                <div class="d-flex justify-content-between py-2 border-bottom">
                    <span>Timesheets awaiting review</span>
                    <strong>{{ $metrics['submittedTimesheets'] }}</strong>
                </div>
                <div class="d-flex justify-content-between py-2">
                    <span>Open advances</span>
                    <strong>{{ $metrics['openAdvances'] }}</strong>
                </div>
            </x-adminlte-card>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 employee-module-column" data-employee-module="dashboard">
            <x-adminlte-card title="Leave Balances" icon="fas fa-balance-scale" theme="success">
                <div class="leave-balance-grid">
                    @forelse($leaveBalances as $balance)
                        <div class="leave-balance-card">
                            <label>{{ $balance->leaveType->name ?? 'Leave' }}</label>
                            <strong class="{{ $balance->remaining_days < 0 ? 'text-danger' : 'text-success' }}">
                                {{ number_format((float) $balance->remaining_days, 1) }} days
                            </strong>
                            <div class="text-muted small">
                                Used {{ number_format((float) $balance->used_days, 1) }} of {{ number_format((float) $balance->allocated_days, 1) }}
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-3 border rounded w-100">No balances allocated.</div>
                    @endforelse
                </div>
            </x-adminlte-card>
        </div>

        <div class="col-lg-12 employee-module-column" data-employee-module="leave attendance">
            <x-adminlte-card id="leave-management" title="Leave Management" icon="fas fa-calendar-check" theme="warning" class="employee-module-section" data-employee-module="leave">
                @php
                    $leavePendingCount = $leaveRequests->whereIn('status', ['Submitted', 'Supervisor Approved'])->count();
                    $leaveApprovedCount = $leaveRequests->where('status', 'Approved')->count();
                    $leaveTakenCount = $leaveRequests->where('status', 'Taken')->count();
                @endphp

                <div class="timesheet-toolbar mb-3">
                    <div>
                        <h5 class="mb-1">Leave Management</h5>
                        <p class="text-muted mb-0">Apply for leave, view balances, and track current approval status.</p>
                    </div>
                    <button type="button" class="btn btn-sm btn-warning mb-2" data-toggle="collapse" data-target="#employee-leave-apply-form" aria-expanded="{{ $errors->has('leave_type_id') || $errors->has('start_date') || $errors->has('end_date') || $errors->has('days_requested') ? 'true' : 'false' }}" aria-controls="employee-leave-apply-form">
                        <i class="fas fa-calendar-plus mr-1"></i> Apply for Leave
                    </button>
                </div>

                <div class="module-summary-grid">
                    <div class="module-summary-tile teal">
                        <i class="fas fa-balance-scale"></i>
                        <div><span>Leave Balance</span><strong>{{ number_format((float) $metrics['remainingLeave'], 1) }}</strong></div>
                    </div>
                    <div class="module-summary-tile blue">
                        <i class="fas fa-hourglass-half"></i>
                        <div><span>Pending</span><strong>{{ $leavePendingCount }}</strong></div>
                    </div>
                    <div class="module-summary-tile green">
                        <i class="fas fa-check"></i>
                        <div><span>Approved</span><strong>{{ $leaveApprovedCount }}</strong></div>
                    </div>
                    <div class="module-summary-tile yellow">
                        <i class="fas fa-calendar-day"></i>
                        <div><span>Taken</span><strong>{{ $leaveTakenCount }}</strong></div>
                    </div>
                </div>

                <div class="collapse {{ $errors->has('leave_type_id') || $errors->has('start_date') || $errors->has('end_date') || $errors->has('days_requested') ? 'show' : '' }}" id="employee-leave-apply-form">
                    <form method="POST" action="{{ route('hrm.leave-requests.store') }}" class="module-panel p-3 mb-3">
                        @csrf
                        <input type="hidden" name="status" value="Submitted">
                        <div class="row">
                            <div class="col-md-4">
                                <x-adminlte-select name="leave_type_id" label="Leave Type" required>
                                    <option value="">Select leave type</option>
                                    @foreach($leaveBalances as $balance)
                                        @if($balance->leaveType)
                                            <option value="{{ $balance->leaveType->id }}" @selected(old('leave_type_id') == $balance->leaveType->id)>
                                                {{ $balance->leaveType->name }} ({{ number_format((float) $balance->remaining_days, 1) }} left)
                                            </option>
                                        @endif
                                    @endforeach
                                </x-adminlte-select>
                            </div>
                            <div class="col-md-4">
                                <x-adminlte-input name="start_date" label="From Date" type="date" value="{{ old('start_date') }}" required/>
                            </div>
                            <div class="col-md-4">
                                <x-adminlte-input name="end_date" label="To Date" type="date" value="{{ old('end_date') }}" required/>
                            </div>
                            <div class="col-md-4">
                                <x-adminlte-input name="days_requested" label="Number of Days" type="number" min="0.5" step="0.5" value="{{ old('days_requested') }}" required/>
                            </div>
                            <div class="col-md-8">
                                <x-adminlte-textarea name="reason" label="Reason / Comments" rows="2">{{ old('reason') }}</x-adminlte-textarea>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning btn-sm">
                            <i class="fas fa-paper-plane mr-1"></i> Submit Leave Request
                        </button>
                    </form>
                </div>

                <div class="module-panel">
                    <div class="module-panel-heading bg-warning text-dark">
                        <i class="fas fa-list mr-2"></i> My Leave Register
                    </div>
                    <div class="p-3">
                        <div class="row mb-4">
                            <div class="col-md-3 mb-2 mb-md-0">
                                <input type="date" class="form-control" value="{{ now()->startOfYear()->toDateString() }}" aria-label="From date">
                            </div>
                            <div class="col-md-3 mb-2 mb-md-0">
                                <input type="date" class="form-control" value="{{ now()->endOfYear()->toDateString() }}" aria-label="To date">
                            </div>
                            <div class="col-md-3 mb-2 mb-md-0">
                                <select class="form-control" aria-label="Leave status">
                                    <option>All statuses</option>
                                    <option>Pending Approval</option>
                                    <option>Approved</option>
                                    <option>Rejected</option>
                                    <option>Cancelled</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-warning btn-block" type="button">
                                    <i class="fas fa-filter mr-1"></i> Filter
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover text-nowrap mb-0">
                                <thead>
                                    <tr>
                                        <th>Leave Type</th>
                                        <th>Dates</th>
                                        <th class="text-right">Days</th>
                                        <th>Status</th>
                                        <th>Comments</th>
                                        <th class="text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($leaveRequests->take(5) as $leaveRequest)
                                        @php
                                            $leaveStatusTheme = match ($leaveRequest->status) {
                                                'Approved' => 'success',
                                                'Rejected' => 'danger',
                                                'Cancelled' => 'secondary',
                                                'Supervisor Approved' => 'warning',
                                                default => 'info',
                                            };
                                        @endphp
                                        <tr>
                                            <td>
                                                <strong>{{ $leaveRequest->leaveType->name ?? 'Leave' }}</strong>
                                                <div class="small text-muted">Own request only</div>
                                            </td>
                                            <td>{{ $leaveRequest->start_date->format('M d') }} - {{ $leaveRequest->end_date->format('M d, Y') }}</td>
                                            <td class="text-right">{{ number_format((float) $leaveRequest->days_requested, 1) }}</td>
                                            <td>
                                                <span class="badge badge-{{ $leaveStatusTheme }}">
                                                    {{ $leaveRequest->status }}
                                                </span>
                                            </td>
                                            <td><div class="leave-row-note">{{ $leaveRequest->reason ?? 'No comment' }}</div></td>
                                            <td class="text-right">
                                                @if(in_array($leaveRequest->status, ['Draft', 'Submitted', 'Supervisor Approved'], true))
                                                    <form method="POST" action="{{ route('hrm.leave-requests.cancel', $leaveRequest) }}" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-xs btn-outline-danger">
                                                            Cancel
                                                        </button>
                                                    </form>
                                                @else
                                                    <span class="text-muted small">No action</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-3">No leave requests yet.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </x-adminlte-card>

            <x-adminlte-card id="employee-attendance" title="Attendance" icon="fas fa-user-clock" theme="secondary" class="employee-module-section" data-employee-module="attendance">
                @php
                    $attendanceCompleteCount = $attendanceRecords->where('status', 'Present')->count();
                    $attendancePendingCorrections = $attendanceCorrections->where('status', 'Pending')->count();
                @endphp

                <div class="timesheet-toolbar mb-3">
                    <div>
                        <h5 class="mb-1">Attendance</h5>
                        <p class="text-muted mb-0">Clock in, clock out, and request corrections when your attendance record needs review.</p>
                    </div>
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#attendance-correction-form">
                        <i class="fas fa-edit mr-1"></i> Request Correction
                    </button>
                </div>

                <div class="module-summary-grid">
                    <div class="module-summary-tile teal">
                        <i class="fas fa-user-clock"></i>
                        <div><span>This Month</span><strong>{{ $metrics['attendanceThisMonth'] }}</strong></div>
                    </div>
                    <div class="module-summary-tile blue">
                        <i class="fas fa-sign-in-alt"></i>
                        <div><span>Clock In</span><strong>{{ $todayAttendance?->clock_in ?? '--:--' }}</strong></div>
                    </div>
                    <div class="module-summary-tile green">
                        <i class="fas fa-sign-out-alt"></i>
                        <div><span>Clock Out</span><strong>{{ $todayAttendance?->clock_out ?? '--:--' }}</strong></div>
                    </div>
                    <div class="module-summary-tile yellow">
                        <i class="fas fa-edit"></i>
                        <div><span>Corrections</span><strong>{{ $attendancePendingCorrections }}</strong></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-5 mb-3">
                        <div class="attendance-today-panel">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="text-muted small text-uppercase">Today</div>
                                    <h5>{{ today()->format('M d, Y') }}</h5>
                                </div>
                                <span class="badge badge-{{ $todayAttendance?->clock_out ? 'success' : ($todayAttendance?->clock_in ? 'info' : 'secondary') }}">
                                    {{ $todayAttendance?->clock_out ? 'Completed' : ($todayAttendance?->clock_in ? 'Clocked In' : 'Not Started') }}
                                </span>
                            </div>
                            <div class="attendance-action-row mt-3">
                                <form method="POST" action="{{ route('self-service.attendance.clock-in') }}">
                                    @csrf
                                    <input type="hidden" name="gps_location" id="self-service-gps-location">
                                    <button type="submit" class="btn btn-success btn-sm btn-block" @disabled(! $employee || $todayAttendance?->clock_in)>
                                        <i class="fas fa-sign-in-alt mr-1"></i> Clock In
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('self-service.attendance.clock-out') }}">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-primary btn-sm btn-block" @disabled(! $employee || ! $todayAttendance?->clock_in || $todayAttendance?->clock_out)>
                                        <i class="fas fa-sign-out-alt mr-1"></i> Clock Out
                                    </button>
                                </form>
                            </div>
                            <div class="small text-muted mt-3">GPS capture is optional and used only when the browser allows location access.</div>
                        </div>

                        <div class="collapse mt-3" id="attendance-correction-form">
                            <form method="POST" action="{{ route('self-service.attendance.corrections.store') }}" class="module-panel p-3">
                                @csrf
                                <x-adminlte-input name="attendance_date" label="Date" type="date" value="{{ old('attendance_date', today()->toDateString()) }}" required/>
                                <div class="row">
                                    <div class="col-6">
                                        <x-adminlte-input name="requested_clock_in" label="Clock In" type="time" value="{{ old('requested_clock_in') }}"/>
                                    </div>
                                    <div class="col-6">
                                        <x-adminlte-input name="requested_clock_out" label="Clock Out" type="time" value="{{ old('requested_clock_out') }}"/>
                                    </div>
                                </div>
                                <x-adminlte-textarea name="reason" label="Reason" rows="2" required>{{ old('reason') }}</x-adminlte-textarea>
                                <button type="submit" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-paper-plane mr-1"></i> Submit Correction
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="module-panel">
                            <div class="module-panel-heading bg-secondary">
                                <i class="fas fa-history mr-2"></i> Recent Attendance
                            </div>
                            <div class="p-3">
                                <div class="row mb-4">
                                    <div class="col-md-5 mb-2 mb-md-0">
                                        <input type="month" class="form-control" value="{{ today()->format('Y-m') }}" aria-label="Attendance month">
                                    </div>
                                    <div class="col-md-4 mb-2 mb-md-0">
                                        <select class="form-control" aria-label="Attendance status">
                                            <option>All statuses</option>
                                            <option>Present</option>
                                            <option>Absent</option>
                                            <option>On Leave</option>
                                            <option>Corrected</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" class="btn btn-secondary btn-block">
                                            <i class="fas fa-filter mr-1"></i> Filter
                                        </button>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-sm mb-0">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Clock In</th>
                                                <th>Clock Out</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($attendanceRecords->take(5) as $record)
                                        <tr>
                                            <td>{{ $record->attendance_date->format('M d, Y') }}</td>
                                            <td>{{ $record->clock_in ?? '--:--' }}</td>
                                            <td>{{ $record->clock_out ?? '--:--' }}</td>
                                            <td><span class="badge badge-light">{{ $record->status }}</span></td>
                                        </tr>
                                            @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-3">No attendance records yet.</td>
                                        </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </x-adminlte-card>
        </div>
    </div>

    <div class="row">
                <div class="col-lg-12 employee-module-column" data-employee-module="timesheets">
                    @php
                        $timesheetCount = $timesheets->count();
                        $submittedCount = $timesheets->where('status', 'Submitted')->count();
                        $approvedCount = $timesheets->where('status', 'Approved')->count();
                        $totalHours = $timesheets->sum(fn ($timesheet) => $timesheet->entries->sum('hours_worked'));
                    @endphp

                    <div id="self-service-timesheets" class="timesheet-toolbar">
                        <div></div>
                        <div>
                            @if($timesheetModuleActive && $employee)
                                <button type="button" class="btn btn-success btn-sm" data-toggle="collapse" data-target="#self-service-timesheet-form" aria-expanded="{{ $errors->any() ? 'true' : 'false' }}" aria-controls="self-service-timesheet-form">
                                    <i class="fas fa-calendar-week mr-1"></i> Open Weekly Timesheet
                                </button>
                            @endif
                            <a href="#employee-attendance" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-user-clock mr-1"></i> Attendance
                            </a>
                        </div>
                    </div>

                    <div class="module-summary-grid">
                        <div class="module-summary-tile teal">
                            <i class="fas fa-clock"></i>
                            <div><label>Timesheets</label><strong>{{ $timesheetCount }}</strong></div>
                        </div>
                        <div class="module-summary-tile blue">
                            <i class="fas fa-paper-plane"></i>
                            <div><label>Submitted</label><strong>{{ $submittedCount }}</strong></div>
                        </div>
                        <div class="module-summary-tile green">
                            <i class="fas fa-check-circle"></i>
                            <div><label>Approved</label><strong>{{ $approvedCount }}</strong></div>
                        </div>
                        <div class="module-summary-tile yellow">
                            <i class="fas fa-hourglass-half"></i>
                            <div><label>Total Hours</label><strong>{{ number_format((float) $totalHours, 2) }}</strong></div>
                        </div>
                    </div>

                    @if($timesheetModuleActive && $employee)
                        <div class="collapse {{ $errors->any() ? 'show' : '' }}" id="self-service-timesheet-form">
                            <form method="POST" action="{{ route('self-service.timesheets.store') }}" class="module-panel p-3 mb-3">
                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <x-adminlte-input name="week_start" label="Week Start" type="date" value="{{ old('week_start', $weekStart) }}" required/>
                                    </div>
                                    <div class="col-md-8 d-flex align-items-end">
                                        <div class="text-muted small mb-3">
                                            Record hours by project and activity. Timesheets are for records and project charging; they do not affect payroll.
                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered mb-2 weekly-timesheet-table">
                                        <thead>
                                            <tr>
                                                <th style="min-width: 160px;">Project Charged</th>
                                                <th style="min-width: 160px;">Activity Charged</th>
                                                @foreach($weekDays as $day)
                                                    <th class="text-center" style="min-width: 72px;">
                                                        {{ $day->format('j') }}
                                                        <div class="text-muted small">{{ $day->format('D') }}</div>
                                                    </th>
                                                @endforeach
                                                <th class="text-center no-print" style="width: 52px;">Action</th>
                                            </tr>
                                        </thead>
                                        @php
                                            $employeeTimesheetRows = old('entries', [[
                                                'project' => '',
                                                'activity' => '',
                                                'hours' => [],
                                            ]]);
                                        @endphp
                                        <tbody id="employee-timesheet-entry-rows" data-next-index="{{ count($employeeTimesheetRows) }}">
                                            @foreach($employeeTimesheetRows as $row => $entryRow)
                                                <tr>
                                                    <td>
                                                        <input type="text" list="employee-project-options" name="entries[{{ $row }}][project]" class="form-control form-control-sm" value="{{ $entryRow['project'] ?? '' }}" placeholder="Select or type project">
                                                    </td>
                                                    <td>
                                                        <input type="text" list="employee-activity-options" name="entries[{{ $row }}][activity]" class="form-control form-control-sm" value="{{ $entryRow['activity'] ?? '' }}" placeholder="Select or type activity">
                                                    </td>
                                                    @foreach($weekDays as $dayIndex => $day)
                                                        <td>
                                                            <input type="number" name="entries[{{ $row }}][hours][{{ $dayIndex }}]" class="form-control form-control-sm employee-day-hours" value="{{ $entryRow['hours'][$dayIndex] ?? '' }}" min="0" max="24" step="0.25" data-day="{{ $dayIndex }}">
                                                        </td>
                                                    @endforeach
                                                    <td class="text-center no-print">
                                                        <button type="button" class="btn btn-xs btn-outline-danger remove-employee-timesheet-row">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="2">Daily Totals</th>
                                                @foreach($weekDays as $dayIndex => $day)
                                                    <th class="text-center employee-daily-total" data-employee-day-total="{{ $dayIndex }}">0.00</th>
                                                @endforeach
                                                <th class="text-center no-print">
                                                    <button type="button" class="btn btn-xs btn-outline-primary" id="add-employee-timesheet-row">
                                                        <i class="fas fa-plus"></i>
                                                    </button>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                                <button type="submit" class="btn btn-info btn-sm">
                                    <i class="fas fa-paper-plane mr-1"></i> Submit Weekly Timesheet
                                </button>
                            </form>
                        </div>
                    @endif

                    <div class="module-panel timesheet-register-panel">
                        <div class="module-panel-heading bg-primary">
                            <i class="fas fa-list mr-2"></i> Timesheet Register
                        </div>
                        <div class="p-3">
                            <div class="row mb-4">
                                <div class="col-md-5 mb-2 mb-md-0">
                                    <select class="form-control">
                                        <option>{{ $employee?->full_name ?? auth()->user()?->name }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-2 mb-md-0">
                                    <select class="form-control">
                                        <option>All statuses</option>
                                        <option>Submitted</option>
                                        <option>Approved</option>
                                        <option>Rejected</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-primary btn-block" type="button">
                                        <i class="fas fa-filter mr-1"></i> Filter
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>Employee</th>
                                            <th>Week</th>
                                            <th>Status</th>
                                            <th class="text-right">Hours</th>
                                            <th class="text-right">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($timesheets as $timesheet)
                                            <tr>
                                                <td>
                                                    <strong>{{ $employee?->full_name ?? auth()->user()?->name }}</strong>
                                                    <div class="small text-muted">{{ $employee?->employee_number ?? 'Employee' }}</div>
                                                </td>
                                                <td>
                                                    {{ $timesheet->period_start->format('M d') }} - {{ $timesheet->period_end->format('M d, Y') }}
                                                    @if($timesheet->entries->isNotEmpty())
                                                        <div class="small text-muted">
                                                            {{ $timesheet->entries->pluck('project')->unique()->take(2)->join(', ') }}
                                                        </div>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="badge badge-{{ $timesheet->status === 'Approved' ? 'success' : ($timesheet->status === 'Rejected' ? 'danger' : 'info') }}">
                                                        {{ $timesheet->status }}
                                                    </span>
                                                    @if($timesheet->review_comment)
                                                        <div class="small text-muted mt-1">{{ $timesheet->review_comment }}</div>
                                                    @endif
                                                </td>
                                                <td class="text-right">{{ number_format((float) $timesheet->entries->sum('hours_worked'), 2) }}</td>
                                                <td class="text-right">
                                                    <button type="button" class="btn btn-xs btn-outline-primary" data-toggle="collapse" data-target="#timesheet-row-{{ $timesheet->id }}">
                                                        <i class="fas fa-eye"></i> View
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr class="collapse" id="timesheet-row-{{ $timesheet->id }}">
                                                <td colspan="5">
                                                    @forelse($timesheet->entries as $entry)
                                                        <div class="d-flex justify-content-between border-bottom py-2">
                                                            <span><strong>{{ $entry->project }}</strong> / {{ $entry->activity }}</span>
                                                            <span>{{ number_format((float) $entry->hours_worked, 2) }} hrs</span>
                                                        </div>
                                                    @empty
                                                        <span class="text-muted">No project/activity entries recorded.</span>
                                                    @endforelse
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center text-muted py-3">No timesheets yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 employee-module-column" data-employee-module="payroll">
                    <x-adminlte-card id="employee-payroll" title="Payroll & Payslips" icon="fas fa-receipt" theme="primary">
                        @php
                            $latestPayslip = $payslips->first();
                            $payrollNetTotal = $payslips->sum(fn ($payslip) => (float) ($payslip->item->net_salary ?? 0));
                            $payrollAllowanceTotal = $payslips->sum(fn ($payslip) => (float) ($payslip->item->total_allowances ?? 0));
                            $payrollDeductionTotal = $payslips->sum(fn ($payslip) => (float) ($payslip->item->total_deductions ?? 0));
                            $latestItem = $latestPayslip?->item;
                        @endphp

                        <div class="timesheet-toolbar">
                            <div>
                                <h5 class="mb-1">Payroll & Payslips</h5>
                                <div class="text-muted small">View payslip history, salary breakdown, allowances, deductions, and PDF downloads.</div>
                            </div>
                            <form method="GET" action="{{ route('self-service.index') }}#employee-payroll" class="form-inline">
                                <input type="month" name="payroll_month" value="{{ $selectedPayrollMonth }}" class="form-control form-control-sm mr-2">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fas fa-filter mr-1"></i> Filter
                                </button>
                            </form>
                        </div>

                        <div class="module-summary-grid">
                            <div class="module-summary-tile teal">
                                <i class="fas fa-receipt"></i>
                                <div><label>Payslips</label><strong>{{ $payslips->count() }}</strong></div>
                            </div>
                            <div class="module-summary-tile blue">
                                <i class="fas fa-wallet"></i>
                                <div><label>Latest Net</label><strong>{{ number_format((float) ($latestPayslip?->item?->net_salary ?? 0), 2) }}</strong></div>
                            </div>
                            <div class="module-summary-tile green">
                                <i class="fas fa-plus-circle"></i>
                                <div><label>Allowances</label><strong>{{ number_format((float) $payrollAllowanceTotal, 2) }}</strong></div>
                            </div>
                            <div class="module-summary-tile yellow">
                                <i class="fas fa-minus-circle"></i>
                                <div><label>Deductions</label><strong>{{ number_format((float) $payrollDeductionTotal, 2) }}</strong></div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-5 mb-3">
                                <div class="module-panel h-100">
                                    <div class="module-panel-heading bg-primary">
                                        <i class="fas fa-wallet mr-2"></i> Latest Payslip
                                    </div>
                                    <div class="p-3">
                                        @if($latestPayslip)
                                            <div class="d-flex justify-content-between align-items-start border-bottom pb-2 mb-2">
                                                <div>
                                                    <strong>{{ $latestPayslip->payslip_number }}</strong>
                                                    <div class="small text-muted">{{ $latestItem?->run?->period?->name ?? $latestPayslip->generated_at?->format('M Y') }}</div>
                                                </div>
                                                <a href="{{ route('payroll.payslips.download', $latestPayslip) }}" class="btn btn-xs btn-outline-success">
                                                    <i class="fas fa-file-pdf"></i> Download PDF
                                                </a>
                                            </div>
                                            <div class="d-flex justify-content-between py-2 border-bottom">
                                                <span>Basic Salary</span>
                                                <strong>{{ number_format((float) ($latestItem?->basic_salary ?? 0), 2) }}</strong>
                                            </div>
                                            <div class="d-flex justify-content-between py-2 border-bottom">
                                                <span>Allowances</span>
                                                <strong class="text-success">{{ number_format((float) ($latestItem?->total_allowances ?? 0), 2) }}</strong>
                                            </div>
                                            <div class="d-flex justify-content-between py-2 border-bottom">
                                                <span>Deductions / Taxes</span>
                                                <strong class="text-danger">{{ number_format((float) ($latestItem?->total_deductions ?? 0), 2) }}</strong>
                                            </div>
                                            <div class="d-flex justify-content-between py-2">
                                                <span>Net Salary</span>
                                                <strong>{{ number_format((float) ($latestItem?->net_salary ?? 0), 2) }}</strong>
                                            </div>
                                        @else
                                            <div class="text-center text-muted py-3">No latest payslip available.</div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-7 mb-3">
                                <div class="module-panel h-100">
                                    <div class="module-panel-heading bg-info">
                                        <i class="fas fa-list mr-2"></i> Salary Breakdown
                                    </div>
                                    <div class="p-3">
                                        <div class="row">
                                            <div class="col-sm-6 mb-3">
                                                <div class="attendance-today-panel h-100">
                                                    <div class="text-muted small text-uppercase">Gross Salary</div>
                                                    <strong>{{ number_format((float) ($latestItem?->gross_salary ?? 0), 2) }}</strong>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 mb-3">
                                                <div class="attendance-today-panel h-100">
                                                    <div class="text-muted small text-uppercase">Net Salary</div>
                                                    <strong>{{ number_format((float) ($latestItem?->net_salary ?? 0), 2) }}</strong>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 mb-3 mb-sm-0">
                                                <div class="attendance-today-panel h-100">
                                                    <div class="text-muted small text-uppercase">Allowances</div>
                                                    <strong class="text-success">{{ number_format((float) ($latestItem?->total_allowances ?? 0), 2) }}</strong>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="attendance-today-panel h-100">
                                                    <div class="text-muted small text-uppercase">Tax / Social Security / Deductions</div>
                                                    <strong class="text-danger">{{ number_format((float) ($latestItem?->total_deductions ?? 0), 2) }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="module-panel">
                            <div class="module-panel-heading bg-primary">
                                <i class="fas fa-list mr-2"></i> Payslip Register
                            </div>
                            <div class="p-3">
                                <div class="row mb-4">
                                    <div class="col-md-4 mb-2 mb-md-0">
                                        <input type="month" name="payroll_month_display" value="{{ $selectedPayrollMonth }}" class="form-control" aria-label="Payroll month">
                                    </div>
                                    <div class="col-md-5 mb-2 mb-md-0">
                                        <select class="form-control" aria-label="Payslip owner">
                                            <option>{{ $employee?->full_name ?? auth()->user()?->name }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" class="btn btn-primary btn-block">
                                            <i class="fas fa-filter mr-1"></i> Filter
                                        </button>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-sm mb-0">
                                        <thead>
                                            <tr>
                                                <th>Payslip</th>
                                                <th>Period</th>
                                                <th class="text-right">Basic</th>
                                                <th class="text-right">Allowances</th>
                                                <th class="text-right">Deductions</th>
                                                <th class="text-right">Net</th>
                                                <th class="text-right">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($payslips as $payslip)
                                                <tr>
                                                    <td>
                                                        <strong>{{ $payslip->payslip_number }}</strong>
                                                        <div class="small text-muted">{{ $payslip->generated_at?->format('M d, Y') }}</div>
                                                    </td>
                                                    <td>{{ $payslip->item->run->period->name ?? $payslip->generated_at?->format('M Y') }}</td>
                                                    <td class="text-right">{{ number_format((float) ($payslip->item->basic_salary ?? 0), 2) }}</td>
                                                    <td class="text-right">{{ number_format((float) ($payslip->item->total_allowances ?? 0), 2) }}</td>
                                                    <td class="text-right">{{ number_format((float) ($payslip->item->total_deductions ?? 0), 2) }}</td>
                                                    <td class="text-right">{{ number_format((float) ($payslip->item->net_salary ?? 0), 2) }}</td>
                                                    <td class="text-right">
                                                        <a href="{{ route('payroll.payslips.show', $payslip) }}" class="btn btn-xs btn-outline-primary mb-1">
                                                            <i class="fas fa-eye"></i> View
                                                        </a>
                                                        <a href="{{ route('payroll.payslips.download', $payslip) }}" class="btn btn-xs btn-outline-success mb-1">
                                                            <i class="fas fa-file-pdf"></i> Download PDF
                                                        </a>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center text-muted py-3">No payslips generated.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                        @if($payslips->isNotEmpty())
                                            <tfoot>
                                                <tr>
                                                    <th colspan="5">Total Net Pay In View</th>
                                                    <th class="text-right">{{ number_format((float) $payrollNetTotal, 2) }}</th>
                                                    <th></th>
                                                </tr>
                                            </tfoot>
                                        @endif
                                    </table>
                                </div>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>
            </div>

            <x-adminlte-card id="employee-documents" title="Documents" icon="fas fa-folder-open" theme="teal" class="employee-module-section" data-employee-module="documents">
                @php
                    $expiringDocumentsCount = $documents->filter(fn ($document) => $document->expires_at && $document->expires_at->isBetween(today(), today()->addDays(30), true))->count();
                    $expiredDocumentsCount = $documents->filter(fn ($document) => $document->expires_at && $document->expires_at->isPast())->count();
                @endphp

                <div class="timesheet-toolbar mb-3">
                    <div>
                        <h5 class="mb-1">Employee Documents</h5>
                        <p class="text-muted mb-0">Personal files, contracts, HR policies, handbook, and training materials.</p>
                    </div>
                    @if($employee)
                        <button type="button" class="btn btn-success btn-sm" data-toggle="collapse" data-target="#self-service-document-form" aria-expanded="{{ $errors->any() ? 'true' : 'false' }}" aria-controls="self-service-document-form">
                            <i class="fas fa-upload mr-1"></i> Upload Document
                        </button>
                    @endif
                </div>

                <div class="module-summary-grid">
                    <div class="module-summary-tile teal">
                        <i class="fas fa-id-card"></i>
                        <div>
                            <span>Personal Documents</span>
                            <strong>{{ $documents->count() }}</strong>
                        </div>
                    </div>
                    <div class="module-summary-tile blue">
                        <i class="fas fa-file-signature"></i>
                        <div>
                            <span>Contracts</span>
                            <strong>{{ $contracts->count() }}</strong>
                        </div>
                    </div>
                    <div class="module-summary-tile green">
                        <i class="fas fa-book-open"></i>
                        <div>
                            <span>Forms & Policies</span>
                            <strong>{{ count($hrForms) }}</strong>
                        </div>
                    </div>
                    <div class="module-summary-tile yellow">
                        <i class="fas fa-hourglass-half"></i>
                        <div>
                            <span>Expiring Soon</span>
                            <strong>{{ $expiringDocumentsCount }}</strong>
                        </div>
                    </div>
                </div>

                @if($employee)
                    <div class="collapse {{ $errors->any() ? 'show' : '' }}" id="self-service-document-form">
                        <form method="POST" action="{{ route('self-service.documents.store') }}" enctype="multipart/form-data" class="module-panel p-3 mb-3">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <x-adminlte-select name="document_type" label="Document Type" required>
                                        @foreach($documentTypes as $type)
                                            <option value="{{ $type }}" @selected(old('document_type') === $type)>{{ $type }}</option>
                                        @endforeach
                                    </x-adminlte-select>
                                </div>
                                <div class="col-md-4">
                                    <x-adminlte-input name="title" label="Title" value="{{ old('title') }}" placeholder="Passport copy, certificate..." required/>
                                </div>
                                <div class="col-md-4">
                                    <x-adminlte-input name="expires_at" label="Expiry Date" type="date" value="{{ old('expires_at') }}"/>
                                </div>
                                <div class="col-12">
                                    <x-adminlte-input-file name="document_file" label="File" placeholder="Choose document" required/>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="fas fa-save mr-1"></i> Upload Document
                            </button>
                        </form>
                    </div>
                @endif

                <div class="row">
                    <div class="col-lg-7 mb-3">
                        <div class="module-panel h-100">
                            <div class="module-panel-heading bg-teal">
                                <i class="fas fa-id-card mr-2"></i> Personal Document Register
                                @if($expiredDocumentsCount > 0)
                                    <span class="badge badge-danger ml-2">{{ $expiredDocumentsCount }} expired</span>
                                @endif
                            </div>
                            <div class="p-3">
                                <div class="row mb-4">
                                    <div class="col-md-5 mb-2 mb-md-0">
                                        <select class="form-control" aria-label="Document type">
                                            <option>All document types</option>
                                            @foreach($documentTypes as $type)
                                                <option>{{ $type }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-2 mb-md-0">
                                        <select class="form-control" aria-label="Document status">
                                            <option>All statuses</option>
                                            <option>Active</option>
                                            <option>Expiring Soon</option>
                                            <option>Expired</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" class="btn btn-info btn-block">
                                            <i class="fas fa-filter mr-1"></i> Filter
                                        </button>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm mb-0">
                                        <thead>
                                            <tr>
                                                <th>Document</th>
                                                <th>Type</th>
                                                <th>Expiry</th>
                                                <th>Status</th>
                                                <th class="text-right">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($documents as $document)
                                                @php
                                                    $documentStatus = 'Active';
                                                    $documentBadge = 'success';

                                                    if ($document->expires_at && $document->expires_at->isPast()) {
                                                        $documentStatus = 'Expired';
                                                        $documentBadge = 'danger';
                                                    } elseif ($document->expires_at && $document->expires_at->lte(today()->addDays(30))) {
                                                        $documentStatus = 'Expiring Soon';
                                                        $documentBadge = 'warning';
                                                    }
                                                @endphp
                                                <tr>
                                                    <td>
                                                        <strong>{{ $document->title }}</strong>
                                                        <div class="text-muted small">Uploaded {{ $document->created_at?->format('M d, Y') }}</div>
                                                    </td>
                                                    <td>{{ $document->document_type }}</td>
                                                    <td>{{ $document->expires_at?->format('M d, Y') ?? 'No expiry' }}</td>
                                                    <td><span class="badge badge-{{ $documentBadge }}">{{ $documentStatus }}</span></td>
                                                    <td class="text-right">
                                                        <a href="{{ route('self-service.documents.download', $document) }}" class="btn btn-xs btn-outline-primary">
                                                            <i class="fas fa-download mr-1"></i> Download
                                                        </a>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-center text-muted py-3">No personal documents uploaded.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-5 mb-3">
                        <div class="module-panel mb-3">
                            <div class="module-panel-heading bg-primary">
                                <i class="fas fa-file-contract mr-2"></i> Employment Contracts
                            </div>
                            <div class="list-group list-group-flush">
                                @forelse($contracts as $contract)
                                    <div class="list-group-item d-flex justify-content-between align-items-center">
                                        <div>
                                            <strong>{{ $contract->status }}</strong>
                                            <div class="text-muted small">{{ $contract->start_date->format('M d, Y') }} - {{ $contract->end_date->format('M d, Y') }}</div>
                                        </div>
                                        @if($contract->signed_contract_path)
                                            <a href="{{ route('self-service.contracts.download', $contract) }}" class="btn btn-xs btn-outline-primary">
                                                <i class="fas fa-download mr-1"></i> Download
                                            </a>
                                        @else
                                            <span class="badge badge-secondary">Pending signature</span>
                                        @endif
                                    </div>
                                @empty
                                    <div class="text-center text-muted py-3">No contracts available.</div>
                                @endforelse
                            </div>
                        </div>

                        <div class="module-panel">
                            <div class="module-panel-heading bg-success">
                                <i class="fas fa-book-open mr-2"></i> HR Forms, Policies & Training
                            </div>
                            <div class="list-group list-group-flush">
                                @foreach($hrForms as $key => $label)
                                    <a href="{{ route('self-service.hr-forms.download', $key) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <span>{{ $label }}</span>
                                        <i class="fas fa-download text-muted"></i>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </x-adminlte-card>

            <x-adminlte-card id="employee-notifications" title="Notifications" icon="fas fa-bell" theme="info" class="employee-module-section" data-employee-module="notifications">
                @php
                    $attentionNotifications = $notifications->filter(fn ($notification) => in_array($notification['badge'] ?? 'secondary', ['warning', 'danger'], true))->count();
                    $announcementCount = $notifications->where('category', 'Announcement')->count();
                    $payrollNotificationCount = $notifications->where('category', 'Payroll')->count();
                    $leaveNotificationCount = $notifications->where('category', 'Leave')->count();
                @endphp

                <div class="timesheet-toolbar mb-3">
                    <div>
                        <h5 class="mb-1">Employee Notifications</h5>
                        <p class="text-muted mb-0">HR announcements, leave decisions, payslip alerts, contract reminders, and timesheet updates.</p>
                    </div>
                    <a href="#employee-dashboard" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-th-large mr-1"></i> Dashboard
                    </a>
                </div>

                <div class="module-summary-grid">
                    <div class="module-summary-tile teal">
                        <i class="fas fa-bell"></i>
                        <div>
                            <span>Total Notices</span>
                            <strong>{{ $notifications->count() }}</strong>
                        </div>
                    </div>
                    <div class="module-summary-tile blue">
                        <i class="fas fa-calendar-check"></i>
                        <div>
                            <span>Leave Updates</span>
                            <strong>{{ $leaveNotificationCount }}</strong>
                        </div>
                    </div>
                    <div class="module-summary-tile green">
                        <i class="fas fa-receipt"></i>
                        <div>
                            <span>Payroll Alerts</span>
                            <strong>{{ $payrollNotificationCount }}</strong>
                        </div>
                    </div>
                    <div class="module-summary-tile yellow">
                        <i class="fas fa-exclamation-circle"></i>
                        <div>
                            <span>Needs Attention</span>
                            <strong>{{ $attentionNotifications }}</strong>
                        </div>
                    </div>
                </div>

                <div class="module-panel">
                    <div class="module-panel-heading bg-info">
                        <i class="fas fa-list mr-2"></i> Notification Register
                    </div>
                    <div class="p-3">
                        <div class="row mb-4">
                            <div class="col-md-4 mb-2 mb-md-0">
                                <select class="form-control" aria-label="Notification category">
                                    <option>All categories</option>
                                    <option>Announcement</option>
                                    <option>Leave</option>
                                    <option>Payroll</option>
                                    <option>Documents</option>
                                    <option>Timesheets</option>
                                    <option>Advance</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-2 mb-md-0">
                                <select class="form-control" aria-label="Notification status">
                                    <option>All statuses</option>
                                    <option>New</option>
                                    <option>Approved</option>
                                    <option>Rejected</option>
                                    <option>Warning</option>
                                    <option>Attention</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-info btn-block">
                                    <i class="fas fa-filter mr-1"></i> Filter
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Notification</th>
                                        <th>Date</th>
                                        <th>Status</th>
                                        <th class="text-right">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($notifications as $notification)
                                        @php
                                            $notificationTarget = match ($notification['category'] ?? '') {
                                                'Leave' => '#leave-management',
                                                'Payroll' => '#employee-payroll',
                                                'Documents' => '#employee-documents',
                                                'Timesheets' => '#self-service-timesheets',
                                                'Advance' => '#my-advances',
                                                default => '#employee-dashboard',
                                            };
                                        @endphp
                                        <tr>
                                            <td>
                                                <span class="badge badge-light">
                                                    <i class="{{ $notification['icon'] }} mr-1"></i> {{ $notification['category'] ?? 'Notice' }}
                                                </span>
                                            </td>
                                            <td>
                                                <strong>{{ $notification['title'] }}</strong>
                                                <div class="text-muted small">{{ $notification['body'] }}</div>
                                            </td>
                                            <td>{{ $notification['date']?->format('M d, Y') ?? 'Today' }}</td>
                                            <td><span class="badge badge-{{ $notification['badge'] ?? 'secondary' }}">{{ $notification['status'] ?? 'New' }}</span></td>
                                            <td class="text-right">
                                                <a href="{{ $notificationTarget }}" class="btn btn-xs btn-outline-primary">
                                                    <i class="fas fa-eye mr-1"></i> View
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-3">No notifications yet.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </x-adminlte-card>

            @if($advanceModuleActive)
                <x-adminlte-card id="my-advances" title="Requests" icon="fas fa-hand-holding-usd" theme="teal" class="employee-module-section" data-employee-module="requests">
                    @php
                        $advanceTotalRequested = $advances->sum(fn ($advance) => (float) $advance->amount_requested);
                        $advanceOutstanding = $advances->sum(fn ($advance) => $advance->balanceDue());
                        $advanceAwaitingReview = $advances->whereIn('status', ['Submitted', 'Finance Review', 'Supervisor Recommended'])->count();
                        $advanceEvidenceRequired = $advances->filter(fn ($advance) => in_array($advance->status, ['Paid', 'Partially Retired'], true) && $advance->balanceDue() > 0)->count();
                    @endphp

                    <div class="timesheet-toolbar mb-3">
                        <div>
                            <h5 class="mb-1">Advance Request & Retirement</h5>
                            <p class="text-muted mb-0">Request staff advances, track approval, and upload retirement evidence for finance review.</p>
                        </div>
                        @can('advance.request')
                            @if($employee)
                                <button type="button" class="btn btn-success btn-sm" data-toggle="collapse" data-target="#self-service-advance-form" aria-expanded="{{ $errors->any() ? 'true' : 'false' }}" aria-controls="self-service-advance-form">
                                    <i class="fas fa-plus mr-1"></i> New Advance Request
                                </button>
                            @endif
                        @endcan
                    </div>

                    <div class="module-summary-grid">
                        <div class="module-summary-tile teal">
                            <i class="fas fa-file-invoice-dollar"></i>
                            <div>
                                <span>Total Requests</span>
                                <strong>{{ $advances->count() }}</strong>
                            </div>
                        </div>
                        <div class="module-summary-tile blue">
                            <i class="fas fa-hourglass-half"></i>
                            <div>
                                <span>Awaiting Review</span>
                                <strong>{{ $advanceAwaitingReview }}</strong>
                            </div>
                        </div>
                        <div class="module-summary-tile green">
                            <i class="fas fa-money-check-alt"></i>
                            <div>
                                <span>Total Requested</span>
                                <strong>{{ number_format($advanceTotalRequested, 2) }}</strong>
                            </div>
                        </div>
                        <div class="module-summary-tile yellow">
                            <i class="fas fa-balance-scale"></i>
                            <div>
                                <span>Outstanding</span>
                                <strong>{{ number_format($advanceOutstanding, 2) }}</strong>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-lg-8 mb-3 mb-lg-0">
                            <div class="module-panel p-3 h-100">
                                <div class="text-muted small text-uppercase mb-1">Workflow</div>
                                <strong>Draft -> Submitted -> Supervisor Approval -> Approved -> Paid -> Retirement</strong>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="module-panel p-3 h-100">
                                <div class="text-muted small text-uppercase mb-1">Policy</div>
                                <strong>Max {{ $advancePolicy->maximum_amount ? number_format((float) $advancePolicy->maximum_amount, 2) : 'not capped' }}</strong>
                                <div class="text-muted small">Retire within {{ $advancePolicy->default_retirement_days }} days.</div>
                            </div>
                        </div>
                    </div>

                    @can('advance.request')
                        @if($employee)
                            <div class="collapse {{ $errors->any() ? 'show' : '' }}" id="self-service-advance-form">
                                <form method="POST" action="{{ route('self-service.advances.store') }}" class="module-panel p-3 mb-3">
                                    @csrf
	                                    <div class="row">
	                                        <div class="col-md-6">
	                                            <x-adminlte-input name="purpose" label="Purpose" value="{{ old('purpose') }}" placeholder="Field travel, workshop, procurement..." required/>
	                                        </div>
	                                        <div class="col-md-6">
	                                            <x-adminlte-input name="requested_by_signature" label="Requested By Signature" value="{{ old('requested_by_signature', auth()->user()?->name) }}" placeholder="Type your name"/>
	                                        </div>
	                                        <div class="col-md-4">
	                                            <x-adminlte-select name="category" label="Category" required>
	                                                @foreach($advancePolicy->categories ?? [] as $category)
	                                                    <option value="{{ $category }}" @selected(old('category') === $category)>{{ $category }}</option>
	                                                @endforeach
	                                            </x-adminlte-select>
	                                        </div>
	                                        <div class="col-md-4">
	                                            <x-adminlte-input name="requested_date" label="Request Date" type="date" value="{{ old('requested_date', now()->toDateString()) }}" required/>
	                                        </div>
	                                        <div class="col-md-4">
	                                            <x-adminlte-input name="needed_by" label="Needed By" type="date" value="{{ old('needed_by') }}"/>
	                                        </div>
                                            @php
                                                $advanceItemRows = old('items', [[
                                                    'project' => '',
                                                    'activity' => '',
                                                    'item_requested' => '',
                                                    'number_of_days' => '',
                                                    'location' => '',
                                                    'start_date' => '',
                                                    'end_date' => '',
                                                    'rate_amount' => '',
                                                    'quantity' => 1,
                                                ]]);
                                            @endphp
                                            <div class="col-12">
                                                <datalist id="advance-project-options">
                                                    @foreach($projectOptions as $projectOption)
                                                        <option value="{{ $projectOption }}"></option>
                                                    @endforeach
                                                </datalist>
                                                <datalist id="advance-activity-options">
                                                    @foreach($activityOptions as $activityOption)
                                                        <option value="{{ $activityOption['name'] }}" label="{{ $activityOption['project'] ? $activityOption['project'].' project' : 'Activity' }}"></option>
                                                    @endforeach
                                                </datalist>
                                                <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
                                                    <label class="mb-2 mb-sm-0">Requested Items</label>
                                                    <button type="button" class="btn btn-outline-primary btn-sm" id="add-advance-item-row">
                                                        <i class="fas fa-plus mr-1"></i> Add Item
                                                    </button>
                                                </div>
                                                <div class="table-responsive mb-3">
                                                    <table class="table table-sm table-bordered mb-0" id="advance-items-table">
                                                        <thead>
                                                            <tr>
                                                                <th style="min-width: 150px;">Project</th>
                                                                <th style="min-width: 150px;">Activity</th>
                                                                <th style="min-width: 180px;">Item Requested</th>
                                                                <th style="min-width: 95px;">Days</th>
                                                                <th style="min-width: 140px;">Location</th>
                                                                <th style="min-width: 130px;">Start</th>
                                                                <th style="min-width: 130px;">End</th>
                                                                <th style="min-width: 120px;">Rate / Amount</th>
                                                                <th style="min-width: 90px;">Qty</th>
                                                                <th style="min-width: 120px;">Total Amount</th>
                                                                <th style="min-width: 70px;">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="advance-items-body" data-next-index="{{ count($advanceItemRows) }}">
                                                            @foreach($advanceItemRows as $row => $itemRow)
                                                                <tr>
                                                                    <td><input name="items[{{ $row }}][project]" list="advance-project-options" class="form-control form-control-sm" value="{{ $itemRow['project'] ?? '' }}" placeholder="Select or type"></td>
                                                                    <td><input name="items[{{ $row }}][activity]" list="advance-activity-options" class="form-control form-control-sm" value="{{ $itemRow['activity'] ?? '' }}" placeholder="Select or type"></td>
                                                                    <td><input name="items[{{ $row }}][item_requested]" class="form-control form-control-sm" value="{{ $itemRow['item_requested'] ?? '' }}" placeholder="Per diem, fuel, hotel" required></td>
                                                                    <td><input name="items[{{ $row }}][number_of_days]" type="number" min="1" class="form-control form-control-sm advance-item-days" value="{{ $itemRow['number_of_days'] ?? '' }}"></td>
                                                                    <td><input name="items[{{ $row }}][location]" class="form-control form-control-sm" value="{{ $itemRow['location'] ?? '' }}" placeholder="Location"></td>
                                                                    <td><input name="items[{{ $row }}][start_date]" type="date" class="form-control form-control-sm" value="{{ $itemRow['start_date'] ?? '' }}"></td>
                                                                    <td><input name="items[{{ $row }}][end_date]" type="date" class="form-control form-control-sm" value="{{ $itemRow['end_date'] ?? '' }}"></td>
                                                                    <td><input name="items[{{ $row }}][rate_amount]" type="number" min="0" step="0.01" class="form-control form-control-sm advance-item-rate" value="{{ $itemRow['rate_amount'] ?? '' }}" required></td>
                                                                    <td><input name="items[{{ $row }}][quantity]" type="number" min="1" class="form-control form-control-sm advance-item-quantity" value="{{ $itemRow['quantity'] ?? 1 }}"></td>
                                                                    <td><input type="text" class="form-control form-control-sm advance-item-total" value="0.00" readonly></td>
                                                                    <td class="text-center">
                                                                        <button type="button" class="btn btn-xs btn-outline-danger remove-advance-item-row">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
	                                        <div class="col-12">
	                                            <x-adminlte-textarea name="notes" label="Notes" rows="2">{{ old('notes') }}</x-adminlte-textarea>
	                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="fas fa-paper-plane mr-1"></i> Submit Advance Request
                                    </button>
                                </form>
                            </div>
                        @endif
                    @endcan

                    <div class="module-panel">
                        <div class="module-panel-heading bg-teal">
                            <i class="fas fa-list mr-2"></i> Request Register
                            @if($advanceEvidenceRequired > 0)
                                <span class="badge badge-warning ml-2">{{ $advanceEvidenceRequired }} need retirement evidence</span>
                            @else
                                <span class="badge badge-light ml-2">Own requests only</span>
                            @endif
                        </div>
                        <div class="p-3">
                            <div class="row mb-4">
                                <div class="col-md-4 mb-2 mb-md-0">
                                    <select class="form-control" aria-label="Request status">
                                        <option>All statuses</option>
                                        <option>Submitted</option>
                                        <option>Approved</option>
                                        <option>Paid</option>
                                        <option>Partially Retired</option>
                                        <option>Retired</option>
                                        <option>Rejected</option>
                                    </select>
                                </div>
                                <div class="col-md-5 mb-2 mb-md-0">
                                    <select class="form-control" aria-label="Request owner">
                                        <option>{{ $employee?->full_name ?? auth()->user()?->name }}</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-info btn-block">
                                        <i class="fas fa-filter mr-1"></i> Filter
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm mb-0">
                                    <thead>
                                        <tr>
                                            <th>Request</th>
                                            <th>Purpose</th>
                                            <th>Status</th>
                                            <th class="text-right">Requested</th>
                                            <th class="text-right">Approved</th>
                                            <th class="text-right">Retired</th>
                                            <th class="text-right">Balance</th>
                                            <th>Retirement</th>
                                            <th class="text-right">Evidence</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($advances as $advance)
                                            @php
                                                $statusTheme = match ($advance->status) {
                                                    'Submitted' => 'info',
                                                    'Finance Review', 'Supervisor Recommended' => 'primary',
                                                    'Approved', 'Paid' => 'success',
                                                    'Partially Retired' => 'warning',
                                                    'Correction Required' => 'secondary',
                                                    'Retired' => 'dark',
                                                    'Rejected' => 'danger',
                                                    default => 'secondary',
                                                };
                                                $isRetirementOverdue = $advance->retirement_due_date
                                                    && $advance->retirement_due_date->isPast()
                                                    && ! in_array($advance->status, ['Retired', 'Rejected'], true);
                                            @endphp
                                            <tr>
                                                <td>
                                                    <strong>{{ $advance->request_number }}</strong>
                                                    <div class="text-muted small">Requested {{ $advance->requested_date->format('M d, Y') }}</div>
                                                </td>
                                                <td>
                                                    <strong>{{ $advance->purpose }}</strong>
                                                    @if($advance->category)
                                                        <span class="badge badge-light">{{ $advance->category }}</span>
                                                    @endif
                                                    @if($advance->project)
                                                        <div class="text-muted small">{{ $advance->project }}</div>
                                                    @endif
                                                    @if($advance->items->isNotEmpty())
                                                        <div class="small mt-2">
                                                            @foreach($advance->items->take(2) as $item)
                                                                <div>
                                                                    <strong>{{ $item->item_requested }}</strong>
                                                                    <span class="text-muted">
                                                                        {{ $item->project ? ' / '.$item->project : '' }}
                                                                        {{ $item->activity ? ' / '.$item->activity : '' }}
                                                                        {{ $item->location ? ' / '.$item->location : '' }}
                                                                    </span>
                                                                    <span class="badge badge-light">{{ number_format((float) $item->line_total, 2) }}</span>
                                                                </div>
                                                            @endforeach
                                                            @if($advance->items->count() > 2)
                                                                <span class="badge badge-light">+{{ $advance->items->count() - 2 }} more item(s)</span>
                                                            @endif
                                                        </div>
                                                    @endif
                                                    <div class="small text-muted mt-2">
                                                        Requested by {{ $advance->requested_by_signature ?? $advance->requester?->name ?? 'Employee' }}
                                                        @if($advance->requested_signed_at)
                                                            on {{ $advance->requested_signed_at->format('M d, Y') }}
                                                        @endif
                                                        @if($advance->supervisor_signature)
                                                            <br>Reviewed by {{ $advance->supervisor_signature }}{{ $advance->supervisor_signed_at ? ' on '.$advance->supervisor_signed_at->format('M d, Y') : '' }}
                                                        @endif
                                                        @if($advance->approved_by_signature)
                                                            <br>Approved by {{ $advance->approved_by_signature }}{{ $advance->approved_signed_at ? ' on '.$advance->approved_signed_at->format('M d, Y') : '' }}
                                                        @endif
                                                    </div>
                                                </td>
                                                <td><span class="badge badge-{{ $statusTheme }}">{{ $advance->status }}</span></td>
                                                <td class="text-right">{{ number_format((float) $advance->amount_requested, 2) }}</td>
                                                <td class="text-right">{{ number_format((float) $advance->amount_approved, 2) }}</td>
                                                <td class="text-right">{{ number_format((float) $advance->amount_retired, 2) }}</td>
                                                <td class="text-right">{{ number_format($advance->balanceDue(), 2) }}</td>
                                                <td>
                                                    @if($advance->retirement_due_date)
                                                        <span class="badge badge-{{ $isRetirementOverdue ? 'danger' : 'light' }}">
                                                            Due {{ $advance->retirement_due_date->format('M d, Y') }}
                                                        </span>
                                                    @else
                                                        <span class="text-muted small">Set after approval</span>
                                                    @endif
                                                </td>
                                                <td class="text-right">
                                                    @if(in_array($advance->status, ['Paid', 'Partially Retired'], true))
                                                        <button type="button" class="btn btn-xs btn-outline-primary mb-1" data-toggle="modal" data-target="#self-advance-doc-{{ $advance->id }}">
                                                            <i class="fas fa-upload"></i> Submit
                                                        </button>
                                                    @endif
                                                    @forelse($advance->documents as $document)
                                                        <div class="small">
                                                            <a href="{{ route('self-service.advances.documents.download', $document) }}">
                                                                <i class="fas fa-download mr-1"></i>{{ $document->title }}
                                                            </a>
                                                        </div>
                                                    @empty
                                                        @unless(in_array($advance->status, ['Paid', 'Partially Retired'], true))
                                                            <span class="text-muted small">Not required yet</span>
                                                        @else
                                                            <span class="text-muted small">No evidence</span>
                                                        @endunless
                                                    @endforelse
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center text-muted py-3">No advance requests yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </x-adminlte-card>
            @endif
        </div>
    </div>

    @if($advanceModuleActive)
        @foreach($advances as $advance)
            <x-adminlte-modal id="self-advance-doc-{{ $advance->id }}" title="Upload Evidence: {{ $advance->request_number }}" theme="primary" icon="fas fa-upload">
                <form id="self-advance-doc-form-{{ $advance->id }}" method="POST" action="{{ route('self-service.advances.documents.store', $advance) }}" enctype="multipart/form-data">
                    @csrf
                    <x-adminlte-select name="document_type" label="Document Type" required>
                        @foreach(['Receipt', 'Invoice', 'Payment Voucher', 'Approval Memo', 'Retirement Form', 'Other'] as $type)
                            <option value="{{ $type }}">{{ $type }}</option>
                        @endforeach
                    </x-adminlte-select>
                    <x-adminlte-input name="title" label="Title" placeholder="Receipt batch, invoice, retirement form..." required/>
                    <x-adminlte-input-file name="document_file" label="File" placeholder="Choose file" required/>
                    <x-slot name="footerSlot">
                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" form="self-advance-doc-form-{{ $advance->id }}" class="btn btn-primary">Upload Evidence</button>
                    </x-slot>
                </form>
            </x-adminlte-modal>
        @endforeach
    @endif
    </div>
@stop