{% extends '/admin/authenticated/layout/base.html.twig' %}

{% import '/admin/components/helpers_macro.html.twig' as helpers %}

{% block css %}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"
          integrity="sha512-34s5cpvaNG3BknEWSuOncX28vz97bRI59UnVtEEpFX536A7BtZSJHsDyFoCl8S7Dt2TPzcrCEoHBGeM4SUBDBw=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
{% endblock %}


{% block content %}

    {{ helpers.notifications_success() }}
    {{ helpers.notifications_error() }}
    {{ helpers.notifications_warning() }}

    <div class="row">
        <div class="col">
            <div class="card card-info card-outline direct-chat direct-chat-info">
                <div class="card-header card-header-compressed">
                    <div class="row">
                        <div class="col-auto">
                            <div class="row">
                                <div class="col-auto">


                                    <strong class="font-20">
                                        {% block pageName %}{% endblock %}
                                    </strong>
                                    <div class="d-inline-block ml-3">
                                        <button class="btn btn-sm btn-light" data-toggle="collapse"
                                                href="#collapseFilters">
                                            <i class="fas fa-search"></i>
                                            Filters
                                        </button>
                                    </div>
                                </div>
                                <div class="col">
                                    {% include '/admin/authenticated/contactUs/common/_filter_indicator.html.twig' %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-2">
                    <div class="collapse p-2" id="collapseFilters">
                        {% include '/admin/authenticated/contactUs/common/_filter_form.html.twig' %}
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>Sent</th>
                                        <th>Business</th>
                                        <th>Business Email</th>
                                        <th>Business Phone</th>
                                        <th>Business Website</th>
                                        <th>Full Name</th>
                                        <th>Your Title</th>
                                        <th>
                                            Is Read
                                            <small>
                                                <i class="fa fa-question-circle text-muted"
                                                   data-toggle="tooltip"
                                                   role="button"
                                                   data-placement="top"
                                                   title="Those messages that are not read yet will be highlighted in green."></i>
                                            </small>
                                        </th>
                                        <th style="width: 100px;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for item in pagination %}
                                        {% set createdAt = item.createdDate|date("m/d/Y - i:h A") %}
                                        <tr class="{{ not item.visited ? 'table-success' : '' }}"
                                            data-sent-at="{{ createdAt }}"
                                            id="teamMessageContactUs-{{ item.id }}"
                                            data-business-name="{{ item.businessName }}"
                                            data-url-remove="{{ path('bo_inquiry_remove', {id: item.id}) }}">
                                            <td>
                                                <small>
                                                    {{ createdAt }}
                                                </small>
                                            </td>
                                            <td>
                                                <span>{{ item.businessName }}</span>
                                            </td>
                                            <td>
                                                <a href="mailto:{{ item.businessEmail }}">
                                                    {{ item.businessEmail }}
                                                </a>
                                            </td>
                                            <td>
                                                {{ item.businessPhone }}
                                            </td>
                                            <td>
                                                <small>
                                                    <a target="_blank" href="{{ item.businessWebsite }}">
                                                        {{ item.businessWebsite }}
                                                    </a>
                                                </small>
                                            </td>
                                            <td>
                                                <span>{{ item.fullName }}</span>
                                            </td>
                                            <td>
                                                <span>{{ item.yourTitle }}</span>
                                            </td>
                                            <td>
                                                {% if item.visited %}
                                                    <i class="fa fa-check-circle text-success"></i>
                                                {% else %}
                                                    No
                                                {% endif %}
                                            </td>
                                            <td>
                                                <a class="btn btn-xs btn-default" title="Read Details"
                                                   href="{{ path(detailsRouteName, {'id' : item.id}) }}">
                                                    <i class="fa-solid fa-envelope"></i>
                                                </a>
                                                <button class="btn btn-outline-danger btn-xs btnRemoveContactUsMessageFromList"
                                                        type="button"
                                                        title="Delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td colspan="9" class="text-center">No data found.</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {{ helpers.pagination(pagination) }}
                        </div>
                    </div>
                </div>

                <div class="modal fade"
                     id="modalDeleteContactUsMessage"
                     tabindex="-1"
                     aria-labelledby="modalDeleteContactUsLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <form>
                            <div class="modal-content">
                                <div class="modal-header bg-gradient-danger pt-1 pb-1">
                    <span class="modal-title" data-id="modal-title"
                          id="modalDeleteContactUsLabel">Delete a Message</span>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div id="modalDeleteContactUsMessageConfirmationText" class="col text-center"
                                             data-id="modal-body">
                                            Do you accept to delete the item?
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer d-flex justify-content-center p-1">
                                    <div class="text-center w-100">
                                        <button id="btnSubmitModalDeleteContactUsMessage" data-id="modal-ok-button"
                                                type="button"
                                                class="btn btn-danger btn-sm m-0 btn-admin">Delete
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{ helpers.form_processing() }}
            </div>
        </div>
    </div>
{% endblock %}




{% block js %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"
            integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('app/admin/js/authenticated/ContactUs/Inquiry/InquiryList.js') }}"></script>
    <script src="{{ asset('/app/admin/js/authenticated/layout/Common/ListFilters.js') }}"></script>
    <script>
        (new ListFilters()).init();
        (new InquiryList()).init();
    </script>
{% endblock %}