{% extends 'base.html.twig' %}

{% block title %}Tableau de bord{% endblock %}
{% block titre_page %}Tableau de bord{% endblock %}
{% block resume_page %}Vue d'ensemble de la troupe{% endblock %}
{% block description_page %}Ici, tu peux voir les différentes statistiques de la troupe{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-sm-6">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center border-0">
                    <div class="me-auto">
                        <h3 class="h4 m-0">Calendrier</h3>
                    </div>
                </div>
                <div class="card-body d-flex align-items-center border-0">
                    <div class="timeline">
                        {% for representation in prochaines %}
                            {% if representation.date < date() %}
                            <div class="tl-entry active">
                                <div class="tl-time">
                                    <div class="tl-date">{{ representation.date|date('d/m/Y') }}</div>
                                    <div class="tl-time">{{ representation.heure|date('H:i') }}</div>
                                </div>
                                <div class="tl-media">
                                    <div class="ratio ratio-1x1 bg-light text-white rounded-circle">
                                        <i class="ti-medall fs-5"></i>
                                    </div>
                                </div>
                                <div class="tl-content card">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            {% if representation.date|date('ymd') < "now"|date('ymd') %}
                                                {% if is_granted('ROLE_ADMIN') %}
                                                    <a class="link" href="{{ path('representation_bilan', {'representationId':representation.id}) }}">
                                                        {{ representation.spectacle.name }}
                                                    </a>
                                                {% else %}
                                                    <a class="link" href="{{ path('representation_bilan_user', {'representationId':representation.id}) }}">
                                                        {{ representation.spectacle.name }}
                                                    </a>
                                                {% endif %}
                                            {% else %}
                                                {% if is_granted('ROLE_ADMIN') %}
                                                    <a class="link" href="{{ path('representation_registered', {'representationId':representation.id}) }}">
                                                        {{ representation.spectacle.name }}
                                                    </a>
                                                {% endif %}
                                            {% endif %}
                                        </h5>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                {% if representation.spectacle.image %}
                                                    <img class="img-max-lg"
                                                         src="{{ asset('uploads/spectacles/images/' ~ representation.spectacle.image) }}"/>
                                                {% endif %}
                                            </div>
                                            <div class="col-sm-6">
                                                <i class="ti-direction-alt me-1"></i>{{ representation.salle.name }}<br/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                                <div class="tl-entry active">
                                    <div class="tl-time">
                                        <div class="tl-date">{{ representation.date|date('d/m/Y') }}</div>
                                        <div class="tl-time">{{ representation.heure|date('H:i') }}</div>
                                    </div>
                                    <div class="tl-media">
                                        <div class="ratio ratio-1x1 bg-info text-white rounded-circle">
                                            <i class="ti-bell fs-5"></i>
                                        </div>
                                    </div>
                                    <div class="tl-content card">
                                        <div class="card-body">
                                            <h5 class="card-title">
                                                {% if representation.date|date('ymd') < "now"|date('ymd') %}
                                                    {% if is_granted('ROLE_ADMIN') %}
                                                        <a class="link" href="{{ path('representation_bilan', {'representationId':representation.id}) }}">
                                                            {{ representation.spectacle.name }}
                                                        </a>
                                                    {% else %}
                                                        <a class="link" href="{{ path('representation_bilan_user', {'representationId':representation.id}) }}">
                                                            {{ representation.spectacle.name }}
                                                        </a>
                                                    {% endif %}
                                                {% else %}
                                                    {% if is_granted('ROLE_ADMIN') %}
                                                        <a class="link" href="{{ path('representation_registered', {'representationId':representation.id}) }}">
                                                            {{ representation.spectacle.name }}
                                                        </a>
                                                    {% endif %}
                                                {% endif %}
                                            </h5>
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    {% if representation.spectacle.image %}
                                                        <img class="img-max-lg"
                                                             src="{{ asset('uploads/spectacles/images/' ~ representation.spectacle.image) }}"/>
                                                    {% endif %}
                                                </div>
                                                <div class="col-sm-8">
                                                    {{ representation.salle.name }} à {{ representation.heure|date('H:i') }}<br/>
                                                    Rendez-vous à {{ representation.heureRdv|date('H:i') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">

            <!-- Tile - HDD Usage -->
            <div class="card bg-blue-700 text-white overflow-hidden mb-3">
                {% set type = constant('App\\Constants\\StatistiqueType::FB_FAN_COUNT') %}
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i
                                class="ti-{{ type.icon }} text-reset text-opacity-75 fs-3 me-2"></i>
                        {{ type.label }}</h5>
                    <ul class="list-group list-group-borderless">
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Aujourd'hui</div>
                            <span class="fw-bold">{{ (statsFB|first).value }}</span>
                        </li>
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Objectif</div>
                            <span class="fw-bold">100</span>
                        </li>
                    </ul>
                </div>

                <!-- Area Chart -->
                <div class="py-0" style="height: 70px; margin: 0 -5px -5px;">
                    <canvas id="fbFanCountChart"></canvas>
                </div>
                <!-- END : Area Chart -->

            </div>
            <!-- END : Tile - HDD Usage -->

        </div>
        <div class="col-sm-3">
            <!-- Tile - HDD Usage -->
            <div class="card bg-purple-600 text-white overflow-hidden mb-3">
                {% set type = constant('App\\Constants\\StatistiqueType::INSTA_FOLLOWERS') %}
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i
                                class="ti-{{ type.icon }} text-reset text-opacity-75 fs-3 me-2"></i>
                        {{ type.label }}</h5>
                    <ul class="list-group list-group-borderless">
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Aujourd'hui</div>
                            <span class="fw-bold">{{ (statsInsta|first).value }}</span>
                        </li>
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Objectif</div>
                            <span class="fw-bold">500</span>
                        </li>
                    </ul>
                </div>

                <!-- Area Chart -->
                <div class="py-0" style="height: 70px; margin: 0 -5px -5px;">
                    <canvas id="instaFollowersCountChart"></canvas>
                </div>
                <!-- END : Area Chart -->

            </div>
            <!-- END : Tile - HDD Usage -->

        </div>
        <!--
        <div class="col-sm-6">
            <div class="card bg-info text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i class="demo-psi-coin text-reset text-opacity-75 fs-2 me-2"></i>
                        Earning</h5>
                    <ul class="list-group list-group-borderless">
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Today</div>
                            <span class="fw-bold">$764</span>
                        </li>
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Last 7 Day</div>
                            <span class="fw-bold">$1,332</span>
                        </li>
                    </ul>
                </div>
                <div class="py-0" style="height: 70px; margin: 0 -5px -5px;">
                    <canvas id="_dm-earningChart"></canvas>
                </div>
            </div>

        </div>-->
    </div>
    <!--<div class="row">
        <div class="col-sm-6">
            <div class="card bg-purple text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i
                                class="demo-psi-basket-coins text-reset text-opacity-75 fs-2 me-2"></i>
                        Sales</h5>
                    <ul class="list-group list-group-borderless">
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Today</div>
                            <span class="fw-bold">$764</span>
                        </li>
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Last 7 Day</div>
                            <span class="fw-bold">$1,332</span>
                        </li>
                    </ul>
                </div>

                <div class="py-0" style="height: 70px">
                    <canvas id="_dm-salesChart"></canvas>
                </div>

            </div>

        </div>
        <div class="col-sm-6">
            <div class="card bg-warning text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i
                                class="demo-psi-basket-coins text-reset text-opacity-75 fs-2 me-2"></i>
                        Task Progress</h5>
                    <ul class="list-group list-group-borderless">
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Completed</div>
                            <span class="fw-bold">34</span>
                        </li>
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                            <div class="me-auto">Total</div>
                            <span class="fw-bold">79</span>
                        </li>
                    </ul>
                </div>
                <div class="py-0 pb-2" style="height: 70px">
                    <canvas id="_dm-taskChart"></canvas>
                </div>
            </div>
        </div>
    </div>-->

    <!--<div class="card">
        <div class="card-body text-center">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 p-3">
                    <div class="h3 display-3">95</div>
                    <span class="h6">New Friends</span>
                </div>
                <div class="flex-grow-1 text-center ms-3">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    <button class="btn btn-sm btn-danger">View Details</button>

                    <div class="mt-4 pt-3 d-flex justify-content-around border-top">
                        <div class="text-center">
                            <h4 class="mb-1">1,345</h4>
                            <small class="text-muted">Following</small>
                        </div>
                        <div class="text-center">
                            <h4 class="mb-1">23k</h4>
                            <small class="text-muted">Followers</small>
                        </div>
                        <div class="text-center">
                            <h4 class="mb-1">278</h4>
                            <small class="text-muted">Posts</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>-->
    <!-- END : Simple state widget -->

    <div class="col-xl-12 mb-3 mb-xl-0 mt-3">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center border-0">
                <div class="me-auto">
                    <h3 class="h4 m-0">Tableau des participations</h3>
                </div>
                <div class="text-end">
                    <select id="tableauSelect" class="form-select">
                        <option value="x" selected="selected">Sélectionner le tableau</option>
                        {% for repartition in repartitionsLongForm %}
                            <option value="tableau_{{ repartition.saison.id ~ '_' ~ constant('App\\Constants\\SpectacleType::LONG_FORM')['code'] }}">{{ repartition.saison.name }}
                                &nbsp;{{ constant('App\\Constants\\SpectacleType::LONG_FORM')['label'] }}</option>
                        {% endfor %}
                        {% for repartition in repartitionsCabaret %}
                            <option value="tableau_{{ repartition.saison.id ~ '_' ~ constant('App\\Constants\\SpectacleType::CABARET')['code'] }}">{{ repartition.saison.name }}
                                &nbsp;{{ constant('App\\Constants\\SpectacleType::CABARET')['label'] }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="table-responsive">
                {% for repartition in repartitionsLongForm %}
                    <table class="table p-3 d-none"
                           id="tableau_{{ repartition.saison.id ~ '_' ~ constant('App\\Constants\\SpectacleType::LONG_FORM')['code'] }}">
                        {% set max = repartition.users|xtrem('max') %}
                        {% set min = repartition.users|xtrem('min') %}
                        <thead>
                        <tr>
                            <th class="text-center"></th>
                            {% for user in repartition.users %}
                                <th class="text-center">
                                    {% if user.user.photo %}
                                        <img class="mainnav__avatar img-sm rounded-circle border"
                                             src="{{ asset('uploads/user/photo/' ~ user.user.photo) }}" alt="Nobody"
                                             loading="lazy"><br/>
                                    {% else %}
                                        <img class="mainnav__avatar img-sm rounded-circle border"
                                             src="{{ asset('assets/img/nobody.jpg') }}" alt="Nobody" loading="lazy">
                                        <br/>
                                    {% endif %}
                                    {{ user.user.firstname }}
                                </th>
                            {% endfor %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for userid, user in repartition.users %}
                            <tr>
                                <td class="text-center">{{ user.user.firstname }}</td>
                                {% for key, repartition in user.repartitions %}
                                    {% if key == userid %}
                                        <td class="text-center" style="background-color:black !important;"></td>
                                    {% else %}
                                        {% if repartition == min %}
                                            <td class="text-center fw-bold"
                                                style="background-color:rgba(186, 220, 88,0.6)">{{ repartition }}</td>
                                        {% elseif repartition == max %}
                                            <td class="text-center fw-bold"
                                                style="background-color:rgba(235, 77, 75,0.6)">{{ repartition }}</td>
                                        {% else %}
                                            <td class="text-center fw-bold">{{ repartition }}</td>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% endfor %}
                {% for repartition in repartitionsCabaret %}
                    <table class="table p-3 d-none"
                           id="tableau_{{ repartition.saison.id ~ '_' ~ constant('App\\Constants\\SpectacleType::CABARET')['code'] }}">
                        {% set max = repartition.users|xtrem('max') %}
                        {% set min = repartition.users|xtrem('min') %}
                        <thead>
                        <tr>
                            {% for user in repartition.users %}
                                <th class="text-center">
                                    {% if user.user.photo %}
                                        <img class="mainnav__avatar img-sm rounded-circle border"
                                             src="{{ asset('uploads/user/photo/' ~ user.user.photo) }}" alt="Nobody"
                                             loading="lazy"><br/>
                                    {% else %}
                                        <img class="mainnav__avatar img-sm rounded-circle border"
                                             src="{{ asset('assets/img/nobody.jpg') }}" alt="Nobody" loading="lazy">
                                        <br/>
                                    {% endif %}
                                    {{ user.user.firstname }}
                                </th>
                            {% endfor %}
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            {% for user in repartition.users %}
                                {% if user.repartitions == min %}
                                    <td class="text-center fw-bold"
                                        style="background-color:rgba(186, 220, 88,0.6)">{{ user. repartitions }}</td>
                                {% elseif user.repartitions == max %}
                                    <td class="text-center fw-bold"
                                        style="background-color:rgba(235, 77, 75,0.6)">{{ user.repartitions }}</td>
                                {% else %}
                                    <td class="text-center fw-bold">{{ user.repartitions }}</td>
                                {% endif %}
                            {% endfor %}
                        </tr>
                        </tbody>
                    </table>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

    {% block javascripts %}
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $('#tableauSelect').on('change', function () {
                    tableauId = $(this).val();
                    $("table[id^=tableau_]").addClass('d-none');
                    $("#" + tableauId).removeClass('d-none');
                });

                const data = {{ statsFB|json_encode(constant('JSON_PRETTY_PRINT'))|raw }};
                const hddChart = new Chart(
                    document.getElementById("fbFanCountChart"), {
                        type: "line",
                        data: {
                            datasets: [
                                {
                                    label: "Likes",
                                    data: data.map(row => ({
                                        'x': new Date(row.date),
                                        'y': row.value
                                    })),
                                    borderColor: "white",
                                    backgroundColor: "rgba(255,255,255,.4)",
                                    fill: "start",
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            resizeDelay: 250,
                            plugins: {
                                legend: {
                                    display: false
                                },
                                tooltip: {
                                    caretSize: 0,
                                    yAlign: "center",
                                    callbacks: {
                                        title: (context) => {
                                            if (context[0].parsed.x !== null) {
                                                return new Date(context[0].parsed.x).toLocaleDateString()
                                            }
                                        },
                                        label: (context) => {
                                            let label = context.dataset.label;
                                            if (context.parsed.y !== null) label += " : " + context.parsed.y;
                                            return label;
                                        }
                                    }
                                }
                            },

                            interaction: {
                                mode: "index",
                                intersect: false,
                            },

                            scales: {
                                y: {
                                    display: false
                                },
                                x: {
                                    display: false,
                                    type: 'time',

                                }
                            },
                            radius: 1,
                            elements: {
                                line: {
                                    tension: 0.15
                                }
                            }
                        }
                    }
                );

                const dataInsta = {{ statsInsta|json_encode(constant('JSON_PRETTY_PRINT'))|raw }};
                const instaChart = new Chart(
                    document.getElementById("instaFollowersCountChart"), {
                        type: "line",
                        data: {
                            datasets: [
                                {
                                    label: "Likes",
                                    data: dataInsta.map(row => ({
                                        'x': new Date(row.date),
                                        'y': row.value
                                    })),
                                    borderColor: "white",
                                    backgroundColor: "rgba(255,255,255,.4)",
                                    fill: "start",
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            resizeDelay: 250,
                            plugins: {
                                legend: {
                                    display: false
                                },
                                tooltip: {
                                    caretSize: 0,
                                    yAlign: "center",
                                    callbacks: {
                                        title: (context) => {
                                            if (context[0].parsed.x !== null) {
                                                return new Date(context[0].parsed.x).toLocaleDateString()
                                            }
                                        },
                                        label: (context) => {
                                            let label = context.dataset.label;
                                            if (context.parsed.y !== null) label += " : " + context.parsed.y;
                                            return label;
                                        }
                                    }
                                }
                            },

                            interaction: {
                                mode: "index",
                                intersect: false,
                            },

                            scales: {
                                y: {
                                    display: false
                                },
                                x: {
                                    display: false,
                                    type: 'time',

                                }
                            },
                            radius: 1,
                            elements: {
                                line: {
                                    tension: 0.15
                                }
                            }
                        }
                    }
                );
            })
        </script>
    {% endblock %}