@extends('layouts.view')
@section('links')
    <link href="{{ asset('plugins/jvectormap/jquery-jvectormap-2.0.2.css') }}" rel="stylesheet">
    <style>

        .ct-chart .ct-label {
            color: #333 !important;
            font-size: 10px !important;
        }
        .ct-chart {
            height: 350px !important;
            font-size: 10px !important;
        }
        .ct-series-a .ct-area, .ct-series-a .ct-slice-pie{
            fill: #506ee4 !important;
        }
        .ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
            fill: #4d79f6 !important;
        }
        .ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
            fill: #4bdbec !important;
        }
        .ct-series-d .ct-area, .ct-series-d .ct-slice-pie {
            fill: #ccd8fc !important;
        }
        .ct-series-e .ct-area, .ct-series-e .ct-slice-pie{
            fill: #248efa !important;
        }
        .ct-series-f .ct-area, .ct-series-f .ct-slice-pie {
            fill: #bad0ef !important;
        }
        .ct-series-g .ct-area, .ct-series-g .ct-slice-pie {
            fill: #3782e6 !important;
        }
        .ct-series-h .ct-area, .ct-series-h .ct-slice-pie {
            fill: #8399b7 !important;
        }
        .ct-series-i .ct-area, .ct-series-i .ct-slice-pie {
            fill: #7fa2d2 !important;
        }
        .ct-series-j .ct-area, .ct-series-j .ct-slice-pie {
            fill: #d5d9de !important;
        }
        .ct-series-k .ct-area, .ct-series-k .ct-slice-pie {
            fill: #086cf1 !important;
        }
        .ct-series-l .ct-area, .ct-series-l .ct-slice-pie {
            fill: #093a7b !important;
        }
        .ct-series-m .ct-area, .ct-series-m .ct-slice-pie {
            fill: #eff1fe !important;
        }
    </style>
