{% extends 'base.html' %}

{% block title %}Schedule Conflicts - 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-exclamation-triangle me-3" style="color: var(--accent-orange);"></i>
                        Schedule Conflicts
                    </h2>
                    <p class="text-secondary mt-2 mb-0">Resolve scheduling conflicts and overlaps</p>
                </div>
                <div class="d-flex gap-3">
                    <a href="{% url 'tickets:calendar_view' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-calendar3 me-2"></i> Back to Calendar
                    </a>
                </div>
            </div>

            {% if conflicts %}
                {% for conflict in conflicts %}
                <div class="card mb-4">
                    <div class="card-header bg-warning-subtle">
                        <h5 class="mb-0">
                            <i class="bi bi-clock-history me-2"></i>
                            Conflict on {{ conflict.date|date:"M d, Y" }} at {{ conflict.time|time:"H:i" }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">Technician: {{ conflict.technician }}</h6>
                                <p class="text-muted">{{ conflict.overlapping_tickets|length }} overlapping tickets</p>
                            </div>
                            <div class="col-md-6 text-end">
                                <button class="btn btn-warning" onclick="resolveConflict({{ conflict.id }})">
                                    <i class="bi bi-tools me-2"></i> Resolve Conflict
                                </button>
                            </div>
                        </div>

                        <!-- Conflicting Tickets -->
                        <div class="table-responsive mt-3">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Ticket ID</th>
                                        <th>Title</th>
                                        <th>Customer</th>
                                        <th>Scheduled Time</th>
                                        <th>Duration</th>
                                        <th>Priority</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ticket in conflict.overlapping_tickets %}
                                    <tr>
                                        <td><strong>{{ ticket.ticket_id }}</strong></td>
                                        <td>{{ ticket.title|truncatechars:30 }}</td>
                                        <td>{{ ticket.customer_name }}</td>
                                        <td>
                                            {{ ticket.scheduled_date|time:"H:i" }}
                                            {% if ticket.scheduled_end_time %}
                                                - {{ ticket.scheduled_end_time|time:"H:i" }}
                                            {% endif %}
                                        </td>
                                        <td>{{ ticket.estimated_duration|default:"Not set" }}</td>
                                        <td>
                                            <span class="badge bg-{{ ticket.priority }}">
                                                {{ ticket.get_priority_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button class="btn btn-outline-primary" 
                                                        onclick="rescheduleTicket({{ ticket.id }}, '{{ ticket.ticket_id }}')">
                                                    <i class="bi bi-calendar-plus"></i> Reschedule
                                                </button>
                                                <button class="btn btn-outline-warning" 
                                                        onclick="reassignTicket({{ ticket.id }}, '{{ ticket.ticket_id }}')">
                                                    <i class="bi bi-person-gear"></i> Reassign
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- Resolution Suggestions -->
                        <div class="alert alert-info mt-3">
                            <h6><i class="bi bi-lightbulb me-2"></i>Resolution Suggestions:</h6>
                            <ul class="mb-0">
                                <li>Reschedule lower priority tickets to available time slots</li>
                                <li>Reassign tickets to other available technicians</li>
                                <li>Adjust estimated durations if they were overestimated</li>
                                <li>Split complex tickets into multiple smaller tasks</li>
                            </ul>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="card">
                    <div class="card-body text-center py-5">
                        <div class="text-success">
                            <i class="bi bi-check-circle display-1"></i>
                            <h5 class="mt-3">No Schedule Conflicts</h5>
                            <p>All scheduled tickets are properly organized without overlaps.</p>
                            <a href="{% url 'tickets:calendar_view' %}" class="btn btn-primary">
                                <i class="bi bi-calendar3 me-2"></i> Back to Calendar
                            </a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Reschedule Modal -->
<div class="modal fade" id="rescheduleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reschedule Ticket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="rescheduleForm">
                    <input type="hidden" id="rescheduleTicketId">
                    <div class="mb-3">
                        <label for="newDateTime" class="form-label">New Date & Time:</label>
                        <input type="datetime-local" class="form-control" id="newDateTime" name="new_datetime" required>
                    </div>
                    <div class="mb-3">
                        <label for="rescheduleReason" class="form-label">Reason for Rescheduling:</label>
                        <textarea class="form-control" id="rescheduleReason" name="reason" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitReschedule()">Reschedule</button>
            </div>
        </div>
    </div>
</div>

<!-- Reassign Modal -->
<div class="modal fade" id="reassignModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reassign Ticket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="reassignForm">
                    <input type="hidden" id="reassignTicketId">
                    <div class="mb-3">
                        <label for="newTechnician" class="form-label">Assign to:</label>
                        <select class="form-select" id="newTechnician" name="new_technician" required>
                            <option value="">Select technician...</option>
                            <optgroup label="Employees">
                                {% for employee in employees %}
                                    <option value="emp_{{ employee.employee_id }}">
                                        {{ employee.employee_id }} - {{ employee.full_name }}
                                    </option>
                                {% endfor %}
                            </optgroup>
                            <optgroup label="Users">
                                {% for user in users %}
                                    <option value="{{ user.username }}">{{ user.username }}</option>
                                {% endfor %}
                            </optgroup>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="reassignReason" class="form-label">Reason for Reassignment:</label>
                        <textarea class="form-control" id="reassignReason" name="reason" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitReassign()">Reassign</button>
            </div>
        </div>
    </div>
</div>

<script>
function rescheduleTicket(ticketId, ticketNumber) {
    document.getElementById('rescheduleTicketId').value = ticketId;
    document.querySelector('#rescheduleModal .modal-title').textContent = `Reschedule Ticket ${ticketNumber}`;
    new bootstrap.Modal(document.getElementById('rescheduleModal')).show();
}

function reassignTicket(ticketId, ticketNumber) {
    document.getElementById('reassignTicketId').value = ticketId;
    document.querySelector('#reassignModal .modal-title').textContent = `Reassign Ticket ${ticketNumber}`;
    new bootstrap.Modal(document.getElementById('reassignModal')).show();
}

function submitReschedule() {
    const ticketId = document.getElementById('rescheduleTicketId').value;
    const newDateTime = document.getElementById('newDateTime').value;
    const reason = document.getElementById('rescheduleReason').value;

    if (!newDateTime) {
        alert('Please select a new date and time');
        return;
    }

    fetch(`/tickets/reschedule/${ticketId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `new_datetime=${newDateTime}&reason=${reason}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('rescheduleModal')).hide();
            location.reload();
        } else {
            alert('Error: ' + data.error);
        }
    });
}

function submitReassign() {
    const ticketId = document.getElementById('reassignTicketId').value;
    const newTechnician = document.getElementById('newTechnician').value;
    const reason = document.getElementById('reassignReason').value;

    if (!newTechnician) {
        alert('Please select a technician');
        return;
    }

    fetch(`/tickets/reassign/${ticketId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `new_assignee=${newTechnician}&reason=${reason}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('reassignModal')).hide();
            location.reload();
        } else {
            alert('Error: ' + data.error);
        }
    });
}

function resolveConflict(conflictId) {
    if (confirm('Mark this conflict as resolved?')) {
        fetch(`/tickets/resolve-conflict/${conflictId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        });
    }
}
</script>
{% endblock %}