@extends('layouts.app')
@section('title', __('gbs::lang.user_performance'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('gbs::lang.user_performance')</h1>
    </section>

    <!-- Main content -->
    <section class="content no-print">
        @component('components.filters', ['title' => __('report.filters')])
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('performance_filter_date_range', __('report.date_range') . ':') !!}
                    {!! Form::text('performance_filter_date_range', null, [
                        'placeholder' => __('lang_v1.select_a_date_range'),
                        'class' => 'form-control',
                        'readonly',
                    ]) !!}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    {!! Form::label('user_id', __('gbs::lang.users') . ':') !!}
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                        {!! Form::select('user_id', $users, null, [
                            'class' => 'form-control select2',
                            'style' => 'width:100%',
                            'placeholder' => __('messages.all'),
                            'required',
                        ]) !!}
                    </div>
                </div>
            </div>
        @endcomponent
        @component('components.widget', ['class' => 'box-primary', 'title' => __('gbs::lang.user_performance')])

            <div class="btn-group mb-3">
                <button class="btn btn-primary" onclick="showSection('table')">@lang('gbs::lang.user_performance')</button>
                <button class="btn btn-secondary" onclick="showSection('map')">@lang('gbs::lang.Map')</button>
            </div>


            <div id="table_section">
                @component('components.widget', ['class' => 'box-primary', 'title' => __('gbs::lang.user_performance')])
                    <table class="table table-bordered table-striped ajax_view hide-footer" id="perormance_report">
                        <thead>
                            <tr>
                                <th>@lang('gbs::lang.date')</th>
                                <th>@lang('gbs::lang.users')</th>
                                <th>@lang('gbs::lang.day')</th>
                                <th>@lang('gbs::lang.target_visit')</th>
                                <th>@lang('gbs::lang.actual_visit')</th>
                                <th>@lang('gbs::lang.not_actual_visit')</th>
                                <th>@lang('gbs::lang.sales_count')</th>
                                <th>@lang('gbs::lang.total_sales')</th>
                                <th>@lang('gbs::lang.total_paid')</th>
                            </tr>
                        </thead>
                    </table>
                @endcomponent
            </div>
            <div id="map_section" style="display:none;">
                @component('components.widget', ['class' => 'box-primary', 'title' => __('gbs::lang.Map')])
                     <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('customer_id', __('gbs::lang.customer_name') . ':') !!}
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    {!! Form::select('customer_id', $customers, null, [
                        'class' => 'form-control select2',
                        'style' => 'width:100%',
                        'placeholder' => __('messages.all'),
                    ]) !!}
                </div>
            </div>
        </div>
                    <div id="performance_map" style="height: 500px; width: 100%;"></div>
                @endcomponent
            </div>
        @endcomponent
    </section>

