@php
    $D_Acces_tableau_bord = session()->get('D_Acces_tableau_bord');
@endphp
@include('header')

<main class="main" id="top">

    @include('navigation')
    <div class="content">
         @include('../loading')
        @php 
            $IDUtilisateur = session()->get('IDUtilisateur');
        @endphp
        {{-- <h2 class="mb-2">Tableau de bord</h2> --}}

            @if( $D_Acces_tableau_bord)
            <div class="d-flex justify-content-center">
                    <input style="width:300px; text-align:center"
                        class="form-control datetimepicker flatpickr-input dateInputSearch " type="text"
                        placeholder="d/m/Y À d/m/Y"
                        data-options="{&quot;mode&quot;:&quot;range&quot;,&quot;dateFormat&quot;:&quot;d/m/Y&quot;,&quot;disableMobile&quot;:true}"
                        readonly="readonly">

                    <button class="btn btn-success me-1" id="dateSearchInterval" style="margin-left:12px;">
                        <i class="fa fa-search cursor-pointer  text-light "></i>
                    </button>
            </div>


         <h5>::.CA</h5>
        <hr>

        <div class="row g-2">
            
            <div class="col-sm-6 col-xl-6 col-md-12">
                <div class="row g-2">
                    <div class="col-sm-4 col-md-12 col-xl-4 col-lg-4">

                        <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                            <div class="card-body">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 style="color:gray" class="card-subtitle mb-2 ">Total commission</h5>
                                    </div>
                                    <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                        <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                            class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            viewBox="0 0 20 19">
                                            <path
                                                d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                            <path
                                                d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                        </svg>
                                    </div>
                                </div>

                                <h4 id="totalCommissionZone" style="margin-top:-40px;margin-bottom:28px"></h4>
                               <small style=""></small>

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

                    <div class="col-sm-4 col-md-12 col-xl-4 col-lg-4">

                        <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                            <div class="card-body">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 style="color:gray" class="card-subtitle mb-2 ">Total part proriétaire</h5>
                                    </div>
                                    <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                        <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                            class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            viewBox="0 0 20 19">
                                            <path
                                                d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                            <path
                                                d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                        </svg>
                                    </div>
                                </div>

                                <h4 id="totalPartProprietaireZone" style="margin-top:-40px;margin-bottom:28px"></h4>
                                <small style=""></small>

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

                    <div class="col-sm-4 col-md-12 col-xl-4 col-lg-4">

                        <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                            <div class="card-body">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 style="color:gray" class="card-subtitle mb-2 ">Total facture</h5>
                                    </div>
                                    <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                        <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                            class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            viewBox="0 0 20 19">
                                            <path
                                                d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                            <path
                                                d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                        </svg>
                                    </div>
                                </div>
                                <h4 id="totalFacture" class="animate__animated animate__fadeInDown" style="margin-top:-40px;margin-bottom:28px"></h4>
                              <small style=""></small>
                                
                            </div>
                        </div>
                    </div>
                </diV>

            </div>

            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                    <div class="card-body">

                        <div class="d-flex justify-content-between">
                            <div>
                                <h5 style="color:gray" class="card-subtitle mb-2 ">Total Règléments</h5>
                            </div>
                            <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                <svg style="width:20px;margin-left:23px; margin-top:20px;"
                                    class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
                                    <path
                                        d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z" />
                                </svg>
                            </div>
                        </div>

                        <h4 id="totalReglemetZone" style="margin-top:-40px;margin-bottom:28px"></h4>
                        <small style=""></small>

                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                    <div class="card-body">

                        <div class="d-flex justify-content-between">
                            <div>
                                <h5 style="color:gray" class="card-subtitle mb-2 ">Total versements</h5>
                            </div>
                            <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">

                                <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                    class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                                    <path
                                        d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
                                </svg>
                            </div>
                        </div>

                        <h4 id="totalVersementZone" style="margin-top:-40px;margin-bottom:28px"></h4>
                        <small style=""></small>

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


        </div>



        <div class="row g-2">
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                <a href="{{route('bien.view')}}" style="text-decoration:none">
                <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s"
                    style="background: rgb(239,242,169);
                           background: linear-gradient(90deg, rgba(239,242,169,0.5383403361344538) 4%, rgba(230,235,223,0.4150910364145658) 42%, rgba(236,237,61,0.0985644257703081) 68%, rgba(225,230,147,0.3534663865546218) 100%);">
                    <div class="card-body">

                        <div class="d-flex justify-content-between">
                            <div>
                                <h5 style="color:gray" class="card-subtitle mb-2 ">BIENS</h5>
                            </div>
                            <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                <svg style="width:20px;margin-left:23px; margin-top:20px;"
                                    class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
                                    <path
                                        d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z" />
                                </svg>
                            </div>
                        </div>

                        <h4 id="BienZone" style="margin-top:-40px;margin-bottom:24px"></h4>
                        <small style=""></small>

                    </div>
                </div>
                </a>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                <a href="{{route('proprietaire.view')}}" style="text-decoration:none">
                    <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s"
                        style="background: rgb(220,236,233);
                            background: linear-gradient(90deg, rgba(220,236,233,0.5523459383753502) 4%, rgba(130,255,184,0.09576330532212884) 32%, rgba(8,167,120,0.11817226890756305) 70%, rgba(8,167,120,0.0985644257703081) 70%);">
                        <div class="card-body">

                            <div class="d-flex justify-content-between">
                                <div>
                                    <h5 style="color:gray" class="card-subtitle mb-2 ">PROPRIETAIRES</h5>
                                </div>
                                <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">

                                    <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                        class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                                        <path
                                            d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
                                    </svg>
                                </div>
                            </div>

                            <h4 id="ProprietaireZone" style="margin-top:-40px;margin-bottom:24px"></h4>
                            <small style=""></small>

                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                 <a href="{{route('locataire.view')}}" style="text-decoration:none">
                    <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s"
                        style="background: rgb(169,242,228);
                            background: linear-gradient(90deg, rgba(169,242,228,0.5383403361344538) 4%, rgba(67,219,133,0.4150910364145658) 42%, rgba(8,167,120,0.11817226890756305) 70%, rgba(8,167,120,0.0985644257703081) 70%);">
                        <div class="card-body">

                            <div class="d-flex justify-content-between">
                                <div>
                                    <h5 style="color:gray" class="card-subtitle mb-2 ">LOCATAIRES</h5>
                                </div>
                                <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                    <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                        class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 19">
                                        <path
                                            d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                        <path
                                            d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                    </svg>
                                </div>
                            </div>

                            <h4 id="LocataireZone" style="margin-top:-40px;margin-bottom:24px"></h4>
                            <small style=""></small>

                        </div>
                    </div>
                 </a>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">

                <a style="text-decoration:none" href="{{ route('prestataire.view') }}">

                        <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s"
                            style="background: rgb(239,242,169);
                                background: linear-gradient(90deg, rgba(239,242,169,0.5383403361344538) 4%, rgba(238,223,114,0.4150910364145658) 42%, rgba(236,237,61,0.0985644257703081) 66%, rgba(225,230,147,0.3534663865546218) 100%);">
                            <div class="card-body">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 style="color:gray" class="card-subtitle mb-2 ">PRESTATAIRES</h5>
                                    </div>
                                    <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                        <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                            class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 19">
                                            <path
                                                d="M7.324 9.917A2.479 2.479 0 0 1 7.99 7.7l.71-.71a2.484 2.484 0 0 1 2.222-.688 4.538 4.538 0 1 0-3.6 3.615h.002ZM7.99 18.3a2.5 2.5 0 0 1-.6-2.564A2.5 2.5 0 0 1 6 13.5v-1c.005-.544.19-1.072.526-1.5H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h7.687l-.697-.7ZM19.5 12h-1.12a4.441 4.441 0 0 0-.579-1.387l.8-.795a.5.5 0 0 0 0-.707l-.707-.707a.5.5 0 0 0-.707 0l-.795.8A4.443 4.443 0 0 0 15 8.62V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.12c-.492.113-.96.309-1.387.579l-.795-.795a.5.5 0 0 0-.707 0l-.707.707a.5.5 0 0 0 0 .707l.8.8c-.272.424-.47.891-.584 1.382H8.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1.12c.113.492.309.96.579 1.387l-.795.795a.5.5 0 0 0 0 .707l.707.707a.5.5 0 0 0 .707 0l.8-.8c.424.272.892.47 1.382.584v1.12a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1.12c.492-.113.96-.309 1.387-.579l.795.8a.5.5 0 0 0 .707 0l.707-.707a.5.5 0 0 0 0-.707l-.8-.795c.273-.427.47-.898.584-1.392h1.12a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5ZM14 15.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" />
                                        </svg>
                                    </div>
                                </div>

                                <h4 id="PrestataireZone" style="margin-top:-40px;margin-bottom:24px"></h4>
                                <small style=""></small>

                            </div>
                        </div>
                
                </a>
                
               </div>
            
        </div>

        <div class="row g-2">
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                 <a href="{{route('Location.view')}}" style="text-decoration:none">
                    <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                        <div class="card-body">

                            <div class="d-flex justify-content-between">
                                <div>
                                    <h5 style="color:gray" class="card-subtitle mb-2 ">LOCATIONS</h5>
                                </div>
                                <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                    <svg style="width:20px;margin-left:23px; margin-top:20px;"
                                        class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
                                        <path
                                            d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z" />
                                    </svg>
                                </div>
                            </div>

                            <h4 id="LocationZone" style="margin-top:-40px;margin-bottom:28px"></h4>
                            <small style=""></small>

                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-3 col-md-6 col-xl-3 col-lg-3 ">
                <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                    <div class="card-body">

                        <div class="d-flex justify-content-between">
                            <div>
                                <h5 style="color:gray" class="card-subtitle mb-2 ">UTILISATEURS</h5>
                            </div>
                            <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">

                                <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                    class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                                    <path
                                        d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
                                </svg>
                            </div>
                        </div>

                        <h4 id="UtilisateurZone" style="margin-top:-40px;margin-bottom:28px"></h4>
                        <small style=""></small>

                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-6 col-md-12">
                <div class="row g-2">
                    <div class="col-sm-4 col-md-12 col-xl-4 col-lg-4">

                        <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                            <div class="card-body">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 style="color:gray" class="card-subtitle mb-2 ">FACTURES</h5>
                                    </div>
                                    <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                        <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                            class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            viewBox="0 0 20 19">
                                            <path
                                                d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                            <path
                                                d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                        </svg>
                                    </div>
                                </div>

                                <h4 id="FactureZone" style="margin-top:-40px;margin-bottom:8px"></h4>
                                <small style="font-size:14px" class="text-warning" id="montantFacture"></small>

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

                    <div class="col-sm-4 col-md-12 col-xl-4 col-lg-4">

                        <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                            <div class="card-body">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 style="color:gray" class="card-subtitle mb-2 ">FACT. REGLES</h5>
                                    </div>
                                    <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                        <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                            class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            viewBox="0 0 20 19">
                                            <path
                                                d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                            <path
                                                d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                        </svg>
                                    </div>
                                </div>

                                <h4 id="FactureRegleZone" style="margin-top:-40px;margin-bottom:8px"></h4>
                                <small style="font-size:14px;" class="text-warning" id="montantFactureRegle"></small>

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

                    <div class="col-sm-4 col-md-12 col-xl-4 col-lg-4">

                        <a href="{{route('FactureEchus.view')}}" style="text-decoration:none">
                            <div class="card mb-2 card-shadow animate__animated animate__fadeIn animate__delay-1s">
                                <div class="card-body">

                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h5 style="color:gray" class="card-subtitle mb-2 ">FACT. ECHUES</h5>
                                        </div>
                                        <div style="width:70px;height:70px; border:1px solid green; border-radius:50px;">
                                            <svg style="width:30px;margin-left:23px; margin-top:20px;"
                                                class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
                                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                                viewBox="0 0 20 19">
                                                <path
                                                    d="M14.5 0A3.987 3.987 0 0 0 11 2.1a4.977 4.977 0 0 1 3.9 5.858A3.989 3.989 0 0 0 14.5 0ZM9 13h2a4 4 0 0 1 4 4v2H5v-2a4 4 0 0 1 4-4Z" />
                                                <path
                                                    d="M5 19h10v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2ZM5 7a5.008 5.008 0 0 1 4-4.9 3.988 3.988 0 1 0-3.9 5.859A4.974 4.974 0 0 1 5 7Zm5 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5-1h-.424a5.016 5.016 0 0 1-1.942 2.232A6.007 6.007 0 0 1 17 17h2a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5ZM5.424 9H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h2a6.007 6.007 0 0 1 4.366-5.768A5.016 5.016 0 0 1 5.424 9Z" />
                                            </svg>
                                        </div>
                                    </div>

                                    <h4 id="FactureEchuZone" style="margin-top:-40px;margin-bottom:8px"></h4>
                                    <small style="font-size:14px;" class="text-warning" id="montantFactureEchue"></small>
                                    
                                </div>
                            </div>
                        </a>
                    </div>
                </diV>

            </div>


        </div>

        <br>
        <h5>::.STATISTIQUES</h5>
        <hr>

        <div class="row mb-4 g-3">

            <div class="col-md-12 col-sm-6 col-xl-6 col-lg-6">
                <div class="card card-shadow animate__animated animate__fadeInUp">
                    <div class="card-body">
                    <p>Statistiques des factures sur deux ans</p>
                        
                      {{-- <div class="echart-bar-timeline-chart-example" style="min-height:330px"></div> --}}

                       <canvas id="myChart" width="400" height="195"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-12 col-sm-6 col-xl-6 col-lg-6">
                <div class="card card-shadow animate__animated animate__fadeInUp ">
                    <div class="card-body">
                        <p> Statistiques des règlements par mode de règlement (selon la période définie) </p>
                        <div class="echart-pie-edge-align-chart-examplex"
                            style="min-height: 330px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"
                            _echarts_instance_="ec_1698397782858">
                            <div
                                style="position: relative; width: 531px; height: 320px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                                <canvas data-zr-dom-id="zr_0" width="663" height="200"
                                    style="position: absolute; left: 0px; top: 0px; width: 531px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                            </div>
                            <div class=""
                                style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; background-color: rgb(239, 242, 246); border-width: 1px; border-radius: 4px; color: rgb(20, 24, 36); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 7px 10px; top: 0px; left: 0px; transform: translate3d(226px, 71px, 0px); border-color: rgb(203, 208, 221); pointer-events: none; visibility: hidden; opacity: 0;">
                                <div style="margin: 0px 0 0;line-height:1;">
                                    <div style="margin: 0px 0 0;line-height:1;"><span
                                            style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(56,116,255, 0.5);"></span><span
                                            style="font-size:14px;color:#141824;font-weight:400;margin-left:2px"></span><span
                                            style="float:right;margin-left:20px;font-size:14px;color:#141824;font-weight:900"></span>
                                        <div style="clear:both"></div>
                                    </div>
                                    <div style="clear:both"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>

        <div class="card card-shadow mb-4 animate__animated animate__backInRight">
        
            <div class="card-body">
             
                    <p>Statistiques des locations de l'année en cours</p>

                    <div class="echart-line-chart-examplex" style="min-height:250px"></div>

                    
            </div>

        </div>


              @else
              <div class="text-center" style="margin-top:70px;">

                      <img src="assets/img/secure.svg" style="width:300px;">
              </div>
              
            @endif

        @include('../primary_footer')



    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')


