@extends('layouts.admin')
@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-sm-12">
            <div class="home-tab">
                <div class="row">
                    <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-1">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-1 rounded">
                                            <i class="mdi mdi-account-group"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        <p class="text-muted mb-0">Total Jobs</p>
                                        <h4 class="mt-1 mb-0">{{$jobs}}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-2">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-2 rounded">
                                            <i class="mdi mdi-account-multiple font-size-24"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        <p class="text-muted mb-0">Pending Jobs</p>
                                        <h4 class="mt-1 mb-0">{{$pending}}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-3">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-3 rounded">
                                            <i class="mdi mdi-store font-size-24"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        <p class="text-muted mb-0">Approved Jobs</p>
                                        <h4 class="mt-1 mb-0">{{$approve}}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-4">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-4 rounded">
                                            <i class="mdi mdi-message-alert"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        <p class="text-muted mb-0">Rejected Jobs</p>
                                        <h4 class="mt-1 mb-0">{{$rejected}}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                            <div class="card rounded-1">
                                <div class="card-body card-2">
                                    <div class="d-flex">
                                        <div class="avatar">
                                            <span class="avatar-title bg-soft-card-2 rounded">
                                                <i class="mdi mdi-account-multiple font-size-24"></i>
                                            </span>
                                        </div>
                                        <div class="ms-4">
                                            <p class="text-muted mb-0">Job Apply</p>
                                            <h4 class="mt-1 mb-0">1</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                     <!-- <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-3">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-3 rounded">
                                            <i class="mdi mdi-briefcase"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        
                                        <p class="text-muted mb-0">Total Job Views</p>
                                        <h4 class="mt-1 mb-0">1</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-4">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-4 rounded">
                                            <i class="mdi mdi-briefcase"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        <p class="text-muted mb-0">Job Interview</p>
                                        <h4 class="mt-1 mb-0">1</h4>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                        <div class="card rounded-1">
                            <div class="card-body card-1">
                                <div class="d-flex">
                                    <div class="avatar">
                                        <span class="avatar-title bg-soft-card-1 rounded">
                                            <i class="mdi mdi-account-group"></i>
                                        </span>
                                    </div>
                                    <div class="ms-4">
                                        <p class="text-muted mb-0">Total Chat</p>
                                        <h4 class="mt-1 mb-0">1</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                 
            
                        <!-- <div class="col-lg-3 col-md-3 grid-margin stretch-card">
                            <div class="card rounded-1">
                                <div class="card-body card-2">
                                    <div class="d-flex">
                                        <div class="avatar">
                                            <span class="avatar-title bg-soft-card-2 rounded">
                                                <i class="mdi mdi-account-multiple font-size-24"></i>
                                            </span>
                                        </div>
                                        <div class="ms-4">
                                            <p class="text-muted mb-0">Job Apply</p>
                                            <h4 class="mt-1 mb-0">1</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                         </div>
                <div class="row">
                    <div class="d-flex flex-column">
                        <div class="row flex-grow">
                            <div class="col-12 grid-margin stretch-card">
                                <div class="card card-rounded">
                                    <div class="card-body">
                                        <div class="d-sm-flex justify-content-between align-items-start">
                                            <div>
                                                <h4 class="card-title card-title-dash">Jobs Overview</h4>
                                            </div>
                                            <div>
                                                <div class="dropdown">
                                                  <button class="btn btn-light dropdown-toggle toggle-dark btn-lg mb-0 me-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" fdprocessedid="5rtoq"> This Year </button>
                                                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" style="">
                                                    <a class="dropdown-item" href="{{url('admin/dashboard')}}">This Year</a>
                                                    <a class="dropdown-item" href="{{url('admin/dashboard?job=week')}}">This Week</a>
                                                  </div>
                                                </div>
                                              </div>
                                        </div>
                                      
                                        <div class="chartjs-bar-wrapper mt-3"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                                            <canvas id="marketingOverview" width="1418" height="100" style="display: block; height: 150px; width: 2127px;" class="chartjs-render-monitor"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
               <div class="row grid-margin">
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <div class="card ">
                            <div class="card-body ">
                                <h4>Latest Jobs</h4>
                              
                                <table id="example" class="table table-striped table-bordered mt-3">
                                    <thead>
                                        <tr>
                                            <th>S No.</th>
                                          
                                        <th>Title</th>
                                        <th>Job Type</th>
                                        <th>Approve Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                        @foreach($recruiters as $key=> $value)
                                        <tr>
                                       <td>{{ $key + 1 ??''}}</td>
                                       <td>{{ !empty($value->title) ? ucfirst($value->title) : '-'}}</td>
                                       <td>{{ $value->job_type=='full_time' ? 'Full Time' : ($value->job_type=='part_time' ? 'Part Time' : '')}}</td>
                                       <td>{{$value->is_approved ??''}}</td>
                                     
                                            <td class="detail_btn"><a href="{{ route('admin.jobs.show', $value->id) }}" class="vier_order_btn ad-btn btn btn-sm">Details</a></td>
                                    </tr>
                                        @endforeach
                                    
                                </table>
                            </div>
                        </div>

                    
                    </div>
                </div>
             </div>
        </div>
    </div>
</div>
<!-- content-wrapper ends -->
@endsection
 @section('js')
<script>
    var yearData = '"{!!$yearly_data!!}"';

