{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

    <div>

        <h2 class="fw-bold">
            <i class="bi bi-envelope-fill text-primary"></i>
            Enquiries
        </h2>

        <p class="text-muted mb-0">
            Manage all customer enquiries
        </p>

    </div>

    <div>

        <!-- ✅ REMOVED the "Deleted" button -->
        <a href="/enquiries/new" class="btn btn-primary">

            <i class="bi bi-plus-circle"></i>

            New Enquiry

        </a>

    </div>

</div>

    <!-- Stats -->
    <div class="row g-3 mb-4">

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Total</small>

                    <h2 class="text-primary">{{ enquiries|length }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">New</small>

                    <h2 class="text-info">{{ enquiries|selectattr('status', 'equalto', 'New')|list|length }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">In Progress</small>

                    <h2 class="text-warning">{{ enquiries|selectattr('status', 'in', ['Assigned', 'Design', 'Estimating'])|list|length }}</h2>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="card shadow-sm">

                <div class="card-body">

                    <small class="text-muted">Quoted / Won</small>

                    <h2 class="text-success">{{ enquiries|selectattr('status', 'in', ['Quoted', 'Won'])|list|length }}</h2>

                </div>

            </div>

        </div>

    </div>

    <!-- Search & Filter Bar -->
    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <form method="get" action="/enquiries" class="row g-3">

                <div class="col-md-4">

                    <div class="input-group">

                        <span class="input-group-text"><i class="bi bi-search"></i></span>

                        <input type="text" class="form-control" name="search" placeholder="Search by number, subject, customer..." value="{{ search or '' }}">

                    </div>

                </div>

                <div class="col-md-2">

                    <select class="form-select" name="status_filter">

                        <option value="">All Statuses</option>

                        {% for status in statuses %}

                        <option value="{{ status }}" {% if status_filter == status %}selected{% endif %}>{{ status }}</option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-2">

                    <select class="form-select" name="priority_filter">

                        <option value="">All Priorities</option>

                        {% for priority in priorities %}

                        <option value="{{ priority }}" {% if priority_filter == priority %}selected{% endif %}>{{ priority }}</option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-2">

                    <select class="form-select" name="type_filter">

                        <option value="">All Types</option>

                        {% for type in types %}

                        <option value="{{ type }}" {% if type_filter == type %}selected{% endif %}>{{ type }}</option>

                        {% endfor %}

                    </select>

                </div>

                <div class="col-md-2">

                    <button type="submit" class="btn btn-primary w-100">

                        <i class="bi bi-funnel"></i> Filter

                    </button>

                </div>

            </form>

            {% if search or status_filter or priority_filter or type_filter %}

            <div class="mt-3">

                <span class="badge bg-info">

                    <i class="bi bi-funnel"></i> Active Filters

                    <a href="/enquiries" class="text-white ms-2">

                        <i class="bi bi-x-circle"></i> Clear All

                    </a>

                </span>

            </div>

            {% endif %}

        </div>

    </div>

    <!-- Enquiries Table -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white d-flex justify-content-between">

            <span>

                <i class="bi bi-envelope-fill"></i>

                Enquiry List

            </span>

            <span class="badge bg-light text-dark">

                {{ enquiries|length }} Enquiries

            </span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>Enquiry No</th>

                            <th>Customer</th>

                            <th>Subject</th>

                            <th>Type</th>

                            <th>Status</th>

                            <th>Priority</th>

                            <th>Date</th>

                            <th>Actions</th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for enquiry in enquiries %}

                        <tr {% if not enquiry.is_deleted %}onclick="location.href='/enquiries/{{ enquiry.id }}'" style="cursor:pointer;"{% endif %}>

                            <!-- Enquiry Number -->
                            <td>
                                {% if enquiry.is_deleted %}
                                    <span class="text-danger">
                                        <i class="bi bi-trash"></i>
                                        <del>{{ enquiry.enquiry_number }}</del>
                                    </span>
                                {% else %}
                                    <code>{{ enquiry.enquiry_number }}</code>
                                {% endif %}
                            </td>

                            <!-- Customer -->
                            <td>
                                {% if enquiry.customer %}
                                    <a href="/customers/{{ enquiry.customer.id }}" class="text-decoration-none">
                                        {{ enquiry.customer.company_name }}
                                    </a>
                                {% else %}
                                    <span class="text-danger">
                                        <i class="bi bi-exclamation-triangle"></i> Deleted Customer
                                    </span>
                                {% endif %}
                            </td>

                            <!-- Subject -->
                            <td>
                                {% if enquiry.is_deleted %}
                                    <span class="text-danger">
                                        <del>{{ enquiry.subject }}</del>
                                        <br>
                                        <small class="text-muted">
                                            Deleted by: {{ enquiry.deleted_by or "Unknown" }} 
                                            on {{ enquiry.deleted_at.strftime('%d %b %Y %H:%M') if enquiry.deleted_at else "" }}
                                        </small>
                                    </span>
                                {% else %}
                                    {{ enquiry.subject }}
                                {% endif %}
                            </td>

                            <!-- Type -->
                            <td>
                                {{ enquiry.enquiry_type or "-" }}
                            </td>

                            <!-- Status -->
                            <td>
                                {% if enquiry.is_deleted %}
                                    <span class="badge bg-danger">🗑️ Deleted</span>
                                {% else %}
                                    <span class="badge bg-{% if enquiry.status == 'New' %}primary{% elif enquiry.status == 'Assigned' %}warning{% elif enquiry.status == 'Quoted' %}success{% elif enquiry.status == 'Won' %}success{% elif enquiry.status == 'Lost' %}danger{% else %}secondary{% endif %}">
                                        {{ enquiry.status }}
                                    </span>
                                {% endif %}
                            </td>

                            <!-- Priority -->
                            <td>
                                {% if not enquiry.is_deleted %}
                                <span class="badge bg-{% if enquiry.priority == 'Urgent' %}danger{% elif enquiry.priority == 'High' %}warning{% elif enquiry.priority == 'Normal' %}primary{% else %}secondary{% endif %}">
                                    {{ enquiry.priority }}
                                </span>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>

                            <!-- Date -->
                            <td>
                                {% if not enquiry.is_deleted %}
                                    {{ enquiry.created_at.strftime('%d %b %Y') if enquiry.created_at else "" }}
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>

                            <!-- Actions -->
                            <td>
                                {% if enquiry.is_deleted %}

                                    <!-- ✅ Restore Button - Admin Only -->
                                    {% if current_user.role == "Admin" %}
                                    <button class="btn btn-sm btn-success" 
                                            onclick="confirmRestore('/enquiries/{{ enquiry.id }}/restore', 'Enquiry: {{ enquiry.enquiry_number }}')">
                                        <i class="bi bi-arrow-counterclockwise"></i> Restore
                                    </button>
                                    {% endif %}

                                    <!-- ✅ Hard Delete Button - Admin Only -->
                                    {% if current_user.role == "Admin" %}
                                    <button class="btn btn-sm btn-danger" 
                                            onclick="confirmHardDelete('/enquiries/{{ enquiry.id }}/hard-delete', 'Enquiry: {{ enquiry.enquiry_number }}')">
                                        <i class="bi bi-trash"></i> Permanently Delete
                                    </button>
                                    {% endif %}

                                {% else %}

                                    <!-- ✅ View Button -->
                                    <a href="/enquiries/{{ enquiry.id }}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-eye"></i>
                                    </a>

                                    <!-- ✅ Soft Delete Button - Admin Only -->
                                    {% if current_user.role == "Admin" %}
                                    <button class="btn btn-sm btn-outline-danger" 
                                            onclick="event.stopPropagation(); confirmDelete('/enquiries/{{ enquiry.id }}/delete', 'Enquiry: {{ enquiry.enquiry_number }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    {% endif %}

                                {% endif %}
                            </td>

                        </tr>

                    {% else %}

                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                                No enquiries found.
                            </td>
                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- ========================================================== -->
<!-- SCRIPTS FOR DELETE AND RESTORE -->
<!-- ========================================================== -->

<script>
    // ==========================================================
    // Soft Delete - Uses global confirmDelete from base.html
    // ==========================================================

    // ==========================================================
    // Restore Function
    // ==========================================================

    function confirmRestore(url, itemName) {
        if (typeof confirmDelete === 'function') {
            // Use the restore modal if available
            if (document.getElementById('restoreModal')) {
                document.getElementById('restoreForm').action = url;
                document.getElementById('restoreItemInfo').textContent = '♻️ ' + itemName;
                var modal = new bootstrap.Modal(document.getElementById('restoreModal'));
                modal.show();
            } else {
                // Fallback: direct confirm
                if (confirm("Are you sure you want to restore this item?\n\n" + itemName)) {
                    fetch(url, { method: 'POST' })
                        .then(response => {
                            if (response.ok) window.location.reload();
                            else alert('Error restoring item.');
                        })
                        .catch(error => alert('An error occurred.'));
                }
            }
        }
    }

    // ==========================================================
    // Hard Delete Function
    // ==========================================================

    function confirmHardDelete(url, itemName) {
        if (confirm("⚠️ Are you sure you want to PERMANENTLY DELETE this item?\n\n" + itemName + "\n\nThis action CANNOT be undone!")) {
            fetch(url, { method: 'POST' })
                .then(response => {
                    if (response.ok) window.location.reload();
                    else alert('Error deleting item.');
                })
                .catch(error => alert('An error occurred.'));
        }
    }
</script>

<!-- ========================================================== -->
<!-- DELETE CONFIRMATION MODAL - From base.html -->
<!-- ========================================================== -->

<!-- This is already in base.html, but ensure it exists -->

<!-- ========================================================== -->
<!-- RESTORE CONFIRMATION MODAL - ADMIN ONLY -->
<!-- ========================================================== -->

{% if current_user and current_user.role == "Admin" %}

<div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="restoreModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="restoreModalLabel">
                    <i class="bi bi-arrow-counterclockwise"></i> Confirm Restore
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Are you sure you want to restore this item?</strong></p>
                <p class="text-muted">This will make the item visible again in the system.</p>
                <p id="restoreItemInfo" class="fw-bold text-success"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="restoreForm" method="POST" action="">
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-arrow-counterclockwise"></i> Yes, Restore
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endif %}

<!-- ========================================================== -->
<!-- HARD DELETE CONFIRMATION MODAL - ADMIN ONLY -->
<!-- ========================================================== -->

{% if current_user and current_user.role == "Admin" %}

<div class="modal fade" id="hardDeleteModal" tabindex="-1" aria-labelledby="hardDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="hardDeleteModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i> Confirm Permanent Delete
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>⚠️ Are you sure you want to PERMANENTLY DELETE this item?</strong></p>
                <p class="text-danger">This action CANNOT be undone. All associated data will be permanently removed.</p>
                <p id="hardDeleteItemInfo" class="fw-bold text-dark"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="hardDeleteForm" method="POST" action="">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash"></i> Yes, Delete Permanently
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function confirmHardDelete(url, itemName) {
        document.getElementById('hardDeleteForm').action = url;
        document.getElementById('hardDeleteItemInfo').textContent = '🗑️ ' + itemName;
        var modal = new bootstrap.Modal(document.getElementById('hardDeleteModal'));
        modal.show();
    }
</script>

{% endif %}

{% endblock %}