<script>
    $(document).ready(function() {
        GetAllItems();
    })

    function GetAllItems() {
        
        var totalCommissionZone = 0;
        var totalPartProprietaireZone = 0;
        var totalFacture = 0;
        var totalReglemetZone = 0;
        var totalVersementZone = 0;

        MesrequetesAjax("{{ route('GetAllDashboard.items') }}", "GET", null, true, true, "JSON", function(resp) {

            $('#BienZone').text(resp.Biens);
            $('#ProprietaireZone').text(resp.Proprietaire);
            $('#LocataireZone').text(resp.Locataire);
            $('#PrestataireZone').text(resp.Prestataire);
            $('#LocationZone').text(resp.Location);
            $('#UtilisateurZone').text(resp.Utilisateur);
            $('#FactureZone').text(resp.Facture[0].NbreFacture);
            $('#montantFacture').text(formaterNombre(resp.Facture[0].MontantFacture)+' F')
            $('#FactureRegleZone').text(resp.FactureRegle[0].NbreFacture);
            $('#montantFactureRegle').text(formaterNombre(resp.FactureRegle[0].MontantFactureRegle)+' F');
            $('#FactureEchuZone').text(resp.GetFactureEchus[0].NbreFacture);
            $('#montantFactureEchue').text(formaterNombre(resp.GetFactureEchus[0].MontantFactureEchue)+' F');
            if(resp.TotalCommission[0].montantCommission !=null){
                totalCommissionZone = resp.TotalCommission[0].montantCommission;
            }
            if(resp.TotalPartProprietaire[0].montantPartProprietaire !=null){
                totalPartProprietaireZone = resp.TotalPartProprietaire[0].montantPartProprietaire;
            }
            if(resp.TotalFacture[0].MontantFacture !=null){
                totalFacture = resp.TotalFacture[0].MontantFacture;
            }
            if(resp.TotalReglement[0].MontantReglementLigne !=null){
                totalReglemetZone = resp.TotalReglement[0].MontantReglementLigne;
            }
            if(resp.TotalVersement[0].MontantVersementLigne !=null){
                totalVersementZone = resp.TotalVersement[0].MontantVersementLigne;
            }
            $('#totalCommissionZone').text(formaterNombre(totalCommissionZone)+' F')
            $('#totalPartProprietaireZone').text(formaterNombre(totalPartProprietaireZone)+' F')
            $('#totalFacture').text(formaterNombre(totalFacture)+' F')
            $('#totalReglemetZone').text(formaterNombre(totalReglemetZone)+' F')
            $('#totalVersementZone').text(formaterNombre(totalVersementZone)+' F')

            
        })
    }
