@extends('admin.layouts.app')

@section('title', 'dashboard')
@section('content')
        <div class="container-fluid">

            <!-- start page title -->

            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Welcome !</h4>
                        <div class="page-title-right">
                            <div class="date-section">
                                <label>Date</label>
                                <input type="text" class="form-control" id="datepicker-range">
                            </div>

                        </div>
                    </div>



                </div>
            </div>

            <!-- end page title -->
            {{-- @if(in_array(array(1,2,3),Auth::user()->role) --}}

            <div class="row">
                <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">
                            <div class="d-flex align-items-center">

                               <a  class="table-link" href="{{url('/')}}/ticket/list?status=new">
                                <div class="flex-grow-1">
                                    <span class="text-warning mb-3 lh-1 d-block text-truncate"> @if(Auth::user()->role=='4') New @else Pending @endif </span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="{{$issuecount[0]->new_count}}">{{$issuecount[0]->new_count}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                                </a>

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

                {{-- <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1">
                                    <span class="text-info mb-3 lh-1 d-block text-truncate">Open</span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="03">{{$issuecount[0]->}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col --> --}}

                <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">

                            <div class="d-flex align-items-center">
                              <a  class="table-link" href="{{url('/')}}/ticket/list?status=1">
                                <div class="flex-grow-1">
                                    <span class="text-success mb-3 lh-1 d-block text-truncate">Under Process</span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="{{$issuecount[0]->up_count}}">{{$issuecount[0]->up_count}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                                </a>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->
                @if(Auth::user()->role==1)
                    <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                             <a  class="table-link" href="{{url('/')}}/ticket/list?status=6">
                                <div class="flex-grow-1">
                                    <span class="text-danger mb-3 lh-1 d-block text-truncate">Draft</span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="{{$issuecount[0]->draft_count}}">{{$issuecount[0]->draft_count}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                                </a>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                    </div><!-- end col -->
                @endif

                <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                               <a class="table-link"  href="{{url('/')}}/ticket/list?status=3">
                                <div class="flex-grow-1">
                                    <span class="text-primary mb-3 lh-1 d-block text-truncate">Resolved</span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="{{$issuecount[0]->r_count}}">{{$issuecount[0]->r_count}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                                </a>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->
                <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                            <a  class="table-link" href="{{url('/')}}/ticket/list?status=4">
                                <div class="flex-grow-1">
                                    <span class="text-muted mb-3 lh-1 d-block text-truncate">Closed</span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="{{$issuecount[0]->close_count}}">{{$issuecount[0]->close_count}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                                </a>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->
                <div class="col-xl-2 col-md-4 col-6">
                    <!-- card -->
                    <div class="card card-h-100">
                        <!-- card body -->
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                            <a class="table-link" href="{{url('/')}}/ticket/list?status=5">
                                <div class="flex-grow-1">
                                    <span class="text-muted mb-3 lh-1 d-block text-truncate">Reopen</span>
                                    <h4 class="mb-3">
                                        <span class="counter-value" data-target="{{$issuecount[0]->reopend_count}}">{{$issuecount[0]->reopend_count}}</span>
                                    </h4>
                                    <!-- <div class="text-nowrap">
                                                    <span class="badge bg-soft-success text-success">+$20.9k</span>
                                                    <span class="ms-1 text-muted font-size-13">Since last week</span>
                                                </div> -->
                                </div>
                                </a>
                            </div>
                        </div><!-- end card body -->
                    </div><!-- end card -->
                </div><!-- end col -->
            </div><!-- end row-->
            {{-- @endif --}}
            <!--<div class="row">-->
            <!--    <div class="col-12">-->
            <!--        <div class="card">-->

            <!--            <div class="card-body">-->
            <!--                <table id="dataTable-ticket-list" class="table table-bordered dt-responsive  nowrap w-100">-->
            <!--                    <thead>-->
            <!--                        <tr>-->
            <!--                           <th>Sr. No</th>-->
            <!--                            <th>Ticket No</th>-->
            <!--                              <th>Vehicle No</th>-->
            <!--                            <th>Model Name</th>-->
            <!--                            <th>Created On</th>-->
            <!--                            <th>Priority</th>-->
            <!--                            <th>Status</th>-->
            <!--                            <th></th>-->

            <!--                        </tr>-->
            <!--                    </thead>-->
            <!--                    <tbody>-->

            <!--                    </tbody>-->
            <!--                </table>-->

            <!--            </div>-->
            <!--        </div>-->
            <!--    </div> <!-- end col -->
            <!--</div>-->

        <div class="row">
                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">Support Status</h4>
                                    </div>
                                    <div class="card-body">

                                        <div id="donut-chart" style="width: 100%; height: 350px;"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- end col -->
                             {{-- <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">Avg. Resolution Time by Issue Type</h4>
                                    </div>
                                    <div class="card-body">
                                        <div id="bar_chart" data-colors='["#34c38f"]' class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div><!--end card-->
                            </div> --}}

                            <!-- end col -->
                        </div>
                        <!-- end row -->

                         <div class="row">
                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">Ticket By Issue Category</h4>
                                    </div>
                                    <div class="card-body">

                                        <div id="ganttchart" style="width: 100%; height: 350px;"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- end col -->
                             @if(Auth::user()->role==4)
                             <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">Region wise Tickets</h4>
                                    </div>
                                    <div class="card-body">
                                        <div id="donut22" style="width: 100%; height: 350px;"></div>
                                    </div>
                                </div><!--end card-->
                            </div>
                            @endif

                            <!-- end col -->
                        </div>
                        <!-- end row -->

        </div>



 <script>
  var url = '{!! url('/') !!}';
  var role = '{!! Auth::user()->role !!}';
  var chartdata= @json($chartdata);
</script>
    <!-- JAVASCRIPT -->
    <script src="{{ url('/') }}/assets/libs/jquery/jquery.min.js"></script>
    <script src="{{url('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{ url('/')}}/assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ url('/') }}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url('/') }}/assets/libs/metismenu/metisMenu.min.js"></script>
    <script src="{{ url('/') }}/assets/libs/simplebar/simplebar.min.js"></script>
    <script src="{{ url('/') }}/assets/libs/node-waves/waves.min.js"></script>
    <script src="{{ url('/') }}/assets/libs/feather-icons/feather.min.js"></script>
    <!-- pace js -->
    <script src="{{ url('/') }}/assets/libs/pace-js/pace.min.js"></script>

    <!-- apexcharts -->
    <script src="{{ url('/') }}/assets/libs/apexcharts/apexcharts.min.js"></script>

    <!-- Plugins js-->
    <script src="{{ url('/') }}/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="{{ url('/') }}/assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js">
    </script>
    <!-- dashboard init -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

    <script src="{{ url('/') }}/assets/js/app.js"></script>
        <script src="{{ url('/') }}/assets/js/pages/dashboard.init.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script>
        var chartDom1 = document.getElementById('donut-chart');
var myChart1 = echarts.init(chartDom1);
var option;

option = {


    color:role == 1 ? [
        '#ffcc5a',
        '#34c38f',
        '#ef6767',
        '#1c84ee',
        '#74788d',
        '#74788d'
    ]:[
        '#ffcc5a',
        '#34c38f',
        '#1c84ee',
        '#74788d',
        '#74788d'
    ],


  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:chartdata.result_status_wise_ticket_count
    }
  ]
};

option && myChart1.setOption(option);
    </script>
    <script>
        // Initialize ApexCharts
var options = {
    chart: {
        type: 'bar', // Set the chart type to 'bar'
        height: 350,
        toolbar: {
            show: false,
        },
    },
    plotOptions: {
        bar: {
            horizontal: true, // Set bars to be horizontal
        },
    },
    dataLabels: {
        enabled: false, // Hide data labels (if you don't want to display them)
    },
    series: [
        {
            name: 'Data Series',
            data: [10, 20, 30, 40, 50], // Example data
        },
    ],
    xaxis: {
        categories: ['Issue 1', 'Issue 2', 'Issue 3', 'Issue 4', 'Issue 5'],
    },
};

var chart = new ApexCharts(document.querySelector("#bar_chart"), options);
chart.render();

    </script>
    <script>
        var chartDom = document.getElementById('ganttchart');
var myChart = echarts.init(chartDom);
var option;

option = {
      color: role==1 ? [
        '#ffcc5a',
        '#34c38f',
        '#ef6767',
        '#1c84ee',
        '#74788d',
        '#74788d',
        'fc8452'
    ]:['#ffcc5a',
        '#34c38f',
        '#1c84ee',
        '#74788d',
        '#74788d',
        'fc8452'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: chartdata.result_category_wise_tiket.categories
  },
  series:chartdata.result_category_wise_tiket.series
};

option && myChart.setOption(option);
    </script>
    <script>
        var chartDom = document.getElementById('donut2');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);
    </script>
    <script>
        var chartDom1 = document.getElementById('donut22');
var myChart1 = echarts.init(chartDom1);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {

  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:chartdata.result_region_ticket_count

    }
  ]
};

option && myChart1.setOption(option);


 $('a').click(function(event){
    if($(this).hasClass('table-link'))
    {
         event.preventDefault();
         let today=new Date();
        let link=$(this).attr("href")
        let params = (new URL(document.location)).searchParams;

        let start = params.get("start") ?   params.get("start") : moment(new Date(new Date().setDate(today.getDate() - 30)) ).format('YYYY-MM-DD');
        let end =   params.get("end")   ?   params.get("end") :   moment().format('YYYY-MM-DD');
        if(link.indexOf("?")==-1)
        {
          link=link+"?start="+start+"&end="+end
        }else{
          link=link+"&start="+start+"&end="+end
        }

               window.location.href=link;

    }

    //do whatever
  });



 function openTicketList()
{


}
    </script>
    @endsection