@extends('layouts.app')
@section('title', 'Order Report')
@section('content')
<style type="text/css">
    .cust_btton
    {
        float: left!important;
    }
/*   .scroll-thead{
    width: 100%;
    display: inline-table;
}

.scroll-tbody-y
{
    display: block;
    overflow-y: scroll;
}*/

.table-body
{
    max-height:60vh;
}
.dataTables_wrapper .dataTables_processing {
        position: absolute;
        top: 15% !important;
    }
</style>
<div class="container-fluid mt-1">
  
    <div class="card card-top-border3">
        <div class="card-body">
            <h5 style="text-align:center;">Order Report</h5>
                <div class="row">
                    <div class="col-md-3">
                        <label for="example-type-input" class="col-form-label"> Select Date Range <span class="text-danger"> * </span></label>
                        <input required value="" name="date_range" id="date_range" type="text" class="form-control daterange" placeholder="Select Date Range">
                   </div>

                    <div class="col-md-2">
                        <label for="example-type-input" class="col-form-label"> Select Status <span class="text-danger"> * </span></label>
                       <select class="form-control" name="status_id" id="status_id" required="">
                            <option value="all">All</option>
                           @foreach($sts_list as $sts)
                                <option value="{{$sts->id}}">{{$sts->status_name}}</option>
                           @endforeach
                       </select>
                   </div>
                   
                    <div class="col-md-3 row align-items-end">
                        <button type="button" id="search" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </br>
            <div id="table_view">
                <div class="table-responsive">
                <table id="order_report_table" class="table table-bordered  nowrap mb-0 mt-3" style="width: 100%; ">
                    <thead class="scroll-thead">
                        <tr>
                            <th>Sl.No</th>
                            <th>Order Id</th>
                            <th>Product</th>
                            <th>Client Cost</th>
                            <!-- <th>New cost </th> -->
                            <!-- <th>Approved Cost</th> -->
                            <th>Deviation Cost</th>
                            <th>Client Deviation Cost</th>
                            <th>Client Deviation(%)</th>
                            <th>No of Copies</th>
                            <th>Cost per copy</th>
                            <th>Total Copy cost</th>
                            <th>Overall Cost</th>
                            
                            <th>Received Date</th>
                            <th>Started Date</th>
                            <th>Completed Date</th>
                            <th>Status </th>
                          
                            
                        </tr>
                    </thead>
                    <tbody class="scroll-tbody-y table-body">
                        
                    </tbody>
                    
                </table>
            </div>
            </div>
            <div class="card mt-2">
                <div class="row">
                    <div class="col-md-6 border" id="chart_wrapper" style="height:300px;">
                        <canvas id="myChart" ></canvas>
                    </div>
                    <div class="col-md-6 border" id="chart_wrapper" style="height:300px;">
                        <canvas id="productChart" ></canvas>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 border" id="chart_wrapper" style="height:300px;">
                        <canvas id="stateChart" ></canvas>
                    </div>
                    <div class="col-md-6 border" id="chart_wrapper" style="height:300px;">
                        <canvas id="countyChart" ></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function(){
    get_chart();
    get_product_chart();
    get_state_chart();
    get_county_chart();
    $('.daterange').daterangepicker({
        todayBtn:'linked',
        timePicker: true,
        timePicker24Hour: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        format:'mm-dd-yyyy',
        autoclose:true,
        maxDate: new Date,
      
            showTimezone: true,
    });
    

    $('#search').on('click', function() {
        dataTable.draw();
        get_chart();
        get_product_chart();
        get_state_chart();
        get_county_chart();
    });

    var dataTable = $('#order_report_table').DataTable({
         dom: 'l<"cust_btton">Bfrtip',
        buttons: [
        ],
        initComplete: function(){
            $("div.cust_btton").html('<button type="button" onclick="getReport()"  class=" ml-2 btn btn-sm mt-2 btn-primary" >&nbsp;Export</button>');
        }, 
        
        scrollX: true,
        processing: true,
        serverSide: true,
        ajax: {
            url:'{{ route("search_order_report") }}',
            data:function(data){
                 // Read values
                var date_range = $('#date_range').val();
                var status_id = $('#status_id').val();

                // Append to data
                data.date_range = date_range;
                data.status_id = status_id;
            }
        },
        columns: [
                { data: 'DT_RowIndex',name: 'DT_RowIndex',orderable: true, searchable: true },
                { data:'order_unique_id',name:'order_unique_id' },
                { data:'product_name_id',name:'product_name_id' },
                { data:'client_cost',name:'client_cost' },
                // { data:'final_cost',name:'final_cost' },
                // { data:'approved_cost',name:'approved_cost' },
                { data:'deviationcost',name:'deviationcost' },
                { data:'client_dev_cost',name:'client_dev_cost' },
                { data:'client_dev_per',name:'client_dev_per' },
                { data:'copy_units',name:'copy_units' },
                { data:'unitcopy_cost',name:'unitcopy_cost' },
                { data:'total_copycost',name:'total_copycost' },
                { data:'finalise_cost',name:'finalise_cost' },

                { data:'order_received_datetime',name:'order_received_datetime' },
                { data:'added_datetime',name:'added_datetime' },
                { data:'completed_datetime',name:'completed_datetime' },
                { data:'status_id',name:'status_id' },
               
            ]
        
    });



});
function getReport()
{
    
    var date_range = $('#date_range').val();
    var status_id = $('#status_id').val();

    var query = {
        date_range : $('#date_range').val(),
        status_id : $('#status_id').val()
    }


    var url = "{{URL::to('client_order_export')}}?" + $.param(query)
    window.location = url;
   
}

