<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tasks - Task Panel</title>
    
    <!-- Google Fonts -->
    <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 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 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;
        }

        /* Scrollbar customization */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 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;
            align-items: center;
            gap: 1rem;
        }

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

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

        .user-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;
        }

        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


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

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

        .user-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;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-top: 0.5rem;
        }

        .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%;
            padding: 0.625rem 1rem 0.625rem 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;
            flex-grow: 1;
            justify-content: flex-end;
            max-width: 520px;
            width: 100%;
        }

        .status-select {
            padding: 0.625rem 2.25rem 0.625rem 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);
        }

        /* 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;
}

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

        .project-tag {
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.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;
        }


        /* 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);
        }


        /* 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;
            text-decoration: none;
        }

        .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;
        }

        /* 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-admin {
            background-color: #fef3c7;
            color: #92400e;
        }

        .table-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-top: 1px solid #f1f5f9;
            background-color: #ffffff;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .showing-text {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .pagination {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 0.35rem;
        }

        .page-item a, .page-item span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 0.5rem;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-label);
            text-decoration: none;
            border: 1px solid #e2e8f0;
            background-color: #ffffff;
            transition: all 0.2s;
            cursor: pointer;
        }

        .page-item.active span {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary);
        }

        .page-item a:hover {
            border-color: var(--border-hover);
            background-color: #f8fafc;
            color: var(--primary);
        }

        .page-item.disabled span {
            color: #cbd5e1;
            background-color: #f1f5f9;
            cursor: not-allowed;
            border-color: #e2e8f0;
        }

        .page-item svg {
            width: 0.875rem;
            height: 0.875rem;
            stroke-width: 2.5;
        }

        .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;
        }

        /* 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;
            }
            .menu-toggle-btn {
                display: flex;
            }
            .topbar {
                justify-content: space-between;
            }
        }

        #modalStatus, #modalVerifyStatus {
            display: inline-block !important;
            width: auto !important;
            max-width: max-content !important;
            padding: 6px 12px;
            border-radius: 50px; 
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            align-self: flex-start; 
        }

        @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;
            }
            .table-footer {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }
    </style>
    <link rel="icon" type="image/png" href="<?php echo e(asset('images/faviocntaskpannel.png')); ?>">
</head>
<body>

    <div class="dashboard-layout">
        <?php echo $__env->make('user.sidebar.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <!-- RIGHT MAIN CONTENT -->
        <main class="main-content">
        <?php echo $__env->make('user.sidebar.topbar', ['pageTitle' => 'My Tasks'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <?php if(session('success')): ?>
            <div class="alert-success" style="margin-top: 1.5rem;">
                <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; ?>

        <!-- Card Container with table -->
        <div class="table-card" style="margin-top: 1.5rem;">
            <!-- Status Filter + Search Controls -->
            <div class="table-actions-bar">
                <!-- Search input -->
                <form action="<?php echo e(route('user.tasks.index')); ?>" method="GET" class="search-form">
                    <?php if(!empty($status)): ?>
                        <input type="hidden" name="status" value="<?php echo e($status); ?>">
                    <?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>

                <div class="filter-controls" style="display: flex; gap: 0.75rem; align-items: center; margin-left: auto;">
                    <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>
                    </select>

                    <a href="<?php echo e(route('user.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>Project Name</th>
                            <th>Project Type</th>
                            <th>Added By</th>
                            <th>Status</th>
                            <th>Dates</th>
                            <th>Verify</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>
                                    <span class="project-tag"><?php echo e($task->project->name); ?></span>
                                </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 === 'User' ? 'added-by-self' : 'added-by-admin'); ?>">
                                        <?php echo e($task->added_by === 'User' ? 'Self' : 'Admin'); ?>

                                    </span>
                                </td>
                                <td>
                                    <select id="task-status-select-<?php echo e($task->id); ?>" class="status-badge <?php echo e($statusClass); ?>" onchange="updateTaskStatus(<?php echo e($task->id); ?>, this)" style="border: none; cursor: <?php echo e($statusLower === 'completed' ? 'default' : 'pointer'); ?>; outline: none; padding-right: <?php echo e($statusLower === 'completed' ? '0.85rem' : '1.5rem'); ?>; appearance: none; background-image: <?php echo e($statusLower === 'completed' ? 'none' : "url('data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\' viewBox=\\'0 0 24 24\\' fill=\\'none\\' stroke=\\'%2364748b\\' stroke-width=\\'3\\' stroke-linecap=\\'round\\' stroke-linejoin=\\'round\\'><polyline points=\\'6 9 12 15 18 9\\'></polyline></svg>')"); ?>; background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 0.65rem;" <?php echo e($statusLower === 'completed' ? 'disabled' : ''); ?>>
                                        <option value="Pending" <?php echo e($task->status === 'Pending' ? 'selected' : ''); ?>>Pending</option>
                                        <option value="In Progress" <?php echo e($task->status === 'In Progress' ? 'selected' : ''); ?>>In Progress</option>
                                        <option value="Hold" <?php echo e($task->status === 'Hold' || $task->status === 'On Hold' ? 'selected' : ''); ?>>On Hold</option>
                                        <option value="Cancelled" <?php echo e($task->status === 'Cancelled' ? 'selected' : ''); ?>>Cancelled</option>
                                        <option value="Completed" <?php echo e($task->status === 'Completed' || $task->status === 'Complete' ? 'selected' : ''); ?>>Complete</option>
                                    </select>
                                </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>
                                    <?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: ?>
                                        <span style="color: #ef4444; font-weight: 700; font-size: 0.85rem; background: #fef2f2; padding: 0.25rem 0.65rem; border-radius: 6px;">Not Verified</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <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->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('user.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"
                                            title="Delete Task"
                                            onclick="openDeleteModal('<?php echo e(route('user.tasks.delete', $task->id)); ?>', '<?php echo e($task->name); ?>')">
                                        
                                            <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="8" 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">
                <!-- Task + Project -->

                <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>

                <!-- Status + Verify -->
                <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="modalVerifyStatus"></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 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 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>
        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'); 
            window.location.href = url.toString();
        }

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

    // Purani background color pill classes remove karein
    statusEl.classList.remove(
        'status-pending-pill',
        'status-inprogress-pill',
        'status-completed-pill',
        'status-hold-pill',
        'status-cancelled-pill'
    );

    // Current status ke mutabik sahi color add karein
    switch (currentStatus.toLowerCase()) {
        case 'completed':
        case 'complete':
            statusEl.classList.add('status-completed-pill');
            break;

        case 'in progress':
            statusEl.classList.add('status-inprogress-pill');
            break;

        case 'hold':
        case 'on hold':
            statusEl.classList.add('status-hold-pill');
            break;

        case 'cancelled':
            statusEl.classList.add('status-cancelled-pill');
            break;

        default:
            statusEl.classList.add('status-pending-pill');
    }

    // 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);
    };

    // Default to task object values, but if DOM elements exist, use their updated values
    let displayStartDate = formatDate(task.start_date);
    let displayEndDate = formatDate(task.end_date);

    if (taskId) {
        const startDateEl = document.getElementById('start-date-' + taskId);
        const endDateEl = document.getElementById('end-date-' + taskId);
        
        if (startDateEl && startDateEl.innerText !== '-' && startDateEl.innerText !== 'N/A') {
            displayStartDate = startDateEl.innerText;
        }
        if (endDateEl && endDateEl.innerText !== '-' && endDateEl.innerText !== 'N/A') {
            displayEndDate = endDateEl.innerText;
        }
    }

    document.getElementById('modalStartDate').innerText = displayStartDate;
    document.getElementById('modalEndDate').innerText = displayEndDate;

    const verifyEl = document.getElementById('modalVerifyStatus');
    if (task.is_verified) {
        verifyEl.innerText = 'Verified';
        verifyEl.style.backgroundColor = '#ecfdf5';
        verifyEl.style.color = '#10b981';
    } else {
        verifyEl.innerText = 'Not Verified';
        verifyEl.style.backgroundColor = '#fef2f2';
        verifyEl.style.color = '#ef4444';
    }

    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 {
            linkField.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;
            
            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(`/tasks/${taskId}/update-status`, {
                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();
                } else {
                    const startDateEl = document.getElementById('start-date-' + taskId);
                    const endDateEl = document.getElementById('end-date-' + taskId);
                    if (startDateEl && data.start_date) startDateEl.innerText = data.start_date;
                    if (endDateEl && data.end_date) endDateEl.innerText = data.end_date;

                    if (newStatus === 'Completed') {
                        selectElement.disabled = true;
                        selectElement.style.backgroundImage = 'none';
                        selectElement.style.cursor = 'default';
                        selectElement.style.paddingRight = '0.85rem';
                    }
                }
            })
            .catch(error => {
                console.error('Error updating status:', error);
                alert('An error occurred while updating the status.');
                window.location.reload();
            });
        }

        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/user/task/task.blade.php ENDPATH**/ ?>