{% extends "base.html" %}

{% block title %}My Documents - Mini SpecsComply Pro{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-10 mx-auto">
        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0">My Documents</h4>
                <a href="/" class="btn btn-light btn-sm">Upload New Document</a>
            </div>
            <div class="card-body">
                {% if documents %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Document</th>
                                <th>Type</th>
                                <th>Upload Date</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for doc in documents %}
                            <tr>
                                <td>
                                    <div>
                                        <strong>{{ doc.filename }}</strong>
                                        {% if doc.description %}
                                        <div class="text-muted small">{{ doc.description }}</div>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info">{{ doc.document_type|replace('_', ' ')|title }}</span>
                                </td>
                                <td>{{ doc.upload_date }}</td>
                                <td>
                                    {% if doc.status == 'completed' %}
                                    <span class="badge bg-success">Completed</span>
                                    {% elif doc.status == 'processing' %}
                                    <span class="badge bg-warning">Processing</span>
                                    {% else %}
                                    <span class="badge bg-danger">Failed</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if doc.status == 'completed' %}
                                    <div class="btn-group">
                                        <a href="/document/{{ doc.document_id }}/analysis" class="btn btn-sm btn-outline-primary">View Analysis</a>
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ doc.document_id }}">
                                            Delete
                                        </button>
                                    </div>
                                    {% endif %}
                                    <!-- Delete Modal -->
                                    <div class="modal fade" id="deleteModal{{ doc.document_id }}" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Confirm Delete</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <p>Are you sure you want to delete "{{ doc.filename }}"?</p>
                                                    <p class="text-danger">This action cannot be undone.</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                    <button type="button" class="btn btn-danger" onclick="deleteDocument('{{ doc.document_id }}')">Delete</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <h5 class="text-muted">No documents uploaded yet</h5>
                    <p>Upload your first document to get started with compliance analysis.</p>
                    <a href="/" class="btn btn-primary mt-3">Upload Document</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function deleteDocument(docId) {
        // Make an API call to delete the document
        fetch(`/document/${docId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to delete document');
            }
            return response.json();
        })
        .then(data => {
            // Show success message
            showToast('Document deleted successfully.', 'success');
            
            // Close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById(`deleteModal${docId}`));
            modal.hide();
            
            // Reload the page after a short delay
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Failed to delete document. Please try again.', 'danger');
        });
    }
</script>
{% endblock %}