{% extends 'base.html' %}

{% block title %}Scheduled Tickets - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="bi bi-calendar-check me-3" style="color: var(--accent-blue);"></i>
                        Scheduled Tickets
                    </h2>
                    <p class="text-secondary mt-2 mb-0">View and manage scheduled tasks</p>
                </div>
                <div class="d-flex gap-3">
                    <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i> Create Ticket
                    </a>
                    <a href="{% url 'tickets:ticket_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-list me-2"></i> All Tickets
                    </a>
                </div>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-3">
                            <label for="date_from" class="form-label">From Date</label>
                            <input type="date" class="form-control" id="date_from" name="date_from" value="{{ date_from }}">
                        </div>
                        <div class="col-md-3">
                            <label for="date_to" class="form-label">To Date</label>
                            <input type="date" class="form-control" id="date_to" name="date_to" value="{{ date_to }}">
                        </div>
                        <div class="col-md-4">
                            <label for="assigned_to" class="form-label">Assigned To</label>
                            <select class="form-select" id="assigned_to" name="assigned_to">
                                <option value="">All</option>
                                <option value="unassigned" {% if assigned_filter == 'unassigned' %}selected{% endif %}>Unassigned</option>
                                <optgroup label="Employees">
                                    {% for employee in employees %}
                                        <option value="emp_{{ employee.employee_id }}" {% if assigned_filter == 'emp_'|add:employee.employee_id %}selected{% endif %}>
                                            {{ employee.employee_id }} - {{ employee.full_name }}
                                        </option>
                                    {% endfor %}
                                </optgroup>
                                <optgroup label="Users">
                                    {% for user in users %}
                                        <option value="{{ user.username }}" {% if assigned_filter == user.username %}selected{% endif %}>
                                            {{ user.username }}
                                        </option>
                                    {% endfor %}
                                </optgroup>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-outline-primary w-100">
                                <i class="bi bi-funnel me-2"></i> Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Scheduled Tickets Table -->
            <div class="card">
                <div class="card-body">
                    {% if scheduled_tickets %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Ticket ID</th>
                                        <th>Title</th>
                                        <th>Customer</th>
                                        <th>Scheduled Date</th>
                                        <th>Duration</th>
                                        <th>Assigned To</th>
                                        <th>Priority</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in scheduled_tickets %}
                                    <tr>
                                        <td>
                                            <strong>{{ ticket.ticket_id }}</strong>
                                        </td>
                                        <td>
                                            <div>
                                                {{ ticket.title|truncatechars:50 }}
                                                <br>
                                                <small class="text-secondary">{{ ticket.get_category_display }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                {{ ticket.customer.full_name }}
                                                <br>
                                                <small class="text-secondary">{{ ticket.customer.phone }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <strong>{{ ticket.scheduled_date|date:"M d, Y" }}</strong>
                                                <br>
                                                <small class="text-primary">{{ ticket.scheduled_date|time:"H:i" }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            {% if ticket.estimated_duration %}
                                                {{ ticket.estimated_duration }}
                                            {% else %}
                                                <span class="text-secondary">Not set</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if ticket.assigned_employee %}
                                                <div class="d-flex align-items-center">
                                                    <i class="bi bi-person-badge me-2 text-success"></i>
                                                    <div>
                                                        <span>{{ ticket.assigned_employee.full_name }}</span>
                                                        <br>
                                                        <small class="text-secondary">{{ ticket.assigned_employee.employee_id }}</small>
                                                    </div>
                                                </div>
                                            {% elif ticket.assigned_to %}
                                                <div class="d-flex align-items-center">
                                                    <i class="bi bi-person-circle me-2 text-primary"></i>
                                                    <span>{{ ticket.assigned_to.username }}</span>
                                                </div>
                                            {% else %}
                                                <span class="text-secondary">
                                                    <i class="bi bi-person-dash me-1"></i> Unassigned
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ ticket.priority }}">{{ ticket.get_priority_display }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ ticket.status }}">{{ ticket.get_status_display }}</span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" class="btn btn-outline-primary" title="View Details">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                <a href="{% url 'tickets:ticket_edit' ticket.ticket_id %}" class="btn btn-outline-warning" title="Edit">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <div class="text-secondary">
                                <i class="bi bi-calendar-x display-1"></i>
                                <h5 class="mt-3">No scheduled tickets</h5>
                                <p>There are no scheduled tickets for the selected criteria.</p>
                                <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary">
                                    <i class="bi bi-plus-circle me-2"></i> Create Scheduled Ticket
                                </a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}