{% extends 'base.html' %}

{% block title %}Schedule Templates - 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-event me-3" style="color: var(--accent-blue);"></i>
                        Schedule Templates
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Create and manage reusable schedule templates</p>
                </div>
                <div class="d-flex gap-3">
                    <a href="{% url 'tickets:create_schedule_template' %}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i> Create Template
                    </a>
                    <a href="{% url 'tickets:calendar_view' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-calendar3 me-2"></i> Calendar
                    </a>
                </div>
            </div>

            <!-- Templates Grid -->
            <div class="row">
                {% for template in templates %}
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ template.name }}</h5>
                            <span class="badge bg-{{ template.template_type }}">{{ template.get_template_type_display }}</span>
                        </div>
                        <div class="card-body">
                            <p class="card-text">{{ template.description|default:"No description provided" }}</p>
                            <div class="mb-3">
                                <strong>Category:</strong> {{ template.get_category_display }}<br>
                                <strong>Duration:</strong> {{ template.estimated_duration|default:"Not set" }}<br>
                                {% if template.is_recurring %}
                                    <strong>Recurrence:</strong> {{ template.get_recurrence_pattern_display }}
                                {% endif %}
                            </div>
                            <div class="mb-3">
                                <small class="text-muted">
                                    Created: {{ template.created_at|date:"M d, Y" }}<br>
                                    Used: {{ template.usage_count }} times
                                </small>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="btn-group w-100">
                                <a href="{% url 'tickets:use_schedule_template' template.id %}" 
                                   class="btn btn-success">
                                    <i class="bi bi-calendar-plus"></i> Use Template
                                </a>
                                <a href="{% url 'tickets:edit_schedule_template' template.id %}" 
                                   class="btn btn-outline-warning">
                                    <i class="bi bi-pencil"></i> Edit
                                </a>
                                <button class="btn btn-outline-danger" 
                                        onclick="deleteTemplate({{ template.id }}, '{{ template.name }}')">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="text-center py-5">
                        <div class="text-secondary">
                            <i class="bi bi-calendar-event display-1"></i>
                            <h5 class="mt-3">No schedule templates</h5>
                            <p>Create your first schedule template to streamline recurring tasks.</p>
                            <a href="{% url 'tickets:create_schedule_template' %}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-2"></i> Create Template
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
function deleteTemplate(templateId, templateName) {
    if (confirm(`Are you sure you want to delete the template "${templateName}"?`)) {
        fetch(`/tickets/schedule-template/delete/${templateId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            alert('Error: ' + error);
        });
    }
}
</script>
{% endblock %}