{% extends "Includes/layout.html.twig" %}

{% block body %}
    <div id="overview-app" v-cloak>
        <main id="main-content" class="row main mx-0 fade-in">
            <section class="content-area p-r-l-6">
                <div class="col-12 main-data-table px-0">
                    {# data-tables options #}
                    <div class="data-table-headers bg-white py-3 rounded-2 col-sm-12 d-flex align-items-center">
                        <div class="col-md-6">
                            <h2 class="title-page">{{ 'List of'|trans }} customs reports</h2>
                        </div>
                        <div class="col-md-3 d-flex align-items-center justify-content-between">
                            <label for="ActiveReports" class="cursor-pointer ml-auto mr-2">{{ 'Display inactive reports'|trans }}</label>
                            <div class="toggle-switch">
                                <input ref="checkbox" id="ActiveReports" type="checkbox" class="" value="false" v-model="showInactiveReports">
                                <label for="ActiveReports" class="toggle-label"></label>
                            </div>
                        </div>
                        <div class="col-md-3 d-flex align-items-center">
                            <button class="btn btn-warning text-white rounded-30 ml-3 px-3 d-flex align-items-center float-right" @click="openModaleUpsertCustomReport('')">
                                {{ "New" | trans }} Custom Report
                                <i class="fal fa-plus ml-2"></i>
                            </button>
                        </div>

                    </div>

                    {# data-tables #}
                    <div class="main-data-table-content mb-5 pb-3">
                        <div class="main-data-table-line col-12 rounded-2 mt-2 table-headers" style="box-shadow: none; background-color: rgba(235, 239, 248, 0.55);">
                            <div class="col-12 row pr-0">
                                <div class="col-md-4 text-center">
                                    <span class="font-700 cursor-pointer">{{ 'Name'|trans }}</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('name', 'String')"
                                       :class="{'fa-sort-alt': customReportsOrder.option != 'name',
                                               'fa-sort-amount-down-alt': customReportsOrder.option == 'name' && customReportsOrder.direction == 'ASC',
                                               'fa-sort-amount-down': customReportsOrder.option == 'name' && customReportsOrder.direction == 'DESC' }"></i>

                                </div>
                                <div class="col-md-4 text-center border-left">
                                    <span class="font-700 cursor-pointer">Advertiser</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('advertiserName', 'String')"
                                       :class="{'fa-sort-alt': customReportsOrder.option != 'advertiserName',
                                               'fa-sort-amount-down-alt': customReportsOrder.option == 'advertiserName' && customReportsOrder.direction == 'ASC',
                                               'fa-sort-amount-down': customReportsOrder.option == 'advertiserName' && customReportsOrder.direction == 'DESC' }"></i>
                                </div>
                                <div class="col-md-2 text-center border-left">
                                    <strong>{{ 'Frequency'|trans }}</strong>
                                </div>
                                <div class="col-md-1 text-center border-left">
                                    <strong>{{ 'Enabled'|trans }}</strong>
                                </div>
                            </div>
                        </div>


                        <div class="main-data-table-line col-12 rounded-2 bg-white mt-2 line-animation" :id="'custom-report-row-'+customReport.id"
                             v-for="(customReport, key) in filteredCustomReports" :key="customReport.id">
                            {#  #}
                            <div class="col-12 row pr-0">
                                <div class="col-md-4  justify-content-between">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <% customReport.name %>
                                    </span>
                                </div>
                                <div class="col-md-4 border-left">
                                    <span class="d-flex my-auto mr-4 flex-shrink-0 text-center">
                                        <span class="mx-auto">
                                        <img :src="customReport.advertiserLogo" class="img-fluid"
                                             alt="" style="width: auto; height: 40px; border-radius: 50%">
                                        (<% customReport.advertiserName %>)</span>
                                    </span>
                                </div>
                                <div class="col-md-2 text-center border-left  justify-content-between">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <% customReport.frequency %>
                                    </span>
                                </div>
                                <div class="col-md-1 justify-content-between border-left">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <span class="d-flex justify-content-center align-items-center bg-transparent">
                                            <i v-if="customReport.enabled" class="fa fa-check-circle text-success" aria-hidden="true"></i>
                                            <i v-else class="fa fa-times-circle text-danger" aria-hidden="true"></i>
                                        </span>
                                    </span>
                                </div>
                                <div class="col-sm-1 px-2" style="padding-top: 0.7em;">
                                    <div class="slider-icon-group position-absolute" style="left: 67%;">
                                        <span data-tippy-content="{{ 'update' | trans }} Custom Report"
                                              class="span-icon small cursor-pointer d-flex justify-content-center align-items-center float-right"
                                              @click="openModaleUpsertCustomReport(key)"
                                              style="width: 30px; height: 30px;" >
                                            <i class="fal fa-pen"></i>
                                        </span>
                                    </div>
                                    <div class="slider-icon-group cursor-pointer position-absolute" style="left: 100%;">

                                        <div class="slider-icon" :href="'#' + customReport.id" :data-target="'#' + customReport.id"
                                             :id="'id-' + customReport.id" @click="sliderFunction(customReport.id)">
                                            <i class="far fa-angle-down" data-tippy-content="{{ 'See more' | trans }}"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {###################### INNER DATA-TABLE ROW ######################}
                            <div class="hide-infos-apply col-12 pt-3 row pr-0 pb-3" :class="'div-' + customReport.id" :data-id="customReport.id" style="display: none;">
                                    <div class="col-md-4 col-sm-12">
                                        <span class="mb-2 d-block font-600 text-center">Transport Infos:&nbsp; </span>
                                        <div class="border-left text-center">
                                            <% customReport.transportInfo %>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 px-0 border-left">
                                        <span class="mb-2 d-block font-600 text-center">Query:&nbsp; </span>
                                        <div class="mb-4">
                                            <div class="text-center"><% customReport.reportQuery %></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 d-flex mt-3 border-left">
                                        <span class="mb-2 d-block font-600 text-center">Description:&nbsp;  </span>
                                        <div class="text-center"><% customReport.description %></div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        {# Form for adding / edit a campaign #}
        <transition name="slide-right">
            <div class="bg-white form-campaign px-5 pt-4 pb-5 active" id="modaleCustomReport" v-if="isSidePanelOpen">
                <div class="small-loader" style="display: none;"></div>
                <div class="cover-white bg-white h-100 w-100 position-fixed opacity-06" style="z-index: 9998; display: none; overflow: unset;" id="cover-white"></div>
                <div class="w-100">
                    <div class="header d-flex flex-column pl-2 mb-5">
                        <div v-show="!loading" class="slider-icon-group active ml-auto" id="closeModale"  style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal()">
                            <div class="slider-icon">
                                <i class="fal fa-times text-white"></i>
                            </div>
                        </div>
                        <div class="title mt-3">
                            <svg v-if="customToUpsert.id" xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                                <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add"
                                      d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                      transform="translate(-3 -9)" fill="#1d446b" opacity="0.89"></path>
                            </svg>
                            <svg v-else xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                                <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add" d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z" transform="translate(-3 -9)" fill="#1d446b" opacity="0.89">
                                </path>
                            </svg>
                            <h5 class="ml-3 text-primary font-weight-bold d-inline">
                                <template v-if="customToUpsert.id">
                                    {{ 'Update'|trans }} Custom Report
                                </template>
                                <template v-else>
                                    {{ 'New'|trans }} Custom Report
                                </template>
                            </h5>
                        </div>
                    </div>

                    <div class="body-form mt-2">
                        <div class="body-step">
                            <div class="d-flex ml-4 mt-4 ">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="name" class="labelInput focusInput font-500">{{ 'Name'|trans }}</label>
                                        <input type="text" id="name" name="name"
                                               class="form-control no-placeholder"
                                               v-model="customToUpsert.name" placeholder="{{ 'Name'|trans }}" required="true">
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="description-textarea" class="labelInput focusInput font-500">{{ 'Description'|trans }}</label>
                                        <textarea id="description-textarea" class="form-group w-100 rounded-2 border" v-model="customToUpsert.description"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="frequency-dropdown" class="labelInput focusInput font-500">{{ 'Frequency'|trans }}</label>
                                        <input-dropdown v-model="customToUpsert.frequency"
                                                        :id="'frequency-dropdown'"
                                                        :data-list="frequencyReport"
                                                        :init-value="customToUpsert.frequency"
                                                        :required="true"
                                                        placeholder="{{ 'Frequency'|trans }}"></input-dropdown>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="advertiser-dropdown" class="labelInput focusInput font-500">{{ 'Advertiser'|trans }}</label>
                                        <input-dropdown v-model="customToUpsert.idAdvertiser"
                                                        :id="'advertiser-dropdown'"
                                                        :data-list="advertisers"
                                                        :init-value="customToUpsert.idAdvertiser"
                                                        :required="true"
                                                        placeholder="{{ 'Advertiser'|trans }}"></input-dropdown>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="reportQuery-textarea" class="labelInput focusInput font-500">{{ 'reportQuery'|trans }}</label>
                                        <textarea id="reportQuery-textarea" class="form-group w-100 rounded-2 border" v-model="customToUpsert.reportQuery"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <label for="transportInfo-textarea" class="labelInput focusInput font-500">{{ 'transportInfo'|trans }}</label>
                                        <textarea id="transportInfo-textarea" class="form-group w-100 rounded-2 border" v-model="customToUpsert.transportInfo"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex ml-4 mt-4">
                                <div class="col pl-4 pr-0">
                                    <div class="form-label-group position-relative input-login">
                                        <input class="inp-cbx" id="activeReport" type="checkbox"
                                               style="display: none;"
                                               v-model="customToUpsert.enabled"/>
                                        <label class="cbx d-flex align-items-center ml-4 w-fit-content font-500" for="activeReport">
                                        <span class="bg-white mr-2">
                                            <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                                        </span>
                                            {{ 'Enabled'|trans }} ?
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-6">
                                    <button class="btn btn-primary rounded-30 ml-3 px-3 float-right" @click="upsertCustomReport()">
                                        {{ 'Save'|trans }}
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-danger rounded-30 ml-3 px-3" id="deleteCustom" v-if="customToUpsert.id" @click="deleteCustomReport()">
                                        {{ 'Delete'|trans }}
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <div :class="[isSidePanelOpen ? 'show' : '', 'modal-backdrop']" style="visibility: visible !important;"
             id="modal-backdrop" ref="modalBackdrop" v-show="isSidePanelOpen"></div>

        <span class="d-none invisible twig-data-path-ajax-custom-reports-get" data-path-ajax-custom-reports-get="{{ path('ajax_get_custom_reports') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-upsert-custom-report" data-path-ajax-upsert-custom-report="{{ path('ajax_upsert_custom_report') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-remove-custom-report" data-path-ajax-remove-custom-report="{{ path('ajax_remove_custom_report') }}"></span>
    </div>
{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('admin-custom-report') }}
{% endblock %}