@extends('layouts.app')

@section('content')
@php
    use App\Services\AppContext;
    $appContext = app(AppContext::class);
    $domainBrand = $appContext->getDomainBrand();
@endphp

<div class="container py-3">
    <div class="row mb-4">
        <div class="col-md-8 col-sm-12">
            <h4 class="text-black-or-white">Mon suivi</h4>
            <p class="txt-grey m-0 p-0">Pilotez votre activité à l'aide de vos différents indicateurs clés.</p>
        </div>
        <div class="col-md-4 col-sm-12 d-flex justify-content-end align-items-center">
            <div class="week-selector">
                <button class="btn btn_week btn_week_previous" data-numero_semaine="{{ date('W') - 1 }}">
                    <i class="fa-light fa-chevron-left"></i>
                </button>
                <div class="period-text" data-bs-toggle="tooltip" data-bs-html="true">Semaine <span id="numero_semaine" data-numero_semaine="{{ date('W') }}">{{ date('W') }}</span></div>
                <button class="btn btn_week btn_week_next" data-numero_semaine="{{ date('W') + 1 }}">
                    <i class="fa-light fa-chevron-right"></i>
                </button>
            </div>

            <div class="month-selector" style="display: none;">
                <button class="btn btn_month btn_month_previous">
                    <i class="fa-light fa-chevron-left"></i>
                </button>
                <div class="period-text" data-bs-toggle="tooltip" data-bs-html="true"></div>
                <button class="btn btn_month btn_month_next">
                    <i class="fa-light fa-chevron-right"></i>
                </button>
            </div>

            <div class="year-selector" style="display: none;">
                <button class="btn btn_year btn_year_previous">
                    <i class="fa-light fa-chevron-left"></i>
                </button>
                <div class="period-text" data-bs-toggle="tooltip" data-bs-html="true"></div>
                <button class="btn btn_year btn_year_next">
                    <i class="fa-light fa-chevron-right"></i>
                </button>
            </div>

            <div id="calendar-button" class="filter-block">
                <button class="toggle-filter" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-light fa-calendar-arrow-up"></i>
                </button>

                <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end block-main-search">
                    <div class="input-container mb-2">
                        <button type="button" class="filters-list-trigger filters-list-trigger-toggler bg-grey-light">
                            <span class="main-search-label">Période</span>
                            <span class="main-search-button-text filled" data-reset="Sélectionnez…">Données de la semaine</span>
                            <input id="period-select" type="hidden" value="week"/>
                        </button>
                        <ul class="search-list filters-list bg-grey-light mt--25px">
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="period-select" id="filter-commission-5" data-label="Données de la semaine" value="week" class="commissions-filter">
                                    <label for="filter-commission-5" class="text-transform-none">
                                        Données de la semaine
                                    </label>
                                </div>
                            </li>
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="period-select" id="filter-commission-7" data-label="Données du mois" value="month" class="commissions-filter">
                                    <label for="filter-commission-7" class="text-transform-none">
                                        Données du mois
                                    </label>
                                </div>
                            </li>
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="period-select" id="filter-commission-10" data-label="Données de l'année" value="year" class="commissions-filter">
                                    <label for="filter-commission-10" class="text-transform-none">
                                        Données de l'année
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="input-container border-none">
                        <button type="button" class="filters-list-trigger filters-list-trigger-toggler bg-grey-light ">
                            <span class="main-search-label">COMPARAISON</span>
                            <span class="main-search-button-text filled" data-reset="Sélectionnez…"></span>
                            <input id="compare-select" type="hidden" value="prev_week"/>
                        </button>
                        <ul class="search-list filters-list bg-grey-light mt--25px">
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="compare-select" id="compare-select-1" data-label="Semaine précédente" value="prev_week" class="commissions-filter">
                                    <label for="compare-select-1" class="text-transform-none">Semaine précédente</label>
                                </div>
                            </li>
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="compare-select" id="compare-select-2" data-label="Mois précédent" value="prev_month" class="commissions-filter">
                                    <label for="compare-select-2" class="text-transform-none">Mois précédent</label>
                                </div>
                            </li>
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="compare-select" id="compare-select-3" data-label="Année précédente" value="prev_year" class="commissions-filter">
                                    <label for="compare-select-3" class="text-transform-none">Année précédente</label>
                                </div>
                            </li>
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="compare-select" id="compare-select-4" data-label="Semaine Année-1" value="same_week_prev_year" class="commissions-filter">
                                    <label for="compare-select-4" class="text-transform-none">Semaine Année-1</label>
                                </div>
                            </li>
                            <li class="filter-item">
                                <div class="input-container">
                                    <input type="checkbox" name="compare-select" id="compare-select-5" data-label="Mois Année-1" value="same_month_prev_year" class="commissions-filter">
                                    <label for="compare-select-5" class="text-transform-none">Mois Année-1</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="filter-actions">
                        <button type="button" class="btn-apply-filter btn btn-default">
                            Appliquer les filtres
                        </button>
                        <button type="button" class="btn-cancel-filter btn btn-default text-center">
                            Annuler
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="collapse" id="filterCollapse">
        <div class="searchbar-collapse-content block-main-search bg-dark p-4">
            <div class="container">
                <div class="input-container mb-3">
                    <button type="button" class="filters-list-trigger filters-list-trigger-toggler bg-grey-light w-100">
                        <span class="main-search-label">Période</span>
                        <span class="main-search-button-text filled" data-reset="Sélectionnez…">Données de la semaine</span>
                        <input id="period-select" type="hidden" value="week"/>
                    </button>
                    <ul class="search-list filters-list bg-grey-light mt--25px">
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="period-select" id="filter-commission-5" data-label="Données de la semaine" value="week" class="commissions-filter">
                                <label for="filter-commission-5" class="text-transform-none">
                                    Données de la semaine
                                </label>
                            </div>
                        </li>
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="period-select" id="filter-commission-7" data-label="Données du mois" value="month" class="commissions-filter">
                                <label for="filter-commission-7" class="text-transform-none">
                                    Données du mois
                                </label>
                            </div>
                        </li>
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="period-select" id="filter-commission-10" data-label="Données de l'année" value="year" class="commissions-filter">
                                <label for="filter-commission-10" class="text-transform-none">
                                    Données de l'année
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="input-container border-none">
                    <button type="button" class="filters-list-trigger filters-list-trigger-toggler bg-grey-light w-100">
                        <span class="main-search-label">COMPARAISON</span>
                        <span class="main-search-button-text filled" data-reset="Sélectionnez…"></span>
                        <input id="compare-select" type="hidden" value="prev_week"/>
                    </button>
                    <ul class="search-list filters-list bg-grey-light mt--25px">
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="compare-select" id="compare-select-1" data-label="Semaine précédente" value="prev_week" class="commissions-filter">
                                <label for="compare-select-1" class="text-transform-none">Semaine précédente</label>
                            </div>
                        </li>
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="compare-select" id="compare-select-2" data-label="Mois précédent" value="prev_month" class="commissions-filter">
                                <label for="compare-select-2" class="text-transform-none">Mois précédent</label>
                            </div>
                        </li>
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="compare-select" id="compare-select-3" data-label="Année précédente" value="prev_year" class="commissions-filter">
                                <label for="compare-select-3" class="text-transform-none">Année précédente</label>
                            </div>
                        </li>
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="compare-select" id="compare-select-4" data-label="Semaine Année-1" value="same_week_prev_year" class="commissions-filter">
                                <label for="compare-select-4" class="text-transform-none">Semaine Année-1</label>
                            </div>
                        </li>
                        <li class="filter-item">
                            <div class="input-container">
                                <input type="checkbox" name="compare-select" id="compare-select-5" data-label="Mois Année-1" value="same_month_prev_year" class="commissions-filter">
                                <label for="compare-select-5" class="text-transform-none">Mois Année-1</label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="filter-actions">
                    <button type="button" class="btn-apply-filter btn btn-primary">
                        Appliquer les filtres
                    </button>
                    <button type="button" class="btn-cancel-filter btn btn-primary text-center">
                        Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Tabs Navigation -->
    <div class="tabs-nav mobile-tabs">
        <button class="tab-btn active" data-tab="activite">
            <i class="fa-regular fa-chart-line pe-2"></i>Activité
        </button>
        <button class="tab-btn" data-tab="ventes">
            <i class="fa-regular fa-briefcase pe-2"></i>Ventes
        </button>
    </div>
    <div class="tab-content mobile-tabs">
        <div class="tab-pane active w-100" id="activite">
            <div class="stat-card">
                <div class="card-title">
                    <i class="fa-light fa-chart-line text-gold pe-2"></i>
                    <div class="title-with-info">
                        <h5 class="text-black-or-white m-0">Mon activité</h5>
                    </div>
                </div>
                <ul class="stats-list">
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Dénonciations <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de dénonciations déposées sur {{ $domainBrand }}."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_denonciations_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_denonciations_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_denonciations_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Options posées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'option posées, incluant les non validées."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_options_posees_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_options_posees_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_options_posees_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Options validées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'options qui ont été validées."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_options_validees_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_options_validees_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_options_validees_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Options renouvelées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'options qui ont été posées puis renouvelées plus d'une fois."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_options_renouvelees_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_options_renouvelees_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_options_renouvelees_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Options échouées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'options qui ont été posées mais qui n'ont pas été validées avant leur date de fin ou qui ont été annulées."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_options_echouees_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_options_echouees_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_options_echouees_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Réservations <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de contrats de réservations signés."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_reservation_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_reservation_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_reservation_tendance_value_mob"></span></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-pane w-100" id="ventes" style="display: none;">
            <div class="stat-card">
                <div class="card-title">
                    <i class="fa-light fa-briefcase text-gold pe-2"></i>
                    <div class="title-with-info">
                        <h5 class="text-black-or-white m-0">Mes ventes</h5>
                    </div>
                </div>
                <ul class="stats-list">
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Ventes <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de réservations actées."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_ventes_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_ventes_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_ventes_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">CA vendu <span class="info-icon" data-bs-toggle="tooltip" title="CA vendu calculé à partir du nombre de ventes réalisées (comprenant ventes actées et annulations)."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_ca_vendu_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_ca_vendu_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_ca_vendu_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Annulations <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de ventes qui n'ont pas abouties malgré la signature d'une réservation."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_annulations_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_annulations_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_annulations_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">CA annulation <span class="info-icon" data-bs-toggle="tooltip" title="Volume de CA qui n'a pas abouti suite à des annulations."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_ca_annulation_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_ca_annulation_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_ca_annulation_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">CA net <span class="info-icon" data-bs-toggle="tooltip" title="Volume de CA généré sur les vente actées (ne comprenant pas les annulations)."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_ca_net_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_ca_net_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_ca_net_tendance_value_mob"></span></span>
                        </div>
                    </li>
                    <li>
                        <div class="info">
                            <p class="li_stat_title stat-with-info">Commissions <span class="info-icon" data-bs-toggle="tooltip" title="À titre indicatif et peut varier. Volume de commission généré grâce à votre activité."><i class="fa-regular fa-circle-info"></i></span></p>
                        </div>
                        <div class="li_values">
                            <span class="li_stat" id="li_stat_commissions_mob"></span>
                            <span class="stat-separator">|</span>
                            <span id="li_stat_commissions_tendance_mob" class=""><span class="text-black-or-white" id="li_stat_commissions_tendance_value_mob"></span></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="desktop-cards">
        <div class="stat-card mb-4">
            <div class="card-title mb-4">
                <i class="fa-light fa-chart-line card-icon"></i>
                <div class="title-with-info">
                    <h5 class="text-black-or-white m-0">Mon activité</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Dénonciations <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de dénonciations déposées sur {{ $domainBrand }}."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_denonciations"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_denonciations_tendance" class=""><span class="text-black-or-white" id="li_stat_denonciations_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_denonciations_precedentes" id="li_stat_denonciations_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center border-start border-end border-secondary">
                    <p class="li_stat_title stat-with-info">Options posées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'option posées, incluant les non validées."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_options_posees"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_options_posees_tendance" class=""><span class="text-black-or-white" id="li_stat_options_posees_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_options_posees_precedentes" id="li_stat_options_posees_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Options validées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'options qui ont été validées."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_options_validees"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_options_validees_tendance" class=""><span class="text-black-or-white" id="li_stat_options_validees_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_options_validees_precedentes" id="li_stat_options_validees_precedentes"></span>
                    </div>
                </div>
            </div>

            <div class="row mt-4 pt-4 border-top border-secondary">
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Options renouvelées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'options qui ont été posées puis renouvelées plus d'une fois."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_options_renouvelees"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_options_renouvelees_tendance" class=""><span class="text-black-or-white" id="li_stat_options_renouvelees_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_options_renouvelees_precedentes" id="li_stat_options_renouvelees_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center border-start border-end border-secondary">
                    <p class="li_stat_title stat-with-info">Options échouées <span class="info-icon" data-bs-toggle="tooltip" title="Nombre d'options qui ont été posées mais qui n'ont pas été validées avant leur date de fin ou qui ont été annulées."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_options_echouees"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_options_echouees_tendance" class=""><span class="text-black-or-white" id="li_stat_options_echouees_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_options_echouees_precedentes" id="li_stat_options_echouees_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Réservations <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de contrats de réservations signés."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_reservation"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_reservation_tendance" class=""><span class="text-black-or-white" id="li_stat_reservation_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_reservation_precedentes" id="li_stat_reservation_precedentes"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="card-title mb-4">
                <i class="fa-light fa-briefcase card-icon"></i>
                <div class="title-with-info">
                    <h5 class="text-black-or-white m-0">Mes ventes</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Ventes <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de réservations actées."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_ventes"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_ventes_tendance" class=""><span class="text-black-or-white" id="li_stat_ventes_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_ventes_precedentes" id="li_stat_ventes_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center border-start border-end border-secondary">
                    <p class="li_stat_title stat-with-info">CA vendu <span class="info-icon" data-bs-toggle="tooltip" title="CA vendu calculé à partir du nombre de ventes réalisées (comprenant ventes actées et annulations)."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_ca_vendu"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_ca_vendu_tendance" class=""><span class="text-black-or-white" id="li_stat_ca_vendu_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_ca_vendu_precedentes" id="li_stat_ca_vendu_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Annulations <span class="info-icon" data-bs-toggle="tooltip" title="Nombre de ventes qui n'ont pas abouties malgré la signature d'une réservation."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_annulations"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_annulations_tendance" class=""><span class="text-black-or-white" id="li_stat_annulations_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_annulations_precedentes" id="li_stat_annulations_precedentes"></span>
                    </div>
                </div>
            </div>
            <div class="row mt-4 pt-4 border-top border-secondary">
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">CA annulation <span class="info-icon" data-bs-toggle="tooltip" title="Volume de CA qui n'a pas abouti suite à des annulations."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_ca_annulation"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_ca_annulation_tendance" class=""><span class="text-black-or-white" id="li_stat_ca_annulation_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_ca_annulation_precedentes" id="li_stat_ca_annulation_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center border-start border-end border-secondary">
                    <p class="li_stat_title stat-with-info">CA net <span class="info-icon" data-bs-toggle="tooltip" title="Volume de CA généré sur les vente actées (ne comprenant pas les annulations)."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_ca_net"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_ca_net_tendance" class=""><span class="text-black-or-white" id="li_stat_ca_net_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_ca_net_precedentes" id="li_stat_ca_net_precedentes"></span>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <p class="li_stat_title stat-with-info">Commissions <span class="info-icon" data-bs-toggle="tooltip" title="À titre indicatif et peut varier. Volume de commission généré grâce à votre activité."><i class="fa-regular fa-circle-info"></i></span></p>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat" id="li_stat_commissions"></span>
                        <span class="stat-separator">|</span>
                        <span id="li_stat_commissions_tendance" class=""><span class="text-black-or-white" id="li_stat_commissions_tendance_value"></span></span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <span class="li_stat_commissions_precedentes" id="li_stat_commissions_precedentes"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="base_url" value="{{ url('/') }}/" />

@endsection