@extends('layouts.portal.app')
@section('content')
<script type="text/javascript" src="{{ url('custom/js/jquery-3.3.1.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url('custom/smart-search/jquery-ui.min.css') }}">

<div class="content-wrapper">
	<div class="container-xxl flex-grow-1 container-p-y">
		<div class="card {{ session('dark_mode') ? 'dark-mode' : '' }}">
			<h4 class="breadcrumb ml-3"> <span class="text-muted fw-light breadcrumb-link"> Home /</span> Tickets - {{ number_format($tickets->total()) }} records fetched </h4>

			@if(Session::has('errorResponse')) 
			<h6 class="row"> 
				<div class="col-md-12 temporary-alert">
					<div class="alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
				</div>
			</h6>
			@endif

			<div class="card-header d-flex border-top rounded-0 flex-wrap py-2">
				<label> 
					<input type="text" class="keyword form-control" placeholder="Search Ticket"> 
					<input type="hidden" name="ticket_id" class="ticket-id">
				</label>

				<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
					<a href="javascript:;" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light create-ticket disabled-btn" tabindex="0" aria-controls="DataTables_Table_0" type="button"><span><i class="ti ti-plus me-0 me-sm-1 ti-xs"></i> <span class="d-none d-sm-inline-block"> Add </span> Ticket </span></a> 
				</div>
			</div>

			<div class="card-datatable table-responsive text-nowrap">
				<table class="table">
					<thead class="border-top">
						<tr>
							<th> # </th>
							<th> Issue <br> Submitted By </th>
							<th> Company <br> Router</th>
							<th> Stage <br> Status </th>
							<th> Actions </th>
						</tr>
					</thead>

					<tbody>
						@foreach($tickets as $ticket)
						<tr>
							<td><strong><a href="#" class="view-ticket{{ $ticket->id }} text-success" data-id="{{ $ticket->id }}"> {{ $ticket->ref_no }} </a></strong>
							</td>

							<td> {{ $ticket->issue_title }} <br>
								<small class="text-success"> 👤 <i> By: {{ $ticket->user->username }} </i></small>
								@if($ticket->reminder)<br> 
								<small><i class="ti ti-alarm"></i> {{ \Carbon\Carbon::parse($ticket->reminder)->format('l, d-M-Y H:i') }} </small>@endif
							</td>

							<td><i class="ti ti-building-bank"></i> {{ $ticket->company->name }} <br>
								<small class="text-success"><i class="ti ti-router"></i> {{ $ticket->router->name ?? 'N/A' }} </small> 
							</td>

							<td> Stage: {{ $ticket->stage }} ~ @if($ticket->status == 1) <span class="text-success"> Active <i class="ti ti-circle-check"></i> </span> @else <span class="text-warning"> Inactive <i class="ti ti-circle-x"></i> </span> @endif <br>
								
								@if($ticket->stage == 'In Progress')
								<small class="text-success"> Updated: {{ $ticket->updated_at->format('Y-M-d H:i:s') }} </small>

								@elseif($ticket->stage == 'Resolved')
								<small class="text-success"> Resolved On: {{ $ticket->updated_at->format('Y-M-d H:i:s') }} </small>

								@elseif($ticket->stage == 'Closed')
								<small class="text-warning"> Closed On: {{ $ticket->updated_at->format('Y-M-d H:i:s') }} </small>
								@endif
							</td>

							<td> 
								@if($ticket->stage == 'Open')
								<a href="{{ $ticket->id }}" class="progress-ticket text-success disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Mark Ticket In Progress"><i class="ti ti-progress-check"></i></a>

								@elseif($ticket->stage == 'In Progress')
								<a href="{{ $ticket->id }}" class="resolve-ticket text-success disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Mark Ticket Resolved"><i class="ti ti-help-circle"></i></a>

								@elseif($ticket->stage == 'Resolved')
								<a href="{{ $ticket->id }}" class="close-ticket text-success disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Mark Ticket Closed"><i class="ti ti-lock-check"></i></a>
								
								@else

								@endif

								@if($ticket->stage !== 'Closed')
								<a href="{{ $ticket->id }}" issue_title="{{ $ticket->issue_title }}" description="{{ $ticket->description }}" reminder="{{ $ticket->reminder }}" class="edit-ticket text-success disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit ticket"> <i class="ti ti-edit"></i> </a>

								@if($ticket->status == 0)
								<a href="{{ $ticket->id }}" class="activate-ticket text-primary disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Activate ticket"> <i class="ti ti-check"></i> </a>
								@else
								<a href="{{ $ticket->id }}" class="deactivate-ticket text-warning disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Deactivate ticket"> <i class="ti ti-x"></i> </a>
								@endif

								<a href="{{ $ticket->id }}" class="delete-ticket text-danger disabled-btn me-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete ticket"> <i class="ti ti-trash"></i> </a>
								@else
								<span class="badge bg-warning"> Closed </span>
								@endif
							</td>
						</tr>

						@include('portal.tickets.view')

						<script type="text/javascript">
							document.addEventListener('DOMContentLoaded', function() {
								$('.view-ticket{{ $ticket->id }}').click(function(e) {
									e.preventDefault();

									$('#view-ticket{{ $ticket->id }}').offcanvas('show');
								});
							});
						</script>
						@endforeach
					</tbody>
				</table>

				{{ $tickets->render() }}

			</div>
		</div>
	</div>
</div>

@include('portal.tickets.create')
<script type="text/javascript" src="{{ url('custom/tickets/create.js') }}"></script>

@include('portal.tickets.edit')
<script type="text/javascript" src="{{ url('custom/tickets/edit.js') }}"></script>

@include('portal.tickets.activate')
<script type="text/javascript" src="{{ url('custom/tickets/activate.js') }}"></script>

@include('portal.tickets.deactivate')
<script type="text/javascript" src="{{ url('custom/tickets/deactivate.js') }}"></script>

@include('portal.tickets.progress')
<script type="text/javascript" src="{{ url('custom/tickets/progress.js') }}"></script>

@include('portal.tickets.resolve')
<script type="text/javascript" src="{{ url('custom/tickets/resolve.js') }}"></script>

@include('portal.tickets.close')
<script type="text/javascript" src="{{ url('custom/tickets/close.js') }}"></script>

@include('portal.tickets.delete')
<script type="text/javascript" src="{{ url('custom/tickets/delete.js') }}"></script>

<script src="{{ url('custom/smart-search/jquery-ui.min.js') }}" type="text/javascript"></script>

<script type="text/javascript">
	(function($) 
	{
		var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

		$( ".keyword" ).autocomplete({
			source: function(request, response) 
			{
				$.ajax({
					url:"{{ url('smartly-search-tickets') }}",
					type: 'post',
					dataType: "json",
					data: {
						_token: CSRF_TOKEN,
						keyword: request.term
					},

					success: function(data) 
					{
						response(data);
					}
				});
			},

			select: function (event, ui) 
			{
				var app_url = $('#app_url').val();

				window.location.href = ""+app_url+"found-tickets/"+ui.item.ticket_id+"";
			}
		});
	})(jQuery);
</script>
@endsection