{% 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 Imports</h2>
                        </div>
                        <div class="col-md-3 d-flex align-items-center justify-content-between">
                            <label for="ActiveImports" class="cursor-pointer ml-auto mr-2">{{ 'Display inactive imports'|trans }}</label>
                            <div class="toggle-switch">
                                <input ref="checkbox" id="ActiveImports" type="checkbox" class="" value="false" v-model="showInactiveImports">
                                <label for="ActiveImports" 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="openModaleUpsertcustomImport('')">
                                {{ 'New' | trans }} Custom import
                                <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-5 text-center">
                                    <span class="font-700">{{ 'Name'|trans }}</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('name', 'String')"
                                       :class="{'fa-sort-alt': customImportsOrder.option != 'name',
                                               'fa-sort-amount-down-alt': customImportsOrder.option == 'name' && customImportsOrder.direction == 'ASC',
                                               'fa-sort-amount-down': customImportsOrder.option == 'name' && customImportsOrder.direction == 'DESC' }"></i>

                                </div>
                                <div class="col-md-5 text-center border-left">
                                    <span class="font-700">Advertiser</span>
                                    <i class="fa small cursor-pointer"
                                       @click="order('advertiserName', 'String')"
                                       :class="{'fa-sort-alt': customImportsOrder.option != 'advertiserName',
                                               'fa-sort-amount-down-alt': customImportsOrder.option == 'advertiserName' && customImportsOrder.direction == 'ASC',
                                               'fa-sort-amount-down': customImportsOrder.option == 'advertiserName' && customImportsOrder.direction == 'DESC' }"></i>
                                </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-import-row-'+customImport.id"
                             v-for="(customImport, key) in filteredCustom" :key="customImport.id">
                            {#  #}
                            <div class="col-12 row pr-0">
                                <div class="col-md-5  justify-content-between">
                                    <span class="span-icon no-hover d-flex justify-content-center align-items-center bg-transparent">
                                        <% customImport.name %>
                                    </span>
                                </div>
                                <div class="col-md-5 border-left">
                                    <span class="d-flex my-auto mr-4 flex-shrink-0 text-center">
                                        <span class="mx-auto">
                                        <img :src="customImport.advertiserLogo" class="img-fluid"
                                             alt="" style="width: auto; height: 40px; border-radius: 50%">
                                        (<% customImport.advertiserName %>)</span>
                                    </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="span-icon no-hover cursor-pointer d-flex justify-content-center align-items-center bg-transparent">
                                            <i v-if="customImport.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 Import"
                                              class="span-icon small cursor-pointer d-flex justify-content-center align-items-center float-right"
                                              @click="openModaleUpsertcustomImport(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="'#' + customImport.id" :data-target="'#' + customImport.id"
                                             :id="'id-' + customImport.id" @click="sliderFunction(customImport.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-' + customImport.id" :data-id="customImport.id" style="display: none;">
                                <div class="col-md-5 col-sm-12">
                                    <span class="mb-2 d-block font-600 text-center">Description:  </span>
                                    <div class="text-center"><% customImport.description %></div>
                                </div>
                                <div class="col-md-5 col-sm-12 border-left">
                                    <span class="mb-2 d-block font-600 text-center">Transport Infos: </span>
                                    <div class="text-center">
                                        <% customImport.transportInfo %>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-12 border-left">
                                    <span class="mb-2 d-block font-600 text-center">Dag ID:  </span>
                                    <div class="text-center"><% customImport.airflowDagId %></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="modalecustomImport" 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 Import
                                </template>
                                <template v-else>
                                    {{ 'New'|trans }} Custom Import
                                </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 custom-textarea" 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="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="transportInfo-textarea" class="labelInput focusInput font-500">{{ 'transportInfo'|trans }}</label>
                                        <textarea id="transportInfo-textarea" class="form-group w-100 rounded-2 border custom-textarea" 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">
                                        <label for="airflowDagId-textarea" class="labelInput focusInput font-500">{{ 'airflowDagId'|trans }}</label>
                                        <textarea id="airflowDagId-textarea" class="form-group w-100 rounded-2 border custom-textarea" v-model="customToUpsert.airflowDagId"></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="activeImport" class="labelInput focusInput font-500">{{ 'Enabled'|trans }}</label>
                                        <input class="inp-cbx" id="activeImport" 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="activeImport">
                                        <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="upsertcustomImport()">
                                        {{ '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="deletecustomImport()">
                                        {{ '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-imports-get" data-path-ajax-custom-imports-get="{{ path('ajax_get_custom_imports') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-upsert-custom-import" data-path-ajax-upsert-custom-import="{{ path('ajax_upsert_custom_import') }}"></span>
        <span class="d-none invisible twig-data-path-ajax-remove-custom-import" data-path-ajax-remove-custom-import="{{ path('ajax_remove_custom_import') }}"></span>
    </div>
{% endblock %}

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