{% extends 'base.html' %}

{% block title %}Use 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-plus me-3" style="color: var(--accent-blue);"></i>
                        Use Template: {{ template.name }}
                    </h4>
                </div>
                <div class="card-body">
                    <!-- Template Preview -->
                    <div class="alert alert-info">
                        <h6><i class="bi bi-info-circle me-2"></i>Template Details</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Category:</strong> {{ template.get_category_display }}<br>
                                <strong>Priority:</strong> {{ template.get_priority_display }}<br>
                                <strong>Duration:</strong> {{ template.estimated_duration|default:"Not set" }}
                            </div>
                            <div class="col-md-6">
                                <strong>Type:</strong> {{ template.get_template_type_display }}<br>
                                {% if template.is_recurring %}
                                    <strong>Recurring:</strong> {{ template.get_recurrence_pattern_display }}
                                {% endif %}
                            </div>
                        </div>
                        {% if template.description %}
                            <div class="mt-2">
                                <strong>Description:</strong> {{ template.description }}
                            </div>
                        {% endif %}
                    </div>

                    <form method="post">
                        {% csrf_token %}
                        <div class="row g-3">
                            <!-- Basic Information -->
                            <div class="col-12">
                                <h5 class="text-primary">Schedule Details</h5>
                                <hr>
                            </div>

                            <div class="col-md-6">
                                <label for="id_title" class="form-label">Title <span class="text-danger">*</span></label>
                                {{ form.title }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_customer" class="form-label">Customer</label>
                                {{ form.customer }}
                            </div>

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

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

                            <div class="col-md-6">
                                <label for="id_scheduled_date" class="form-label">Start Date & Time <span class="text-danger">*</span></label>
                                {{ form.scheduled_date }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_location" class="form-label">Location</label>
                                {{ form.location }}
                            </div>

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

                            <div class="col-md-6">
                                <label for="id_assigned_to" class="form-label">Assigned User</label>
                                {{ form.assigned_to }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_assigned_employee" class="form-label">Assigned Employee</label>
                                {{ form.assigned_employee }}
                            </div>

                            <!-- Recurrence (if template is recurring) -->
                            {% if template.is_recurring %}
                            <div class="col-12 mt-4">
                                <h5 class="text-primary">Recurrence Settings</h5>
                                <hr>
                            </div>

                            <div class="col-md-4">
                                <label for="id_recurrence_end_date" class="form-label">End Recurrence Date</label>
                                {{ form.recurrence_end_date }}
                            </div>

                            <div class="col-md-4">
                                <label for="id_max_occurrences" class="form-label">Max Occurrences</label>
                                {{ form.max_occurrences }}
                                <small class="form-text text-muted">Leave blank for unlimited</small>
                            </div>

                            <div class="col-md-4">
                                <div class="form-check mt-4">
                                    {{ form.create_all_occurrences }}
                                    <label class="form-check-label" for="id_create_all_occurrences">
                                        Create all occurrences now
                                    </label>
                                </div>
                            </div>
                            {% endif %}

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

                            <div class="col-md-6">
                                <label for="id_contact_phone" class="form-label">Contact Phone</label>
                                {{ form.contact_phone }}
                            </div>

                            <div class="col-md-6">
                                <label for="id_contact_email" class="form-label">Contact Email</label>
                                {{ form.contact_email }}
                            </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-calendar-check me-2"></i> Create Schedule
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-populate customer contact info when customer is selected
    const customerSelect = document.getElementById('id_customer');
    const contactPhone = document.getElementById('id_contact_phone');
    const contactEmail = document.getElementById('id_contact_email');

    if (customerSelect) {
        customerSelect.addEventListener('change', function() {
            if (this.value) {
                fetch(`/customers/api/customer-info/${this.value}/`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.phone && !contactPhone.value) {
                            contactPhone.value = data.phone;
                        }
                        if (data.email && !contactEmail.value) {
                            contactEmail.value = data.email;
                        }
                    })
                    .catch(error => console.log('Error fetching customer info:', error));
            }
        });
    }
});
</script>
{% endblock %}