{% extends 'base.html' %}
{% load static %}

{% block title %}Staff Dashboard - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
.dashboard-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    border-radius: 0.5rem;
}
.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.border-left-primary {
    border-left: 0.25rem solid #007bff!important;
}
.border-left-success {
    border-left: 0.25rem solid #28a745!important;
}
.border-left-warning {
    border-left: 0.25rem solid #ffc107!important;
}
.border-left-info {
    border-left: 0.25rem solid #17a2b8!important;
}
.border-left-danger {
    border-left: 0.25rem solid #dc3545!important;
}
.border-left-dark {
    border-left: 0.25rem solid #343a40!important;
}

.stat-card {
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.quick-action-btn {
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 1px solid #e3e6f0;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.role-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.dept-section {
    border-left: 4px solid;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 8px 8px 0;
    background: rgba(255,255,255,0.02);
}

.dept-marketing {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
}

.dept-technician {
    border-color: #007bff;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
}

.dept-hr {
    border-color: #6f42c1;
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.1) 0%, rgba(111, 66, 193, 0.05) 100%);
}

.dept-billing {
    border-color: #fd7e14;
    background: linear-gradient(135deg, rgba(253, 126, 20, 0.1) 0%, rgba(253, 126, 20, 0.05) 100%);
}

.performance-meter {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.performance-meter svg {
    transform: rotate(-90deg);
}

.performance-meter .progress-circle {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 8;
}

.performance-meter .progress-bar {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.performance-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
}

@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 1rem;
    }

    .quick-action-btn {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .dashboard-card .card-body {
        padding: 1rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <div>
            <h1 class="h2">
                <i class="bi bi-person-badge"></i> 
                {% if employee_profile.department.name == 'Marketing' %}
                    Marketing Dashboard
                {% elif employee_profile.department.name == 'Technician' %}
                    Technician Dashboard
                {% elif employee_profile.department.name == 'HR Staff' %}
                    HR Dashboard
                {% elif employee_profile.department.name == 'Billing Staff' %}
                    Billing Dashboard
                {% else %}
                    Staff Dashboard
                {% endif %}
            </h1>
            {% if employee_profile %}
                <p class="text-muted mb-0">
                    {{ employee_profile.full_name }} - {{ employee_profile.job_title }}
                    <span class="role-badge ms-2">{{ employee_profile.department.name|default:"No Department" }}</span>
                </p>
            {% endif %}
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-calendar"></i> {{ "now"|date:"M d, Y" }}
                </button>
            </div>
        </div>
    </div>

    <!-- Department-Specific Statistics -->
    {% if employee_profile.department.name == 'Marketing' %}
    <div class="dept-section dept-marketing">
        <h5 class="text-success mb-3"><i class="bi bi-megaphone"></i> Marketing Performance</h5>
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="card border-left-success shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">This Week</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ reports_this_week|default:0 }}</div>
                        <div class="text-xs text-muted">Reports</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="card border-left-info shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Leads</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ leads_generated|default:0 }}</div>
                        <div class="text-xs text-muted">Generated</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="card border-left-warning shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Conversion</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ conversion_rate|default:0 }}%</div>
                        <div class="text-xs text-muted">Rate</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="card shadow stat-card">
                    <div class="card-body">
                        <h6>Quick Marketing Actions</h6>
                        <div class="row">
                            <div class="col-4">
                                <a href="{% url 'customers:marketing_report_create' %}" class="quick-action-btn text-success">
                                    <i class="bi bi-plus-circle display-6"></i><br>
                                    <small class="mt-2 d-block">New Report</small>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{% url 'expenditure:expense_create' %}" class="quick-action-btn text-warning">
                                    <i class="bi bi-receipt display-6"></i><br>
                                    <small class="mt-2 d-block">Add Expense</small>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{% url 'customers:marketing_analytics' %}" class="quick-action-btn text-info">
                                    <i class="bi bi-graph-up display-6"></i><br>
                                    <small class="mt-2 d-block">Analytics</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if employee_profile.department.name == 'Technician' %}
    <div class="dept-section dept-technician">
        <h5 class="text-primary mb-3"><i class="bi bi-tools"></i> Technician Performance</h5>
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="card border-left-primary shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Today</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ scheduled_today|default:0 }}</div>
                        <div class="text-xs text-muted">Scheduled</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="card border-left-success shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Completed</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ completed_today|default:0 }}</div>
                        <div class="text-xs text-muted">Today</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <div class="card border-left-warning shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ pending_tasks|default:0 }}</div>
                        <div class="text-xs text-muted">Tasks</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="card shadow stat-card">
                    <div class="card-body">
                        <h6>Quick Technician Actions</h6>
                        <!-- Mobile quick actions -->
                        <div class="quick-action-grid d-md-none">
                            <a href="{% url 'tickets:my_schedule' %}" class="quick-action-btn">
                                <i class="bi bi-calendar-check"></i>
                                <small>My Schedule</small>
                            </a>
                            <a href="{% url 'tickets:ticket_list' %}" class="quick-action-btn">
                                <i class="bi bi-headset"></i>
                                <small>All Tickets</small>
                            </a>
                            <a href="{% url 'expenditure:expense_create' %}" class="quick-action-btn">
                                <i class="bi bi-receipt"></i>
                                <small>Add Expense</small>
                            </a>
                            <a href="{% url 'customers:customer_list' %}" class="quick-action-btn">
                                <i class="bi bi-people"></i>
                                <small>Customers</small>
                            </a>
                            <a href="{% url 'payments:create_payment' %}" class="quick-action-btn">
                                <i class="bi bi-credit-card"></i>
                                <small>Payment</small>
                            </a>
                            <a href="{% url 'accounts:profile' %}" class="quick-action-btn">
                                <i class="bi bi-person"></i>
                                <small>Profile</small>
                            </a>
                        </div>

                        <!-- Desktop quick actions -->
                        <div class="row d-none d-md-flex">
                            <div class="col-3">
                                <a href="{% url 'tickets:my_schedule' %}" class="quick-action-btn text-primary">
                                    <i class="bi bi-calendar-check display-6"></i><br>
                                    <small class="mt-2 d-block">Schedule</small>
                                </a>
                            </div>
                            <div class="col-3">
                                <a href="{% url 'tickets:ticket_list' %}" class="quick-action-btn text-info">
                                    <i class="bi bi-headset display-6"></i><br>
                                    <small class="mt-2 d-block">Tickets</small>
                                </a>
                            </div>
                            <div class="col-3">
                                <a href="{% url 'expenditure:expense_create' %}" class="quick-action-btn text-warning">
                                    <i class="bi bi-receipt display-6"></i><br>
                                    <small class="mt-2 d-block">Expense</small>
                                </a>
                            </div>
                            <div class="col-3">
                                <a href="{% url 'customers:customer_list' %}" class="quick-action-btn text-success">
                                    <i class="bi bi-people display-6"></i><br>
                                    <small class="mt-2 d-block">Customers</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if employee_profile.department.name == 'HR Staff' %}
    <div class="dept-section dept-hr">
        <h5 class="text-purple mb-3"><i class="bi bi-people-fill"></i> HR Performance</h5>
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card border-left-info shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Employees</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ total_employees|default:0 }}</div>
                        <div class="text-xs text-muted">Active</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card border-left-warning shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Payroll</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ pending_payslips|default:0 }}</div>
                        <div class="text-xs text-muted">Pending</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="card shadow stat-card">
                    <div class="card-body">
                        <h6>Quick HR Actions</h6>
                        <div class="row">
                            <div class="col-4">
                                <a href="{% url 'hr:employee_list' %}" class="quick-action-btn text-info">
                                    <i class="bi bi-people display-6"></i><br>
                                    <small class="mt-2 d-block">Employees</small>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{% url 'hr:payslip_list' %}" class="quick-action-btn text-success">
                                    <i class="bi bi-cash-stack display-6"></i><br>
                                    <small class="mt-2 d-block">Payroll</small>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{% url 'expenditure:expense_create' %}" class="quick-action-btn text-warning">
                                    <i class="bi bi-receipt display-6"></i><br>
                                    <small class="mt-2 d-block">Expense</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if employee_profile.department.name == 'Billing Staff' %}
    <div class="dept-section dept-billing">
        <h5 class="text-warning mb-3"><i class="bi bi-receipt"></i> Billing Performance</h5>
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card border-left-success shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Today</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">KSh {{ daily_collections|default:0|floatformat:0 }}</div>
                        <div class="text-xs text-muted">Collections</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card border-left-danger shadow stat-card h-100 py-2">
                    <div class="card-body text-center">
                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Overdue</div>
                        <div class="h4 mb-0 font-weight-bold text-gray-800">{{ overdue_invoices|default:0 }}</div>
                        <div class="text-xs text-muted">Invoices</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="card shadow stat-card">
                    <div class="card-body">
                        <h6>Quick Billing Actions</h6>
                        <div class="row">
                            <div class="col-4">
                                <a href="{% url 'billing:invoice_list' %}" class="quick-action-btn text-primary">
                                    <i class="bi bi-receipt display-6"></i><br>
                                    <small class="mt-2 d-block">Invoices</small>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{% url 'payments:payment_list' %}" class="quick-action-btn text-success">
                                    <i class="bi bi-credit-card display-6"></i><br>
                                    <small class="mt-2 d-block">Payments</small>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{% url 'expenditure:expense_create' %}" class="quick-action-btn text-warning">
                                    <i class="bi bi-receipt display-6"></i><br>
                                    <small class="mt-2 d-block">Expense</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Universal Task Statistics -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-warning shadow stat-card h-100 py-2">
                <div class="card-body text-center">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending</div>
                    <div class="h4 mb-0 font-weight-bold text-gray-800">{{ pending_tasks|default:0 }}</div>
                    <div class="text-xs text-muted">Open tasks</div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-primary shadow stat-card h-100 py-2">
                <div class="card-body text-center">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">In Progress</div>
                    <div class="h4 mb-0 font-weight-bold text-gray-800">{{ in_progress_tasks|default:0 }}</div>
                    <div class="text-xs text-muted">Working on</div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-success shadow stat-card h-100 py-2">
                <div class="card-body text-center">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Completed</div>
                    <div class="h4 mb-0 font-weight-bold text-gray-800">{{ completed_today|default:0 }}</div>
                    <div class="text-xs text-muted">Today</div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card shadow stat-card h-100 py-2">
                <div class="card-body text-center">
                    <div class="performance-meter">
                        <svg width="120" height="120">
                            <circle class="progress-circle" cx="60" cy="60" r="50"></circle>
                            <circle class="progress-bar" cx="60" cy="60" r="50" 
                                    style="stroke: #28a745; stroke-dasharray: 314; stroke-dashoffset: {% widthratio completion_rate 100 314 %}"></circle>
                        </svg>
                        <div class="performance-text">
                            <div class="h4 text-success">{{ completion_rate|default:0 }}%</div>
                            <small class="text-muted">Efficiency</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Row -->
    <div class="row">
        <!-- Today's Priority Tasks -->
        <div class="col-lg-8 mb-4">
            <div class="card shadow">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="bi bi-list-check"></i> 
                        {% if employee_profile.department.name == 'Marketing' %}
                            Today's Marketing Tasks
                        {% elif employee_profile.department.name == 'Technician' %}
                            Today's Service Schedule
                        {% else %}
                            Today's Priority Tasks
                        {% endif %}
                    </h6>
                    <a href="{% url 'tickets:ticket_list' %}" class="btn btn-sm btn-primary">View All</a>
                </div>
                <div class="card-body">
                    {% if todays_schedule %}
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Time</th>
                                        <th>Task</th>
                                        <th>Customer</th>
                                        <th>Priority</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in todays_schedule %}
                                    <tr class="{% if ticket.is_past_due %}table-danger{% endif %}">
                                        <td>
                                            <strong>{{ ticket.scheduled_date|time:"H:i" }}</strong>
                                            {% if ticket.scheduled_end_time %}
                                                <br><small class="text-muted">{{ ticket.scheduled_end_time|time:"H:i" }}</small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <strong>{{ ticket.title|truncatechars:40 }}</strong>
                                            {% if ticket.location %}
                                                <br><small class="text-muted"><i class="bi bi-geo-alt"></i> {{ ticket.location|truncatechars:30 }}</small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {{ ticket.customer_name }}
                                            {% if ticket.contact_phone %}
                                                <br><small class="text-muted">{{ ticket.contact_phone }}</small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% else %}success{% endif %}">
                                                {{ ticket.get_priority_display|upper }}
                                            </span>
                                        </td>
                                        <td>
                                            {% if ticket.ticket_id %}
                                                <a href="{% url 'tickets:ticket_detail' ticket_number=ticket.ticket_id %}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-arrow-right"></i>
                                                </a>
                                            {% else %}
                                                <span class="text-muted">No ID</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="bi bi-calendar-check display-1 text-muted"></i>
                            <h5 class="text-muted mt-3">No tasks scheduled for today</h5>
                            <p class="text-muted">Check your schedule or pending assignments</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Performance & Status -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-success">
                        <i class="bi bi-speedometer2"></i> Performance Summary
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="row">
                            <div class="col-6">
                                <h4 class="text-primary">{{ total_tickets|default:0 }}</h4>
                                <small class="text-muted">Total Assigned</small>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success">
                                    {% if total_tickets > 0 %}
                                        {% widthratio closed_tickets total_tickets 100 %}%
                                    {% else %}
                                        0%
                                    {% endif %}
                                </h4>
                                <small class="text-muted">Completion Rate</small>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">This Week</span>
                            <strong>{{ completed_week|default:0 }} completed</strong>
                        </div>
                        <div class="progress mt-1" style="height: 6px;">
                            <div class="progress-bar bg-success" role="progressbar" 
                                 style="width: {% if completed_week and completed_week > 0 %}{% widthratio completed_week 10 100 %}{% else %}0{% endif %}%"></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">Monthly Target</span>
                            <strong>{{ monthly_progress|default:0 }}%</strong>
                        </div>
                        <div class="progress mt-1" style="height: 6px;">
                            <div class="progress-bar bg-info" role="progressbar" 
                                 style="width: {{ monthly_progress|default:0 }}%"></div>
                        </div>
                    </div>

                    {% if employee_profile %}
                    <hr>
                    <div class="text-center">
                        <small class="text-muted">Employee ID: {{ employee_profile.employee_id }}</small><br>
                        <small class="text-muted">Department: {{ employee_profile.department.name }}</small><br>
                        <small class="text-muted">Hire Date: {{ employee_profile.hire_date|date:"M Y" }}</small>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="bi bi-clock-history"></i> Recent Activity
                    </h6>
                </div>
                <div class="card-body">
                    {% if recent_assignments %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Task</th>
                                        <th>Customer</th>
                                        <th>Status</th>
                                        <th>Updated</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in recent_assignments|slice:":8" %}
                                    <tr>
                                        <td>
                                            <strong>{{ ticket.ticket.title|truncatechars:30 }}</strong>
                                            {% if ticket.ticket.priority == 'urgent' %}
                                                <span class="badge bg-danger badge-sm ms-1">URGENT</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ ticket.customer_name|truncatechars:20 }}</td>
                                        <td>
                                            <span class="badge bg-{% if ticket.ticket.status == 'open' %}primary{% elif ticket.ticket.status == 'in_progress' %}warning{% else %}success{% endif %} badge-sm">
                                                {{ ticket.ticket.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ ticket.ticket.updated_at|timesince }} ago</small>
                                        </td>
                                        <td>
                                            {% if ticket.ticket.ticket_id %}
                                                <a href="{% url 'tickets:ticket_detail' ticket_number=ticket.ticket.ticket_id %}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            {% else %}
                                                <span class="text-muted">No ID</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-3">
                            <i class="bi bi-inbox display-1 text-muted"></i>
                            <h5 class="text-muted mt-3">No recent activity</h5>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Marketing Tools Section -->
    {% if employee_profile.department.name == 'Marketing' %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0">
                        <i class="bi bi-megaphone"></i> Marketing Tools
                    </h6>
                </div>
                <div class="card-body py-3">
                    <div class="row g-2">
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:marketing_dashboard' %}" class="btn btn-outline-info w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-graph-up fs-5"></i>
                                <small class="mt-1">Analytics</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:marketing_report_create' %}" class="btn btn-outline-primary w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-plus-circle fs-5"></i>
                                <small class="mt-1">New Report</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:marketing_report_list' %}" class="btn btn-outline-secondary w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-list-check fs-5"></i>
                                <small class="mt-1">All Reports</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:customer_add' %}" class="btn btn-outline-success w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-person-plus fs-5"></i>
                                <small class="mt-1">Add Customer</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:marketing_tickets' %}" class="btn btn-outline-warning w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-ticket-perforated fs-5"></i>
                                <small class="mt-1">My Tickets</small>
                            </a>
                        </div>
                        <div class="col-md-2 col-6">
                            <a href="{% url 'customers:customer_list' %}" class="btn btn-outline-dark w-100 d-flex flex-column align-items-center py-2">
                                <i class="bi bi-people fs-5"></i>
                                <small class="mt-1">Customers</small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}