@endsection
@section('content')

    <div class="container-fluid">
        <!-- Page-Title -->
                <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <div class="float-right">
                        <form class="form-horizontal row-fluid" action="{{ route('execute_query') }}" method="post" enctype="multipart/form-data">


                            <select class="form-control" name="rig_name" id="rig_name">
                                <option value="All Rigs">All Rigs</option>
                                                            </select>
                        </form>
                    </div>
                    <h4 class="page-title"></h4>
                </div><!--end page-title-box-->
            </div><!--end col-->
        </div>
        <!-- end page title end breadcrumb -->



        <div class="row">

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">Footage Drilling - Bit Companies </h4>
                        <hr class="hr-dashed">
                        <div id="loader44" style='text-align:center;'> <img src="{{ asset('assets/images/unnamed-2.gif') }}"></div>
                        <div id="animating-donut" class="ct-chart ct-golden-section drop-shadow"></div>
                    </div><!--end card-body-->
                </div><!--end-card-->
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0 header-title">Footage Drilling - Mud Motor Companies</h4>
                        <hr class="hr-dashed">
                        <div id="loader45" style='text-align:center;'> <img src="{{ asset('assets/images/unnamed-2.gif') }}"></div>
                        <div id="simple-pie2" class="ct-chart ct-golden-section simple-pie-chart-chartist drop-shadow"></div>
                    </div><!--end card-body-->
                </div><!--end-card-->
            </div>

        </div>




        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-0 header-title">Hole Depth For Today</h4>
                        <hr class="hr-dashed">
                        <h6 id="holedepthtitle" class="font-12 text-muted mb-0 text-uppercase font-weight-semibold text-left"> </h6>
                        <br>
                        <div class="d-flex justify-content-between">

                            <div>
                                <h6 id="hole_depth" class="font-16 font-weight-semibold text-left">
                                    @foreach($hole_depth as $depth)

                                        {{$depth['max_hole_depth']}}
                                        -> {{$depth['rig_name']}}
                                        <br><br>

                                    @endforeach

                                </h6>
                                <h6 class="font-12 text-muted mb-0 text-uppercase font-weight-semibold">For Last 30 Days</h6>
                            </div>
                            <div class="icon-info align-self-center">
                                <i class="typcn typcn-download-outline text-primary font-40"></i>
                            </div>
                        </div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!-- end col-->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h4  class="mb-0 header-title">Top Companies</h4>
                        <hr class="hr-dashed">
                        <h6 id="topcompsheadar" class="font-12 text-muted mb-0 text-uppercase font-weight-semibold text-left"></h6>
                        <br>
                        <div class="d-flex justify-content-between">

                            <div>
                                <h6 id="top_companies" class="font-16 font-weight-semibold text-left">
                                    @foreach($top_companies as $company)

                                        {{$company->Company}} <br><br>

                                    @endforeach

                                </h6>
                                <h6 class="font-12 text-muted mb-0 text-uppercase font-weight-semibold">Note: ARM and OTH is always excluded</h6>
                            </div>
                            <div class="icon-info align-self-center">
                                <i class="mdi mdi-office-building text-success font-40"></i>
                            </div>
                        </div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!-- end col-->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-0 header-title">Top Footage Drilled</h4>
                        <hr class="hr-dashed">
                        <h6 id="footageheadar" class="font-12 text-muted mb-0 text-uppercase font-weight-semibold text-left"></h6><br>
                        <div class="d-flex justify-content-between">

                            <div>
                                <h6 id="top_footages" class="font-16 font-weight-semibold text-left">
                                    @foreach($top_footages as $footage)

                                        {{$footage->max_footage}} -> {{$footage->rig_name}}
                                        <br><br>

                                    @endforeach

                                </h6>
                                <h6 class="font-12 text-muted mb-0 text-uppercase font-weight-semibold text-left">For Last 30 Days</h6>
                            </div><div class="icon-info align-self-center">
                                <i class="dripicons-arrow-down text-warning font-40"></i>
                            </div>
                        </div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!-- end col-->

        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 id="operationheadar" class="header-title mt-0"> </h4>  <hr class="hr-dashed">
                        <div class="table-responsive dash-social">
                            <table class="table table-bordered">
                                <thead class="thead-light">
                                <tr>
                                    <th>Well Name</th>
                                    <th>Rig  Name</th>
                                    <th>Hole Depth Today</th>
                                    <th>Operation</th>
                                </tr>
                                </thead>

                                <tbody id="operations" >
                                @foreach($operations as $operation => $rig_name)

                                    <tr>

                                        <td style="width:15%"><i class="dripicons-map
 text-primary ml-1"></i> {{$rig_name['well_name']}} </td><td style="width:15%"><i class="dripicons-pin
 text-warning ml-1"></i> {{$rig_name['rig_name']}} </td>
                                        <td style="width:15%"><i class="typcn typcn-download-outline
 text-danger ml-1"></i> {{$rig_name['hole_depth']}} </td>
                                        <td style="width:55%"><i class="ti-settings text-success ml-1"></i>
                                            {{$rig_name['operations'][0]}} </td>
                                    </tr>

                                @endforeach
                                </tbody>
                            </table>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->
                <!--end col-->
            </div>

        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title mt-0 mb-3">Footage Drilling & Hrs Per Mud Motor Companies </h4>
                        <hr class="hr-dashed">
                        <div id="loader4" style='text-align:center;'> <img src="{{ asset('assets/images/unnamed-2.gif') }}"></div>


                        <div class="table-responsive dash-social">
                            <table id="datatable-buttons-4" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="thead-light">
                                <tr>

                                    <th>Company Name</th>
                                    <th>Footage Drilling</th>
                                    <th>Drilling Hours</th>

                                </tr>
                                </thead>


                            </table> </div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-0 header-title">Footage Drilling & Hrs Per Bit Companies  </h4>
                        <hr class="hr-dashed">
                        <div id="loader2" style='text-align:center;'> <img src="{{ asset('assets/images/unnamed-2.gif') }}"></div>


                        <div class="table-responsive dash-social">
                            <table id="datatable-buttons-1" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="thead-light">
                                <tr>

                                    <th>Company Name</th>
                                    <th>Footage Drilling</th>
                                    <th>Drilling Hours</th>

                                </tr>
                                </thead>


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

        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-0 header-title">Footage Drilling For Last Month of All Rigs  </h4>
                        <hr class="hr-dashed">
                        <div id="loader" style='text-align:center;'> <img src="{{ asset('assets/images/unnamed-2.gif') }}"></div>
                        <div class="table-responsive dash-social">
                            <table id="datatable-buttons-2" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead class="thead-light">
                                <tr>
                                    <th>Month</th>
                                    <th>Footage Drilling</th>

                                </tr>
                                </thead>


                            </table>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->
                <!--end col-->
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title mt-0 mb-3">Rigs By Cities In Saudi Arabia</h4>
                        <div id="world-map-markers" class="rep-map drop-shadow-map"></div>
                    </div><!--end card-body-->
                </div><!--end card-->
            </div>
        </div>


        <!--end row-->
    </div><!--end card-body-->
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/jvectormap/jquery-jvectormap-2.0.2.min.js') }}"></script>
    <script src="{{ asset('plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
    <script src="{{ asset('plugins/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/pages/jquery.analytics_report.init.js') }}"></script>
    <script src="{{ asset('plugins/chartist/js/chartist.min.js') }}"></script>
    <script src="{{ asset('plugins/chartist/js/chartist-plugin-tooltip.min.js') }}"></script>


    <script>

        $(document).ready(function(){

            $("#loader").hide();
            $("#loader2").hide();
            $("#loader4").hide();
            $("#loader44").hide();
            $("#loader45").hide();
            $("#datatable-buttons-2").hide();
            $("#datatable-buttons-1").hide();

            $("#datatable-buttons-4").hide();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type:'GET',
                url:"api/get_data",
                data:{
                    //'columns':arraydata,
                    "_token": "{{ csrf_token() }}",
                },
                beforeSend: function(){

                    $("#loader").show();
                    $("#loader2").show();
                    $("#loader4").show();
                    $("#loader44").show();
                    $("#loader45").show();
                },
            }).done( function(data) {

                $("#loader").hide();
                $("#loader2").hide();
                $("#loader4").hide();
                $("#loader44").hide();
                $("#loader45").hide();
                $("#datatable-buttons-2").show('slow');
                var table =   $('#datatable-buttons-2').DataTable( {
                    lengthChange: false,
                    buttons: ['copy', 'excel', 'pdf', 'colvis'],
                    aaData: data.months_sum_footage_by_year,
                    columns:[
                        {
                            data: 'MonthName',
                        },
                        {
                            data: 'sum_footage',
                        }

                    ],
                    "ordering": true

                });
                table.buttons().container()
                    .appendTo('#datatable-buttons-2_wrapper .col-md-6:eq(0)');

                $('#row_callback').DataTable( {
                    "createdRow": function ( row, data, index ) {
                        if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
                            $('td', row).eq(5).addClass('highlight');
                        }
                    }
                } );


                $("#datatable-buttons-1").show('slow');
                var table =   $('#datatable-buttons-1').DataTable( {
                    lengthChange: false,
                    buttons: ['copy', 'excel', 'pdf', 'colvis'],
                    aaData: data.compay_hrs_sum_hole_depth_by_year,
                    columns:[
                        {
                            data: 'Resp_Co',
                        },
                        {
                            data: 'sum_footage',
                        },
                        {
                            data: 'SHrs',
                        }

                    ],
                    "ordering": true

                });
                table.buttons().container()
                    .appendTo('#datatable-buttons-1_wrapper .col-md-6:eq(0)');

                $('#row_callback').DataTable( {
                    "createdRow": function ( row, data, index ) {
                        if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
                            $('td', row).eq(5).addClass('highlight');
                        }
                    }
                } );

                $("#datatable-buttons-4").show('slow');
                var table =   $('#datatable-buttons-4').DataTable( {
                    lengthChange: false,
                    buttons: ['copy', 'excel', 'pdf', 'colvis'],
                    aaData: data.mud_motor_by_year,
                    columns:[
                        {
                            data: 'Resp_Co',
                        },
                        {
                            data: 'sum_footage',
                        },
                        {
                            data: 'SHrs',
                        }

                    ],
                    "ordering": true

                });
                table.buttons().container()
                    .appendTo('#datatable-buttons-4_wrapper .col-md-6:eq(0)');

                $('#row_callback').DataTable( {
                    "createdRow": function ( row, data, index ) {
                        if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
                            $('td', row).eq(5).addClass('highlight');
                        }
                    }
                } );

                var sum_all=data['compay_hrs_sum_hole_depth_by_year'][0]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][1]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][2]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][3]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][4]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][5]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][6]['sum_footage']+data['compay_hrs_sum_hole_depth_by_year'][7]['sum_footage'];
                var gg1 = (data['compay_hrs_sum_hole_depth_by_year'][0]['sum_footage']*100)/sum_all;
                g1= Math.ceil(gg1);
                var gg2 = (data['compay_hrs_sum_hole_depth_by_year'][1]['sum_footage']*100)/sum_all;
                g2= Math.ceil(gg2);
                var gg3 = (data['compay_hrs_sum_hole_depth_by_year'][2]['sum_footage']*100)/sum_all;
                g3= Math.ceil(gg3);
                var gg4 = (data['compay_hrs_sum_hole_depth_by_year'][3]['sum_footage']*100)/sum_all;
                g4= Math.ceil(gg4);
                var gg5 = (data['compay_hrs_sum_hole_depth_by_year'][4]['sum_footage']*100)/sum_all;
                g5=Math.ceil(gg5);
                var gg6 = (data['compay_hrs_sum_hole_depth_by_year'][5]['sum_footage']*100)/sum_all;
                g6= Math.ceil(gg6);
                var gg7 = (data['compay_hrs_sum_hole_depth_by_year'][6]['sum_footage']*100)/sum_all;

                g7= Math.ceil(gg7);
                var gg8 = (data['compay_hrs_sum_hole_depth_by_year'][7]['sum_footage']*100)/sum_all;
                g8= Math.ceil(gg8);


                var hh1 = data['compay_hrs_sum_hole_depth_by_year'][0]['Resp_Co'];
                var hh2 = data['compay_hrs_sum_hole_depth_by_year'][1]['Resp_Co'];
                var hh3 = data['compay_hrs_sum_hole_depth_by_year'][2]['Resp_Co'];
                var hh4 = data['compay_hrs_sum_hole_depth_by_year'][3]['Resp_Co'];
                var hh5 = data['compay_hrs_sum_hole_depth_by_year'][4]['Resp_Co'];
                var hh6 = data['compay_hrs_sum_hole_depth_by_year'][5]['Resp_Co'];
                var hh7 = data['compay_hrs_sum_hole_depth_by_year'][6]['Resp_Co'];
                var hh8 = data['compay_hrs_sum_hole_depth_by_year'][7]['Resp_Co'];
                var data3 = {
                    labels: [hh1, hh2, hh3,hh4,hh5,hh6,hh7,hh8],
                    series: [g1, g2, g3,g4,g5,g6,g7,g8]
                };

                var options = {
                    labelInterpolationFnc: function(value) {
                        return value[0]
                    }
                };

                var responsiveOptions = [
                    ['screen and (min-width: 640px)', {
                        chartPadding: 50,
                        labelOffset: 100,
                        labelDirection: 'explode',
                        labelInterpolationFnc: function(value) {
                            return value;
                        }
                    }],
                    ['screen and (min-width: 1024px)', {
                        labelOffset: 80,
                        chartPadding: 20
                    }]
                ];

                new Chartist.Pie('#animating-donut', data3, options, responsiveOptions);





                var sum_all=data['mud_motor_by_year'][0]['sum_footage']+data['mud_motor_by_year'][1]['sum_footage']+data['mud_motor_by_year'][2]['sum_footage']+data['mud_motor_by_year'][3]['sum_footage']+data['mud_motor_by_year'][4]['sum_footage']+data['mud_motor_by_year'][5]['sum_footage']+data['mud_motor_by_year'][6]['sum_footage']+data['mud_motor_by_year'][7]['sum_footage'];
                var gg1 = (data['mud_motor_by_year'][0]['sum_footage']*100)/sum_all;
                g1= Math.ceil(gg1);
                var gg2 = (data['mud_motor_by_year'][1]['sum_footage']*100)/sum_all;
                g2= Math.ceil(gg2);
                var gg3 = (data['mud_motor_by_year'][2]['sum_footage']*100)/sum_all;
                g3= Math.ceil(gg3);
                var gg4 = (data['mud_motor_by_year'][3]['sum_footage']*100)/sum_all;
                g4= Math.ceil(gg4);
                var gg5 = (data['mud_motor_by_year'][4]['sum_footage']*100)/sum_all;
                g5=Math.ceil(gg5);
                var gg6 = (data['mud_motor_by_year'][5]['sum_footage']*100)/sum_all;
                g6= Math.ceil(gg6);
                var gg7 = (data['mud_motor_by_year'][6]['sum_footage']*100)/sum_all;

                g7= Math.ceil(gg7);
                var gg8 = (data['mud_motor_by_year'][7]['sum_footage']*100)/sum_all;
                g8= Math.ceil(gg8);


                var hh1 = data['mud_motor_by_year'][0]['Resp_Co'];
                var hh2 = data['mud_motor_by_year'][1]['Resp_Co'];
                var hh3 = data['mud_motor_by_year'][2]['Resp_Co'];
                var hh4 = data['mud_motor_by_year'][3]['Resp_Co'];
                var hh5 = data['mud_motor_by_year'][4]['Resp_Co'];
                var hh6 = data['mud_motor_by_year'][5]['Resp_Co'];
                var hh7 = data['mud_motor_by_year'][6]['Resp_Co'];
                var hh8 = data['mud_motor_by_year'][7]['Resp_Co'];
                var data4 = {
                    labels: [hh1, hh2, hh3,hh4,hh5,hh6,hh7,hh8],
                    series: [g1, g2, g3,g4,g5,g6,g7,g8]
                };

                var options = {
                    labelInterpolationFnc: function(value) {
                        return value[0]
                    }
                };

                var responsiveOptions = [
                    ['screen and (min-width: 640px)', {
                        chartPadding: 50,
                        labelOffset: 100,
                        labelDirection: 'explode',
                        labelInterpolationFnc: function(value) {
                            return value;
                        }
                    }],
                    ['screen and (min-width: 1024px)', {
                        labelOffset: 80,
                        chartPadding: 20
                    }]
                ];

                new Chartist.Pie('#simple-pie2', data4, options, responsiveOptions);





                var sum_all2=data['months_sum_footage_by_year'][0]['sum_footage']+data['months_sum_footage_by_year'][1]['sum_footage']+data['months_sum_footage_by_year'][2]['sum_footage']+data['months_sum_footage_by_year'][3]['sum_footage']+data['months_sum_footage_by_year'][4]['sum_footage']+data['months_sum_footage_by_year'][5]['sum_footage']+data['months_sum_footage_by_year'][6]['sum_footage']+data['months_sum_footage_by_year'][7]['sum_footage']+data['months_sum_footage_by_year'][8]['sum_footage']+data['months_sum_footage_by_year'][9]['sum_footage']+data['months_sum_footage_by_year'][10]['sum_footage']+data['months_sum_footage_by_year'][11]['sum_footage'];
                var gg1 = (data['months_sum_footage_by_year'][0]['sum_footage']*100)/sum_all2;
                g1= Math.ceil(gg1);
                var gg2 = (data['months_sum_footage_by_year'][1]['sum_footage']*100)/sum_all2;
                g2= Math.ceil(gg2);
                var gg3 = (data['months_sum_footage_by_year'][2]['sum_footage']*100)/sum_all2;
                g3= Math.ceil(gg3);
                var gg4 = (data['months_sum_footage_by_year'][3]['sum_footage']*100)/sum_all2;
                g4= Math.ceil(gg4);
                var gg5 = (data['months_sum_footage_by_year'][4]['sum_footage']*100)/sum_all2;
                g5=Math.ceil(gg5);
                var gg6 = (data['months_sum_footage_by_year'][5]['sum_footage']*100)/sum_all2;
                g6= Math.ceil(gg6);
                var gg7 = (data['months_sum_footage_by_year'][6]['sum_footage']*100)/sum_all2;

                g7= Math.ceil(gg7);
                var gg8 = (data['months_sum_footage_by_year'][7]['sum_footage']*100)/sum_all2;
                g8= Math.ceil(gg8);

                var gg9 = (data['months_sum_footage_by_year'][8]['sum_footage']*100)/sum_all2;
                g9= Math.ceil(gg9);
                var gg10 = (data['months_sum_footage_by_year'][9]['sum_footage']*100)/sum_all2;
                g10= Math.ceil(gg10);
                var gg11 = (data['months_sum_footage_by_year'][10]['sum_footage']*100)/sum_all2;
                g11= Math.ceil(gg11);
                var gg12 = (data['months_sum_footage_by_year'][11]['sum_footage']*100)/sum_all2;
                g12= Math.ceil(gg12);


                var hh1 = data['months_sum_footage_by_year'][0]['MonthName'];
                var hh2 = data['months_sum_footage_by_year'][1]['MonthName'];
                var hh3 = data['months_sum_footage_by_year'][2]['MonthName'];
                var hh4 = data['months_sum_footage_by_year'][3]['MonthName'];
                var hh5 = data['months_sum_footage_by_year'][4]['MonthName'];
                var hh6 = data['months_sum_footage_by_year'][5]['MonthName'];
                var hh7 = data['months_sum_footage_by_year'][6]['MonthName'];

                var hh8 = data['months_sum_footage_by_year'][7]['MonthName'];
                var hh9 = data['months_sum_footage_by_year'][8]['MonthName'];
                var hh10 = data['months_sum_footage_by_year'][9]['MonthName'];
                var hh11 = data['months_sum_footage_by_year'][10]['MonthName'];
                var hh12 = data['months_sum_footage_by_year'][11]['MonthName'];

                var data2 = {
                    labels: [hh1, hh2, hh3,hh4,hh5,hh6,hh7,hh8,hh9,hh10,hh11,hh12],
                    series: [g1, g2, g3,g4,g5,g6,g7,g8,g9,g10,g11,g12]
                };

                var options = {
                    labelInterpolationFnc: function(value) {
                        return value[0]
                    }
                };

                var responsiveOptions = [
                    ['screen and (min-width: 640px)', {
                        chartPadding: 50,
                        labelOffset: 100,
                        labelDirection: 'explode',
                        labelInterpolationFnc: function(value) {
                            return value;
                        }
                    }],
                    ['screen and (min-width: 1024px)', {
                        labelOffset: 80,
                        chartPadding: 20
                    }]
                ];

                new Chartist.Pie('#simple-pie', data2, options, responsiveOptions);




            } );



            $('#holedepthtitle').text("Hole Depth For Today For Random 5 Rigs");
            $('#topcompsheadar').text("Top Companies Drilling In Last 30 Days");
            $('#footageheadar').text("Top Footage Height For Last 30 Days");
            $('#operationheadar').text("Operations In Last 30 Days For Random 5 Rigs");
            $("#rig_name").change(function(){
                var theval=$(this).val();
                if(theval != "All Rigs"){
                    $('#holedepthtitle').text("Hole Depth For Today For Rig: "+ theval);
                    $('#topcompsheadar').text("Companies who provide services for: "+ theval);
                    $('#footageheadar').text(" Footage Height For Today For Rig:"+ theval);
                    $('#operationheadar').text("Last 5 Operations In Rig: "+ theval);
                }else{
                    $('#holedepthtitle').text("Hole Depth For Today For Random 5 Rigs");
                    $('#topcompsheadar').text("Top Companies Drilling In Last 30 Days");
                    $('#footageheadar').text("Top Footage Height For Last 30 Days");
                    $('#operationheadar').text("Operations In Last 30 Days For Random 5 Rigs");
                }

                $.ajax({
                    type:'POST',
                    url:"api/change_dashboard_accordingto_rig_name",
                    data:{
                        'rig_name':theval,
                        '_token': $('meta[name="csrf-token"]').attr('content')
                    },
//   'contentType': 'application/json'
                }).done( function(data) {

                    var top_companies = "";
                    var top_footages = "";
                    var operations = "";
                    var hole_depth = "";
                    if(theval != "All Rigs"){
                        $.each( data.top_companies, function( key, value ) {
                            top_companies+= value['Company'] + " - ";
                        });
                    }else{
                        $.each( data.top_companies, function( key, value ) {
                            top_companies+= value['Company'] + "<br><br>";
                        });
                    }
                    //console.log(top_companies);
                    $("#top_companies").html(top_companies) ;

                    $.each( data.top_footages, function( key, value ) {
                        top_footages+= value['max_footage'] + " -> " + value['rig_name'] + "<br><br>";

                    });

                    $("#top_footages").html(top_footages) ;

                    $.each( data.hole_depth, function( key, value ) {
                        hole_depth+= value['max_hole_depth'] + " -> " + value['rig_name'] + "<br><br>";

                    });

                    $("#hole_depth").html(hole_depth) ;


                    $.each( data.operations, function( key, value ) {
                        operations+= "<tr><td style='width:15%'><i class='dripicons-map text-primary ml-1'></i>"+ value['well_name'] +"</td><td style='width:15%'><i class='dripicons-pin text-warning ml-1'></i>"+ value['rig_name'] +"</td><td style='width:15%'><i class='typcn typcn-download-outline text-danger ml-1'></i>"+ value['hole_depth'] +"</td>";
                        $.each( value['operations'], function( key2, value2 ) {
                            if(key2 == 0){
                                operations+= "<td style='width:70%'><i class='ti-settings text-success ml-1'></i>"+ value['operations'][0] +"</td></tr>";
                            }

                        });

                    });

                    $("#operations").html(operations) ;





                });

            });

        });
    </script>
    <!-- App js -->


@endsection