<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tasks - Task Panel</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #3b46f1;
            --primary-color: #3b46f1;
            --primary-hover: #2a35d8;
            --primary-light: #eff6ff;
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-label: #334155;
            --border-color: #e2e8f0;
            --border-hover: #cbd5e1;
            --font-family: 'Instrument Sans', sans-serif;

            /* Colors for priority/status */
            --color-high: #ef4444;
            --color-high-bg: #fee2e2;
            --color-medium: #f97316;
            --color-medium-bg: #ffedd5;
            --color-low: #10b981;
            --color-low-bg: #dcfce7;
            
            --color-completed: #10B981;
            --color-completed-bg: #ecfdf5;
            --color-progress: #3B82F6;
            --color-progress-bg: #dbeafe;
            --color-pending: #F59E0B;
            --color-pending-bg: #fef3c7;
            --color-hold: #F97316;
            --color-hold-bg: #ffedd5;
            --color-cancelled: #EF4444;
            --color-cancelled-bg: #fee2e2;
            
            --sidebar-width: 260px;
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
            --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
            --border-radius: 12px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-main);
            color: var(--text-main);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        /* Main Page Layout Wrapper */
        .dashboard-layout {
            display: flex;
            position: relative;
            min-height: 100vh;
        }

        /* Main Content Layout */
        .main-content {
            margin-left: var(--sidebar-width);
            flex-grow: 1;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            min-width: 0;
            transition: margin-left 0.3s ease;
        }

        /* Topbar styling */
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
        }

        .topbar-left {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .admin-profile {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 8px;
            transition: background-color 0.2s;
        }

        .admin-profile:hover {
            background-color: #f1f5f9;
        }

        .avatar-frame {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            position: relative;
            background: linear-gradient(135deg, #4f46e5, #3b82f6);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 0.85rem;
            overflow: hidden;
        }

        .online-status-dot {
            width: 10px;
            height: 10px;
            background-color: #10b981;
            border: 2px solid #ffffff;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .admin-info {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
        }

        .admin-fullname {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text-main);
        }

        .admin-role-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .profile-arrow {
            color: #64748b;
            display: flex;
            align-items: center;
        }

        .profile-arrow svg {
            width: 1rem;
            height: 1rem;
        }

        /* Page Header Title */
        .dashboard-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dashboard-title {
            font-size: 1.75rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #0e1c59;
        }

        /* Alert notifications */
        .alert-success {
            background-color: var(--color-completed-bg);
            border-left: 4px solid var(--color-completed);
            padding: 1rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            font-weight: 600;
            color: #065f46;
            animation: fadeIn 0.3s ease;
        }

        .alert-success svg {
            width: 1.25rem;
            height: 1.25rem;
            margin-right: 0.5rem;
            color: var(--color-completed);
        }

        /* Card and Actions Bar */
        .table-card {
            background-color: var(--bg-card);
            border: 1px solid #e2e8f0;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .table-actions-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #f1f5f9;
            gap: 1rem;
            flex-wrap: wrap;
        }

        /* Search input */
        .search-form {
            position: relative;
            max-width: 320px;
            width: 100%;
        }

        .search-input {
            width: 100%;
            height: 40px;
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.875rem;
            color: var(--text-main);
            background-color: #ffffff;
            transition: all 0.2s;
            font-family: inherit;
        }

        .search-input::placeholder {
            color: var(--text-muted);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 70, 241, 0.1);
        }

        .search-icon {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
            width: 1.125rem;
            height: 1.125rem;
        }

        /* Right filters */
        .filter-controls {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .status-select {
            height: 40px;
            padding: 0.5rem 2.25rem 0.5rem 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.875rem;
            color: var(--text-label);
            background-color: #ffffff;
            cursor: pointer;
            outline: none;
            font-family: inherit;
            font-weight: 500;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.875rem center;
            background-size: 0.75rem;
            transition: all 0.2s;
        }

        .status-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 70, 241, 0.1);
        }

        .add-task-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--primary);
            color: #ffffff;
            padding: 0.625rem 1.125rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(59, 70, 241, 0.15);
            transition: all 0.2s;
            cursor: pointer;
            border: none;
        }

        .add-task-btn:hover {
            background-color: var(--primary-hover);
            box-shadow: 0 6px 15px rgba(59, 70, 241, 0.25);
        }

        .add-task-btn svg {
            width: 1.125rem;
            height: 1.125rem;
            stroke-width: 2.5;
        }

        /* Table design */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
        }

        .tasks-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        .tasks-table th {
            font-size: 0.725rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 700;
            padding: 1rem 1rem;
            border-bottom: 1px solid #f1f5f9;
            background-color: #fdfdfd;
            vertical-align: middle;
            white-space: nowrap;
        }

        .tasks-table td {
            padding: 1.15rem 1rem;
            border-bottom: 1px solid #f1f5f9;
            font-size: 0.875rem;
            color: var(--text-label);
            vertical-align: middle;
            white-space: nowrap;
        }

        .tasks-table th:first-child,
        .tasks-table td:first-child {
            width: 60px;
            padding-left: 1.5rem;
            padding-right: 0.25rem;
        }

        .tasks-table th:nth-child(2),
        .tasks-table td:nth-child(2) {
            padding-left: 0.25rem;
        }

        .tasks-table tr:last-child td {
            border-bottom: none;
        }

        .tasks-table tbody tr {
            transition: background-color 0.15s;
        }

        .tasks-table tbody tr:hover {
            background-color: #fafbfd;
        }

        /* Row Specific Styles */
        .task-name-cell {
    font-weight: 700;
    color: var(--text-main);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
    text-overflow: ellipsis;

    white-space: normal;
    word-break: break-word;

    max-width: 100%; /* 200px hata do */
    line-height: 1.4;
}

