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

{% block body %}
    <main class="row main mx-0 min-vw-100 overflow-hidden">
        <div id="app" class="w-100 fade-in" v-cloak>
            <section class="content-area p-r-l-6">
{#                {% if  dafInstance.active == 0 %}#}
{#                    <div class="title-page col-12 text-left  pb-4 mb-2 pl-0 d-flex">#}
{#                        Overview |#}
{#                        <div class="ml-2 font-weight-bold"> {{ dafInstance.nameInstance }}</div>#}
{#                        <span class="chips status-form ml-5 chips_red ">#}
{#                            inactive#}
{#                        </span>#}
{#                    </div>#}
{#                {% endif %}#}

                <div class="row mb-3 px-3">
                    <div class="col-md-4 text-left pl-0 mb-xs-3 " style="padding-right: 5px;">
                        <div class="title-page col-12 text-left pl-0 d-block" style="height: 41px;">
                            <b>{{ 'Applies'|trans }}</b>
                            {% if nbNew > 0 %}<span class="chips chips_green">{{ nbNew }} {{ 'unread'|trans({'%count%': nbNew})|lower }}</span>{% endif %}
                        </div>
                        <div class="col-12 d-flex px-0" style="height: calc(100% - 41px);">
                            <div class="col-md-3 pl-0 card-teaser-job" style="padding-right: 5px;">
                                <a href="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}" class="text-decoration-none">
                                    <div class="bg-white rounded-2 p-4 d-flex card-content-job position-relative" style="height: 100%;">
                                        <div class="d-flex flex-column text-center w-100 position-relative">
                                            <span class="text" >{{ 'Total applies'|trans }}</span>
                                            <span class="number-jobs"><%appliesCount.total%></span>
                                        </div>
                                        <div class="" style="height: 100%">
                                        <span class="span-icon dark-blue coloured" style="    position: absolute;
                                            top: 60%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                            width: 75px;
                                            height: 75px;">
                                            <i class="fas fa-user"></i>
                                        </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-9 mx-0" style="padding-left: 0px;padding-right: 0px;">
                                <div style="display:flex; flex-wrap:wrap;">
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Inbox')">
                                        <a vhref="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#Inbox"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Inbox'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount.Inbox %></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('In process')">
                                        <a vhref="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#InProcess"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'In process'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount['In process'] %></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Qualified')">
                                        <a vhref="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#InProcess"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Qualified'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount.Qualified%></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Rejected')">
                                        <a vhref="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#rejected"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Rejected'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount.Rejected%></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Hired')">
                                        <a vhref="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#hired"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Hired'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount.Hired %></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Unclassified')">
                                        <a vhref="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#Unclassified"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Unclassified'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount.Unclassified%></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Put aside')">
                                        <a href="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#'PutAside'"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Put aside'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount['Put aside']%></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-md-6 pr-0 card-teaser-job mr-md-05 mr-0" style="padding-bottom: 2.5px; padding-left: 2.5px;" v-if="Object.keys(appliesCount).includes('Contacted')">
                                        <a href="{{ path('cvlibrary_form_applies', {'advertiser': advertiser.id, 'dafInstance': dafInstance.id }) }}#'Contacted'"
                                           class="text-decoration-none">
                                            <div class="bg-white rounded-2 p-4 d-flex card-content-job"
                                                 style="height: 100%;">
                                                <div class="d-block w-25 mr-4 position-relative my-auto">
                                                        <span class="span-icon purple coloured">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                </div>
                                                <div class="d-flex flex-column w-75 my-auto text-center">
                                                    <span class="text">{{ 'Contacted'|trans }}</span>
                                                    <span class="number-jobs"><% appliesCount['Contacted']%></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 pr-2 pl-1">
                        <div class="col-md-12 col-sm-12 card border-0 rounded-2 p-4 bg-white card-content-job" style="margin-top: 41px; ">
                            <div class="card-chart-header">
                                <span>{{ 'All Applies'|trans }}</span>
                            </div>
                            <div class="d-flex" style="height: 200px; width: 380px" v-if="!loading.qualif && dataNotEmpty(charts?.qualif?.datasets?.[0].data)">
                                <pie-chart :chart-data="charts.qualif"></pie-chart>
                            </div>
                            <p class="d-flex align-items-center justify-content-center m-0 fade-in-02" style="min-height: 200px; width: 380px" v-if="!loading.qualif && !dataNotEmpty(charts?.qualif?.datasets?.[0].data)">
                                <span class="text-primary">{{ 'There is no data available yet'|trans }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4 px-lg-0 px-sm-0 px-0">
                        <span class="mb-4 d-block title-page">
                            <b>{{ 'Jobs last 30 days'|trans }}</b>
                        </span>
                        <div class="col-12 card chart-bar2 text-left p-4 border-0 rounded-2 card-content-job" style="height: calc(100% - 41px);">
                            <bar-vertical-chart :chart-data="charts.job" :width="350" :height="220" v-if="dataNotEmpty(charts?.job?.datasets?.[0].data)"></bar-vertical-chart>
                            <p class="d-flex align-items-center justify-content-center m-0 fade-in-02" style="min-height: 220px" v-if="!dataNotEmpty(charts?.job?.datasets?.[0].data)">
                                <span class="text-primary">{{ 'There is no data available yet'|trans }}</span>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- GRAPHS -->
{#                <div class="section-chart-overview-all-1 col-12 d-flex px-0 mb-3">#}
{#                    <div class="col-md-12 col-sm-12 col-lg-5 card-chart card chart-line1 border-0 rounded-2 d-flex p-4">#}
{#                        <div class="card-chart-header">#}
{#                            <div class="titles d-flex justify-content-between mb-2">#}
{#                                <span>Metric</span>#}
{#                                <div id="select-date" class="">#}
{#                                    <div class="date d-flex">#}
{#                                        <div class="ml-3">#}
{#                                            <div class="date-option">#}
{#                                                    <span class="chips cursor-pointer" id="select-date-option">#}
{#                                                        <span :id="'modal-date-text-'">#}
{#                                                            <% periods[selectedPeriod] %>#}
{#                                                        </span>#}
{#                                                        <i class="ml-2 fal fa-chevron-down fa-1x"></i>#}
{#                                                    </span>#}
{#                                            </div>#}
{#                                            <ul class="dropdown-select-menu list-unstyled rounded-2 ml-auto" style="display: none; margin-top: 10px;max-width: 250px;" id="dropdown-date">#}
{#                                                <li v-for="(period, key) in periods" class="date-option-item font-600" @click="changeLineChartPeriod('stats', key)"><% period %></li>#}
{#                                            </ul>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        <line-chart chart-label="stats" type="form" advertiser-id="{{ advertiser.id }}" daf-id="{{ dafInstance.id }}"></line-chart>#}
{#                    </div>#}
{#                    <div class="col-md-12 col-sm-12 col-lg-2 px-lg-0 chart-donut-1">#}
{#                        <div class="card-chart card border-0 mx-lg-2 mx-md-0 rounded-2 h-100 p-4 d-flex justify-content-between">#}
{#                            <div class="card-chart-header pb-4">#}
{#                                <span>SPEND</span>#}
{#                            </div>#}
{#                            <div class="chart-content position-relative">#}
{#                                {% if totalBudget > 0 %}#}
{#                                    {% set ratio = (totalSpend / totalBudget * 100) | number_format(2) %}#}
{#                                    <div class="chart-donut d-table mx-auto" data-percent="{{ ratio }}" data-scale-color="#ffb400" id="chart-donut-2">#}
{#                                        <span class="lead position-absolute font-600">{{ ratio }}%</span>#}
{#                                    </div>#}
{#                                {% endif %}#}
{#                            </div>#}
{#                            <div class="card-chart-bottom d-flex justify-content-between">#}
{#                                <span>Total</span>#}
{#                                <span class=""><b>{{ (totalBudget / 1000 )| number_format(2) }}k</b></span>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="col-md-12 col-sm-12 col-lg-5 card chart-camembert border-0 rounded-2 p-4 card-chart">#}
{#                        <div class="card-chart-header">#}
{#                            <span>All Applies</span>#}
{#                        </div>#}
{#                        <div class="d-flex" style="height: 200px; width: 380px">#}
{#                            <camembert-chart chart-label="stats" type="form" advertiser-id="{{ advertiser.id }}" daf-id="{{ dafInstance.id }}"></camembert-chart>#}
{#                            <div class="chart-labels d-flex pt-4 flex-column">#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}

                <div class="section-chart-overview-all-2 d-flex mb-3">
                    <div class="col-md-12 col-lg-6 px-0">
                        <div class="card graphic-1 border-0 mr-lg-2 p-4">
                            <div class="card-chart-header pb-3">{{ 'Statistics by CATEGORIES'|trans }}</div>
                            <bar-horizontal-chart :height="300" :chart-data="charts.categories" class="fade-in-02"
                                                  v-if="!loading.categories && dataNotEmpty(charts?.categories?.datasets?.[0].data)"></bar-horizontal-chart>
                            <p class="d-flex align-items-center justify-content-center m-0 fade-in-02" style="min-height: 300px;"
                               v-if="!loading.categories && !dataNotEmpty(charts?.categories?.datasets?.[0].data)">
                                <span class="text-primary">{{ 'There is no data available yet'|trans }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 card graphic-2 border-0">
                        <div class="card graphic-1 border-0 mr-2 p-4">
                            <div class="card-chart-header pb-3" >{{ 'Statistics by Regions'|trans }}</div>
                            <bar-horizontal-chart :height="300" :chart-data="charts.regions" class="fade-in-02"
                                                  v-if="!loading.regions && dataNotEmpty(charts?.regions?.datasets?.[0].data)"></bar-horizontal-chart>
                            <p class="d-flex align-items-center justify-content-center m-0 fade-in-02" style="min-height: 300px;"
                               v-if="!loading.regions && !dataNotEmpty(charts?.regions?.datasets?.[0].data)">
                                <span class="text-primary">{{ 'There is no data available yet'|trans }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="section-chart-overview-all-2 d-flex mb-4">
                    <div class="col-md-12 col-lg-6 px-0">
                        <div class="card graphic-1 border-0 mr-lg-2 p-4">
                            <div class="card-chart-header pb-3">{{ 'Statistics by DEVICES'|trans }}</div>
                            <bar-horizontal-chart :height="300" :chart-data="charts.devices" class="fade-in-02"
                                                  v-if="!loading.devices && dataNotEmpty(charts?.devices?.datasets?.[0].data)"></bar-horizontal-chart>
                            <p class="d-flex align-items-center justify-content-center m-0 fade-in-02" style="min-height: 300px;"
                               v-if="!loading.devices && !dataNotEmpty(charts?.devices?.datasets?.[0].data)">
                                <span class="text-primary">{{ 'There is no data available yet'|trans }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 card graphic-2 border-0">
                        <div class="card graphic-1 border-0 mr-2 p-4">
                            <div class="card-chart-header pb-3">{{ 'Statistics by Distance'|trans }}</div>
                            <bar-horizontal-chart :height="300" :chart-data="charts.distance" class="fade-in-02"
                                                  v-if="!loading.distance && dataNotEmpty(charts?.distance?.datasets?.[0].data)"></bar-horizontal-chart>
                            <p class="d-flex align-items-center justify-content-center m-0 fade-in-02" style="min-height: 300px;"
                               v-if="!loading.distance && !dataNotEmpty(charts?.distance?.datasets?.[0].data)">
                                <span class="text-primary">{{ 'There is no data available yet'|trans }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <span class="d-none invisible twig-data-advertiser-id" data-advertiser-id="{{ advertiser.id }}"></span>
                <span class="d-none invisible twig-data-daf-id" data-daf-id="{{ dafInstance.id }}"></span>
                <span class="d-none invisible twig-data-dafinstances" data-dafinstances="{{ dafInstances|json_encode }}"></span>
                <span class="d-none invisible twig-data-daf-token" data-daf-token="{{ dafInstance.token }}"></span>
                <span class="d-none invisible twig-data-job-count-label" data-job-count-label="{{ jobsCountLabels|json_encode }}"></span>
                <span class="d-none invisible twig-data-job-count-data" data-job-count-data="{{ jobsCountData|json_encode }}"></span>
                <span class="d-none invisible twig-data-applies-count" data-applies-count="{{ appliesCount|json_encode }}"></span>
                <span class="d-none invisible twig-data-path-current-route" data-path-current-route="{{ path(routeName, {'advertiser': advertiser.id, 'dafInstance': ':did' }) }}"></span>
            </section>
        </div>
    </main>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('cvlibrary-daf-selector-header') }}
    {{ encore_entry_script_tags('cvlibrary-form-index') }}
{% endblock %}