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

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


{% set isEdit = false %}

{% block title %}
    Services
{% 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">
                    <strong class="font-20">
                        Services
                        <button class="btn btn-sm btn-light" data-toggle="collapse"
                                href="#collapseFilters">
                            <i class="fas fa-search"></i>
                            Filters
                        </button>
                    </strong>
                    <div class="d-inline-block">
                        {% include '/admin/authenticated/service/_filter_indicator.html.twig' %}
                    </div>
                    <div class="card-tools">
                        <a href="{{ path('bo_service_create') }}" class="btn btn-sm btn-success">
                            <i class="fas fa-plus"></i>
                            Create
                        </a>
                    </div>
                </div>
                <div class="card-body p-2">

                    <div class="collapse p-2" id="collapseFilters">
                        {% include '/admin/authenticated/service/_filter_form.html.twig' %}
                    </div>

                    <div class="row">
                        <div class="col-lg-6 offset-lg-3 col-sm ">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Content</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in pagination %}
                                    <tr id="teamService-{{ item.id }}"
                                        data-title="{{ item.title }}"
                                        data-url-remove="{{ path('bo_service_remove', {id: item.id}) }}"
                                        class="rowService">
                                        <td>{{ item.title }}</td>
                                        <td>
                                            <div class="row">
                                                <div class="col-auto">
                                                    <button class="btn btn-xs btn-default" data-toggle="modal"
                                                            data-target="#modalContent-{{ item.id }}">Content
                                                    </button>
                                                    <div class="modal fade" id="modalContent-{{ item.id }}"
                                                         tabindex="-1">
                                                        <div class="modal-dialog modal-xl">
                                                            <div class="modal-content">
                                                                <div class="modal-header bg-gradient-primary pt-1 pb-1">
                                                                    <span class="modal-title">Service: {{ item.title }}</span>
                                                                    <button type="button" class="close"
                                                                            data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body bg-dark">
                                                                    <iframe class="w-100"
                                                                            style="border: none;height: 300px;"
                                                                            srcdoc="{{ item.text }}"></iframe>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    {% if item.video is not empty %}
                                                        <button class="btn btn-xs btn-default" data-toggle="modal"
                                                                data-target="#modalVideo-{{ item.id }}">
                                                            Video
                                                        </button>
                                                        <div class="modal fade" id="modalVideo-{{ item.id }}"
                                                             tabindex="-1">
                                                            <div class="modal-dialog modal-xl">
                                                                <div class="modal-content">
                                                                    <div class="modal-header bg-gradient-primary pt-1 pb-1">
                                                                        <span class="modal-title">Video: {{ item.title }}</span>
                                                                        <button type="button" class="close"
                                                                                data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body bg-dark text-center p-3">
                                                                        <iframe width="700" height="500"
                                                                                src="{{ item.videoEmbeddedUrl }}"></iframe>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </td>
                                        <td style="width: 100px;">
                                            <div class="text-right">
                                                <a href="{{ path('bo_service_edit', {id: item.id}) }}"
                                                   class="btn btn-outline-info btn-xs"
                                                   type="button"
                                                   title="Edit">
                                                    <i class="fa-solid fa-pen"></i>
                                                </a>
                                                <button class="btn btn-outline-danger btn-xs btnRemoveServiceFromList"
                                                        type="button"
                                                        title="Delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                <tr id="rowNoFoundData"
                                    class="{{ pagination.getTotalItemCount|length > 0 ? 'd-none' }}">
                                    <td colspan="9" class="text-center">No data found.</td>
                                </tr>
                                </tbody>
                            </table>

                            {{ helpers.pagination(pagination) }}

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

    <div class="modal fade"
         id="modalDeleteService"
         tabindex="-1"
         aria-labelledby="modalDeleteServiceLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <form data-id="formBusiness">
                <div class="modal-content">
                    <div class="modal-header bg-gradient-danger pt-1 pb-1">
                    <span class="modal-title" data-id="modal-title"
                          id="modalDeleteServiceLabel">Delete a Service</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="modalDeleteServiceConfirmationText" 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">
                        <button id="btnSubmitModalDeleteService" data-id="modal-ok-button" type="button"
                                class="btn btn-danger btn-sm m-0 btn-admin">Delete
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}


{% block js %}
    {{ parent() }}
    <script src="{{ asset('/app/admin/js/authenticated/Service/ServiceList.js') }}"></script>
    <script>
        (new ServiceList()).init();
    </script>
{% endblock %}