/* Task Column Width */
.tasks-table th:nth-child(3),
.tasks-table td:nth-child(3) {
    min-width: 350px;
    width: 350px;
    white-space: normal;
}
            /* .task-name-cell {
    font-weight: 700;
    color: var(--text-main);
    display: -webkit-box;
    overflow: hidden;

    -webkit-line-clamp: 3;  
    -webkit-box-orient: vertical;

    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
} */

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .project-tag {
            color: var(--text-muted);
            font-weight: 600;
            font-size: .85rem;
        }
        .project-type-tag {
            color: var(--text-muted);
            font-weight: 600;
            font-size: .85rem;
            background-color: #f9f2f1;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
        }

        /* Added By badge */
        .added-by-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .added-by-self {
            background-color: #eff6ff;
            color: #3b46f1;
        }

        .added-by-user {
            background-color: #fef3c7;
            color: #92400e;
        }


        /* Status pill badge */
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        select.status-badge {
            border: none;
            cursor: pointer;
            outline: none;
            padding-right: 1.4rem;
            appearance: none;
            background-repeat: no-repeat;
            background-position: right 0.45rem center;
            background-size: 0.65rem;
            font-family: inherit;
            font-weight: 700;
            text-align: left;
        }

        select.status-badge option {
            font-weight: 600;
        }

        select.status-badge option[value="Pending"] {
            background-color: var(--color-pending-bg) !important;
            color: var(--color-pending) !important;
        }

        select.status-badge option[value="In Progress"] {
            background-color: var(--color-progress-bg) !important;
            color: var(--color-progress) !important;
        }

        select.status-badge option[value="Hold"] {
            background-color: var(--color-hold-bg) !important;
            color: var(--color-hold) !important;
        }

        select.status-badge option[value="Cancelled"] {
            background-color: var(--color-cancelled-bg) !important;
            color: var(--color-cancelled) !important;
        }

        select.status-badge option[value="Completed"] {
            background-color: var(--color-completed-bg) !important;
            color: var(--color-completed) !important;
        }

        .status-completed-pill {
            background-color: var(--color-completed-bg);
            color: var(--color-completed);
        }

        .status-inprogress-pill {
            background-color: var(--color-progress-bg);
            color: var(--color-progress);
        }

        .status-pending-pill {
            background-color: var(--color-pending-bg);
            color: var(--color-pending);
        }

        .status-hold-pill {
            background-color: var(--color-hold-bg);
            color: var(--color-hold);
        }

        .status-cancelled-pill {
            background-color: var(--color-cancelled-bg);
            color: var(--color-cancelled);
        }


        /* Assigned User mini card */
        .user-assigned-card {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .user-avatar-mini {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 0.7rem;
            background: linear-gradient(135deg, #6366f1, #3b82f6);
            overflow: hidden;
        }

        .user-name-mini {
            font-weight: 600;
            color: var(--text-label);
            font-size: 0.85rem;
        }

        .user-unassigned {
            font-style: italic;
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 500;
        }

        /* Action elements */
        .action-buttons {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #e2e8f0;
            background-color: #ffffff;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s;
        }

        .action-btn-view {
            background-color: var(--primary-light);
            border-color: rgba(59, 70, 241, 0.15);
            color: var(--primary);
        }

        .action-btn-view:hover {
            color: #ffffff;
            border-color: var(--primary);
            background-color: var(--primary);
            transform: scale(1.05);
        }

        .action-btn-edit {
            background-color: #f0fdf4;
            border-color: rgba(22, 163, 74, 0.15);
            color: #16a34a;
        }

        .action-btn-edit:hover {
            color: #ffffff;
            border-color: #16a34a;
            background-color: #16a34a;
            transform: scale(1.05);
        }

        .action-btn-delete {
            background-color: #fef2f2;
            border-color: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .action-btn-delete:hover {
            color: #ffffff;
            border-color: #ef4444;
            background-color: #ef4444;
            transform: scale(1.05);
        }

        .action-btn svg {
            width: 1.125rem;
            height: 1.125rem;
            stroke-width: 2;
        }


        /* Drawer Hamburger menu toggler (mobile) */
        .menu-toggle-btn {
            display: none;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            width: 38px;
            height: 38px;
            border-radius: 8px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-label);
            margin-right: auto;
        }

        .menu-toggle-btn svg {
            width: 1.25rem;
            height: 1.25rem;
            stroke-width: 2.5;
        }

        .sidebar-close-btn {
            display: none;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            position: absolute;
            top: 1.5rem;
            right: 1rem;
        }

        .sidebar-close-btn svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background-color: rgba(15, 23, 42, 0.3);
            backdrop-filter: blur(4px);
            z-index: 90;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .sidebar-backdrop.active {
            display: block;
            opacity: 1;
        }

        /* Task View Modal dialog */
        .modal {
            position: fixed;
            inset: 0;
            background-color: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(4px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            padding: 1.5rem;
        }

        .modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-card {
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            width: 100%;
            max-width: 500px;
            overflow: hidden;
            transform: scale(0.9);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .modal.active .modal-card {
            transform: scale(1);
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fdfdfd;
        }

        .modal-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: #0e1c59;
        }

        .modal-close {
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            padding: 0.25rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .modal-close:hover {
            background-color: #f1f5f9;
            color: #64748b;
        }

        .modal-close svg {
            width: 1.25rem;
            height: 1.25rem;
            stroke-width: 2.5;
        }

        .modal-body {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .modal-field {
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }

        .modal-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.05em;
        }

        .modal-value {
            font-size: 0.95rem;
            color: var(--text-main);
            font-weight: 600;
        }



        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Responsive Breakpoints */
        @media (max-width: 1024px) {
            .main-content {
                margin-left: 0;
                padding: 1.5rem;
            }
        }

        @media (max-width: 640px) {
            .table-actions-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .search-form {
                max-width: 100%;
            }
            .filter-controls {
                justify-content: space-between;
            }
            .status-select {
                flex-grow: 1;
            }
        }
    </style>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?php echo e(asset('images/faviocntaskpannel.png')); ?>">
</head>
<body>

    <div class="dashboard-layout">

        <!-- LEFT SIDEBAR (ADMIN NAVIGATION) -->
        <?php echo $__env->make('admin.sidebar.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <main class="main-content">
        <?php echo $__env->make('admin.sidebar.topbar', [
            'title' => 'Manage Tasks',
            'rightContent' => '
                <a href="'.route('tasks.create').'" class="add-task-btn">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
                    </svg>
                    <span>Add Task</span>
                </a>


            '
        ], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <?php if(session('success')): ?>
            <div class="alert-success">
                <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span><?php echo e(session('success')); ?></span>
            </div>
        <?php endif; ?>

        <style>
            .user-task-count-bar {
                display: flex;
                align-items: center;
                background-color: #ffffff;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                padding: 0.5rem 1rem;
                margin-bottom: 0rem;
                gap: 1.5rem;
                flex-wrap: wrap;
                box-shadow: 0 2px 4px rgba(59, 70, 241, 0.05);
            }

            .user-task-count-bar .status-selector {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                border-right: 1px solid #e2e8f0;
                padding-right: 1.5rem;
            }
            .user-task-count-bar select {
                border: none;
                font-weight: 600;
                color: #0f172a;
                outline: none;
                background-color: transparent;
                cursor: pointer;
                font-family: inherit;
                font-size: 0.9rem;
            }
            .user-task-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 0.85rem;
                font-weight: 600;
                color: #334155;
            }
            .user-initials {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 0.65rem;
                font-weight: 700;
            }
            .user-task-badge {
                background-color: #f1f5f9;
                color: #475569;
                padding: 0.15rem 0.5rem;
                border-radius: 12px;
                font-size: 0.75rem;
            }
            .total-task-badge {
                background-color: #eff6ff;
                color: var(--primary);
                padding: 0.25rem 0.75rem;
                border-radius: 12px;
                font-size: 0.85rem;
                font-weight: 700;
                margin-left: auto;
            }
        </style>

        <div class="user-task-count-bar">
            <!-- <div class="status-selector">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18" style="color: #64748b;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                </svg>
                <select onchange="filterStatus(this.value)">
                    <option value="All" <?php echo e($status == 'All' || empty($status) ? 'selected' : ''); ?>>All Tasks</option>
                    <option value="Pending" <?php echo e($status == 'Pending' ? 'selected' : ''); ?>>Pending</option>
                    <option value="In Progress" <?php echo e($status == 'In Progress' ? 'selected' : ''); ?>>In Progress</option>
                    <option value="Completed" <?php echo e($status == 'Completed' ? 'selected' : ''); ?>>Completed</option>
                    <option value="Hold" <?php echo e($status == 'Hold' ? 'selected' : ''); ?>>Hold</option>
                    <option value="Cancelled" <?php echo e($status == 'Cancelled' ? 'selected' : ''); ?>>Cancelled</option>
                </select>
            </div> -->
            
            <?php
                $colors = ['#8b5cf6', '#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#14b8a6', '#6366f1', '#f43f5e'];
                $totalTasks = 0;
            ?>
            
            <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $initials = collect(explode(' ', $u->name))->map(function($word) { return strtoupper(substr($word, 0, 1)); })->take(2)->join('');
                    $color = $colors[$index % count($colors)];
                    $totalTasks += $u->tasks_count;
                ?>
                <div class="user-task-item">
                    <div class="user-initials" style="background-color: <?php echo e($color); ?>;">
                        <?php echo e($initials); ?>

                    </div>
                    <span><?php echo e($u->name); ?></span>
                    <span class="user-task-badge"><?php echo e($u->tasks_count); ?></span>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            
            <div class="total-task-badge">
                Total <?php echo e($totalTasks); ?>

            </div>
        </div>

        <!-- Card Container with actions bar and table -->
        <div class="table-card">
            <div class="table-actions-bar">
                <!-- Search input -->
                <form action="<?php echo e(route('tasks.index')); ?>" method="GET" class="search-form">
                    <?php if(!empty($status)): ?>
                        <input type="hidden" name="status" value="<?php echo e($status); ?>">
                    <?php endif; ?>
                    <?php if(!empty($user_id)): ?>
                        <input type="hidden" name="user_id" value="<?php echo e($user_id); ?>">
                    <?php endif; ?>
                    <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    <input type="text" name="search" value="<?php echo e($search); ?>" class="search-input" id="searchInput" placeholder="Search tasks...">
                </form>

                <!-- Right selectors -->
                <div class="filter-controls">
                    <select class="status-select" id="statusFilter" onchange="filterStatus(this.value)">
                        <option value="All" <?php echo e($status == 'All' || empty($status) ? 'selected' : ''); ?>>All Status</option>
                        <option value="Pending" <?php echo e($status == 'Pending' ? 'selected' : ''); ?>>Pending</option>
                        <option value="In Progress" <?php echo e($status == 'In Progress' ? 'selected' : ''); ?>>In Progress</option>
                        <option value="Completed" <?php echo e($status == 'Completed' ? 'selected' : ''); ?>>Completed</option>
                        <option value="Hold" <?php echo e($status == 'Hold' ? 'selected' : ''); ?>>Hold</option>
                        <option value="Cancelled" <?php echo e($status == 'Cancelled' ? 'selected' : ''); ?>>Cancelled</option>
                    </select>

                    <select class="status-select" id="userFilter" onchange="filterUser(this.value)">
                        <option value="All" <?php echo e($user_id == 'All' || empty($user_id) ? 'selected' : ''); ?>>All Assigned To</option>
                        <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($u->id); ?>" <?php echo e($user_id == $u->id ? 'selected' : ''); ?>><?php echo e($u->name); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>

                    <a href="<?php echo e(route('tasks.index')); ?>" class="status-select" style="text-decoration: none; display: inline-flex; align-items: center; justify-content: center; background-color: #f1f5f9; border-color: #e2e8f0; color: #64748b; font-weight: 600; padding: 0 1.75rem; height: 40px; box-sizing: border-box; background-image: none;" title="Reset Filters">
                        Reset
                    </a>
                </div>
            </div>

            <!-- Table content -->
            <div class="table-responsive">
                <table class="tasks-table">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Created Date</th>
                            <th>Task Name</th>
                             <th>Verify</th>
                            <th>Project Name</th>
                            <th>Assigned To</th>
                            <th>Project Type</th>
                            <th>Added By</th>
                            <th>Status</th>
                            <th>Dates</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $tasks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <?php
                                $statusClass = 'status-pending-pill';
                                $dotColor = 'var(--color-pending)';
                                $statusLower = strtolower($task->status);
                                if ($statusLower === 'completed') {
                                    $statusClass = 'status-completed-pill';
                                    $dotColor = 'var(--color-completed)';
                                } elseif ($statusLower === 'in progress') {
                                    $statusClass = 'status-inprogress-pill';
                                    $dotColor = 'var(--color-progress)';
                                } elseif ($statusLower === 'hold') {
                                    $statusClass = 'status-hold-pill';
                                    $dotColor = 'var(--color-hold)';
                                } elseif ($statusLower === 'cancelled') {
                                    $statusClass = 'status-cancelled-pill';
                                    $dotColor = 'var(--color-cancelled)';
                                }
                            ?>
                            <tr>
                                <td style="font-weight: 700; color: var(--text-muted); font-size: 0.85rem;"><?php echo e($tasks->firstItem() + $index); ?></td>
                                <td>
                                    <span style="color: var(--text-muted); font-size: 0.85rem;"><?php echo e($task->created_at ? $task->created_at->format('d/m/Y') : 'N/A'); ?></span>
                                </td>
                                <td>
                                    <div class="task-name-cell">
                                        <span><?php echo e($task->name); ?></span>
                                    </div>
                                </td>
                                <td>
                                    <div id="verify-container-<?php echo e($task->id); ?>">
                                        <?php if($task->is_verified): ?>
                                            <span style="color: #10b981; font-weight: 700; font-size: 0.85rem; background: #ecfdf5; padding: 0.25rem 0.65rem; border-radius: 6px;">Verified</span>
                                        <?php else: ?>
                                            <!--<button type="button" class="btn-verify" id="verify-btn-<?php echo e($task->id); ?>" onclick="verifyTask(<?php echo e($task->id); ?>)" style="display: inline-flex; align-items: center; gap: 0.25rem; color: #3b82f6; border: 1px solid #3b82f6; background: transparent; padding: 0.25rem 0.5rem; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s;">-->
                                                <button type="button" class="btn-verify" id="verify-btn-<?php echo e($task->id); ?>" onclick="verifyTask(<?php echo e($task->id); ?>, '<?php echo e(addslashes($task->status)); ?>')" style="display: inline-flex; align-items: center; gap: 0.25rem; color: #3b82f6; border: 1px solid #3b82f6; background: transparent; padding: 0.25rem 0.5rem; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
                                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                                                Verify
                                            </button>
                                        <?php endif; ?>
                                    </div>
                                </td>
                                <td>
                                    <span class="project-tag"><?php echo e($task->project->name); ?></span>
                                </td>
                                <td>
                                    <?php if($task->user): ?>
                                        <div class="user-assigned-card">
                                            <span class="user-name-mini"><?php echo e($task->user->name); ?></span>
                                        </div>
                                    <?php else: ?>
                                        <span class="user-unassigned">Unassigned</span>
                                    <?php endif; ?>
                                </td>
                                
                                <td>
                                    <span class="project-type-tag"><?php echo e($task->project->type); ?></span>
                                </td>
                                <td>
                                    <span class="added-by-badge <?php echo e($task->added_by === 'Admin' ? 'added-by-self' : 'added-by-user'); ?>">
                                        <?php echo e($task->added_by === 'Admin' ? 'Self' : 'User'); ?>

                                    </span>
                                </td>
                                <td>
                                    <span class="status-badge <?php echo e($statusClass); ?>" style="padding: 0.35rem 0.85rem; display: inline-flex; justify-content: center; align-items: center; border: none; font-weight: 700; text-align: center;">
                                        <?php if($task->status === 'Hold' || $task->status === 'On Hold'): ?>
                                            On Hold
                                        <?php elseif($task->status === 'Completed' || $task->status === 'Complete'): ?>
                                            Complete
                                        <?php else: ?>
                                            <?php echo e($task->status); ?>

                                        <?php endif; ?>
                                    </span>
                                </td>
                                <td>
                                    <div style="font-size: 0.85rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.25rem;">
                                        <span>Start: <strong id="start-date-<?php echo e($task->id); ?>"><?php echo e($task->start_date ? \Carbon\Carbon::parse($task->start_date)->format('d/m/Y') : '-'); ?></strong></span>
                                        <span>End: <strong id="end-date-<?php echo e($task->id); ?>"><?php echo e($task->end_date ? \Carbon\Carbon::parse($task->end_date)->format('d/m/Y') : '-'); ?></strong></span>
                                    </div>
                                </td>
                                
                                
                                <td>
                                    <div class="action-buttons">
                                        <button type="button" class="action-btn action-btn-view" onclick="openDetailsModal(
                                            <?php echo e(json_encode([
                                                'name' => $task->name,
                                                'status' => $task->status,
                                                'link' => $task->link,
                                                'start_date' => $task->start_date,
                                                'end_date' => $task->end_date,
                                                'is_verified' => $task->is_verified,
                                                'project_type' => $task->project->type ?? '',
                                                'photos' => $task->photos ?? []
                                            ])); ?>,
                                            '<?php echo e($task->project->name ?? ''); ?>',
                                            '<?php echo e($task->user ? $task->user->name : 'Unassigned'); ?>',
                                            <?php echo e($task->id); ?>

                                            )" title="View Task Details">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                            </svg>
                                        </button>
                                        <a href="<?php echo e(route('tasks.edit', $task->id)); ?>" class="action-btn action-btn-edit" title="Edit Task">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                            </svg>
                                        </a>
                                        <button type="button"
                                                class="action-btn action-btn-delete"
                                                onclick="openDeleteModal('<?php echo e(route('tasks.delete', $task->id)); ?>', '<?php echo e($task->name); ?>')"
                                                title="Delete Task">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                </path>
                                            </svg>
                                        </button>
                         
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="9" style="text-align: center; padding: 4rem; color: var(--text-muted); font-weight: 500;">
                                    No tasks found matching your filters.
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

            <!-- Custom Pagination Footer -->
            <?php echo $__env->make('common.pagination', ['paginator' => $tasks, 'resourceName' => 'tasks'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
        </div>
    </main>
    </div>

    <!-- PREMIUM DETAILS MODAL DIALOG -->
    <div id="detailsModal" class="modal">
        <div class="modal-card">
            <div class="modal-header">
                <h3 class="modal-title">Task Details</h3>
                <button class="modal-close" onclick="closeDetailsModal()">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-field">
                    <span class="modal-label">Task Name</span>
                    <span class="modal-value" id="modalTitle"></span>
                    </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    
                     <div class="modal-field">
                        <span class="modal-label">Project Name</span>
                        <span class="modal-value" id="modalProject"></span>
                    </div>
                    <div class="modal-field">
                        <span class="modal-label">Project Type</span>
                        <span class="modal-value" id="modalProjectType"></span>
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    
                    <div class="modal-field">
                        <span class="modal-label">Assigned To</span>
                        <span class="modal-value" id="modalAssignedUser"></span>
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="modal-field">
                        <span class="modal-label">Start Date</span>
                        <span class="modal-value" id="modalStartDate"></span>
                    </div>
                    <div class="modal-field">
                        <span class="modal-label">End Date</span>
                        <span class="modal-value" id="modalEndDate"></span>
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
    <div class="modal-field">
        <span class="modal-label">Status</span>
        <span id="modalStatus"></span>
    </div>

    <div class="modal-field">
        <span class="modal-label">Verify Status</span>
        <span id="modalVerify"></span>
    </div>
</div>

<div class="modal-field" id="modalLinkField" style="display: none;">
    <span class="modal-label">Link</span>
    <a href="#" id="modalLink" class="modal-value" target="_blank"
       style="color: var(--primary); text-decoration: underline; word-break: break-all;"></a>
</div>

<div class="modal-field" id="modalPhotosField" style="display: none; margin-top: 1rem;">
    <span class="modal-label">Attached Photos</span>
    <div id="modalPhotosContainer" style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0.5rem;">
    </div>
</div>

            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal">
    <div class="modal-card" style="max-width:450px;">
        <div class="modal-header">
            <h3 class="modal-title">Delete Task</h3>

            <button class="modal-close" onclick="closeDeleteModal()">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M6 18L18 6M6 6l12 12">
                    </path>
                </svg>
            </button>
        </div>

        <div class="modal-body">
            <p style="font-size:15px;color:#475569;line-height:1.6;">
                Are you sure you want to delete
                Task :-  
                <strong id="deleteTaskName"></strong> ?
            </p>

            <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:10px;">
                <button onclick="closeDeleteModal()"
                    style="padding:10px 18px;border:none;background:#e2e8f0;border-radius:8px;cursor:pointer;">
                    Cancel
                </button>

                <a id="confirmDeleteBtn"
                    href="#"
                    style="padding:10px 18px;background:#ef4444;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;">
                    Delete
                </a>
            </div>
        </div>
    </div>
</div>

    <script>
        // Status Filter helper
        function filterStatus(val) {
            const url = new URL(window.location.href);
            if (val === 'All') {
                url.searchParams.delete('status');
            } else {
                url.searchParams.set('status', val);
            }
            url.searchParams.delete('page'); // reset pagination page
            window.location.href = url.toString();
        }

        // Assigned User Filter helper
        function filterUser(val) {
            const url = new URL(window.location.href);
            if (val === 'All') {
                url.searchParams.delete('user_id');
            } else {
                url.searchParams.set('user_id', val);
            }
            url.searchParams.delete('page'); 
            window.location.href = url.toString();
        }

        function openDetailsModal(task, projectName, userName, taskId) {
            document.getElementById('modalTitle').innerText = task.name;
            document.getElementById('modalProject').innerText = projectName;
            document.getElementById('modalProjectType').innerText = task.project_type;
            document.getElementById('modalAssignedUser').innerText = userName;
            
            let currentStatus = task.status;
            if (taskId) {
                const selectElement = document.getElementById('task-status-select-' + taskId);
                if (selectElement) {
                    currentStatus = selectElement.value;
                }
            }
            let statusClass = 'status-pending-pill';

            if (currentStatus === 'Completed' || currentStatus === 'Complete') {
                statusClass = 'status-completed-pill';
            } else if (currentStatus === 'In Progress') {
                statusClass = 'status-inprogress-pill';
            } else if (currentStatus === 'Hold' || currentStatus === 'On Hold') {
                statusClass = 'status-hold-pill';
            } else if (currentStatus === 'Cancelled') {
                statusClass = 'status-cancelled-pill';
            }
            
            document.getElementById('modalStatus').innerHTML = `
                <span class="status-badge ${statusClass}">
                    ${currentStatus}
                </span>
            `;

            let isVerified = task.is_verified;
            if (taskId) {
                const verifyContainer = document.getElementById('verify-container-' + taskId);
                if (verifyContainer) {
                    // Check if the verify button is still there. If not, it means it's verified.
                    if (!verifyContainer.querySelector('.btn-verify')) {
                        isVerified = true;
                    } else {
                        isVerified = false;
                    }
                }
            }

        document.getElementById('modalVerify').innerHTML = isVerified
        ? `<span style="
        background:#ecfdf5;
        color:#10b981;
        padding:6px 12px;
        border-radius:999px;
        font-size:13px;
        font-weight:700;
        ">Verified</span>`
        : `<span style="
        background:#fef3c7;
        color:#d97706;
        padding:6px 12px;
        border-radius:999px;
        font-size:13px;
        font-weight:700;
        ">Not Verified</span>`;
            
            
            // Format dates
            const formatDate = (dateStr) => {
                if (!dateStr) return 'N/A';
                const options = { day: '2-digit', month: 'short', year: 'numeric' };
                return new Date(dateStr).toLocaleDateString('en-GB', options);
            };

            if (document.getElementById('modalStartDate')) {
                document.getElementById('modalStartDate').innerText = formatDate(task.start_date);
            }
            if (document.getElementById('modalEndDate')) {
                document.getElementById('modalEndDate').innerText = formatDate(task.end_date);
            }
            


            // Link field display
            const linkField = document.getElementById('modalLinkField');
            const linkEl = document.getElementById('modalLink');
            if (linkField && linkEl) {
                if (task.link) {
                    linkField.style.display = 'flex';
                    linkEl.href = task.link;
                    linkEl.innerText = task.link;
                } else {
                    document.getElementById('modalLinkField').style.display = 'none';
                }
            }
            
            // Photos
            const photosContainer = document.getElementById('modalPhotosContainer');
            photosContainer.innerHTML = '';
            if (task.photos && task.photos.length > 0) {
                document.getElementById('modalPhotosField').style.display = 'block';
                const storageBase = '<?php echo e(asset("storage")); ?>';
                task.photos.forEach(photo => {
                    const imgUrl = storageBase + '/' + photo;
                    const imgHtml = `
                        <div style="position: relative;">
                            <a href="${imgUrl}" target="_blank">
                                <img src="${imgUrl}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;">
                            </a>
                        </div>
                    `;
                    photosContainer.insertAdjacentHTML('beforeend', imgHtml);
                });
            } else {
                document.getElementById('modalPhotosField').style.display = 'none';
            }

            document.getElementById('detailsModal').classList.add('active');
        }

        function closeDetailsModal() {
            document.getElementById('detailsModal').classList.remove('active');
        }

        function openDeleteModal(deleteUrl, taskName) {
    document.getElementById('deleteTaskName').innerText = taskName;
    document.getElementById('confirmDeleteBtn').href = deleteUrl;

    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

        function updateTaskStatus(taskId, selectElement) {
            const newStatus = selectElement.value;
            
            // Map status value to the correct CSS class name
            let newClass = 'status-pending-pill';
            if (newStatus === 'Completed') {
                newClass = 'status-completed-pill';
            } else if (newStatus === 'In Progress') {
                newClass = 'status-inprogress-pill';
            } else if (newStatus === 'Hold') {
                newClass = 'status-hold-pill';
            } else if (newStatus === 'Cancelled') {
                newClass = 'status-cancelled-pill';
            }
            
            selectElement.classList.remove('status-pending-pill', 'status-completed-pill', 'status-inprogress-pill', 'status-hold-pill', 'status-cancelled-pill');
            
            selectElement.classList.add(newClass);

            fetch(`<?php echo e(url('/tasks')); ?>/${taskId}/update-status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                },
                body: JSON.stringify({ status: newStatus })
            })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    alert('Failed to update status: ' + data.message);
                    window.location.reload();
                }
            })
            .catch(error => {
                console.error('Error updating status:', error);
                alert('An error occurred while updating the status.');
                window.location.reload();
            });
        }

        // function verifyTask(taskId) {
        function verifyTask(taskId, status) {
            if (status.toLowerCase() !== 'completed' && status.toLowerCase() !== 'complete') {
                alert('Task is not Completed !!! please completed task');
                return;
            }
            const btn = document.getElementById('verify-btn-' + taskId);
            if (!btn) return;
            
            btn.disabled = true;
            btn.style.opacity = '0.5';

            fetch(`<?php echo e(url('/tasks')); ?>/${taskId}/verify`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const container = document.getElementById('verify-container-' + taskId);
                    container.innerHTML = `
                        <span style="color: #10b981; font-weight: 700; font-size: 0.85rem; background: #ecfdf5; padding: 0.25rem 0.65rem; border-radius: 6px;">Verified</span>
                    `;
                } else {
                    alert('Failed to verify task: ' + data.message);
                    btn.disabled = false;
                    btn.style.opacity = '1';
                }
            })
            .catch(error => {
                console.error('Error verifying task:', error);
                alert('An error occurred while verifying the task.');
                btn.disabled = false;
                btn.style.opacity = '1';
            });
        }

        document.getElementById('detailsModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDetailsModal();
            }
        });

        document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});

        document.addEventListener('DOMContentLoaded', function() {
            // Clear filters on manual page reload
            const navEntries = performance.getEntriesByType("navigation");
            const isReload = (navEntries.length > 0 && navEntries[0].type === "reload") || (performance.navigation && performance.navigation.type === 1);
            if (isReload && window.location.search) {
                window.location.href = window.location.pathname;
                return;
            }
            const successAlert = document.querySelector('.alert-success');
            if (successAlert) {
                setTimeout(() => {
                    successAlert.style.transition = 'opacity 0.5s ease';
                    successAlert.style.opacity = '0';
                    setTimeout(() => {
                        successAlert.remove();
                    }, 500);
                }, 3000);
            }

            // AJAX Live Search
            const searchInput = document.getElementById('searchInput');
            let searchTimeout;

            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        const query = this.value;
                        const url = new URL(window.location.href);
                        if (query) {
                            url.searchParams.set('search', query);
                        } else {
                            url.searchParams.delete('search');
                        }
                        
                        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                            .then(response => response.text())
                            .then(html => {
                                const parser = new DOMParser();
                                const doc = parser.parseFromString(html, 'text/html');
                                
                                const newTable = doc.querySelector('.table-responsive');
                                const currentTable = document.querySelector('.table-responsive');
                                if (newTable && currentTable) {
                                    currentTable.innerHTML = newTable.innerHTML;
                                }
                                
                                const paginationSelector = 'nav, .pagination-container, .table-footer';
                                const newPagination = doc.querySelector(paginationSelector);
                                const currentPagination = document.querySelector(paginationSelector);
                                if (newPagination && currentPagination) {
                                    currentPagination.innerHTML = newPagination.innerHTML;
                                } else if (newPagination && !currentPagination) {
                                    currentTable.insertAdjacentHTML('afterend', newPagination.outerHTML);
                                } else if (!newPagination && currentPagination) {
                                    currentPagination.remove();
                                }

                                window.history.replaceState({}, '', url);
                            });
                    }, 100);
                });
            }
        });
    </script>
</body>
</html>
<?php /**PATH /home/sainikcanteen/public_html/task.sainikcanteen.co.in/resources/views/admin/tasks/tasks.blade.php ENDPATH**/ ?>