{% extends 'admin-dashboard.html' %}
{% block content %}

{% for msg in contact_messages %}
<div class="modal fade" id="messageModal{{ msg.id }}" tabindex="-1" aria-labelledby="messageModalLabel{{ msg.id }}" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content rounded-4 shadow-lg border-0">

            <div class="modal-header border-bottom px-4 pt-4 pb-3">
                <h5 class="modal-title fw-bolder text-dark" id="messageModalLabel{{ msg.id }}">
                    <i class="align-middle me-2 text-primary" data-feather="message-square"></i> Message from {{ msg.first_name }} {{ msg.last_name }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-4">

                <ul class="nav nav-tabs border-bottom-0" id="myTab{{ msg.id }}" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active fw-bold px-4 py-2" id="message-tab{{ msg.id }}" data-bs-toggle="tab" data-bs-target="#message-content{{ msg.id }}" type="button" role="tab" aria-controls="message-content{{ msg.id }}" aria-selected="true">
                            <i class="align-middle me-1" data-feather="inbox"></i> Message & History
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link fw-bold px-4 py-2" id="reply-tab{{ msg.id }}" data-bs-toggle="tab" data-bs-target="#reply-content{{ msg.id }}" type="button" role="tab" aria-controls="reply-content{{ msg.id }}" aria-selected="false">
                            <i class="align-middle me-1" data-feather="send"></i> Send Reply
                        </button>
                    </li>
                </ul>

                <div class="tab-content pt-4" id="myTabContent{{ msg.id }}">

                    <div class="tab-pane fade show active" id="message-content{{ msg.id }}" role="tabpanel" aria-labelledby="message-tab{{ msg.id }}">

                        <div class="row g-4">

                            <div class="col-lg-6">
                                <h6 class="fw-bold mb-3 text-dark border-bottom pb-2">Original Inquiry</h6>
                                <div class="p-3 mb-3 bg-light rounded-3">
                                    <p class="mb-1"><strong>Name:</strong> {{ msg.first_name }} {{ msg.last_name }}</p>
                                    <p class="mb-1"><strong>Email:</strong> <a href="mailto:{{ msg.email }}" class="text-decoration-none">{{ msg.email }}</a></p>
                                    <p class="mb-3"><strong>Phone:</strong> {{ msg.phone }}</p>
                                    <hr>
                                    <p class="mb-1 fw-bold">Message:</p>
                                    <p class="text-muted">{{ msg.message }}</p>
                                    <small class="text-secondary d-block text-end">Received on: {{ msg.sent_time|date:"F d, Y P" }}</small>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <h6 class="fw-bold mb-3 text-dark border-bottom pb-2">Reply History</h6>

                                {% if msg.msg.all %}
                                <div class="bg-light p-3 rounded-3" style="max-height: 400px; overflow-y: auto;">
                                    <div class="accordion accordion-flush" id="accordionReplies{{ msg.id }}">
                                        {% for reply in msg.msg.all %}
                                            <div class="accordion-item bg-transparent">
                                                <h2 class="accordion-header" id="heading{{ reply.id }}">
                                                    <button class="accordion-button collapsed text-muted p-2 bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ reply.id }}" aria-expanded="false" aria-controls="collapse{{ reply.id }}">
                                                       Reply Sent at: {{ reply.reply_time|date:"F d, Y P" }}
                                                    </button>
                                                </h2>
                                                <div id="collapse{{ reply.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ reply.id }}" data-bs-parent="#accordionReplies{{ msg.id }}">
                                                    <div class="accordion-body fw-semibold p-2">
                                                        {{ reply.reply }}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% else %}
                                    <div class="alert alert-info" role="alert">
                                        No replies sent yet.
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="reply-content{{ msg.id }}" role="tabpanel" aria-labelledby="reply-tab{{ msg.id }}">
                        <h6 class="fw-bold mb-3 text-dark">Compose Your Response</h6>
                        <form method="post" action="/administrator/send-reply/{{ msg.id }}/">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="replyMessage{{ msg.id }}" class="form-label text-muted">Reply to {{ msg.first_name }} {{ msg.last_name }}</label>
                                <textarea class="form-control rounded-3" id="replyMessage{{ msg.id }}" name="reply_message" rows="7" placeholder="Type your response here..." required></textarea>
                            </div>
                            <div class="text-end">
                                <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4">
                                    <i class="align-middle me-1" data-feather="send"></i> Send Reply
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal-footer border-top p-4">
                <button type="button" class="btn btn-outline-secondary fw-semibold rounded-pill px-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<div class="row">
    <div class="col-12">
        <h1 class="mb-4 fw-bold">Contact Messages</h1>

        <div class="card border-0 shadow-lg rounded-4 flex-fill">

            <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-end align-items-center p-4">
                <button type="button" class="btn btn-primary fw-semibold rounded-pill py-2 px-3"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasTransactionFilter"
                    aria-controls="offcanvasTransactionFilter">
                    <i class="align-middle me-1" data-feather="filter"></i> Advanced Filter
                </button>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasTransactionFilter" aria-labelledby="offcanvasTransactionFilterLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold" id="offcanvasTransactionFilterLabel">
                        <i class="align-middle me-2" data-feather="filter"></i> Filter Messages
                    </h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <form method="get" class="row g-3 align-items-end">

                        <div class="col-12">
                            <h6 class="mt-0 mb-3 fw-bold text-dark">Sender Details</h6>
                        </div>

                        <div class="col-12">
                            <label for="sender_name" class="form-label small text-muted mb-1">Sender Name</label>
                            <input type="text" class="form-control" id="sender_name" name="sender_name" placeholder="Enter Sender Name">
                        </div>
                        <div class="col-12">
                            <label for="sender_email" class="form-label small text-muted mb-1">Email Address</label>
                            <input type="text" class="form-control" id="sender_email" name="sender_email" placeholder="Enter Email Address">
                        </div>
                        <div class="col-12">
                            <label for="sender_phone" class="form-label small text-muted mb-1">Phone Number</label>
                            <input type="text" class="form-control" id="sender_phone" name="sender_phone" placeholder="Enter Phone Number">
                        </div>

                        <div class="col-12 mt-4">
                            <h6 class="mb-3 fw-bold text-dark">Date Range</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="start_date" class="form-label small text-muted mb-1">From Date</label>
                            <input type="date" class="form-control" id="start_date" name="start_date">
                        </div>
                        <div class="col-md-6">
                            <label for="end_date" class="form-label small text-muted mb-1">To Date</label>
                            <input type="date" class="form-control" id="end_date" name="end_date">
                        </div>

                        <div class="col-12 text-end mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-primary fw-semibold rounded-pill py-2 px-3 w-100 mb-2">
                                <i class="align-middle me-1" data-feather="check"></i> Apply Filters
                            </button>
                            <a href="." class="btn btn-outline-secondary fw-semibold rounded-pill py-2 px-3 w-100">
                                <i class="align-middle me-1" data-feather="x"></i> Clear Filters
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless align-middle mb-0">

                        <thead class="table-dark">
                            <tr>
                                <th class="text-white small fw-bold text-uppercase ps-4">Sl no.</th>
                                <th class="text-white small fw-bold text-uppercase">Name</th>
                                <th class="text-white small fw-bold text-uppercase">Email</th>
                                <th class="text-white small fw-bold text-uppercase">Phone</th>
                                <th class="text-white small fw-bold text-uppercase">Sent At</th>
                                <th class="text-white small fw-bold text-uppercase">Status</th>
                                <th class="text-center text-white small fw-bold text-uppercase pe-4">Action</th>
                            </tr>
                        </thead>

                        <tbody>
                        {% for msg in contact_messages %}
                        <tr>
                            <td class="ps-4">{{ forloop.counter }}</td>
                            <td class="fw-semibold text-dark">{{ msg.first_name }} {{ msg.last_name }}</td>
                            <td>{{ msg.email }}</td>
                            <td>{{ msg.phone }}</td>
                            <td>{{ msg.sent_time|date:"d M, Y h:i A" }}</td>
                            <td>
                                {% if msg.has_replied == True %}
                                    <span class="badge bg-success bg-opacity-10 text-success fw-bold rounded-pill p-2">
                                        <i class="align-middle me-1" data-feather="check-circle"></i> Replied
                                    </span>
                                {% else %}
                                    <span class="badge bg-warning bg-opacity-10 text-warning fw-bold rounded-pill p-2">
                                        <i class="align-middle me-1" data-feather="alert-circle"></i> Unchecked
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-center pe-4">
                                <a class="btn btn-sm btn-info rounded-pill px-3" href="#" data-bs-toggle="modal" data-bs-target="#messageModal{{ msg.id }}" title="View Message">
                                    <i class="align-middle" data-feather="eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center p-5">
                                <div class="alert alert-warning m-0 rounded-3" role="alert">
                                    No contact messages found matching the criteria.
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}