@extends('layouts.app')
@section('title', __('tracker::lang.Device'))
@section('content')
@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <style>
        #map {
            height: 500px; /* Adjust as needed */
            width: 100%;
        }
    </style>
@endsection
@include('tracker::layouts.nav')
<!-- Content Header (Page header) -->
<section class="content-header no-print">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
    	@lang('tracker::lang.Device')
    </h1>
</section>
<!-- Main content -->
<section class="content no-print">
    @component('components.widget', ['title' => __('tracker::lang.Device List'), 'icon' => '<i class="ion ion-clipboard"></i>', 'class' => 'box-solid'])
		@slot('tool')
		<div class="box-tools">
			<button type="button" class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full pull-right btn-modal"
				data-href="{{route('device.create')}}" 
				data-container="#action_modal">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
					stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
					class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
					<path d="M12 5l0 14" />
					<path d="M5 12l14 0" />
				</svg> @lang( 'messages.add' )
			</button>
		</div>
		@endslot
		<div class="table-responsive">
			<table class="table table-bordered table-striped" id="task_table">
				<thead>
					<tr>
						<th>@lang('tracker::lang.Sales Person')</th>
						<th>@lang('tracker::lang.Name')</th>
						<th>@lang('tracker::lang.mobile')</th>
						<th>@lang('tracker::lang.Model')</th>
						<!-- <th>@lang('tracker::lang.Vehicle')</th> -->
						<th>@lang('tracker::lang.Last Connection')</th>
						<th>@lang('tracker::lang.Enabled')</th>
						<!-- <th>@lang('tracker::lang.Shared')</th> -->
						<!-- <th>@lang('tracker::lang.Messages')</th> -->
						<th>@lang('tracker::lang.Action')</th>
					</tr>
				</thead>
			</table>
		</div>
	@endcomponent
</section>

<div class="modal fade" id="action_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">

@stop
@section('javascript')
	<script type="text/javascript">
		$(document).ready(function(){
			setTimeout(function(){
				task_table = $('#task_table').DataTable({
					processing: true,
					serverSide: true,
					ajax: {
						url: "{{ route('device.index') }}",
					},
					columnDefs: [
						{ targets: [3, 4], orderable: false, searchable: false },
					],
					columns: [
						{ data: 'salesperson', name: 'salesperson'},
						{ data: 'name', name: 'name'},
						{ data: 'phone_number', name: 'phone_number'},
						{ data: 'model', name: 'model'},
						// { data: 'vehicle', name: 'vehicle'},
						{ data: 'connected_at', name: 'connected_at'},
						{ data: 'enabled', name: 'enabled'},
						// { data: 'messages', name: 'messages'},
						{ data: 'action', name: 'action'},
					],
				});
			}, 500);

			//delete a device
			$(document).on('click', '.action_delete', function(e){
				e.preventDefault();
				var url = $(this).data('href');
				swal({
				title: LANG.sure,
				icon: "warning",
				buttons: true,
				dangerMode: true,
				}).then((confirmed) => {
					if (confirmed) {
						$.ajax({
							method: "DELETE",
							url: url,
							dataType: "json",
							success: function(result){
								if(result.success == true){
									toastr.success(result.msg);
									task_table.ajax.reload();
								} else {
									toastr.error(result.msg);
								}
							}
						});
					}	
				});
			});

			// actions a device
			$(document).on('click', '#actione', function(e) {
				e.preventDefault();
				var id = $(this).data('id');
				var action = $(this).data('status');
			
				$.ajax({
					method: "POST",
					url: "{{ route('device.actions') }}",
					dataType: 'html',
					data: {id,action},
					success: function(result) {
						$('.'+action+id).html(result);
						toastr.success('success');
						task_table.ajax.reload();
					},
				});
			});
			
		});
	</script>
@endsection