@extends('admin.layout.app')
@section('title','Dashboard')
@push('headerscript')
    <link href="{{asset('theme/plugins/morris/morris.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('theme/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet"
          type="text/css">
    <link href="{{asset('theme/plugins/bootstrap-sweetalert/sweet-alert.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('theme/plugins/datatables/responsive.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('theme/plugins/datatables/dataTables.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
@endpush
@push('headerscript')
    <style>
        #morris-donut-example text {
            font-size: 10px !important; /* Change this value to adjust the font size */
        }

        /* If you want to target only the labels or values specifically, you can be more specific */
        #morris-donut-example .morris-donut-label {
            font-size: 10px !important; /* Adjust the font size for the labels */
        }
        @media(max-width:600px){
            #chart-mobile-view{
                width: 100px;
            }
        }
             @media only screen and (min-width: 768px) and (max-width: 1024px) {
                 #chart-mobile-view{
                width: 300px;
            }
}
    </style>
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <div class="row">
                            <div class="col-md-6 col-xs-6">
                                <h4 style="font-weight: bold">Dashboard Sweet </h4>
                            </div>
                            <div class="col-md-6 col-xs-6 text-right">
                                <div class="m-t-10">
                                    <a href="{{route('admin.dashboard2')}}"><b>Go To Summary Dashboard</b> <i
                                            class="mdi mdi-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @can('dashboard')
                        <div class="row">
                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('job-appointment.index')}}">
                                    <div class="card-box widget-box-one">
                                        <i class="mdi mdi-chart-areaspline widget-one-icon"></i>
                                        <div class="wigdet-one-content">
                                            <p class="m-0 text-uppercase font-600 font-secondary text-overflow"
                                               title="Statistics">Job Appointment</p>
                                            <h2>{{$cardData[0]}} <small><i
                                                        class="mdi mdi-arrow-up text-success"></i></small></h2>
                                            <p class="text-muted m-0"><b>This Month:</b> {{$cardData[1]}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div><!-- end col -->

                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('inspection.index')}}">
                                    <div class="card-box widget-box-one">
                                        <i class="mdi mdi-account-convert widget-one-icon"></i>
                                        <div class="wigdet-one-content">
                                            <p class="m-0 text-uppercase font-600 font-secondary text-overflow"
                                               title="User Today">Inspection</p>
                                            <h2>{{$cardData[2]}} <small><i
                                                        class="mdi mdi-arrow-down text-danger"></i></small></h2>
                                            <p class="text-muted m-0"><b>This Month:</b> {{$cardData[3]}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div><!-- end col -->

                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('estimation.index')}}">
                                    <div class="card-box widget-box-one">
                                        <i class="mdi mdi-layers widget-one-icon"></i>
                                        <div class="wigdet-one-content">
                                            <p class="m-0 text-uppercase font-600 font-secondary text-overflow"
                                               title="User This Month">Estimation</p>
                                            <h2>{{$cardData[4]}} <small><i
                                                        class="mdi mdi-arrow-up text-success"></i></small></h2>
                                            <p class="text-muted m-0"><b>This Month:</b> {{$cardData[5]}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div><!-- end col -->

                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('job-card.index')}}">
                                    <div class="card-box widget-box-one">
                                        <i class="mdi mdi-av-timer widget-one-icon"></i>
                                        <div class="wigdet-one-content">
                                            <p class="m-0 text-uppercase font-600 font-secondary text-overflow"
                                               title="Request Per Minute">Job Card</p>
                                            <h2>{{$cardData[6]}} <small><i
                                                        class="mdi mdi-arrow-down text-danger"></i></small></h2>
                                            <p class="text-muted m-0"><b>This Month:</b> {{$cardData[7]}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div><!-- end col -->

                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('billing-job-card.index')}}">
                                    <div class="card-box widget-box-one">
                                        <i class="mdi mdi-account-multiple widget-one-icon"></i>
                                        <div class="wigdet-one-content">
                                            <p class="m-0 text-uppercase font-600 font-secondary text-overflow"
                                               title="Total Users">WorkShop Invoices</p>
                                            <h2>{{$cardData[8]}} <small><i
                                                        class="mdi mdi-arrow-down text-danger"></i></small></h2>
                                            <p class="text-muted m-0"><b>This Month:</b> {{$cardData[9]}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div><!-- end col -->

                            <div class="col-lg-2 col-md-4 col-sm-6">
                                <a href="{{route('purchase-invoice.index')}}">
                                    <div class="card-box widget-box-one">
                                        <i class="mdi mdi-download widget-one-icon"></i>
                                        <div class="wigdet-one-content">
                                            <p class="m-0 text-uppercase font-600 font-secondary text-overflow"
                                               title="New Downloads">Purchases</p>
                                            <h2>{{$cardData[10]}} <small><i
                                                        class="mdi mdi-arrow-up text-success"></i></small></h2>
                                            <p class="text-muted m-0"><b>This Month:</b> {{$cardData[11]}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div><!-- end col -->

                        </div>

                        <div class="row">
                            <div class="col-md-8 col-12 mr-auto ml-auto">
                                <div class="demo-box bg-white">
                                    <h4 class="header-title m-t-0">Aging of Paybles And Receivables </h4>
                                    <p class="text-muted font-13 m-b-30">
                                    </p>

                                    <div id="ordered-bars-chart" style="height: 520px;" id="chart-mobile-view"></div>
                                </div>
                            </div>
                            <div class="col-md-4 col-12">
                                <div class="card-box">
                                    <h4 class="header-title m-t-0">Financial Status</h4>
                                    <p></p>
                                    <div class="widget-chart text-center">
                                        <div id="morris-donut-example" style="height: 245px;"></div>
                                        <ul class="list-inline chart-detail-list m-b-0">
                                            <li>
                                                <h5 class="text-danger"><i class="fa fa-circle m-r-5"></i>Expenses
                                                </h5>
                                            </li>
                                            <li>
                                                <h5 class="text-success"><i class="fa fa-circle m-r-5"></i>Profit
                                                </h5>
                                            </li>
                                            <li>
                                                <h5 class="text-info"><i class="fa fa-circle m-r-5"></i>Income</h5>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row m-t-20">
                            <div class="col-lg-6">
                                <div class="card-box">
                                    <h4 class="header-title m-t-0 ">Recent Job Cards</h4>

                                    <div class="table-responsive">
                                        <table class="table table table-hover m-0" id="datatables">
                                            <thead>
                                            <tr>
                                                <th>JC No.</th>
                                                <th>Name</th>
                                                <th>Plate No.</th>
                                                {{--                                                <th>Emirates</th>--}}
                                                <th>Date</th>
                                                <th>Status</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>

                                    </div> <!-- table-responsive -->
                                </div> <!-- end card -->
                            </div>
                            <!-- end col -->

                            <div class="col-lg-6">
                                <div class="card-box">
                                    <h4 class="header-title m-t-0">Recent Inspections</h4>

                                    <div class="table-responsive">
                                        <table class="table table table-hover m-0" id="datatables2">
                                            <thead>
                                            <tr>
                                                <th>Ins. No.</th>
                                                <th>Name</th>
                                                <th>Plate No.</th>
                                                {{--                                                <th>Emirates</th>--}}
                                                <th>Date</th>
                                                <th>Status</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>

                                    </div> <!-- table-responsive -->
                                </div> <!-- end card -->
                            </div>
                            <!-- end col -->
                        </div>
                    @endcan
                </div>
            </div>
        </div>
    </div>
@endsection
@push('footerscript')
    <script src="{{asset('theme/plugins/moment/moment.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/dataTables.bootstrap.js')}}"></script>
    <script src="{{asset('theme/plugins/datatables/responsive.bootstrap.min.js')}}"></script>
    <script src="{{asset('theme/plugins/morris/morris.min.js')}}"></script>
    <script src="{{asset('theme/plugins/raphael/raphael-min.js')}}"></script>
    <script src="{{asset('theme/plugins/flot-chart/jquery.flot.min.js')}}"></script>
    <script src="{{asset('theme/plugins/flot-chart/jquery.flot.stack.js')}}"></script>
    <script>
        $(function () {
            $('#datatables').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                paging: false,
                info: false,
                filter: false,
                ajax: {
                    url: '{{route('admin.getJobCardData') }}',
                },
                columns: [
                    {data: 'job_card_number', name: 'job_card_number'},
                    {data: 'c_name', name: 'c_name'},
                    {data: 'plate_number', name: 'plate_number'},
                    // {data: 'emirates', name: 'emirates'},
                    {data: 'job_card_date', name: 'job_card_date'},
                    {data: 'group_name', name: 'group_name'},
                ]
            });
        });

        $(function () {
            $('#datatables2').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                paging: false,
                info: false,
                filter: false,
                ajax: {
                    url: '{{route('admin.getInspectionData') }}',
                },
                columns: [
                    {data: 'inspection_number', name: 'inspection_number'},
                    {data: 'name', name: 'customers.name'},
                    {data: 'plate_number', name: 'customer_vehicle_details.plate_number'},
                    // {data: 'emirates', name: 'customer_vehicle_details.emirates'},
                    {data: 'inspection_date', name: 'inspection_date'},
                    {data: 'status', name: 'status'},
                ]
            });
        });
    </script>
    <script>
        !function ($) {
            "use strict";

            var Dashboard1 = function () {
                this.$realData = []
            };
            Dashboard1.prototype.createDonutChart = function (element, data, colors) {
                Morris.Donut({
                    element: element,
                    data: data,
                    resize: true, //defaulted to true
                    colors: colors
                });
            },
                Dashboard1.prototype.init = function () {
                    var $donutData = [
                        {label: "Income", value: {{$income}}},
                        {label: "Expenses", value: {{$expenses}}},
                        {label: "Profit", value: {{$profit}}}
                    ];
                    this.createDonutChart('morris-donut-example', $donutData, ['#3ac9d6', '#f5707a', "#4bd396"]);
                }
            //init
            $.Dashboard1 = new Dashboard1, $.Dashboard1.Constructor = Dashboard1
        }(window.jQuery),
            function ($) {
                "use strict";
                $.Dashboard1.init();
            }(window.jQuery);
    </script>
    <script>
        !function ($) {
            "use strict";
            var FlotChart = function () {
                this.$body = $("body")
                this.$realData = []
            };
            //creates Combine Chart
            FlotChart.prototype.createStackBarGraph = function (selector, ticks, colors, data) {
                var options = {
                    bars: {
                        show: true,
                        barWidth: 0.2,
                        fill: 1
                    },
                    grid: {
                        show: true,
                        aboveData: false,
                        labelMargin: 5,
                        axisMargin: 0,
                        borderWidth: 1,
                        minBorderMargin: 5,
                        clickable: true,
                        hoverable: true,
                        autoHighlight: false,
                        mouseActiveRadius: 20,
                        borderColor: '#f5f5f5'
                    },
                    series: {
                        stack: 0
                    },
                    legend: {
                        position: "ne",
                        margin: [0, -24],
                        noColumns: 0,
                        labelBoxBorderColor: null,
                        labelFormatter: function (label, series) {
                            // just add some space to labes
                            return '' + label + '&nbsp;&nbsp;';
                        },
                        width: 30,
                        height: 2
                    },
                    yaxis: ticks.y,
                    xaxis: {
                        axisLabel: "Age Intervals",
                        tickColor: '#f5f5f5',
                        font: {
                            color: '#bdbdbd'
                        },
                        ticks: ticks.x
                    },
                    colors: colors,
                    tooltip: true, //activate tooltip
                    tooltipOpts: {
                        content: "%s : %y.0",
                        shifts: {
                            x: -30,
                            y: -50
                        }
                    }
                };
                $.plot($(selector), data, options);
            },
                FlotChart.prototype.init = function () {
                    //bar chart = stacked
                    var stack_ticks = {
                        y: {
                            axisLabel: "Amount (ADE)",
                            tickColor: '#f5f5f5',
                            font: {
                                color: '#bdbdbd'
                            }
                        },
                        x: [
                            [4, "Current"],
                            [3, "0-30 Days"],
                            [2, "30-60 Days"],
                            [1, "60-90 Days"],
                            [0, "90+ Days"],
                        ]
                    };

                    //random data
                    var receivables = [
                        [0, {{\App\Helper\CommonClass::receivables(1)}}],
                        [1, {{\App\Helper\CommonClass::receivables(2)}}],
                        [2, {{\App\Helper\CommonClass::receivables(3)}}],
                        [3, {{\App\Helper\CommonClass::receivables(4)}}],
                        [4, {{\App\Helper\CommonClass::receivables(5)}}],
                    ];
                    var payables = [
                        [0, {{\App\Helper\CommonClass::payables(1)}}],
                        [1, {{\App\Helper\CommonClass::payables(2)}}],
                        [2, {{\App\Helper\CommonClass::payables(3)}}],
                        [3, {{\App\Helper\CommonClass::payables(4)}}],
                        [4, {{\App\Helper\CommonClass::payables(5)}}]
                    ];

                    var ds = [
                        {
                            label: "Receivables",
                            data: receivables,
                            color: "#26a69a"
                        },
                        {
                            label: "Payables",
                            data: payables,
                            color: "#f5707a"
                        }
                    ];
                    this.createStackBarGraph("#ordered-bars-chart", stack_ticks, ['#26a69a', '#f5707a'], ds);
                }
            $.FlotChart = new FlotChart, $.FlotChart.Constructor = FlotChart
        }(window.jQuery),
            function ($) {
                "use strict";
                $.FlotChart.init()
            }(window.jQuery);
    </script>
@endpush