@extends('layouts.app')
@section('title', __('tracker::lang.trips_report'))

@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 no-print">
    @component('components.filters', ['title' => __('tracker::lang.filters'), 'class' => 'box-solid'])
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('view_type', __('tracker::lang.group_by') . ' (' . __('tracker::lang.customer') . '/' . __('tracker::lang.Sales Person') . '):') !!}
                {!! Form::select('view_type',
                    ['customers' => __('tracker::lang.customer'), 'users' => __('tracker::lang.Sales Person')],
                    'customers',
                    ['class' => 'form-control select2', 'style' => 'width:100%', 'id' => 'view_type']) !!}
            </div>
        </div>

        <div class="col-md-3">
            <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%', 'placeholder' => __('lang.all'), 'id' => 'user_id']) !!}
            </div>
        </div>

        <div class="col-md-3">
            <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'), 'id' => 'customer_id']) !!}
            </div>
        </div>
		
		<div class="col-md-3">
			<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-3">
            <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'), 'id' => 'stage_id']) !!}
            </div>
        </div>

		<div class="col-md-3">
			<div class="form-group">
				{!! Form::label('status', __('lang.status') . ':') !!}
				{!! Form::select('status', $status, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang.all')]) !!}
			</div>
		</div>

        <div class="col-md-3">
            <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>
    @endcomponent

    @component('components.widget', ['title' => __('tracker::lang.trips_report'), 'icon' => '<i class="ion ion-clipboard"></i>', 'class' => 'box-solid'])
        <div class="table-responsive">
            <table class="table table-bordered table-striped ajax_view hide-footer" id="task_table">
                <thead>
                    <tr>
                        <th>@lang('tracker::lang.group_by') (@lang('tracker::lang.customer') / @lang('tracker::lang.Sales Person'))</th>
                        <th>@lang('tracker::lang.stage')</th>
                        <th>@lang('tracker::lang.count')</th>
                    </tr>
                </thead>
                <tfoot></tfoot>
            </table>
        </div>
    @endcomponent
</section>

@stop

@section('javascript')
<script type="text/javascript">
    let task_table;

    $(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();
            }
        ).on('cancel.daterangepicker', function () {
            $('#date_range_filter').val('');
            task_table.ajax.reload();
        });

        setTimeout(function(){
            task_table = $('#task_table').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                ordering: false,
                ajax: {
                    url: "{{ route('tripReport.index') }}",
                    data: function (d) {
                        if ($('#date_range_filter').val()) {
                            var drp = $('#date_range_filter').data('daterangepicker');
                            d.start_date = drp.startDate.format('YYYY-MM-DD');
                            d.end_date   = drp.endDate.format('YYYY-MM-DD');
                        }
                        d.view_type               = $('#view_type').val();
                        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();
                    }
                },
                columns: [
                    { data: 'entity',      name: 'entity',      },
                    { data: 'stage_name',  name: 'stage_name',  },
                    { data: 'total_visits',name: 'total_visits',}
                ]
            });
        }, 300);

        // Reload عند تغيير أي فلتر
        $(document).on('change', '#view_type, #user_id, #customer_id, #tracker_tripschedule_id, #stage_id, #status', function(){
            task_table.ajax.reload();
        });
    });

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