@extends('layouts.internal')

@section('content')
@section('breadcrumb')
<div class="c-subheader justify-content-between px-3">
<ol class="breadcrumb border-0 m-0 px-0 px-md-3">
<li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
<li class="breadcrumb-item " aria-current="page">Dashboard</li>
</ol>
</div>
@endsection
<div class="c-body">

	<main class="">
	<div class="container-fluid">
	  <div class="row">
	  <div class="col-sm-12">
	  <div class="sort_data">
    <label>Sort By:</label>
				<select class="form-control filters" onchange="getData()">
          <option value="7" @if($filters == 7) {{'selected'}}@endif>Last 7 days</option>
          <option value="30"  @if($filters == 30) {{'selected'}}@endif>Last 30 days</option>
          <option value="90"  @if($filters == 90) {{'selected'}}@endif>Last 90 days</option>
          <option value="all"  @if($filters == "all") {{'selected'}}@endif>All Time</option>
        </select>
		</div>
		</div>
		</div>
		</div>
		<div class="container-fluid">
		<div class="fade-in">
			<div class="row">
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-primary">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($usersCount)}}</div>
					<div>Users Created</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="userChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($resumeCount)}}</div>
					<div>Resumes</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="resumeChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($jobCount)}}</div>
					<div>Job Listings</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="jobChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($candidateCount)}}</div>
					<div>Candidate Profiles</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="candidateChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($recruiterCount)}}</div>
					<div>Recruiter Profiles</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="recruiterChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($hiringCount)}}</div>
					<div>Hiring Manager Profiles</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="hiringChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($userViewCount)}}</div>
					<div>Profile Views</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="pViewChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
			<!-- /.col-->
			<div class="col-sm-6 col-lg-3">
				<div class="card text-white bg-gradient-info">
				<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start">
					<div>
					<div class="text-value-lg">{{array_sum($emailQueCount)}}</div>
					<div>Emails Sent</div>
					</div>
				
				</div>
				<div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
					<canvas class="chart" id="emailSentChart" height="70"></canvas>
				</div>
				</div>
			</div>
			<!-- /.col-->
		
			</div>
			<!-- /.row-->
		</div>
		</div>
	</main>
</div>
@php 
$profileViewMin = (count($userViewCount) > 0 ? min($userViewCount) - 10 : 0 );
$profileViewMax = (count($userViewCount) > 0 ? max($userViewCount) + 10 : 0 );
$jobCountMin = (count($jobCount) > 0 ? min($jobCount) - 10 : 0 );
$jobCountMax = (count($jobCount) > 0 ? max($jobCount) + 10 : 0 );
$usersCountMin = (count($usersCount) > 0 ? min($usersCount) - 10 : 0 );
$usersCountMax = (count($usersCount) > 0 ? max($usersCount) + 10 : 0 );
$resumeCountMin = (count($resumeCount) > 0 ? min($resumeCount) - 10 : 0 );
$resumeCountMax = (count($resumeCount) > 0 ? max($resumeCount) + 10 : 0 );
$candidateCountMin = (count($candidateCount) > 0 ? min($candidateCount) - 10 : 0 );
$candidateCountMax = (count($candidateCount) > 0 ? max($candidateCount) + 10: 0 );
$recruiterCountMin = (count($recruiterCount) > 0 ? min($recruiterCount) - 10 : 0 );
$recruiterCountMax = (count($recruiterCount) > 0 ? max($recruiterCount) + 10 : 0 );
$hiringCountMin = (count($hiringCount) > 0 ? min($hiringCount) - 10 : 0 );
$hiringCountMax = (count($hiringCount) > 0 ? max($hiringCount) + 10 : 0 );
$emailQueCountMin = (count($emailQueCount) > 0 ? min($emailQueCount) - 10 : 0 );
$emailQueCountMax = (count($emailQueCount) > 0 ? max($emailQueCount) + 10 : 0 );

@endphp
      @section('css')
	<link href="{{ asset('css/coreui-chartjs.css') }}" rel="stylesheet">


@endsection
      @section('script')
	<script src="{{asset('js/coreui-chartjs.bundle.js')}}"></script>
	<script src="{{asset('js/coreui-utils.js')}}"></script>
	<script src="{{asset('js/main.js')}}"></script>
<script>
var userChart = new Chart(document.getElementById('userChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
		  min: ,
          max:        }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 

var resumeChart = new Chart(document.getElementById('resumeChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
		  display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 
var jobChart = new Chart(document.getElementById('jobChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
		  display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 

var candidateChart = new Chart(document.getElementById('candidateChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 
var recruiterChart = new Chart(document.getElementById('recruiterChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 
var hiringChart = new Chart(document.getElementById('hiringChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 
var pViewChart = new Chart(document.getElementById('pViewChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
		  display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 
var emailSentChart = new Chart(document.getElementById('emailSentChart'), {
  type: 'line',
  data: {
    labels: null,
    datasets: [{
      label: false,
      backgroundColor: 'transparent',
      borderColor: 'rgba(255,255,255,.55)',
      pointBackgroundColor: false,
      data: null    }]
  },
  options: {
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: 'transparent',
          zeroLineColor: 'transparent'
        },
        ticks: {
          fontSize: 2,
          fontColor: 'transparent'
        }
      }],
      yAxes: [{
        display: false,
        ticks: {
          display: false,
		  min: ,
          max:         }
      }]
    },
    elements: {
      line: {
        borderWidth: 1
      },
      point: {
        radius: 4,
        hitRadius: 10,
        hoverRadius: 4
      }
    }
  }
}); 
function getData(){
  window.location.href="{{url('i/dashboard')}}/"+$('.filters').val()
}
</script>

@endsection
@endsection