@extends('layout.index')
@section('title', 'Admin Dashboard')
@section('content')

<!-- header dashboard -->
<div class="content-body">
    <div class="row" id="table-bordered">
    <div class="col-12">
        <div class="card">   
            <div class="card-header w-100">
                <div class="content-header-left">
                <div class="row breadcrumbs-top">
                    <div class="col-sm-12">
                        <h2 class="content-header-title float-left mb-0">Dashboard</h2>
                    </div>
                </div>
                </div>
                <div class="d-flex justify-content-end breadcrumb-wrapper">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mr-1">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                        <!-- <li class="breadcrumb-item">Routes</li> -->
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </nav>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<!-- end -->

<div class="row">
        
    <div class="col-sm-12">
        <form method="post" action="{{route('home.admin_dashboard_details') }}" enctype="multipart/form-data">
        @csrf 
        <input type="hidden" name="form_type" value="search_frm">
            <div class="card">
                <div class="card-header d-flex flex-md-row flex-column justify-content-md-between justify-content-start align-items-md-center align-items-start">
                    <h4 class="card-title">Division Wise Present Vehicles</h4>

                    <div class="d-flex align-items-center mt-md-0 mt-1">
                        <input type="text" class="form-control flatpickr-basic flatpickr-input bg-transparent border-1 mx-25"  id="date" name="date" value=""/>
                        <button type="submit" class="btn btn-primary waves-effect"><i class="fa fa-search" aria-hidden="true"></i></button>
                        <a href="{{url('home/admin_clear_search')}}" class="btn btn-outline-primary waves-effect mx-25" ><i data-feather="rotate-ccw" ></i></a> 
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="row" style="align-items: center">
                    
                        <div class="col-sm-6">
                            <div id="column-chart"></div>
                        </div>
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-6 text-center">
                                    <h4 class="m-50">Division-Wise Weight (In Tons)</h4>
                                    <h5>Total Weight : 0</h5>
                                        <div id="donut-chart"></div>
                                </div>
                                <div class="col-sm-6 text-center">
                                    <h4 class="m-50">Division-Wise Fine</h4>
                                    <h5>Total Fine : 0</h5>
                                        <div id="division_wise_fine"></div>
                                </div>
                            </div>
                        
                            <div class="text-center my-25">
                                                            </div>

                        </div>
                    </div>
                </div>   
            </div>
        </div>
        </form>
    </div>
    <div class="row mb-2">
        <div class="col-4">
            <h2 class="content-header-title float-left mb-0">Division wise route coverage percentage</h2>
        </div>
    </div>
    <div class="row justify-content-center">
            </div>
        <!-------------- Table Data ------------------>
       
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src={{ asset('app-assets/vendors/js/charts/apexcharts.min.js')}}></script>