@endsection
@section('javascript')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
     

        const getVisitLocationsUrl = @json(route('get.visit.locations'));

        
          let mapInstance;

   function initVisitMap() {
    const user_id = $('#user_id').val();
    const date_range = $('#performance_filter_date_range').val();
    const customer_id = $('#customer_id').val();

    let url = getVisitLocationsUrl;
    const params = [];

    if (user_id) {
        params.push('user_id=' + encodeURIComponent(user_id));
    }
    if (customer_id) {
    params.push('customer_id=' + encodeURIComponent(customer_id));
}


      let start_date = null;
    let end_date = null;

    if ($('#performance_filter_date_range').val()) {
        const picker = $('#performance_filter_date_range').data('daterangepicker');
        start_date = picker.startDate.format('YYYY-MM-DD');
        end_date = picker.endDate.format('YYYY-MM-DD');
    }
 if (start_date && end_date) {
        params.push('start_date=' + encodeURIComponent(start_date));
        params.push('end_date=' + encodeURIComponent(end_date));
    }


    if (params.length > 0) {
        url += '?' + params.join('&');
    }

    if (mapInstance) {
        mapInstance.remove();
    }

    mapInstance = L.map('performance_map').setView([33.3152, 44.3661], 10); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
    }).addTo(mapInstance);

    fetch(url)
        .then(response => response.json())
        .then(data => {
            data.forEach(dayGroup => {
                const { date, day } = dayGroup;

                const drawPoints = (points, color, label) => {
                    points.forEach(loc => {
                        L.circleMarker([loc.latitude, loc.longitude], {
                            radius: 8,
                            color,
                            fillColor: color,
                            fillOpacity: 0.7
                        }).addTo(mapInstance).bindPopup(
                            `<b>${label}</b><br>تاريخ: ${date}<br>اليوم: ${day}<br>المندوب: ${loc.user_name}<br>العميل: ${loc.customer_name}(${loc.customer_code})`
                        );
                    });
                };

                drawPoints(dayGroup.sale_made, 'green', 'زيارة مع بيع');
                drawPoints(dayGroup.not_sale, 'orange', 'زيارة بدون بيع');
                drawPoints(dayGroup.not_visited, 'red', 'لم تتم الزيارة');
            });
        });
}


    $('#user_id,#customer_id').change(function () {
        initVisitMap();
    });

    function showSection(section) {
        document.getElementById('table_section').style.display = (section === 'table') ? 'block' : 'none';
        document.getElementById('map_section').style.display = (section === 'map') ? 'block' : 'none';

        if (section === 'map') {
            initVisitMap();
        }
    }
    </script>

    <script>
        $(document).ready(function() {
            $('#performance_filter_date_range').daterangepicker(
                dateRangeSettings,
                function(start, end) {
                    $('#performance_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end
                        .format(moment_date_format));
                    performance_table.ajax.reload();
                       initVisitMap();
                }
            );
            $('#performance_filter_date_range').on('cancel.daterangepicker', function(ev, picker) {
                $('#performance_filter_date_range').val('');
                performance_table.ajax.reload();
            });
            performance_table = $('#perormance_report').DataTable({
                processing: true,
                serverSide: true,
                scrollY: "75vh",
                scrollX: true,
                scrollCollapse: true,
                ajax: {
                    url: '/gbs/user-performance',
                    data: function(d) {

                        if ($('#performance_filter_date_range').val()) {
                            var start = $('#performance_filter_date_range').data('daterangepicker')
                                .startDate.format('YYYY-MM-DD');
                            var end = $('#performance_filter_date_range').data('daterangepicker')
                                .endDate
                                .format('YYYY-MM-DD');
                            d.start_date = start;
                            d.end_date = end;
                        }
                        if ($('#user_id').val()) {
                            d.user_id = $('#user_id').val();
                        }
                    }

                },

                columns: [{
                        data: 'visit_date',
                        name: 'visit_date'
                    },
                    {
                        data: 'user_name',
                        name: 'u.username'
                    },
                    {
                        data: 'day_of_week',
                        name: 'day_of_week'
                    },
                    {
                        data: 'expected_visits',
                        name: 'expected_visits',
                        searchable: false
                    },
                    {
                        data: 'actual_visits',
                        name: 'actual_visits',
                        searchable: false
                    },
                    {
                        data: 'missed_visits',
                        name: 'missed_visits',
                        searchable: false
                    },
                    {
                        data: 'sales_count',
                        name: 'sales_count',
                        searchable: false
                    },
                    {
                        data: 'total_sales',
                        name: 'total_sales',
                        searchable: false
                    },
                    {
                        data: 'total_paid',
                        name: 'total_paid',
                        searchable: false
                    },
                ],
                "fnDrawCallback": function(oSettings) {
                    __currency_convert_recursively($('#perormance_report'));
                },
                order: [
                    [0, 'desc']
                ],

            });

            $('#user_id').change(function() {
                performance_table.ajax.reload();
            });


        });
    </script>
@endsection