{% extends 'base.html' %}

{% block title %}Create Support Ticket - 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-plus-circle me-3" style="color: var(--accent-blue);"></i>
                        Create Support Ticket
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Submit a new support request</p>
                </div>
                <a href="{% if user.is_staff %}{% url 'tickets:ticket_list' %}{% else %}{% url 'tickets:my_tickets' %}{% endif %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-2"></i> Back to Tickets
                </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-headset 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.customer.id_for_label }}" class="form-label">Customer</label>
                                        {{ form.customer }}
                                        {% if form.customer.errors %}
                                            <div class="text-danger">{{ form.customer.errors.0 }}</div>
                                        {% endif %}
                                    </div>
                                    
                                    <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>

                                <div class="row">
                                    <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 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>

                                <!-- Scheduling Section -->
                                <div class="card mb-3">
                                    <div class="card-header">
                                        <h6 class="mb-0">
                                            <i class="bi bi-calendar-event me-2"></i> Scheduling (Optional)
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12 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>

                                        <div id="schedulingFields" style="display: none;">
                                            <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="showQuickCalendar()">
                                                            <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="quickCalendar" 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="hideQuickCalendar()" 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="setQuickTime('08:00')">8:00 AM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('09:00')">9:00 AM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('10:00')">10:00 AM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('11:00')">11:00 AM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('13:00')">1:00 PM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('14:00')">2:00 PM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('15:00')">3:00 PM</button>
                                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickTime('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="setQuickDate(0)">Today</button>
                                                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate(1)">Tomorrow</button>
                                                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate(2)">Day After</button>
                                                                <button type="button" class="btn btn-outline-info btn-sm" onclick="setQuickDate(7)">Next Week</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 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>
                                
                                <div class="mb-4">
                                    <label for="{{ form.description.id_for_label }}" class="form-label">Description *</label>
                                    {{ form.description }}
                                    <div class="form-text">Please provide detailed information about your issue or request</div>
                                    {% 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="{% if user.is_staff %}{% url 'tickets:ticket_list' %}{% else %}{% url 'tickets:my_tickets' %}{% endif %}" class="btn btn-outline-secondary">
                                        Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-plus-circle me-2"></i> Create Ticket
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
// Show/hide scheduling fields
document.addEventListener('DOMContentLoaded', function() {
    const scheduledCheckbox = document.getElementById('{{ form.is_scheduled.id_for_label }}');
    const schedulingFields = document.getElementById('schedulingFields');

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

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

function showQuickCalendar() {
    document.getElementById('quickCalendar').style.display = 'block';
}

function hideQuickCalendar() {
    document.getElementById('quickCalendar').style.display = 'none';
}

function setQuickTime(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 setQuickDate(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}`;
}

// Validate working hours on datetime input change
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 %}