@extends('layout.adminapp')
@section('content')
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
                        <h1 class="h3 mb-0 text-gray-800">Welcome {{session()->get('admin')['name']}}</h1>
</div>
@if (Session::has('status'))
    <div class="alert alert-success">
        <ul>
            <li>{{ Session::get('status') }}</li>
        </ul>
    </div>
@endif
<div class="row">
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                    <a href="jobseeker">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                JobSeeker Join (Today)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$js_today}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                    <a href="employer">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Employer Join (Today)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$em_today}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                    <a href="em-query">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Non-Active Chats</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$non_active_chat}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                    <a href="userquries">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                New User Queries</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$new_queries}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                    <a href="jobseeker">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total JobSeeker</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$js_count}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                    <a href="employer">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Employer</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$em_count}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                    <a href="https://connectkw.co/em-request">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                New Job Posts</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$new_jobpost}}</div>
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                    <a href="https://connectkw.co/today-sale">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Last Purchased Plan</div>
                                @if($last_plan)
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{$last_plan['plan']['title']}}</div>
                                @else
                                    <div class="h6 mb-0 font-weight-bold text-gray-800">No Plan Purchased Yet</div>
                                @endif
                        </div>
                </div>
                    </a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-6 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Count</th>
                                            <th>Position</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($position as $key => $item)
                                        <tr>
                                            <td>{{$item['count']}}</td>
                                            <td>{{$item['option']}}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                    </div>
                <!--    <div class="col-auto">-->
                <!--        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>-->
                <!--    </div>-->
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="col-xl-6 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <a href="https://connectkw.co/most-active-em">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            3 Most Active Employers</div>
                            @foreach($active_em as $item)
                                <div class="h5 mb-0 font-weight-bold text-gray-800 m-2"><i class="fa fa-crown"></i> {{$item['email']}}</div>
                            @endforeach
                    </div>
                </div>
                </a>
            </div>
        </div>
    </div>
    
    <!--<div class="col-xl-3 col-md-6 mb-4">-->
    <!--    <div class="card border-left-info shadow h-100 py-2">-->
    <!--        <div class="card-body">-->
    <!--            <div class="row no-gutters align-items-center">-->
    <!--                <div class="col mr-2">-->
    <!--                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tasks-->
    <!--                    </div>-->
    <!--                    <div class="row no-gutters align-items-center">-->
    <!--                        <div class="col-auto">-->
    <!--                            <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>-->
    <!--                        </div>-->
    <!--                        <div class="col">-->
    <!--                            <div class="progress progress-sm mr-2">-->
    <!--                                <div class="progress-bar bg-info" role="progressbar"-->
    <!--                                    style="width: 50%" aria-valuenow="50" aria-valuemin="0"-->
    <!--                                    aria-valuemax="100"></div>-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--                <div class="col-auto">-->
    <!--                    <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->

    <!-- Pending Requests Card Example -->
    <!--<div class="col-xl-3 col-md-6 mb-4">-->
    <!--    <div class="card border-left-warning shadow h-100 py-2">-->
    <!--        <div class="card-body">-->
    <!--            <div class="row no-gutters align-items-center">-->
    <!--                <div class="col mr-2">-->
    <!--                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">-->
    <!--                        Pending Requests</div>-->
    <!--                    <div class="h5 mb-0 font-weight-bold text-gray-800">18</div>-->
    <!--                </div>-->
    <!--                <div class="col-auto">-->
    <!--                    <i class="fas fa-comments fa-2x text-gray-300"></i>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
</div>
<!-- Area Chart -->
<div class="row">
<div class="col-xl-8 col-md-6 mb-4">
    <a href="https://connectkw.co/monthly-sale">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Sales Chart</h6>
        </div>
        <div class="card-body">
            <div class="chart-area">
                <canvas id="myAreaChart"></canvas>
            </div>
        </div>
    </div>
    </a>
</div>
<div class="col-xl-4 col-md-6 mb-4">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Send Notification</h6>
        </div>
        <div class="card-body">
            <form method="post" action="send-to-all">
                @csrf
                                    
                <div class="form-group">
                    <label for="name">Type Notification</label>
                    <input type="text" class="form-control form-control-user" name="notification" required placeholder="Notification">
                </div>
                <div class="form-group">
                    <label for="name">Link</label>
                    <input type="text" class="form-control form-control-user" name="link" placeholder="Provide Link if any">
                </div>
                <button class="btn btn-primary btn-user btn-block" type="submit">
                    Send to All
                </button>
            </form>
        </div>
    </div>
</div>
</div>
</div>
@endsection
@section('script')
<script src="{{asset('admindic/vendor/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('admindic/vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('admindic/vendor/chart.js/Chart.min.js')}}"></script>
<script>
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

function number_format(number, decimals, dec_point, thousands_sep) {
  // *     example: number_format(1234.56, 2, ',', ' ');
  // *     return: '1 234,56'
  number = (number + '').replace(',', '').replace(' ', '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: "Earnings",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: [],
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 5,
          padding: 10,
          // Include a dollar sign in the ticks
          callback: function(value, index, values) {
            return 'KWD' + number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': KWD' + number_format(tooltipItem.yLabel);
        }
      }
    }
  }
});
// function onClick()
// {
//     console.log("click")
// myLineChart.data.labels = ["12-2022", "13-2022", "14-2022"]
// myLineChart.data.datasets[0].data = ["23", "45", "60"]
// }
$(document).ready( function () {
      var table = $('#dataTable').DataTable( {
          pageLength : 3,
    lengthMenu: [[5, 8], [5, 8]],
    "bLengthChange": false,
        order: [[0, 'desc']],
      } )
      $("#dataTable tbody tr").on('click',function(event) {
		$("#dataTable tbody tr").removeClass('selected');		
		$(this).addClass('selected');
	});
    } );
</script>
@endsection