@extends('admin')

@section('title')
NotaireApp - Tableau de bord
@endsection


@section('menu-title')
    <!-- BEGIN: Breadcrumb -->
    <div class="-intro-x breadcrumb mr-auto hidden sm:flex"> <a href="" class="">NotairesApp</a> <i data-feather="chevron-right" class="breadcrumb__icon"></i> <a href="#/" class="breadcrumb--active">Tableau de bord</a> </div>
    <!-- END: Breadcrumb -->
@endsection

@section('content')

    <!-- BEGIN: Top Bar -->
    
    <!-- END: Top Bar -->
    <div class="grid grid-cols-12 gap-6 ">
        <div class="col-span-12 xxl:col-span-9 grid grid-cols-12 gap-6">
            <!-- BEGIN: General Report -->
            <div class="col-span-12 mt-8">
                <div class="intro-y flex items-center h-10">
                    <h2 class="text-lg font-medium truncate mr-5">
                    Rapport général
                    </h2>
                    <a href="{{ url('/admin') }}" class="ml-auto flex text-theme-1 dark:text-theme-10"> <i data-feather="refresh-ccw" class="w-4 h-4 mr-3"></i> Recharger les données </a>
                </div>
                <div class="grid grid-cols-12 gap-6 mt-5">
                    <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y dash-rapp" data-link='{{route('Client.list')}}'>
                        <div class="report-box zoom-in ">
                            <div class="box p-5">
                                <div class="flex">
                                    <span class="animate-bounce">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user report-box__icon text-theme-9"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                    </span>
                                    <div class="ml-auto">
                                        <div class="report-box__indicator bg-theme-9  cursor-pointer " > {{ $clients }} </div>
                                    </div>
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6">Clients</div>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y dash-rapp" data-link='{{route('admin.list.propriete')}}'>
                        <div class="report-box zoom-in">
                            <div class="box p-5">
                                <div class="flex">
                                    <span class="animate-bounce2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user report-box__icon text-theme-3"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
                                    </span>
                                    <div class="ml-auto">
                                        <div class="report-box__indicator bg-blue-500  cursor-pointer text-center" > {{$proprietes }} </div>
                                    </div>
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6">Affaires</div>
                            </div>
                        </div>
                    </div> --}}

                    <div class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y dash-rapp" data-link='{{route('admin.dossier')}}'>
                        <div class="report-box zoom-in ">
                            <div class="box p-5 ">
                                <div class="flex">
                                    <span class="animate-bounce">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user report-box__icon text-theme-12"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
                                    </span>
                                    <div class="ml-auto">
                                        <div class="report-box__indicator bg-yellow-500  cursor-pointer">{{ $dossiers }} </div>
                                    </div>
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6">Dossiers</div>
                            </div>
                        </div>
                    </div>

                    <div style="" class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y dash-rapp" data-link='{{route('admin.allcharges')}}'>
                        <div class="report-box zoom-in">
                            <div class="box p-5">
                                <div class="flex">
                                    <span class="animate-bounce2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user report-box__icon text-theme-3"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                                    </span>
                                    <div class="ml-auto">
                                        <div class="report-box__indicator bg-gray-600  cursor-pointer " > {{ $charges }} </div>
                                    </div>
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6 ">Dépenses</div>
                            </div>
                        </div>
                    </div>

                    <div style="" class="col-span-12 sm:col-span-6 xl:col-span-3 intro-y dash-rapp" data-link='{{route('admin.reg.index')}}'>
                        <div class="report-box zoom-in">
                            <div class="box p-5">
                                <div class="flex">
                                    <span class="animate-bounce">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user report-box__icon text-theme-3"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
                                    </span>
                                    <div class="ml-auto">
                                        <div class="report-box__indicator bg-theme-3 cursor-pointer " > {{ $vercement }} </div>
                                    </div>
                                </div>
                                <div class="text-3xl font-bold leading-8 mt-6 "> Versements</div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!-- END: General Report -->

        </div>
    </div>
    
    
    
    <div class="mt-5 grid lg:grid-cols-2 md:justify-items-center md:grid-cols-1 sm:grid-cols-1 gap-2">
        
        <div class="report-box w-full" >
            
            <div class="box zoom-in shadow-md p-4">
                <div class="flex flex-row w-full">
                    <div class="p-1">
                        <h2 class="text-lg font-medium truncate mr-5">
                            Statistiques règlements
                        </h2> 
                    </div>
                    <div class="flex items-center sm:ml-auto tooltip " title="Filtrage par date">
                        <div class="text-center ">
                            <div class="dropdown inline-block" data-placement="bottom-start"> 
                                <span class="dropdown-toggle p-2 rounded-lg hover:bg-gray-400 flex items-center inline-block text-gray-600">  
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical w-4 h-4"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg> 
                                </span>
                                <div class="dropdown-box">
                                    <div class="dropdown-box__content box p-5">
                                        <form action="" id="form_data_1">
                                            <div>
                                                <div class="text-xs">Date de début</div> 
                                                <input type="date" value="{{date('Y-m-d')}}" name="date_reg_1" class="input w-full border mt-2 flex-1"  />
                                            </div>
                                            <div class="mt-3">
                                                <div class="text-xs">Date de début</div> 
                                                <input type="date" value="{{date('Y-m-d')}}" name="date_reg_2" class="input w-full border mt-2 flex-1"  />
                                            </div>
                                            <div class="flex items-center mt-3"> 
                                                <span data-dismiss="dropdown" class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto">Annuler</span> 
                                                <button type="submit" class="button w-32 justify-center block bg-theme-1 text-white ml-2 get_regs">Rafraîchir</button> 
                                            </div>    
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                
                <div class="myChart2_block">
                    <canvas id="myChart2"></canvas>    
                </div>
                
            </div>
    
        </div>
        
        <div class="report-box w-full" >
            
            <div class="box zoom-in shadow-md p-4">
                <div class="flex flex-row w-full">
                    <div class="p-1">
                        <h2 class="text-lg font-medium truncate mr-5">
                            Nombre dossiers par étape
                        </h2> 
                    </div>
                    <div class="flex items-center sm:ml-auto tooltip " title="Filtrage par date">
                        <div class="text-center ">
                            <div class="dropdown inline-block" data-placement="bottom-start"> 
                                <span class="dropdown-toggle p-2 rounded-lg hover:bg-gray-400 flex items-center inline-block text-gray-600">  
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical w-4 h-4"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg> 
                                </span>
                                <div class="dropdown-box">
                                    <div class="dropdown-box__content box p-5">
                                        <form action="" id="form_data_2">
                                            <div>
                                                <div class="text-xs">Date de début</div> 
                                                <input type="date" value="{{date('Y-m-d')}}" name="date_etap_1" class="input w-full border mt-2 flex-1"  />
                                            </div>
                                            <div class="mt-3">
                                                <div class="text-xs">Date de début</div> 
                                                <input type="date" value="{{date('Y-m-d')}}" name="date_etap_2" class="input w-full border mt-2 flex-1"  />
                                            </div>
                                            <div class="flex items-center mt-3"> 
                                                <span data-dismiss="dropdown" class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto">Annuler</span> 
                                                <button type="submit" class="button w-32 justify-center block bg-theme-1 text-white ml-2 get_etap">Rafraîchir</button> 
                                            </div>    
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="myChart_block">
                    <canvas id="myChart"></canvas>
                </div>
                
            </div>
    
        </div>
        
    </div>

    <div class="mt-5 ">
        <div class="box zoom-in shadow-md p-4">
            
            <div class="flex flex-row w-full">
                <div class="p-1">
                    <h2 class="text-lg font-medium truncate mr-5">
                        Nombre dossiers par natures
                    </h2>
                </div>
                <div class="flex items-center sm:ml-auto tooltip " title="Filtrage par date">
                    <div class="text-center ">
                        <div class="dropdown inline-block" data-placement="bottom-start"> 
                            <span class="dropdown-toggle p-2 rounded-lg hover:bg-gray-400 flex items-center inline-block text-gray-600">  
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical w-4 h-4"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg> 
                            </span>
                            <div class="dropdown-box">
                                <div class="dropdown-box__content box p-5">
                                    <form action="" id="form_data_3">
                                        <div>
                                            <div class="text-xs">Date de début</div> 
                                            <input type="date" value="{{date('Y-m-d')}}" name="date_dos_nature_1" class="input w-full border mt-2 flex-1"  />
                                        </div>
                                        <div class="mt-3">
                                            <div class="text-xs">Date de début</div> 
                                            <input type="date" value="{{date('Y-m-d')}}" name="date_dos_nature_2" class="input w-full border mt-2 flex-1"  />
                                        </div>
                                        <div class="flex items-center mt-3"> 
                                            <span data-dismiss="dropdown" class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto">Annuler</span> 
                                            <button type="submit" class="button w-32 justify-center block bg-theme-1 text-white ml-2 get_dos_nature">Rafraîchir</button> 
                                        </div>    
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="myChart3_block">
                <canvas id="myChart3"></canvas>
            </div>
            
        </div>
    </div>
    
    <div class="mt-5 ">
        <div class="box zoom-in shadow-md p-4">
            <div class="flex flex-row w-full">
                <div class="p-1">
                    <h2 class="text-lg font-medium truncate mr-5">
                        Statistiques Dépenses
                    </h2>
                </div>
                <div class="flex items-center sm:ml-auto tooltip " title="Filtrage par date">
                    <div class="text-center ">
                        <div class="dropdown inline-block" data-placement="bottom-start"> 
                            <span class="dropdown-toggle p-2 rounded-lg hover:bg-gray-400 flex items-center inline-block text-gray-600">  
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical w-4 h-4"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg> 
                            </span>
                            <div class="dropdown-box">
                                <div class="dropdown-box__content box p-5">
                                    <form action="" id="form_data_4">
                                        <div>
                                            <div class="text-xs">Date de début</div> 
                                            <input type="date" value="{{date('Y-m-d')}}" name="date_stat_dep_1" class="input w-full border mt-2 flex-1"  />
                                        </div>
                                        <div class="mt-3">
                                            <div class="text-xs">Date de début</div> 
                                            <input type="date" value="{{date('Y-m-d')}}" name="date_stat_dep_2" class="input w-full border mt-2 flex-1"  />
                                        </div>
                                        <div class="flex items-center mt-3"> 
                                            <span data-dismiss="dropdown" class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto">Annuler</span> 
                                            <button type="submit" class="button w-32 justify-center block bg-theme-1 text-white ml-2 get_stat_dep">Rafraîchir</button> 
                                        </div>    
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="myChart4_block">
                <canvas id="myChart4"></canvas>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $("#bord").attr('class','side-menu side-menu--active');
            $("#client").attr('class','side-menu side-menu');
            $('#propr').attr('class','side-menu side-menu');
            $('body').on('click','.dash-rapp',function(){
                location.replace($(this).data('link'));
            }); 
        });
    </script>