</script>

<script>
    $(document).ready(function() {
        $('.nomPage').text('Statistique')
        var donneeOrdonne = [];
        var donneeAnneePrecedente = [];
        var donneeAnneeActuelle = [];
        var anneePrecedente ='';
        var anneeActuelle ='';
        var tableauStatModeR = [];

            MesrequetesAjax("{{ route('GetAllDashboard.statistique') }}", "GET", null, true, true, "JSON", function(resp) {

                    $.each(resp.data,function(key,value){
                        donneeOrdonne.push(value.NbreLocationParMois)   
                    })

                   StatistiqueLocation(donneeOrdonne);
                
                    $.each(resp.dataFactureAnnee1,function(key,value){
                        donneeAnneePrecedente.push(value.MontantFactureEnCours) 
                    })

                    anneePrecedente = resp.dataFactureAnnee1[0].anneeActuelle
                    anneeActuelle = resp.dataFactureAnnee2[0].anneeActuelle

                    $.each(resp.dataFactureAnnee2,function(key,value){
                        donneeAnneeActuelle.push(value.MontantFactureEnCours)  
                    })

                statistiqueFacture(donneeAnneeActuelle,donneeAnneePrecedente,anneePrecedente,anneeActuelle)
                $.each(resp.datastatsModeReglement,function(key,value){
                        tableauStatModeR.push({
                                            value:value.MontantReglement,
                                            name:""+value.intituleModeReglement+"",            
                        })
                })

               
                 statiqtiqueModeReglement(tableauStatModeR) 
            })


            $(document).on('click','#dateSearchInterval',function(){
                var date = $('.dateInputSearch').val();
                var tableauStatModeR = [];
                if($('.dateInputSearch').val().length==0){
                Notification('Erreur', 'Veuillez renseigner une intervalle de date', 'top-right', 'error')
                    return false;
                }
                var dateDepart = date.slice(0, 10)
                var dateFin = date.slice(13, 23)
                var dateDepartFormater = dateDepart.slice(6, 10) + '-' + dateDepart.slice(3, 5) + '-' +dateDepart.slice(0, 2)
                var dateFinFormater = dateFin.slice(6, 10) + '-' + dateFin.slice(3, 5) + '-' + dateFin.slice(0, 2)
            
                MesrequetesAjax("{{ route('GetAllDashboard.statistiqueparDate') }}", "GET", {DateDepart:dateDepartFormater,DateFin:dateFinFormater}, null, true, "JSON", function(resp) {

                        $('div#loaders').addClass('hiddenElement');
                        $('#BienZone').text(resp.Biens);
                        $('#ProprietaireZone').text(resp.Proprietaire);
                        $('#LocataireZone').text(resp.Locataire);
                        $('#PrestataireZone').text(resp.Prestataire);
                        $('#LocationZone').text(resp.Location);
                        $('#UtilisateurZone').text(resp.Utilisateur);
                        $('#FactureZone').text(resp.Facture[0].NbreFacture);
                        $('#montantFacture').text(formaterNombre(resp.Facture[0].MontantFacture)+' F')
                        $('#FactureRegleZone').text(resp.FactureRegle[0].NbreFacture);
                        $('#montantFactureRegle').text(formaterNombre(resp.FactureRegle[0].MontantFactureRegle)+' F');
                        $('#FactureEchuZone').text(resp.GetFactureEchus[0].NbreFacture);
                        $('#montantFactureEchue').text(formaterNombre(resp.GetFactureEchus[0].MontantFactureEchue)+' F');

                        $('#totalCommissionZone').text(formaterNombre(resp.TotalCommission[0].montantCommission)+' F')
                        $('#totalPartProprietaireZone').text(formaterNombre(resp.TotalPartProprietaire[0].montantPartProprietaire)+' F')
                        $('#totalFacture').text(formaterNombre(resp.TotalFacture[0].MontantFacture)+' F')
                        $('#totalReglemetZone').text(formaterNombre(resp.TotalReglement[0].MontantReglementLigne)+' F')
                        $('#totalVersementZone').text(formaterNombre(resp.TotalVersement[0].MontantVersementLigne)+' F')

                        if(resp.datastatsModeReglement.length == 0){
                            
                            statiqtiqueModeReglement([{value:0,name:'Aucun règlement'}])
                            return false;
                        }

                        $.each(resp.datastatsModeReglement,function(key,value){
                        tableauStatModeR.push({
                                            value:value.MontantReglement,
                                            name:""+value.intituleModeReglement+"",
                                        
                        })
                })
                    statiqtiqueModeReglement(tableauStatModeR)
                }, null,
                function() {
                    $('div#loaders').removeClass('hiddenElement');
                });
                
            })
    })



    function StatistiqueLocation($Ordonnee) {
        const basicLineChartInit = () => {
            const { getColor: e, getData: r } = window.phoenix.utils;
            const t = document.querySelector(".echart-line-chart-examplex");
            // X-axis labels for months
            const o = ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin",
                    "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
            // Y-axis data passed from PHP
            const i = $Ordonnee;

            const a = (e) => `
                <div>
                    <h6 class="fs--1 text-700 mb-0">
                        <span class="fas fa-circle me-1" style='color:${e[0].borderColor}'></span>
                        ${e[0].name} : ${e[0].value}
                    </h6>
                </div>
            `;

            if (t) {
                const n = r(t, "echarts"); // Get data for the chart
                const s = window.echarts.init(t); // Initialize ECharts on the container

                s.setOption({
                    tooltip: {
                        trigger: "axis",
                        padding: [7, 10],
                        backgroundColor: e("gray-100"),
                        borderColor: e("gray-300"),
                        textStyle: {
                            color: e("dark")
                        },
                        borderWidth: 1,
                        transitionDuration: 0,
                        formatter: a, // Apply custom formatter for the tooltip
                        axisPointer: {
                            type: "none"
                        }
                    },
                    xAxis: {
                        type: "category",
                        data: o,
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: e("gray-300")
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: e("gray-400"),
                            formatter: (e) => e.substring(0, 3), // Display only first 3 letters of months
                            margin: 15
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: e("gray-200")
                            }
                        },
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            color: e("gray-400"),
                            margin: 15
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        min: 0 // Minimum value for the Y-axis
                    },
                    series: [{
                        type: "line",
                        data: i, // Use the data passed from the PHP variable
                        itemStyle: {
                            color: e("white"),
                            borderColor: e("primary"),
                            borderWidth: 2
                        },
                        lineStyle: {
                            color: e("primary")
                        },
                        showSymbol: false, // Hide data point symbols
                        symbol: "circle",
                        symbolSize: 10,
                        smooth: false, // Disable line smoothness
                        hoverAnimation: true
                    }],
                    grid: {
                        right: "3%",
                        left: "5%",
                        bottom: "10%",
                        top: "5%"
                    }
                });
            }
        };
        // Initialize the chart when the document is ready
        const { docReady: docReady } = window.phoenix.utils;
        docReady(basicLineChartInit);
    }



    function statistiqueFacture($donnee1,$donnee2,anneePrecedente,anneeActuelle){
        
        var ctx = document.getElementById('myChart').getContext('2d');
        var mois = ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin","Juillet", "Août", "Septembre", "Octobre", "Novembre","Décembre"];
        var labelLimit = mois.map(label=>label.substring(0,3))
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labelLimit,
                datasets: [
                    {
                        label: anneePrecedente,
                        data: $donnee2,
                        backgroundColor: 'rgb(135,237,209)',
                        borderColor: 'rgb(135,237,209)',
                        borderWidth: 1
                    },

                    {
                        label: anneeActuelle,
                        data: $donnee1,
                        backgroundColor: 'rgb(155,185,255)',
                        borderColor: 'rgb(155,185,255)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    },
                    y: {
                        grid: {
                            display:true,
                            borderDash: [15,15]
                        }
                    },
                    x: {
                        grid: {
                            display:false
                        }
                    }
                }
                
            }
        });

    }

    function statiqtiqueModeReglement(donneestat) {
    const pieEdgeAlignChartInit = () => {
        const { getColor: e, getData: t, rgbaColor: r } = window.phoenix.utils;
        
        const i = document.querySelector(".echart-pie-edge-align-chart-examplex");
        const o = donneestat;

        if (i) {
            const r = t(i, "echarts");
            const a = window.echarts.init(i);

            // Replace $.echartSetOption with the standard setOption method
            a.setOption({
                title: [
                    {
                        text: "",
                        left: "center",
                        textStyle: {
                            color: e("gray-600")
                        }
                    },
                    {
                        subtext: '',
                        left: "50%",
                        top: "85%",
                        textAlign: "center",
                        subtextStyle: {
                            color: e("gray-700")
                        }
                    }
                ],
                tooltip: {
                    trigger: "item",
                    padding: [7, 10],
                    backgroundColor: e("gray-100"),
                    borderColor: e("gray-300"),
                    textStyle: {
                        color: e("dark")
                    },
                    borderWidth: 1,
                    transitionDuration: 0,
                    axisPointer: {
                        type: "none"
                    },
                    position(e, ...t) {
                        if (window.innerWidth <= 540) {
                            const r = t[1].offsetHeight;
                            const i = {
                                top: e[1] - r - 20
                            };
                            i[e[0] < t[3].viewSize[0] / 2 ? "left" : "right"] = 5;
                            return i;
                        }
                        return null;
                    }
                },
                series: [
                    {
                        type: "pie",
                        radius: window.innerWidth < 530 ? "45%" : "60%",
                        center: ["50%", "50%"],
                        data: o,
                        label: {
                            position: "outer",
                            alignTo: "edge",
                            margin: 20,
                            color: e("gray-700")
                        },
                        left: "5%",
                        right: "5%",
                        top: 0,
                        bottom: 0
                    }
                ]
            });

            // Responsive behavior for small screens
            const responsiveOptions = {
                xs: {
                    series: [{ radius: "45%" }]
                },
                sm: {
                    series: [{ radius: "60%" }]
                }
            };

            // Apply responsive changes (manually set as needed)
            if (window.innerWidth < 530) {
                a.setOption(responsiveOptions.xs);
            } else {
                a.setOption(responsiveOptions.sm);
            }
        }
    };

    // Initialize the chart when the document is ready
    const { docReady: docReady } = window.phoenix.utils;
    docReady(pieEdgeAlignChartInit);
}

</script>

</body>

</html>