<?php
use WSDesk\Tickets\TicketRepository;

$repo = new TicketRepository();

$agents = $repo->getAgents();

$dates = [
	'from' => ( new \DateTime() )->modify( '-3 months' )->format( 'Y-m-d' ),
	'to'   => gmdate( 'Y-m-d' ),
];

?>
<div class="wsdesk_wrapper">
	<h1 class="wp-heading"><?php echo esc_html__( 'Reports', 'wsdesk' ); ?></h4>
	<div class="row pb-1" id="report_filters">
		<div class="col-md-3">
		<label><?php echo esc_html__( 'Ticket Date', 'wsdesk' ); ?></label>
			<label for="default_time" class='premium_update_green'><a href="https://elextensions.com/plugin/wsdesk-wordpress-support-desk-plugin/" target="_blank"><sup class="text-success">[Premium!]</sup></a></label>
			<div class="input-daterange input-group" id="datepicker">
				<input disabled type="text" class="form-control" name="created_at[from]" value="<?php echo esc_attr( $dates['from'] ); ?>" />
				<span class="input-group-addon"><?php echo esc_html__( 'to', 'wsdesk' ); ?></span>
				<input disabled type="text" class="form-control" name="created_at[to]" value="<?php echo esc_attr( $dates['to'] ); ?>" />
			</div>
		</div>
		<div class="col-md-3">
			<div class="form-group">
				<label ><?php echo esc_html__( 'Agents', 'wsdesk' ); ?></label><br />
				<select name="agents" class="selectpicker" multiple>
				<?php foreach ( $agents as $agent ) { ?>
					<option value="<?php echo esc_attr( $agent['id'] ); ?>"><?php echo esc_attr( $agent['name'] ); ?></option>
				<?php } ?>
				</select>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'Avg Time Taken to Resolve (Hrs)', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body">
					<canvas id="avg_time_taken_to_resolve"></canvas>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'No of Replies per Day', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body">
					<canvas id="no_of_replies_per_day"></canvas>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'No of Tickets per Day', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body">
					<canvas id="no_of_tickets_per_day"></canvas>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'No of Tickets per Status', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body text-center">
					<div class="row">
						<div class="col-sm-8 col-sm-offset-2">
							<canvas id="no_of_tickets_per_status" ></canvas>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'No of Tickets per Tag', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body">
					<canvas id="no_of_tickets_per_tag"></canvas>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'Avg First Reply Time By Agent (Mins)', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body">
					<canvas id="agent_avg_reply_time"></canvas>
				</div>
			</div>
		</div>
		<div class="col-sm-6 hidden">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h1 class="panel-title"><?php echo esc_html__( 'Agent Satisfication Score', 'wsdesk' ); ?></h1>
				</div>
				<div class="panel-body">
					<table id="agent_satisfication_score" class="table">
						<thead>
							<tr>
								<th><?php echo esc_html__( 'Agent', 'wsdesk' ); ?></th>
								<th><?php echo esc_html__( 'Good', 'wsdesk' ); ?></th>
								<th><?php echo esc_html__( 'Bad', 'wsdesk' ); ?></th>
								<th><?php echo esc_html__( 'Total', 'wsdesk' ); ?></th>
								<th><?php echo esc_html__( 'Score', 'wsdesk' ); ?></th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	(function () {
		var reports = new ReportsController();
		var created_at_from = jQuery('input[name="created_at[from]"]');
		var created_at_to = jQuery('input[name="created_at[to]"]');

		reports.init();

		setTimeout(function () {
			jQuery('.input-daterange input').datepicker({
				"dateFormat": "yy-mm-dd"
			});
			created_at_from.trigger('change')
		}, 1000);

		jQuery('#report_filters').on('change', 'input, select', function () {
			jQuery(window).trigger('wsdesk_update_report_chart', reports.getFilterData());
		});

		created_at_from.change(function () {
			var from_date = jQuery(this).datepicker('getDate');

			created_at_to.datepicker('option', 'minDate', from_date);
		});

	})();
</script>