@endsection
@section('script')
<script src="https://cdnjs.com/libraries/Chart.js"></script>
{{-- data --}}
<script >
var ctx = document.getElementById('myChart');
var ctx2 = document.getElementById('myChart2');
var ctx3 = document.getElementById('myChart3').getContext('2d');
var ctx4 = document.getElementById('myChart4').getContext('2d');

var labs= [];
var datas=[];
var colors=[];

var labs2= [];
var datas2=[];
var colors2=[];

var labs3= [];
var datas3=[];

var labs4= [];
var datas4=[];

function isString(v){
    return ((typeof  v)=='string')? true : false;
}

function generateColors(G,A,B,C,D,F){
     
    g1=(isString(G)==true && G != 'f')? String.fromCharCode(G.charCodeAt(0) + 1) : G;
    g1=(isString(g1)==false && g1 < 9)? g1=g1+1 : 1; 
    g1=(isString(g1)==false && g1 == 9)? 'a' :Math.floor(Math.random() * 9);
    
    a1=(isString(A)==true && A != 'f')? String.fromCharCode(A.charCodeAt(0) + 2) : A;
    a1=(isString(A)==false && a1 < 9)? a1=a1+1 : 9;
    a1=(isString(A)==false && a1 == 9)? 'a' : Math.floor(Math.random() * 9);

    b1=(isString(B)==true && B != 'f')? String.fromCharCode(B.charCodeAt(0) + 1) : Math.floor(Math.random() * 9);
    b1=(isString(B)==false && b1 < 9)? b1=b1+1 : 9;
    b1=(isString(B)==false && b1 == 9)? 'a' : Math.floor(Math.random() * 9);

    c1=(isString(C)==true && C!='f')? String.fromCharCode(C.charCodeAt(0) + 2) : C;
    c1=(isString(C)==false && c1 < 9)? c1=c1+1 : 9;
    c1=(isString(C)==false && c1==9)? 'a' :Math.floor(Math.random() * 9);

    d1=(isString(D)==true && D != 'f')? String.fromCharCode(D.charCodeAt(0) + 1) : 'e';
    d1=(isString(D)==false && d1 < 9)? d1=d1+1: 9;
    d1=(isString(D)==false && d1 == 9)? 'a' : Math.floor(Math.random() * 9)

    f1=(isString(F)==true && F != 'f')? String.fromCharCode(F.charCodeAt(0) + 1) : Math.floor(Math.random() * 9);
    f1=(isString(F)==false && f1 < 9)? f1=f1+1 :9;
    f1=(isString(F)==false && f1 == 9)? 'a' : Math.floor(Math.random() * 9);
    
    return '#'+g1+a1+b1+c1+d1+f1;

}

