{% extends 'base.html' %}

{% block title %}Ticket {{ ticket.ticket_id }} - Optinet Global Links{% endblock %}

{% block extra_css %}
<style>
/* Mobile-specific ticket detail styles */
@media (max-width: 768px) {
    .ticket-header-mobile {
        background: var(--secondary-bg);
        margin: -0.75rem -0.75rem 1rem -0.75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .ticket-id-mobile {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--accent-blue);
        margin-bottom: 0.25rem;
    }

    .ticket-title-mobile {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }

    .ticket-meta-mobile {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .customer-info-card {
        background: var(--tertiary-bg);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .customer-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .customer-actions .btn {
        flex: 1;
        font-size: 0.8rem;
    }

    .description-card {
        background: var(--tertiary-bg);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .attachment-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .attachment-card {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        background: var(--secondary-bg);
    }

    .attachment-preview {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--tertiary-bg);
    }

    .attachment-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .attachment-info {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .comment-card {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        background: var(--secondary-bg);
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .comment-author {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .comment-date {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .comment-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .status-panel-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--secondary-bg);
        border-top: 2px solid var(--border-color);
        padding: 1rem;
        z-index: 1000;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    }

    .status-actions {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .status-actions .btn {
        flex: 1;
        font-size: 0.85rem;
        padding: 0.75rem 0.5rem;
    }

    .main-content {
        padding-bottom: 180px !important; /* Extra space for fixed status panel */
        min-height: calc(100vh - 120px);
        min-height: calc(100svh - 120px);
        overflow-x: hidden;
    }

    .photo-capture-mobile {
        border: 2px dashed var(--border-color);
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
        background: var(--tertiary-bg);
        margin: 1rem 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .photo-capture-mobile:active {
        border-color: var(--accent-blue);
        background: rgba(37, 99, 235, 0.05);
    }

    .location-card {
        background: var(--tertiary-bg);
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
    }

    .location-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .location-actions .btn {
        flex: 1;
        font-size: 0.8rem;
    }
}

/* Progress indicator for long content */
.progress-indicator {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    height: 3px;
    background: var(--accent-blue);
    z-index: 1001;
    transition: width 0.3s ease;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Progress indicator for mobile -->
    <div class="progress-indicator d-md-none" id="progressIndicator"></div>

    <div class="row">
        <div class="col-12">
            <!-- Mobile header -->
            <div class="ticket-header-mobile d-md-none">
                <div class="ticket-id-mobile">{{ ticket.ticket_id }}</div>
                <div class="ticket-title-mobile">{{ ticket.title }}</div>
                <div class="ticket-meta-mobile">
                    <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% elif ticket.priority == 'medium' %}primary{% else %}secondary{% endif %}">
                        {{ ticket.get_priority_display }}
                    </span>
                    <span class="badge bg-{% if ticket.status == 'closed' %}success{% elif ticket.status == 'resolved' %}info{% elif ticket.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                        {{ ticket.get_status_display }}
                    </span>
                    {% if ticket.is_past_due %}
                        <span class="badge bg-danger">
                            <i class="bi bi-exclamation-triangle"></i> Overdue
                        </span>
                    {% endif %}
                </div>
                {% if user.is_staff %}
                <div class="mt-2">
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-light dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-arrow-repeat me-1"></i> Change Status
                        </button>
                        <ul class="dropdown-menu w-100">
                            {% if ticket.status != 'open' %}
                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('open')">
                                <i class="bi bi-circle me-2 text-secondary"></i> Open
                            </a></li>
                            {% endif %}
                            {% if ticket.status != 'in_progress' %}
                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('in_progress')">
                                <i class="bi bi-clock me-2 text-warning"></i> In Progress
                            </a></li>
                            {% endif %}
                            {% if ticket.status != 'scheduled' %}
                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('scheduled')">
                                <i class="bi bi-calendar-check me-2 text-primary"></i> Scheduled
                            </a></li>
                            {% endif %}
                            {% if ticket.status != 'resolved' %}
                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('resolved')">
                                <i class="bi bi-check-circle me-2 text-info"></i> Resolved
                            </a></li>
                            {% endif %}
                            {% if ticket.status != 'closed' %}
                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('closed')">
                                <i class="bi bi-lock me-2 text-success"></i> Closed
                            </a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Desktop header -->
            <div class="d-none d-md-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="bi bi-ticket-detailed me-3" style="color: var(--accent-blue);"></i>
                        Ticket {{ ticket.ticket_id }}
                    </h2>
                    <p class="text-secondary mt-2 mb-0">{{ ticket.title }}</p>
                </div>
                <div class="d-flex gap-3">
                    {% if user.is_staff %}
                        <a href="{% url 'tickets:ticket_edit' ticket.ticket_id %}" class="btn btn-outline-warning">
                            <i class="bi bi-pencil me-2"></i> Edit
                        </a>
                    {% endif %}
                    <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>

            <div class="row">
                <!-- Main Ticket Info -->
                <div class="col-lg-8 mb-4">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="bi bi-info-circle me-2"></i> Ticket Details
                            </h5>
                            <div class="d-flex gap-2">
                                <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% elif ticket.priority == 'medium' %}primary{% else %}secondary{% endif %}">
                                    {{ ticket.get_priority_display }}
                                </span>
                                <span class="badge bg-{% if ticket.status == 'closed' %}success{% elif ticket.status == 'resolved' %}info{% elif ticket.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                                    {{ ticket.get_status_display }}
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <strong>Customer:</strong> {{ ticket.customer.full_name }}<br>
                                    <strong>Phone:</strong> {{ ticket.customer.phone }}<br>
                                    <strong>Email:</strong> {{ ticket.customer.email }}
                                </div>
                                <div class="col-md-6">
                                    <strong>Created:</strong> {{ ticket.created_at|date:"M d, Y H:i" }}<br>
                                    <strong>Category:</strong> {{ ticket.category.name|default:"Uncategorized" }}<br>
                                    <strong>Assigned to:</strong> {{ ticket.assigned_person }}
                                </div>
                            </div>

                            <div class="mb-3">
                                <strong>Description:</strong>
                                <div class="mt-2 p-3 bg-light rounded">
                                    {{ ticket.description|linebreaksbr }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Attachments -->
                    {% if attachments or user.is_staff %}
                    <div class="card mt-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="bi bi-paperclip me-2"></i> Attachments ({{ attachments.count }})
                            </h6>
                            {% if user.is_staff %}
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
                                <i class="bi bi-plus me-1"></i> Add Attachment
                            </button>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            {% if attachments %}
                                <div class="row">
                                    {% for attachment in attachments %}
                                    <div class="col-md-6 col-lg-4 mb-3">
                                        <div class="card">
                                            {% if attachment.is_image %}
                                                <img src="{{ attachment.file.url }}" class="card-img-top" style="height: 200px; object-fit: cover;" alt="{{ attachment.filename }}">
                                            {% else %}
                                                <div class="card-img-top d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
                                                    <i class="bi bi-file-earmark display-4 text-secondary"></i>
                                                </div>
                                            {% endif %}
                                            <div class="card-body p-2">
                                                <h6 class="card-title text-truncate" title="{{ attachment.filename }}">{{ attachment.filename }}</h6>
                                                <p class="card-text small text-muted">
                                                    {{ attachment.file_size }} • {{ attachment.uploaded_at|date:"M d, Y" }}<br>
                                                    by {{ attachment.uploaded_by.username }}
                                                </p>
                                                {% if attachment.description %}
                                                    <p class="card-text small">{{ attachment.description }}</p>
                                                {% endif %}
                                                <a href="{{ attachment.file.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-download me-1"></i> Download
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="text-center text-secondary">
                                    <i class="bi bi-paperclip display-4"></i>
                                    <p class="mt-2">No attachments yet</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Comments -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="bi bi-chat-dots me-2"></i> Comments ({{ comments.count }})
                            </h6>
                        </div>
                        <div class="card-body">
                            {% if comments %}
                                {% for comment in comments %}
                                <div class="border rounded p-3 mb-3 {% if comment.is_internal %}bg-warning-subtle{% endif %}">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-person-circle me-2 text-primary"></i>
                                            <strong>{{ comment.user.username }}</strong>
                                            {% if comment.is_internal %}
                                                <span class="badge bg-warning ms-2">Internal</span>
                                            {% endif %}
                                        </div>
                                        <small class="text-muted">{{ comment.created_at|date:"M d, Y H:i" }}</small>
                                    </div>
                                    <div>{{ comment.comment|linebreaksbr }}</div>
                                </div>
                                {% endfor %}
                            {% else %}
                                <div class="text-center text-secondary">
                                    <i class="bi bi-chat display-4"></i>
                                    <p class="mt-2">No comments yet</p>
                                </div>
                            {% endif %}

                            <!-- Add Comment Form -->
                            <div class="border-top pt-3">
                                <form method="post" action="{% url 'tickets:add_comment' ticket.ticket_id %}">
                                    {% csrf_token %}
                                    <div class="mb-3">
                                        {{ comment_form.comment }}
                                    </div>
                                    {% if user.is_staff %}
                                    <div class="form-check mb-3">
                                        {{ comment_form.is_internal }}
                                        <label class="form-check-label" for="{{ comment_form.is_internal.id_for_label }}">
                                            Internal comment (not visible to customer)
                                        </label>
                                    </div>
                                    {% endif %}
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-chat me-2"></i> Add Comment
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="bi bi-info-circle me-2"></i> Ticket Information
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <strong>Ticket Number:</strong><br>
                                <code class="bg-dark px-2 py-1 rounded">{{ ticket.ticket_id }}</code>
                            </div>

                            <div class="mb-3">
                                <strong>Status:</strong><br>
                                <span class="badge bg-{% if ticket.status == 'closed' %}success{% elif ticket.status == 'resolved' %}info{% elif ticket.status == 'in_progress' %}warning{% else %}secondary{% endif %}">
                                    {{ ticket.get_status_display }}
                                </span>
                                {% if user.is_staff %}
                                <div class="mt-2">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="bi bi-arrow-repeat me-1"></i> Change Status
                                        </button>
                                        <ul class="dropdown-menu">
                                            {% if ticket.status != 'open' %}
                                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('open')">
                                                <i class="bi bi-circle me-2 text-secondary"></i> Open
                                            </a></li>
                                            {% endif %}
                                            {% if ticket.status != 'in_progress' %}
                                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('in_progress')">
                                                <i class="bi bi-clock me-2 text-warning"></i> In Progress
                                            </a></li>
                                            {% endif %}
                                            {% if ticket.status != 'scheduled' %}
                                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('scheduled')">
                                                <i class="bi bi-calendar-check me-2 text-primary"></i> Scheduled
                                            </a></li>
                                            {% endif %}
                                            {% if ticket.status != 'resolved' %}
                                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('resolved')">
                                                <i class="bi bi-check-circle me-2 text-info"></i> Resolved
                                            </a></li>
                                            {% endif %}
                                            {% if ticket.status != 'closed' %}
                                            <li><a class="dropdown-item" href="#" onclick="changeTicketStatus('closed')">
                                                <i class="bi bi-lock me-2 text-success"></i> Closed
                                            </a></li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Priority:</strong><br>
                                <span class="badge bg-{% if ticket.priority == 'urgent' %}danger{% elif ticket.priority == 'high' %}warning{% elif ticket.priority == 'medium' %}primary{% else %}secondary{% endif %}">
                                    {{ ticket.get_priority_display }}
                                </span>
                            </div>

                            <div class="mb-3">
                                <strong>Last Updated:</strong><br>
                                {{ ticket.updated_at|date:"M d, Y H:i" }}
                            </div>

                            {% if ticket.resolved_at %}
                            <div class="mb-3">
                                <strong>Resolved:</strong><br>
                                {{ ticket.resolved_at|date:"M d, Y H:i" }}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
{% if user.is_staff %}
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Attachment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'tickets:add_attachment' ticket.ticket_id %}" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="{{ attachment_form.file.id_for_label }}" class="form-label">File</label>
                        {{ attachment_form.file }}
                        <div class="form-text">Maximum file size: 10MB. Supported formats: Images, PDF, Word documents, Text files</div>
                        <button type="button" class="btn btn-sm btn-outline-secondary mt-2" onclick="openCamera()">
                            <i class="bi bi-camera"></i> Open Camera
                        </button>
                    </div>
                    <div class="mb-3">
                        <label for="{{ attachment_form.description.id_for_label }}" class="form-label">Description (Optional)</label>
                        {{ attachment_form.description }}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-upload me-2"></i> Upload
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// Auto-refresh comments every 30 seconds
setInterval(function() {
    location.reload();
}, 30000);

// Change ticket status function
function changeTicketStatus(newStatus) {
    if (!confirm('Are you sure you want to change the ticket status to ' + newStatus.replace('_', ' ').toUpperCase() + '?')) {
        return;
    }

    // Show loading state
    const buttons = document.querySelectorAll('.dropdown-toggle');
    buttons.forEach(btn => {
        btn.disabled = true;
        btn.innerHTML = '<i class="bi bi-hourglass-split me-1"></i> Updating...';
    });

    // Make AJAX request to change status
    fetch('{% url "tickets:change_ticket_status" ticket.ticket_id %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({
            'status': newStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            const alert = document.createElement('div');
            alert.className = 'alert alert-success alert-dismissible fade show';
            alert.innerHTML = `
                <i class="bi bi-check-circle me-2"></i>
                ${data.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.main-content').insertBefore(alert, document.querySelector('.main-content').firstChild);
            
            // Reload page after a short delay to show updated status
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            // Show error message
            const alert = document.createElement('div');
            alert.className = 'alert alert-danger alert-dismissible fade show';
            alert.innerHTML = `
                <i class="bi bi-x-circle me-2"></i>
                ${data.error}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.querySelector('.main-content').insertBefore(alert, document.querySelector('.main-content').firstChild);
            
            // Reset buttons
            buttons.forEach(btn => {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i> Change Status';
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        const alert = document.createElement('div');
        alert.className = 'alert alert-danger alert-dismissible fade show';
        alert.innerHTML = `
            <i class="bi bi-x-circle me-2"></i>
            An error occurred while updating the ticket status.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.querySelector('.main-content').insertBefore(alert, document.querySelector('.main-content').firstChild);
        
        // Reset buttons
        buttons.forEach(btn => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i> Change Status';
        });
    });
}

// File upload progress
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form[enctype="multipart/form-data"]');
    forms.forEach(form => {
        form.addEventListener('submit', function() {
            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Uploading...';
                submitBtn.disabled = true;
            }
        });
    });
});

// Camera functionality
function openCamera() {
    const fileInput = document.getElementById('{{ attachment_form.file.id_for_label }}');

    // Check if the device supports camera
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Create camera modal
        const modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.id = 'cameraModal';
        modal.innerHTML = `
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Take Photo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center">
                        <video id="cameraVideo" width="100%" height="300" autoplay style="max-width: 500px; border: 1px solid #ddd;"></video>
                        <canvas id="cameraCanvas" style="display: none;"></canvas>
                        <div class="mt-3">
                            <button type="button" class="btn btn-primary me-2" onclick="capturePhoto()">
                                <i class="bi bi-camera"></i> Capture Photo
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="switchCamera()">
                                <i class="bi bi-arrow-repeat"></i> Switch Camera
                            </button>
                        </div>
                        <div id="photoPreview" style="display: none;" class="mt-3">
                            <img id="capturedPhoto" style="max-width: 100%; max-height: 300px; border: 1px solid #ddd;">
                            <div class="mt-2">
                                <button type="button" class="btn btn-success me-2" onclick="usePhoto()">
                                    <i class="bi bi-check-circle"></i> Use Photo
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="retakePhoto()">
                                    <i class="bi bi-arrow-clockwise"></i> Retake
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

        document.body.appendChild(modal);

        const cameraModal = new bootstrap.Modal(modal);
        cameraModal.show();

        // Start camera
        startCamera();

        // Clean up when modal is closed
        modal.addEventListener('hidden.bs.modal', function() {
            stopCamera();
            document.body.removeChild(modal);
        });
    } else {
        // Fallback to file input with camera
        fileInput.setAttribute('capture', 'environment');
        fileInput.click();
    }
}

let currentStream = null;
let currentFacingMode = 'environment'; // Start with back camera

function startCamera() {
    const video = document.getElementById('cameraVideo');

    const constraints = {
        video: {
            facingMode: currentFacingMode,
            width: { ideal: 1280 },
            height: { ideal: 720 }
        }
    };

    navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream) {
            currentStream = stream;
            video.srcObject = stream;
        })
        .catch(function(error) {
            console.error('Error accessing camera:', error);
            alert('Could not access camera. Please check permissions.');
        });
}

function stopCamera() {
    if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
        currentStream = null;
    }
}

function switchCamera() {
    stopCamera();
    currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
    startCamera();
}

function capturePhoto() {
    const video = document.getElementById('cameraVideo');
    const canvas = document.getElementById('cameraCanvas');
    const photoPreview = document.getElementById('photoPreview');
    const capturedPhoto = document.getElementById('capturedPhoto');

    // Set canvas size to match video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw video frame to canvas
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0);

    // Convert to data URL
    const dataURL = canvas.toDataURL('image/jpeg', 0.8);

    // Show preview
    capturedPhoto.src = dataURL;
    video.style.display = 'none';
    photoPreview.style.display = 'block';
}

function retakePhoto() {
    const video = document.getElementById('cameraVideo');
    const photoPreview = document.getElementById('photoPreview');

    video.style.display = 'block';
    photoPreview.style.display = 'none';
}

function usePhoto() {
    const canvas = document.getElementById('cameraCanvas');
    const fileInput = document.getElementById('{{ attachment_form.file.id_for_label }}');

    // Convert canvas to blob
    canvas.toBlob(function(blob) {
        // Create a file from the blob
        const file = new File([blob], 'camera-photo-' + Date.now() + '.jpg', {
            type: 'image/jpeg'
        });

        // Create a DataTransfer object to set the file input
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        fileInput.files = dataTransfer.files;

        // Close modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('cameraModal'));
        modal.hide();

        // Show success message
        const alert = document.createElement('div');
        alert.className = 'alert alert-success alert-dismissible fade show mt-3';
        alert.innerHTML = `
            <i class="bi bi-check-circle me-2"></i>
            Photo captured successfully! You can now upload it.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.querySelector('.modal-body').appendChild(alert);
    }, 'image/jpeg', 0.8);
}
</script>
{% endblock %}