<script>

    $(function() {
    'use strict';

    var flatPicker = $('.flat-picker'),
        isRtl = $('html').attr('data-textdirection') === 'rtl',
        chartColors = {
            column: {
                series1: '#826af9',
                series2: '#d2b0ff',
                bg: '#ffffff'
            },

            donut: {
                // series1: '#ffe700',
                // series2: '#00d4bd',
                // series3: '#826bf8',
                // series4: '#2b9bf4',
                // series5: '#FFA1A1',
                // series6: '#F77E21'
                
            }
        };
   
    // Column Chart
        // --------------------------------------------------------------------
    var columnChartEl = document.querySelector('#column-chart'),
        columnChartConfig = {
            chart: {
                height: 400,
                type: 'bar',
                stacked: false,
                parentHeightOffset: 0,
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    columnWidth: '50%',
                    colors: {
                        // backgroundBarColors: [
                        //     chartColors.column.bg,
                        //     chartColors.column.bg,
                        //     chartColors.column.bg,
                        //     chartColors.column.bg,
                        //     chartColors.column.bg
                        // ],
                        // backgroundBarRadius: 10
                    }
                }
            },
            dataLabels: {
                enabled: false
            },
            legend: {
                                show: false,
                                position: 'bottom',
                horizontalAlign: 'center',
                fontSize: '16px',
            },
            colors: [chartColors.column.series1, chartColors.column.series2],
            stroke: {
                show: true,
                colors: ['transparent']
            },
            grid: {
                xaxis: {
                    lines: {
                        show: true
                    }
                }
            },
            series: [{
                    name: 'Total Vehicle',
                                             data: [0]
                                     },
                {
                    name: 'Present Vehicle',
                                             data: [0]
                                     }
            ],
          
            xaxis: {
                                 categories: ['No Data Found'],
                              
                labels: {
                    style: {
                        fontSize: '14px'
                    }
                }
            },

            fill: {
                opacity: 1
            },
            yaxis: {
                opposite: isRtl,

                labels: {
                    style: {
                        fontSize: '14px'
                    }
                }
            }
        };
    if (typeof columnChartEl !== undefined && columnChartEl !== null) {
        var columnChart = new ApexCharts(columnChartEl, columnChartConfig);
        columnChart.render();
    }

    // Donut Chart
    // --------------------------------------------------------------------
    var donutChartEl = document.querySelector('#donut-chart'),
        donutChartConfig = {
            chart: {
                height: 350,
                type: 'donut'
            },
            legend: {
                show: false,
                position: 'bottom'
            },
                                 labels: [''],
                           
                                 series: [0],
                           
 
            colors: [
                chartColors.donut.series1,
                chartColors.donut.series2,
                chartColors.donut.series3,
                chartColors.donut.series4,
                chartColors.donut.series5,
                chartColors.donut.series6,
               
            ],
            dataLabels: {
                enabled: false,
                formatter: function(val, opt) {
                    return parseInt(val) + '';
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            name: {
                                fontSize: '2rem',
                                fontFamily: 'Montserrat'
                            },
                            value: {
                                fontSize: '1rem',
                                fontFamily: 'Montserrat',
                                formatter: function(val) {
                                   return parseFloat(val) + ' Tons';
                                 }
                            },
                            total: {
                                show: true,
                                fontSize: '1rem',
                                                               label: '',
                                                              formatter: function(w) {
                                                                          return '';
                                                                    }
                            }
                        }
                    }
                }
            },
            responsive: [{
                    breakpoint: 992,
                    options: {
                        chart: {
                            height: 380
                        }
                    }
                },
                {
                    breakpoint: 576,
                    options: {
                        chart: {
                            height: 320
                        },
                        plotOptions: {
                            pie: {
                                donut: {
                                    labels: {
                                        show: true,
                                        name: {
                                            fontSize: '1.5rem'
                                        },
                                        value: {
                                            fontSize: '1.5rem'
                                        },
                                        total: {
                                            fontSize: '1rem'
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        };
    if (typeof donutChartEl !== undefined && donutChartEl !== null) {
        var donutChart = new ApexCharts(donutChartEl, donutChartConfig);
        donutChart.render();
    }

    // Division Wise Fine
    // --------------------------------------------------------------------
    var donutChartEl = document.querySelector('#division_wise_fine'),
        donutChartConfig = {
            chart: {
                height: 350,
                type: 'donut'
            },
            legend: {
                show: false,
                position: 'bottom'
            },
               
                              labels: [''],
                           
                                 series: [0],
                   
            colors: [
                chartColors.donut.series1,
                chartColors.donut.series2,
                chartColors.donut.series3,
                chartColors.donut.series4,
                chartColors.donut.series5,
                chartColors.donut.series6,
               
            ],
            dataLabels: {
                enabled: false,
                formatter: function(val, opt) {
                    return parseInt(val) + '';
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            name: {
                                fontSize: '2rem',
                                fontFamily: 'Montserrat'
                            },
                            value: {
                                fontSize: '1rem',
                                fontFamily: 'Montserrat',
                                formatter: function(val) {
                                   //return ' ₹ ' + parseInt(val);
                                   return ' ₹ ' + new Intl.NumberFormat('en-IN').format(val);
                                 }
                            },
                            total: {
                                show: true,
                                fontSize: '1rem',
                                                               label: '',
                                                              formatter: function(w) {
                                                                          return '';
                                                                    }
                            }
                        }
                    }
                }
            },
            responsive: [{
                    breakpoint: 992,
                    options: {
                        chart: {
                            height: 380
                        }
                    }
                },
                {
                    breakpoint: 576,
                    options: {
                        chart: {
                            height: 320
                        },
                        plotOptions: {
                            pie: {
                                donut: {
                                    labels: {
                                        show: true,
                                        name: {
                                            fontSize: '1.5rem'
                                        },
                                        value: {
                                            fontSize: '1.5rem'
                                        },
                                        total: {
                                            fontSize: '1rem'
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        };
    if (typeof donutChartEl !== undefined && donutChartEl !== null) {
        var donutChart = new ApexCharts(donutChartEl, donutChartConfig);
        donutChart.render();
    }

});
var goalOverviewChartOptions;
$(window).on('load', function () {
  'use strict';
     
})
</script>