var a=0,b=0,c=0,d=0,g=0,f=0;

var e=Math.floor(Math.random() * 5),r=0,k=0,h=0,i=0,j=0;

for(t1=0;t1<`{{count($chart)}}`;t1++){
    a=t1;
    b=t1;
    c=t1+Math.floor(Math.random() * 5);
    d=t1+1;
    g=t1+1;
    f=f+Math.floor(Math.random() * 5);
    
    colors.push(generateColors(a,b,c,d,g,f));
}

`@foreach($chart as $item)`
    labs.push(`{{$item->nom}}`);
    datas.push(`{{$item->total}}`);
`@endforeach`;

for(t2=0;t2<`{{count($regchart)}}`;t2++){
   
    e=e+1;
    r=r+1;
    k=k+Math.floor(Math.random() * 5);
    h=h+1;
    i=i+Math.floor(Math.random() * 5);
    j=j+Math.floor(Math.random() * 5);
    colors2.push(generateColors(e,r,k,h,i,j));
    
}

`@foreach($regchart as $item2)`
    labs2.push(`{{$item2['desc_compt']}} (Dhs)`);
    datas2.push(`{{$item2['total']}}`);
`@endforeach`;

`@foreach($chart3 as $item3)`
    labs3.push(`{{$item3['nature_doperation']}}`.replace(`&#039;`,`'`));
    datas3.push(`{{$item3['total']}}`);
