{% extends 'base.html' %}

{% block title %}Edit Ticket {{ ticket.ticket_number }} - 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-pencil me-3" style="color: var(--accent-blue);"></i>
                        Edit Ticket {{ ticket.ticket_number }}
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Update ticket information and status</p>
                </div>
                <a href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-2"></i> Back to Ticket
                </a>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-ticket-detailed me-2"></i> Ticket Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <form method="post">
                                {% csrf_token %}

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.category.id_for_label }}" class="form-label">Category</label>
                                        {{ form.category }}
                                        {% if form.category.errors %}
                                            <div class="text-danger">{{ form.category.errors.0 }}</div>
                                        {% endif %}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.assigned_employee.id_for_label }}" class="form-label">Assign To Employee</label>
                                        {{ form.assigned_employee }}
                                        {% if form.assigned_employee.errors %}
                                            <div class="text-danger">{{ form.assigned_employee.errors.0 }}</div>
                                        {% endif %}
                                        <small class="text-muted">Recommended: Use employee assignment</small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.assigned_to.id_for_label }}" class="form-label">Assign To User (Alternative)</label>
                                        {{ form.assigned_to }}
                                        {% if form.assigned_to.errors %}
                                            <div class="text-danger">{{ form.assigned_to.errors.0 }}</div>
                                        {% endif %}
                                        <small class="text-muted">Alternative to employee assignment</small>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <div class="form-check">
                                            {{ form.is_scheduled }}
                                            <label class="form-check-label" for="{{ form.is_scheduled.id_for_label }}">
                                                This is a scheduled task
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Scheduling Section -->
                                <div id="editSchedulingFields" class="card mb-3" style="display: none;">
                                    <div class="card-header">
                                        <h6 class="mb-0">
                                            <i class="bi bi-calendar-event me-2"></i> Scheduling Details
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="{{ form.scheduled_date.id_for_label }}" class="form-label">Scheduled Date & Time</label>
                                                {{ form.scheduled_date }}
                                                {% if form.scheduled_date.errors %}
                                                    <div class="text-danger">{{ form.scheduled_date.errors.0 }}</div>
                                                {% endif %}
                                                <small class="text-muted">Working hours: 8:00 AM - 5:00 PM</small>
                                                <div class="mt-2">
                                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="showEditQuickCalendar()">
                                                        <i class="bi bi-calendar"></i> Quick Schedule
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label for="{{ form.estimated_duration_hours.id_for_label }}" class="form-label">Duration (Hours)</label>
                                                {{ form.estimated_duration_hours }}
                                                {% if form.estimated_duration_hours.errors %}
                                                    <div class="text-danger">{{ form.estimated_duration_hours.errors.0 }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <label for="{{ form.estimated_duration_minutes.id_for_label }}" class="form-label">Minutes</label>
                                                {{ form.estimated_duration_minutes }}
                                                {% if form.estimated_duration_minutes.errors %}
                                                    <div class="text-danger">{{ form.estimated_duration_minutes.errors.0 }}</div>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <!-- Quick Scheduling Options -->
                                        <div id="editQuickCalendar" class="card mt-3" style="display: none;">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0">Quick Schedule Options</h6>
                                                <button type="button" class="btn-close" onclick="hideEditQuickCalendar()" aria-label="Close"></button>
                                            </div>
                                            <div class="card-body">
                                                <div class="row mb-3">
                                                    <div class="col-12">
                                                        <strong>Quick Times (Working Hours):</strong>
                                                        <div class="btn-group-sm mt-2" role="group">
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('08:00')">8:00 AM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('09:00')">9:00 AM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('10:00')">10:00 AM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('11:00')">11:00 AM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('13:00')">1:00 PM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('14:00')">2:00 PM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('15:00')">3:00 PM</button>
                                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="setEditQuickTime('16:00')">4:00 PM</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <strong>Quick Dates:</strong>
                                                        <div class="btn-group-sm mt-2" role="group">
                                                            <button type="button" class="btn btn-outline-success btn-sm" onclick="setEditQuickDate(0)">Today</button>
                                                            <button type="button" class="btn btn-outline-success btn-sm" onclick="setEditQuickDate(1)">Tomorrow</button>
                                                            <button type="button" class="btn btn-outline-success btn-sm" onclick="setEditQuickDate(2)">Day After</button>
                                                            <button type="button" class="btn btn-outline-info btn-sm" onclick="setEditQuickDate(7)">Next Week</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="{{ form.title.id_for_label }}" class="form-label">Subject</label>
                                    {{ form.title }}
                                    {% if form.title.errors %}
                                        <div class="text-danger">{{ form.title.errors.0 }}</div>
                                    {% endif %}
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.priority.id_for_label }}" class="form-label">Priority</label>
                                        {{ form.priority }}
                                        {% if form.priority.errors %}
                                            <div class="text-danger">{{ form.priority.errors.0 }}</div>
                                        {% endif %}
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.status.id_for_label }}" class="form-label">Status</label>
                                        {{ form.status }}
                                        {% if form.status.errors %}
                                            <div class="text-danger">{{ form.status.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                                    {{ form.description }}
                                    {% if form.description.errors %}
                                        <div class="text-danger">{{ form.description.errors.0 }}</div>
                                    {% endif %}
                                </div>

                                <div class="d-flex justify-content-end gap-3">
                                    <a href="{% url 'tickets:ticket_detail' ticket.ticket_id %}" class="btn btn-outline-secondary">
                                        Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-check-circle me-2"></i> Update Ticket
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
// Show/hide scheduling fields for edit form
document.addEventListener('DOMContentLoaded', function() {
    const scheduledCheckbox = document.getElementById('{{ form.is_scheduled.id_for_label }}');
    const schedulingFields = document.getElementById('editSchedulingFields');

    function toggleSchedulingFields() {
        if (scheduledCheckbox.checked) {
            schedulingFields.style.display = 'block';
        } else {
            schedulingFields.style.display = 'none';
        }
    }

    scheduledCheckbox.addEventListener('change', toggleSchedulingFields);
    toggleSchedulingFields(); // Initial state
});

function showEditQuickCalendar() {
    document.getElementById('editQuickCalendar').style.display = 'block';
}

function hideEditQuickCalendar() {
    document.getElementById('editQuickCalendar').style.display = 'none';
}

function setEditQuickTime(time) {
    const scheduledDateInput = document.getElementById('{{ form.scheduled_date.id_for_label }}');
    const currentValue = scheduledDateInput.value;
    const today = new Date();

    let dateString;
    if (currentValue && currentValue.includes('T')) {
        // Use existing date part
        dateString = currentValue.split('T')[0];
    } else {
        // Use today's date
        dateString = today.toISOString().split('T')[0];
    }

    scheduledDateInput.value = `${dateString}T${time}`;
}

function setEditQuickDate(daysOffset) {
    const scheduledDateInput = document.getElementById('{{ form.scheduled_date.id_for_label }}');
    const currentValue = scheduledDateInput.value;

    const targetDate = new Date();
    targetDate.setDate(targetDate.getDate() + daysOffset);

    let timeString = '09:00';
    if (currentValue && currentValue.includes('T')) {
        // Use existing time part, but ensure it's within working hours
        const currentTime = currentValue.split('T')[1];
        const timeHour = parseInt(currentTime.split(':')[0]);
        if (timeHour >= 8 && timeHour < 17) {
            timeString = currentTime;
        }
    }

    const dateString = targetDate.toISOString().split('T')[0];
    scheduledDateInput.value = `${dateString}T${timeString}`;
}

// Add working hours validation
document.addEventListener('DOMContentLoaded', function() {
    const scheduledDateInput = document.getElementById('{{ form.scheduled_date.id_for_label }}');
    if (scheduledDateInput) {
        scheduledDateInput.addEventListener('change', function() {
            const dateTimeValue = this.value;
            if (dateTimeValue && dateTimeValue.includes('T')) {
                const timeString = dateTimeValue.split('T')[1];
                const hour = parseInt(timeString.split(':')[0]);
                
                if (hour < 8 || hour >= 17) {
                    alert('Please schedule within working hours (8:00 AM - 5:00 PM)');
                    // Reset to 9:00 AM of the same date
                    const dateString = dateTimeValue.split('T')[0];
                    this.value = `${dateString}T09:00`;
                }
            }
        });
    }
});
</script>
{% endblock %}