{% extends 'base.html' %}

{% block title %}Weekly Schedule - 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-week me-3" style="color: var(--accent-blue);"></i>
                        Weekly Schedule
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Week of {{ week_start|date:"M d" }} - {{ week_end|date:"M d, Y" }}</p>
                </div>
                <div class="d-flex gap-3">
                    <div class="btn-group">
                        <a href="?week={{ prev_week }}&technician={{ technician_filter }}" class="btn btn-outline-primary">
                            <i class="bi bi-chevron-left"></i> Previous
                        </a>
                        <a href="?technician={{ technician_filter }}" class="btn btn-outline-primary">This Week</a>
                        <a href="?week={{ next_week }}&technician={{ technician_filter }}" class="btn btn-outline-primary">
                            Next <i class="bi bi-chevron-right"></i>
                        </a>
                    </div>
                    <a href="{% url 'tickets:calendar_view' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-calendar3 me-2"></i> Month View
                    </a>
                </div>
            </div>

            <!-- Technician Filter -->
            <div class="card mb-4">
                <div class="card-body py-2">
                    <form method="get" class="d-flex align-items-center gap-3">
                        <input type="hidden" name="week" value="{{ current_week }}">
                        <label for="technician" class="form-label mb-0">Filter by Technician:</label>
                        <select class="form-select" name="technician" style="width: auto;">
                            <option value="">All Technicians</option>
                            <optgroup label="Employees">
                                {% for employee in employees %}
                                    <option value="emp_{{ employee.employee_id }}" 
                                        {% if technician_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 technician_filter == user.username %}selected{% endif %}>
                                        {{ user.username }}
                                    </option>
                                {% endfor %}
                            </optgroup>
                        </select>
                        <button type="submit" class="btn btn-outline-primary">
                            <i class="bi bi-funnel"></i> Filter
                        </button>
                    </form>
                </div>
            </div>

            <!-- Weekly Calendar -->
            <div class="card">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0 weekly-schedule-table">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">Time</th>
                                    {% for day in week_days %}
                                    <th class="text-center">
                                        <div>{{ day.date|date:"D" }}</div>
                                        <div class="fw-bold">{{ day.date|date:"M d" }}</div>
                                    </th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for hour in time_slots %}
                                <tr>
                                    <td class="time-slot text-center fw-bold bg-light">
                                        {{ hour|time:"H:i" }}
                                    </td>
                                    {% for day in week_days %}
                                    <td class="schedule-cell" style="height: 60px; vertical-align: top; position: relative;">
                                        {% for ticket in day.tickets %}
                                            {% if ticket.hour == hour %}
                                            <div class="ticket-block p-1 mb-1 rounded" 
                                                 style="font-size: 0.7rem; background-color: 
                                                 {% if ticket.priority == 'urgent' %}#ffebee{% elif ticket.priority == 'high' %}#fff3e0{% elif ticket.priority == 'medium' %}#e8f5e8{% else %}#f5f5f5{% endif %}; 
                                                 border-left: 3px solid 
                                                 {% if ticket.priority == 'urgent' %}#f44336{% elif ticket.priority == 'high' %}#ff9800{% elif ticket.priority == 'medium' %}#4caf50{% else %}#9e9e9e{% endif %};"
                                                 title="{{ ticket.title }} - {{ ticket.assigned_person }}">
                                                <div class="fw-bold">{{ ticket.ticket_id }}</div>
                                                <div class="text-truncate">{{ ticket.title|truncatechars:15 }}</div>
                                                <div class="text-muted">{{ ticket.assigned_person|truncatechars:12 }}</div>
                                                {% if ticket.estimated_duration %}
                                                    <div class="text-muted">{{ ticket.estimated_duration }}</div>
                                                {% endif %}
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </td>
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Legend -->
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Priority Legend:</h6>
                            <div class="d-flex gap-3">
                                <span class="badge" style="background-color: #f44336;">Urgent</span>
                                <span class="badge" style="background-color: #ff9800;">High</span>
                                <span class="badge" style="background-color: #4caf50;">Medium</span>
                                <span class="badge" style="background-color: #9e9e9e;">Low</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>Quick Actions:</h6>
                            <div class="d-flex gap-2">
                                <a href="{% url 'tickets:create_ticket' %}" class="btn btn-sm btn-primary">
                                    <i class="bi bi-plus"></i> New Task
                                </a>
                                <a href="{% url 'tickets:schedule_template_list' %}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-calendar-event"></i> Templates
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.weekly-schedule-table {
    font-size: 0.9rem;
}

.schedule-cell {
    min-height: 60px;
    padding: 2px !important;
}

.ticket-block {
    cursor: pointer;
    transition: all 0.2s;
}

.ticket-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.time-slot {
    position: sticky;
    left: 0;
    z-index: 10;
}
</style>

<script>
// Add click handler for ticket blocks
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.ticket-block').forEach(function(block) {
        block.addEventListener('click', function() {
            const ticketId = this.querySelector('.fw-bold').textContent;
            window.location.href = `/tickets/${ticketId}/`;
        });
    });
});
</script>
{% endblock %}