`@endforeach`;

`@foreach($chart4 as $item4)`
    labs4.push(`montant totale des dépenses dans :{{$item4['year']}}`);
    datas4.push(`{{$item4['total']}}`);
`@endforeach`;

// 1
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labs,
        datasets: [{
            label: '# of Votes',
            data: datas,
            backgroundColor: colors,
            borderColor: colors,
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
            },
            title: {
                display: true,
                text: 'Chart.js Pie Chart'
            }
        }
    },
});
// 2
var myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: labs2,
        datasets: [{
            label: '# of Votes',
            data: datas2,
            backgroundColor: colors2,
            borderColor: colors,
            borderWidth: 0
        }]
    },
    options: {
    responsive: true,
    plugins: {
      locale:'ma-MA',
      legend: {
        display:false,
        position: 'right',
      },
      title: {
        text: 'Chart.js Pie Chart'
      },
 
    },
    
   
  },
});
// 3
var myChart3 = new Chart(ctx3, {
    type: 'bar',
    data: {
        labels: labs3,
        datasets: [{
            label: 'Nombre dossiers par natures',
            data: datas3,
            backgroundColor:'rgba(75, 192, 192, 1)', 
            borderColor: 'rgba(255, 99, 132, 0.2)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            },
            xAxes: [{
                ticks: {
                    display: false,
                    // labelString: 'probability'
                }
            }]
        }
        
    }
});
// 4
var myChart4 = new Chart(ctx4, {
    type: 'bar',
    data: {
        labels: labs4,
        datasets: [{
            label: 'montant totale des dépenses par année en (Dhs)',
            data: datas4,
            backgroundColor:'rgba(75, 192, 192, 1)', 
            borderColor: 'rgba(255, 99, 132, 0.2)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            },
            // xAxes: [{
            //     ticks: {
            //         display: false,
            //         // labelString: 'probability'
            //     }
            // }]
        }
        
    }
});
</script>

{{-- chart --}}
<script>
    $(document).ready(function(){
        $("body").on('click','.get_regs',()=>{
            event.preventDefault();
            var form_data = new FormData(document.getElementById('form_data_1'));
            $.ajax({
                url: `{{route('get_regs_by_rang')}}`,
                dataType:'json',
                type: 'post',
                data : form_data,
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    console.log(data);
                    $('.myChart2_block').html(data);
                },
                error:function(error){
                    console.log(error);
                },
            });
        });
        $("body").on('click','.get_etap',()=>{
            event.preventDefault();
            var form_data = new FormData(document.getElementById('form_data_2'));
            $.ajax({
                url: `{{route('get_regs_by_rang')}}`,
                dataType:'json',
                type: 'post',
                data : form_data,
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    console.log(data);
                    $('.myChart_block').html(data);
                },
                error:function(error){
                    console.log(error);
                },
            });
        });
        $('body').on('click','.get_dos_nature',()=>{
            event.preventDefault();
            var form_data = new FormData(document.getElementById('form_data_3'));
            $.ajax({
                url: `{{route('get_regs_by_rang')}}`,
                dataType:'json',
                type: 'post',
                data : form_data,
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    console.log(data);
                    $('.myChart3_block').html(data);
                },
                error:function(error){
                    console.log(error);
                },
            });
        });
        $('body').on('click','.get_stat_dep',()=>{
            event.preventDefault();
            var form_data = new FormData(document.getElementById('form_data_4'));
            $.ajax({
                url: `{{route('get_regs_by_rang')}}`,
                dataType:'json',
                type: 'post',
                data : form_data,
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    console.log(data);
                    $('.myChart4_block').html(data);
                },
                error:function(error){
                    console.log(error);
                },
            });
        });
    });
   
</script>
{{--  --}}
@endsection