{% extends "base.html" %}
{% load static %}
{% block content %}

<style>
.page-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.table thead th {
    background: #0b2b5b;
    color: #fff;
}
.table-hover tbody tr:hover {
    background-color: #eef3ff;
}
.badge {
    font-size: 13px;
}
.card {
    border-radius: 12px;
}
.action-btns i {
    font-size: 18px;
    cursor: pointer;
    transition: .3s;
}
.action-btns i:hover {
    transform: scale(1.2);
}
</style>
<section class="page-title-section bg-img cover-background top-position1 left-overlay-secondary d-flex align-items-center" 
         data-overlay-dark="8" 
         data-background="{% static 'img/banner/5.png' %}" 
         style="min-height: 60vh;">

    <div class="container mr-5">
        <div class="row">
            <div class="col-md-8 justify-content-center">
                <h2 class="text-white text-center text-danger">Project Enquiries</h2>
                <ul class="list-unstyled d-inline-flex gap-2">
                    
                </ul>
            </div>
        </div>
    </div>

    <div class="line-animated">
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
        <span class="animated">&nbsp;</span>
    </div>
</section>

<div class="container mt-5 py-5">

    <!-- Page Header -->
    <div class="page-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0 text-danger"><i class="fa-solid fa-envelope "></i> All Project Enquiries</h4>

   <form action="{% url 'logout' %}" method="post" style="display:inline;">
    {% csrf_token %}
    <button class="btn btn-danger">
        <i class="fas fa-sign-out-alt"></i> Logout
    </button>
</form>




    </div>

    <!-- Search Filter -->
    <div class="mb-3">
        <input type="text" id="searchBox" class="form-control"
               placeholder="🔍 Search by name, email or subject..." />
    </div>

    <!-- Contact Table -->
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <table class="table table-bordered table-hover mb-0" id="contactTable">
                <thead class="bg-danger">
                    <tr class="bg-danger">
                        <th style="width: 50px;">#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Subject</th>
                        <th>Phone</th>
                        <th>Message</th>
                       
                        <th style="width: 110px;">Action</th>
                    </tr>
                </thead>

                <tbody>
                    {% for contact in contacts %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td><strong>{{ contact.name }}</strong></td>
                        <td><a href="mailto:{{ contact.email }}" class="text-primary">{{ contact.email }}</a></td>
                        <td><span class="badge bg-danger">{{ contact.subject }}</span></td>
                        <td>{{ contact.phone|default:"-" }}</td>
                        <td>{{ contact.message|truncatewords:12 }}</td>
                        <td class="text-center action-btns">

                          

                            <!-- Delete Button -->
                            <a href="{% url 'delete_contact' contact.id %}" 
                               class="text-danger" title="Delete"
                               onclick="return confirm('Are you sure you want to delete this message?');">
                                <i class="fa-solid fa-trash"></i>
                            </a>

                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center py-4 text-muted">
                            No messages found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>
        </div>
    </div>

</div>

<!-- Search Script -->
<script>
document.getElementById("searchBox").addEventListener("keyup", function () {
    let filter = this.value.toLowerCase();
    let rows = document.querySelectorAll("#contactTable tbody tr");

    rows.forEach(row => {
        let text = row.innerText.toLowerCase();
        row.style.display = text.includes(filter) ? "" : "none";
    });
});
</script>

{% endblock %}