{% extends "base.html" %}

{% block title %}All Tickets{% endblock %}

{% block content %}
    <h2>Closed Tickets</h2>
    <ul>
        {% for ticket in closed_tickets %}
            <li>
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'company_id', this)">
                    {{ ticket.company.name }}
                </span> - 
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'name', this)">
                    {{ ticket.name }}
                </span> - 
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'subject', this)">
                    {{ ticket.subject }}
                </span> - 
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'ticket_number', this)">
                    {{ ticket.ticket_number }}
                </span>
                <a href="{{ url_for('delete_ticket', ticket_id=ticket.id) }}">(Delete)</a>
                <a href="{{ url_for('reopen_ticket', ticket_id=ticket.id) }}">(Reopen)</a>
                <ul>
                    {% for note in ticket.notes %}
                    
                        <li>
                            {{ note.note }} - {{ note.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                        </li>
                    
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>

    <h2>Open Tickets</h2>
    <ul>
        {% for ticket in open_tickets %}
            <li>
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'company_id', this)">
                    {{ ticket.company.name }}
                </span> - 
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'name', this)">
                    {{ ticket.name }}
                </span> - 
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'subject', this)">
                    {{ ticket.subject }}
                </span> - 
                <span contenteditable="true" onblur="updateField({{ ticket.id }}, 'ticket_number', this)">
                    {{ ticket.ticket_number }}
                </span>
                <a href="{{ url_for('delete_ticket', ticket_id=ticket.id) }}">(Delete)</a>
                <a href="{{ url_for('close_ticket', ticket_id=ticket.id) }}">(Close)</a>
                <ul>
                    {% for note in ticket.notes %}
                    
                        <li>
                            {{ note.note }} - {{ note.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                        </li>
                    
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>

    <script>
        function updateField(ticketId, fieldName, element) {
            const newValue = element.innerText;
            fetch(`/update_ticket/${ticketId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ field: fieldName, value: newValue })
            }).then(response => {
                if (!response.ok) {
                    alert('Failed to update the field.');
                }
            });
        }
    </script>
{% endblock %}