@extends('layouts.app')
@section('title', __('tracker::lang.Trip'))
@section('content')
@section('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
@endsection
@include('tracker::layouts.nav')
<section class="content-header no-print">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
    	@lang('tracker::lang.visits')
    </h1>
</section>
<section class="content no-print">
	@component('components.filters', ['title' => __('tracker::lang.filters'), 'class' => 'box-solid'])
		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('user_id', __('tracker::lang.Sales Person') . ':') !!}
				{!! Form::select('user_id', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%']) !!}
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('customer_id', __('tracker::lang.customer') . ':') !!}
				{!! Form::select('customer_id', $customers, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang.all')]) !!}
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('date_range_filter', __('report.date_range') . ':') !!}
				{!! Form::text('date_range_filter', null, 
					['placeholder' => __('lang_v1.select_a_date_range'), 
					'class' => 'form-control', 'readonly', 'id' => 'date_range_filter']) !!}
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('tracker_tripschedule_id', __('tracker::lang.Sales Routes') . ':') !!}
				{!! Form::select('tracker_tripschedule_id', $salesRoutes, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang.all')]) !!}
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('stage_id', __('tracker::lang.stage') . ':') !!}
				{!! Form::select('stage_id', $stages, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang.all')]) !!}
			</div>
		</div>

		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('state_id', __('business.state') . ':' ) !!}
				<div class="input-group">
					<span class="input-group-addon">
						<i class="fa fa-map-marker"></i>
					</span>
					{!! Form::select('state_id', statesDefault()??[], null , ['class' => 'form-control select2', 'id' => 'state_id', 'placeholder' => __('lang.selected'), 'style' => 'width: 100%;']); !!}
				</div>
			</div>
		</div>

		<div class="col-md-4">
			<div class="form-group">
				{!! Form::label('city_id', __('business.city') . ':' ) !!}
				<div class="input-group">
					<span class="input-group-addon">
						<i class="fa fa-map-marker"></i>
					</span>
					{!! Form::select('city_id', [], null , ['class' => 'form-control select2', 'id' => 'city_id', 'placeholder' => __('lang.selected'), 'style' => 'width: 100%;']); !!}
				</div>
			</div>
		</div>
	@endcomponent

    @component('components.widget', ['title' => __('tracker::lang.All Visits'), 'icon' => '<i class="ion ion-clipboard"></i>', 'class' => 'box-solid'])
		@slot('tool')
		<div class="box-tools">
			<button type="button" hidden 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('trip.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"> -->
			<table class="table table-bordered table-striped ajax_view hide-footer" id="task_table">
				<thead>
					<tr>
            			<th><input type="checkbox" id="select-all-row" data-table-id="task_table"></th>
						<th>@lang('tracker::lang.code')</th>
						<th>@lang('tracker::lang.Name')</th>
						<th>@lang('tracker::lang.Customer')</th>
						<th>@lang('tracker::lang.Sales Person')</th>
						<th>@lang('tracker::lang.Status')</th>
						<th>@lang('tracker::lang.Start')</th>
						<th>@lang('tracker::lang.End')</th>
						<th>@lang('tracker::lang.Duration')</th>
						<th>@lang('tracker::lang.notes_user')</th>
						<th>@lang('tracker::lang.notes_sales_person')</th>
						<th>@lang('business.city')</th>
						<th>@lang('business.state')</th>
						<th>@lang('tracker::lang.Action')</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="7">
							<div style="display: flex; width: 100%;">
								{!! Form::open(['url' => action([\Modules\Tracker\Http\Controllers\TripController::class, 'massDestroy']), 'method' => 'post', 'id' => 'mass_delete_form' ]) !!}
								{!! Form::hidden('selected_rows', null, ['id' => 'selected_rows']); !!}
								{!! Form::submit(__('lang_v1.delete_selected'), array('class' => 'tw-dw-btn tw-dw-btn-outline tw-dw-btn-xs tw-dw-btn-error', 'id' => 'delete-selected')) !!}
								{!! Form::close() !!}

								<a class="tw-dw-btn tw-dw-btn-outline tw-dw-btn-xs tw-dw-btn-info" id="edit-selected"
									data-href="{{ action([\Modules\Tracker\Http\Controllers\TripController::class, 'editAllSelected']) }}"
									data-container=".trip_modal" data-mass="@lang('lang_v1.no_row_selected')">
									@lang('lang.update_all_selected')
								</a>
							</div>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	@endcomponent
</section>

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

@stop

@section('javascript')
<script src="{{ asset('modules/locations/js/app.js?v=' . time()) }}"></script>

<script type="text/javascript">
	$(document).ready(function(){
        dateRangeSettings.startDate = moment('{{$start_date}}');
        dateRangeSettings.endDate = moment('{{$end_date}}');

        $('#date_range_filter').daterangepicker(
            dateRangeSettings,
            function (start, end) {
                $('#date_range_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                task_table.ajax.reload();
            }
        );
        $('#date_range_filter').on('cancel.daterangepicker', function(ev, picker) {
            $('#date_range_filter').val('');
            task_table.ajax.reload();
        });

    });

	$(document).ready(function(){
        setTimeout(function(){
            task_table = $('#task_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('trip.index') }}",
					data: function(d) {
						if ($('#date_range_filter').val()) {
                            var start = $('#date_range_filter').data('daterangepicker')
                                .startDate.format('YYYY-MM-DD');
                            var end = $('#date_range_filter').data('daterangepicker').endDate
                                .format('YYYY-MM-DD');
                            d.start_date = start;
                            d.end_date = end;
                        }

					 	d.user_id = $('#user_id').val();
					 	d.customer_id = $('#customer_id').val();
					 	d.tracker_tripschedule_id = $('#tracker_tripschedule_id').val();
					 	d.stage_id = $('#stage_id').val();
					 	d.status = $('#status').val();
					 	d.state_id = $('#state_id').val();
					 	d.city_id = $('#city_id').val();
					}
                },
                columnDefs: [
                    { targets: [0], orderable: false, searchable: false},
                ],
                columns: [
					{ data: 'mass_delete', name: 'mass_delete'},
					{ data: 'code', name: 'code', searchable: true, orderable: false},
					{ data: 'schedule', name: 'schedule', searchable: true, orderable: false},
					{ data: 'customer', name: 'customer', searchable: true, orderable: false},
                    { data: 'user', name: 'user', searchable: true, orderable: false},
                    { data: 'stage', name: 'stage'},
                    { data: 'start', name: 'start'},
                    { data: 'end', name: 'end'},
                    { data: 'duration', name: 'duration'},
                    { data: 'note_user', name: 'note_user'},
                    { data: 'note', name: 'note'},
                    { data: 'city', name: 'city'},
                    { data: 'state', name: 'note'},
                    { data: 'action', name: 'action'},
                ],
            });
        }, 500);

		$(document).on('change', '#user_id, #customer_id, #tracker_tripschedule_id, #stage_id, #status, #state_id, #city_id', function(){
			task_table.ajax.reload();
		});

		$(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);
							}
						}
					});
				   }	
			  });
		});

	});
	
	$(document).on('click', '#delete-selected', function(e) {
		e.preventDefault();
		var selected_rows = getSelectedRows();

		if (selected_rows.length > 0) {
			$('input#selected_rows').val(selected_rows);
			swal({
				title: LANG.sure,
				icon: "warning",
				buttons: true,
				dangerMode: true,
			}).then((willDelete) => {
				if (willDelete) {
					$('form#mass_delete_form').submit();
				}
			});
		} else {
			$('input#selected_rows').val('');
			swal('@lang('lang_v1.no_row_selected')');
		}
	});

	$(document).on('shown.bs.modal', '.trip_modal', function(e) {
		initAutocomplete();
	});
</script>
@endsection