function get_chart()
{
    var date_range = $('#date_range').val();
    if(date_range == "")
    {
        today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; 
        var yyyy = today.getFullYear();
        if(dd<10) 
        {
            dd='0'+dd;
        } 

        if(mm<10) 
        {
            mm='0'+mm;
        }
        date_range = mm+'/'+dd+'/'+yyyy+'-'+mm+'/'+dd+'/'+yyyy; 
    }
    var status_id = $('#status_id').val();
    $.ajax({
        type: "post",
         url:'{{ route("order_report_chart") }}',
        data: { date_range:date_range ,status_id:status_id, _token: '{{csrf_token()}}'},
        dataType:'json',
        success: function(datas)
        {
            let chartStatus = Chart.getChart("myChart"); // <canvas> id
            if (chartStatus != undefined) {
              chartStatus.destroy();
            }
            const data = {
              labels: [
                'Deviated',
                'Non Deviated'
              ],
              datasets: [{
                label: 'Percentage',
                data: [datas.devi_cnt,datas.not_deviated],
                backgroundColor: [
                  'rgb(255, 99, 132)',
                  'rgb(54, 162, 235)'
                  
                ],
                hoverOffset: 4
              }]
            };
              
              const config = {
              type: 'pie',
              data: data,
              options: {
                    plugins: {
                      title: {
                        display: true,
                        text: 'Cost Deviation'
                      },
                    },
                     }
            };
            
            var chartCanvas = $('#myChart'); //<canvas> id
              chartInstance = new Chart(chartCanvas ,config);
        }
    });
    
}
function get_product_chart()
{
    var date_range = $('#date_range').val();
    var status_id = $('#status_id').val();
    if(date_range == "")
    {
        today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; 
        var yyyy = today.getFullYear();
        if(dd<10) 
        {
            dd='0'+dd;
        } 

        if(mm<10) 
        {
            mm='0'+mm;
        }
        date_range = mm+'/'+dd+'/'+yyyy+'-'+mm+'/'+dd+'/'+yyyy; 
    }
    $.ajax({
        type: "post",
         url:'{{ route("pie_report_chart") }}',
        data: { date_range:date_range ,status_id:status_id, _token: '{{csrf_token()}}'},
        dataType:'json',
        success: function(datas)
        {
            var prod_lbl= datas.products;
            var devi_cnt= datas.devi_cnt;
            var not_deviated= datas.not_deviated;
            let chartStatus = Chart.getChart("productChart"); // <canvas> id
            if (chartStatus != undefined) {
              chartStatus.destroy();
            }
            const data = {
              labels: prod_lbl ,
                    datasets: [{ 
                        data: devi_cnt,
                        label: "Deviated(%)",
                        borderColor: "#3cba9f",
                        backgroundColor: "#71d1bd",
                        borderWidth:2
                      }, { 
                        data: not_deviated,
                        label: "Non Deviated(%)",
                        borderColor: "#ffa500",
                        backgroundColor:"#ffc04d",
                        borderWidth:2
                      }
                    ]
            };
            const config = {
                  type: 'bar',
                  data: data,
                  options: {
                    plugins: {
                      title: {
                        display: true,
                        text: 'Product wise Deviation'
                      },
                    },
                    responsive: true,
                    scales: {
                      x: {
                        stacked: true,
                      },
                      y: {
                        stacked: true
                      }
                    }
                  }
                };
            var chartCanvas = $('#productChart'); //<canvas> id
              chartInstance = new Chart(chartCanvas ,config);
          }
      });
}
function get_state_chart()
{
    var date_range = $('#date_range').val();
    var status_id = $('#status_id').val();
    var client_id = $('#client_id').val();
    if(date_range == "")
    {
        today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; 
        var yyyy = today.getFullYear();
        if(dd<10) 
        {
            dd='0'+dd;
        } 

        if(mm<10) 
        {
            mm='0'+mm;
        }
        date_range = mm+'/'+dd+'/'+yyyy+'-'+mm+'/'+dd+'/'+yyyy; 
    }
    $.ajax({
        type: "post",
         url:'{{ route("state_pie_report_chart") }}',
        data: { date_range:date_range ,status_id:status_id,client_id:client_id, _token: '{{csrf_token()}}'},
        dataType:'json',
        success: function(datas)
        {
            var prod_lbl= datas.products;
            var devi_cnt= datas.devi_cnt;
            var not_deviated= datas.not_deviated;
            let chartStatus = Chart.getChart("stateChart"); // <canvas> id
            if (chartStatus != undefined) {
              chartStatus.destroy();
            }
            const data = {
              labels: prod_lbl ,
                    datasets: [{ 
                        data: devi_cnt,
                        label: "Deviated(%)",
                        borderColor: "#3cba9f",
                        backgroundColor: "#71d1bd",
                        borderWidth:2
                      }, { 
                        data: not_deviated,
                        label: "Non Deviated(%)",
                        borderColor: "#ffa500",
                        backgroundColor:"#ffc04d",
                        borderWidth:2
                      }
                    ]
            };
            const config = {
                  type: 'bar',
                  data: data,
                  options: {
                    plugins: {
                      title: {
                        display: true,
                        text: 'State wise Deviation'
                      },
                    },
                    responsive: true,
                    scales: {
                      x: {
                        stacked: true,
                      },
                      y: {
                        stacked: true
                      }
                    }
                  }
                };
            var chartCanvas = $('#stateChart'); //<canvas> id
              chartInstance = new Chart(chartCanvas ,config);
          }
      });
}
function get_county_chart()
{
    var date_range = $('#date_range').val();
    var status_id = $('#status_id').val();
    var client_id = $('#client_id').val();
    if(date_range == "")
    {
        today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; 
        var yyyy = today.getFullYear();
        if(dd<10) 
        {
            dd='0'+dd;
        } 

        if(mm<10) 
        {
            mm='0'+mm;
        }
        date_range = mm+'/'+dd+'/'+yyyy+'-'+mm+'/'+dd+'/'+yyyy; 
    }
    $.ajax({
        type: "post",
         url:'{{ route("county_pie_report_chart") }}',
        data: { date_range:date_range ,status_id:status_id,client_id:client_id, _token: '{{csrf_token()}}'},
        dataType:'json',
        success: function(datas)
        {
            var prod_lbl= datas.products;
            var devi_cnt= datas.devi_cnt;
            var not_deviated= datas.not_deviated;
            let chartStatus = Chart.getChart("countyChart"); // <canvas> id
            if (chartStatus != undefined) {
              chartStatus.destroy();
            }
            const data = {
              labels: prod_lbl ,
                    datasets: [{ 
                        data: devi_cnt,
                        label: "Deviated(%)",
                        borderColor: "#3cba9f",
                        backgroundColor: "#71d1bd",
                        borderWidth:2
                      }, { 
                        data: not_deviated,
                        label: "Non Deviated(%)",
                        borderColor: "#ffa500",
                        backgroundColor:"#ffc04d",
                        borderWidth:2
                      }
                    ]
            };
            const config = {
                  type: 'bar',
                  data: data,
                  options: {
                    plugins: {
                      title: {
                        display: true,
                        text: 'County wise Deviation'
                      },
                    },
                    responsive: true,
                    scales: {
                      x: {
                        stacked: true,
                      },
                      y: {
                        stacked: true
                      }
                    }
                  }
                };
            var chartCanvas = $('#countyChart'); //<canvas> id
              chartInstance = new Chart(chartCanvas ,config);
          }
      });
}

</script>
@endsection