if ($("#performaneLine").length) {
      var graphGradient = document.getElementById("performaneLine").getContext('2d');
      var graphGradient2 = document.getElementById("performaneLine").getContext('2d');
      var saleGradientBg = graphGradient.createLinearGradient(5, 0, 5, 100);
      saleGradientBg.addColorStop(0, 'rgba(26, 115, 232, 0.18)');
      saleGradientBg.addColorStop(1, 'rgba(26, 115, 232, 0.02)');
      var saleGradientBg2 = graphGradient2.createLinearGradient(100, 0, 50, 150);
      saleGradientBg2.addColorStop(0, 'rgba(0, 208, 255, 0.19)');
      saleGradientBg2.addColorStop(1, 'rgba(0, 208, 255, 0.03)');
      var salesTopData = {
          labels: [],
          datasets: [{
              label: 'This week',
              data: [""],
              backgroundColor: saleGradientBg,
              borderColor: [
                  '#1F3BB3',
              ],
              borderWidth: 1.5,
              fill: true, // 3: no fill
              pointBorderWidth: 1,
              pointRadius: [4, 4, 4, 4, 4, 4, 4],
              pointHoverRadius: [2, 2, 2, 2, 2, 2, 2],
              pointBackgroundColor: ['#1F3BB3', '#1F3BB3', '#1F3BB3', '#1F3BB3', '#1F3BB3', '#1F3BB3', '#1F3BB3'],
              pointBorderColor: ['#fff','#fff','#fff','#fff','#fff','#fff','#fff'],
          }]
      };
  
      var salesTopOptions = {
        responsive: true,
        maintainAspectRatio: false,
          scales: {
              yAxes: [{
                  gridLines: {
                      display: true,
                      drawBorder: false,
                      color:"#F0F0F0",
                      zeroLineColor: '#F0F0F0',
                  },
                  ticks: {
                    beginAtZero: false,
                    autoSkip: true,
                    maxTicksLimit: 4,
                    fontSize: 10,
                    color:"#6B778C"
                  }
              }],
              xAxes: [{
                gridLines: {
                    display: false,
                    drawBorder: false,
                },
                ticks: {
                  beginAtZero: false,
                  autoSkip: true,
                  maxTicksLimit: 7,
                  fontSize: 10,
                  color:"#6B778C"
                }
            }],
          },
          legend:false,
          legendCallback: function (chart) {
            var text = [];
            text.push('<div class="chartjs-legend"><ul>');
            for (var i = 0; i < chart.data.datasets.length; i++) {
              console.log(chart.data.datasets[i]); // see what's inside the obj.
              text.push('<li>');
              text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
              text.push(chart.data.datasets[i].label);
              text.push('</li>');
            }
            text.push('</ul></div>');
            return text.join("");
          },
          
          elements: {
              line: {
                  tension: 0.4,
              }
          },
          tooltips: {
              backgroundColor: 'rgba(31, 59, 179, 1)',
          }
      }
      var salesTop = new Chart(graphGradient, {
          type: 'line',
          data: salesTopData,
          options: salesTopOptions
      });
      document.getElementById('performance-line-legend').innerHTML = salesTop.generateLegend();
    }
var yearData = '"{!!$yearly_data!!}"';
    if ($("#marketingOverview").length) {
      var marketingOverviewChart = document.getElementById("marketingOverview").getContext('2d');
      var marketingOverviewData = {
          labels: [],
          datasets: [{
              label: 'Jobs',
              data: [""],
              backgroundColor: "#1F3BB3",
              borderColor: [
                  '#1F3BB3',
              ],
              borderWidth: 0,
              fill: true, // 3: no fill
              
          }]
      };
  
      var marketingOverviewOptions = {
        responsive: true,
        maintainAspectRatio: false,
          scales: {
              yAxes: [{
                  gridLines: {
                      display: true,
                      drawBorder: false,
                      color:"#F0F0F0",
                      zeroLineColor: '#F0F0F0',
                  },
                  ticks: {
                    beginAtZero: true,
                    autoSkip: true,
                    maxTicksLimit: 5,
                    fontSize: 10,
                    color:"#6B778C"
                  }
              }],
              xAxes: [{
                stacked: true,
                barPercentage: 0.35,
                gridLines: {
                    display: false,
                    drawBorder: false,
                },
                ticks: {
                  beginAtZero: false,
                  autoSkip: true,
                  maxTicksLimit: 12,
                  fontSize: 10,
                  color:"#6B778C"
                }
            }],
          },
          legend:false,
          legendCallback: function (chart) {
            var text = [];
            text.push('<div class="chartjs-legend"><ul>');
            for (var i = 0; i < chart.data.datasets.length; i++) {
              console.log(chart.data.datasets[i]); // see what's inside the obj.
              text.push('<li class="text-muted text-small">');
              text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
              text.push(chart.data.datasets[i].label);
              text.push('</li>');
            }
            text.push('</ul></div>');
            return text.join("");
          },
          
          elements: {
              line: {
                  tension: 0.4,
              }
          },
          tooltips: {
              backgroundColor: 'rgba(31, 59, 179, 1)',
          }
      }
      var marketingOverview = new Chart(marketingOverviewChart, {
          type: 'bar',
          data: marketingOverviewData,
          options: marketingOverviewOptions
      });
      document.getElementById('marketing-overview-legend').innerHTML = marketingOverview.generateLegend();
    }

</script>
@endsection

{{-- @endsection --}}