@extends('app')


<!--**********************************
   lien css ou js -- header
***********************************-->

@section('header')
{{-- <link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/images/favicon.png')}}"> --}}
{{-- <link rel="stylesheet" href="{{asset('assets/vendor/chartist/css/chartist.min.css')}}"> --}}
<link href="{{asset('assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css')}}" rel="stylesheet">
<link href="{{asset('assets/css/style.css')}}" rel="stylesheet">
@endsection

<!--**********************************
   fin lien css ou js -- header
***********************************-->




<!--**********************************
    body
***********************************-->
@section('content')
    
<div class="container-fluid">
    <!-- Add Project -->
    <div class="modal fade" id="addProjectSidebar">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create Project</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label class="text-black font-w500">Project Name</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="text-black font-w500">Deadline</label>
                            <input type="date" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="text-black font-w500">Client Name</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary">CREATE</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row page-titles mx-0">
        <div class="col-sm-6">
            <div class="welcome-text">
                <h4>Hi, welcome back!</h4>
                <p class="mb-0">STATS</p>
            </div>
        </div>
        {{-- <div class="col-sm-6 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Charts</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">ChartJS</a></li>
            </ol>
        </div> --}}
    </div>
    <!-- row -->

    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-xl-6 col-lg-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">LES STATISTIQUES DES ACCIDENTS </h4>
                        </div>
                        <div class="card-body">
                            <canvas id="barChart_1"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">LES STATISTIQUES DES INCIDENTS </h4>
                        </div>
                        <div class="card-body">
                            <canvas id="barChart_2"></canvas>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-xl-12 col-lg-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Comparaison AAA, ASA et Incidents</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="barChart_3"></canvas>
                        </div>
                    </div>
                </div> --}}

                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Comparaison AAA, ASA et Incidents</h4>
                        </div>
                        <div class="card-body">
                            <div class="profile-statistics">
                                <div class="text-center">
                                    <div class="row">
                                        <div class="col">
                                            <h3 class="m-b-0">150</h3><span> AAA</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">140</h3><span>ASA</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">45</h3><span>Incidents</span>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Repartition des accidents par siége de la léson</h4>
                        </div>
                        <div class="card-body">
                            <div class="profile-statistics">
                                <div class="text-center"> 
                                    
                                    <div class="row">
                                        <div class="col">
                                            <h3 class="m-b-0">150</h3><span>TÊTE</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">150</h3><span>TORSE</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">150</h3><span>BRAS</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">140</h3><span>JAMBES</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">45</h3><span>MAINS</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">140</h3><span>PIEDS</span>
                                        </div>
                                        <div class="col">
                                            <h3 class="m-b-0">45</h3><span>DOS</span>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <div class="col-xl-6 col-lg-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Basic Line Chart</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="lineChart_1"></canvas>
                        </div>
                    </div>
                    </div>
                    <div class="col-xl-6 col-lg-12 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Gradient Line Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="lineChart_2"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Dual Line Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="lineChart_3"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Basic Area Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="areaChart_1"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Gradinet Area Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="areaChart_2"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Dual Area Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="areaChart_3"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Radar Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="radar_chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Pie Chart</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="pie_chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Doughnut Chart</h4>
                            </div>
                            <div class="card-body">
                                <div class="chart-point">
                                    <div class="check-point-area">
                                        <canvas id="doughnut_chart"></canvas>
                                    </div>
                                    <ul class="chart-point-list">
                                        <li><i class="fa fa-circle text-primary mr-1"></i> 40% Tickets</li>
                                        <li><i class="fa fa-circle text-success mr-1"></i> 35% Events</li>
                                        <li><i class="fa fa-circle text-warning mr-1"></i> 25% Other</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Polar Chart</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="polar_chart"></canvas>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
</div>
@endsection
<!--**********************************
    fin body
***********************************-->






<!--**********************************
    lien js -- footer
***********************************-->
@section('footer')
     <!-- Required vendors -->
     <script src="{{asset('assets/vendor/global/global.min.js')}}"></script>
     <script src="{{asset('assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js')}}"></script>
     <script src="{{asset('assets/vendor/chart.js/Chart.bundle.min.js')}}"></script>
     
     <!-- Chart piety plugin files -->
     <script src="{{asset('assets/vendor/chart.js/Chart.bundle.min.js')}}"></script>
     
     <!-- Apex Chart -->
     <script src="{{asset('assets/js/plugins-init/chartjs-init.js')}}"></script>
     
     
     <script src="{{asset('assets/vendor/owl-carousel/owl.carousel.js')}}"></script>
     <script src="{{asset('assets/js/custom.min.js')}}"></script>
     <script src="{{asset('assets/js/deznav-init.js')}}"></script>
@endsection

<!--**********************************
    fin lien  -- footer
***********************************-->