{% extends 'base.html' %}

{% block title %}{% if template %}Edit{% else %}Create{% endif %} Schedule Template - Optinet Global Links{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="bi bi-calendar-event me-3" style="color: var(--accent-blue);"></i>
                        {% if template %}Edit Schedule Template{% else %}Create Schedule Template{% endif %}
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="row g-3">
                            <!-- Basic Information -->
                            <div class="col-12">
                                <h5 class="text-primary">Basic Information</h5>
                                <hr>
                            </div>

                            <div class="col-md-6">
                                <label for="id_name" class="form-label">Template Name <span class="text-danger">*</span></label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="text-danger small">{{ form.name.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="id_template_type" class="form-label">Template Type</label>
                                {{ form.template_type }}
                            </div>

                            <div class="col-12">
                                <label for="id_description" class="form-label">Description</label>
                                {{ form.description }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_category" class="form-label">Category</label>
                                {{ form.category }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_priority" class="form-label">Default Priority</label>
                                {{ form.priority }}
                            </div>

                            <!-- Duration Settings -->
                            <div class="col-12 mt-4">
                                <h5 class="text-primary">Duration Settings</h5>
                                <hr>
                            </div>

                            <div class="col-md-3">
                                <label for="id_estimated_duration_hours" class="form-label">Hours</label>
                                {{ form.estimated_duration_hours }}
                            </div>

                            <div class="col-md-3">
                                <label for="id_estimated_duration_minutes" class="form-label">Minutes</label>
                                {{ form.estimated_duration_minutes }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_default_location" class="form-label">Default Location</label>
                                {{ form.default_location }}
                            </div>

                            <!-- Recurrence Settings -->
                            <div class="col-12 mt-4">
                                <h5 class="text-primary">Recurrence Settings</h5>
                                <hr>
                            </div>

                            <div class="col-md-4">
                                <div class="form-check">
                                    {{ form.is_recurring }}
                                    <label class="form-check-label" for="id_is_recurring">
                                        Recurring Template
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-4" id="recurrence-pattern-div">
                                <label for="id_recurrence_pattern" class="form-label">Recurrence Pattern</label>
                                {{ form.recurrence_pattern }}
                            </div>

                            <div class="col-md-4" id="recurrence-interval-div">
                                <label for="id_recurrence_interval" class="form-label">Every (days/weeks/months)</label>
                                {{ form.recurrence_interval }}
                            </div>

                            <!-- Assignment Settings -->
                            <div class="col-12 mt-4">
                                <h5 class="text-primary">Assignment Settings</h5>
                                <hr>
                            </div>

                            <div class="col-md-6">
                                <label for="id_default_assigned_to" class="form-label">Default Assigned User</label>
                                {{ form.default_assigned_to }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_default_assigned_employee" class="form-label">Default Assigned Employee</label>
                                {{ form.default_assigned_employee }}
                            </div>

                            <!-- Reminder Settings -->
                            <div class="col-12 mt-4">
                                <h5 class="text-primary">Reminder Settings</h5>
                                <hr>
                            </div>

                            <div class="col-md-3">
                                <label for="id_reminder_before_hours" class="form-label">Reminder Hours Before</label>
                                {{ form.reminder_before_hours }}
                            </div>

                            <div class="col-md-3">
                                <label for="id_reminder_before_minutes" class="form-label">Reminder Minutes Before</label>
                                {{ form.reminder_before_minutes }}
                            </div>

                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    {{ form.requires_customer_confirmation }}
                                    <label class="form-check-label" for="id_requires_customer_confirmation">
                                        Requires Customer Confirmation
                                    </label>
                                </div>
                            </div>

                            <!-- Special Instructions -->
                            <div class="col-12 mt-4">
                                <label for="id_special_instructions" class="form-label">Special Instructions</label>
                                {{ form.special_instructions }}
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% url 'tickets:schedule_template_list' %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i> Back to Templates
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i> {% if template %}Update{% else %}Create{% endif %} Template
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const isRecurringCheck = document.getElementById('id_is_recurring');
    const recurrencePatternDiv = document.getElementById('recurrence-pattern-div');
    const recurrenceIntervalDiv = document.getElementById('recurrence-interval-div');

    function toggleRecurrenceFields() {
        if (isRecurringCheck.checked) {
            recurrencePatternDiv.style.display = 'block';
            recurrenceIntervalDiv.style.display = 'block';
        } else {
            recurrencePatternDiv.style.display = 'none';
            recurrenceIntervalDiv.style.display = 'none';
        }
    }

    isRecurringCheck.addEventListener('change', toggleRecurrenceFields);
    toggleRecurrenceFields(); // Initial call
});
</script>
{% endblock %}