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

@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.shifts_report')</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('shifts_filter_date_range', __('report.date_range') . ':') !!}
                {!! Form::text('shifts_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.shifts_report')])
        
    <div class="btn-group mb-3">
        <button class="btn btn-primary" onclick="showShiftsSection('table')">@lang('gbs::lang.shifts_report')</button>
        <button class="btn btn-secondary" onclick="showShiftsSection('map')">@lang('gbs::lang.Map')</button>
    </div>

 
    <div id="shifts_table_section">


        <div class="box-body">
            <table class="table table-bordered table-striped ajax_view hide-footer" id="shifts_report">
                <thead>
                    <tr>
                        <th>@lang('gbs::lang.users')</th>
                        <th>@lang('gbs::lang.day')</th>
                        <th>@lang('gbs::lang.date')</th>
                        <th>@lang('gbs::lang.start_time')</th>
                        <th>@lang('gbs::lang.end_time')</th>
                        <th>@lang('gbs::lang.start_location')</th>
                        <th>@lang('gbs::lang.end_location')</th>
                        <th>@lang('gbs::lang.working_hours')</th>
                        <th>@lang('gbs::lang.target_visit')</th>
                        <th>@lang('gbs::lang.actual_visit')</th>
                        <th>@lang('gbs::lang.not_actual_visit')</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    
    <div id="shifts_map_section" style="display:none;">
  

        <div class="box-body">
            <div id="shifts_map" style="height: 500px; width: 100%;"></div>
        </div>
    </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>
    $(document).ready(function() {
        $('#shifts_filter_date_range').daterangepicker(
        dateRangeSettings,
        function (start, end) {
            $('#shifts_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
            shifts_table.ajax.reload();
        }
    );
    $('#shifts_filter_date_range').on('cancel.daterangepicker', function(ev, picker) {
        $('#shifts_filter_date_range').val('');
        shifts_table.ajax.reload();
    });
    shifts_table =  $('#shifts_report').DataTable({
    processing: true,
    serverSide: true,
    
                scrollCollapse: true,
                ajax: {
        url: '/gbs/shifts-report',
        data: function (d) {
        
            if ($('#shifts_filter_date_range').val()) {
                            var start = $('#shifts_filter_date_range').data('daterangepicker')
                                .startDate.format('YYYY-MM-DD');
                            var end = $('#shifts_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: 'user_name', name: 'users.username' },
         { data: 'day_of_week', name: 'created_at' },
         { data: 'created_at', name: 'created_at' },
         { data: 'start_time', name: 'start_time' },
         { data: 'end_time', name: 'end_time' },
         { data: 'start_location', name: 'start_location' , searchable: false},
         { data: 'end_location', name: 'end_location' },
         { data: 'working_hours' },
         { data: 'expected_visits' },
         { data: 'successful_visits' },
         { data: 'missed_visits' },
   
     ],
    "fnDrawCallback": function(oSettings) {
                    __currency_convert_recursively($('#shifts_report'));
                },
    order: [[0, 'desc']],
   
});

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


});
</script>
<script>
    // function showShiftsSection(type) {
    //     if (type === 'table') {
    //         $('#shifts_table_section').show();
    //         $('#shifts_map_section').hide();
    //     } else {
    //         $('#shifts_table_section').hide();
    //         $('#shifts_map_section').show();
     
    //         loadShiftsMapData();
    //     }
    // }

    // function loadShiftsMapData() {
    //     const user_id = $('#user_id').val();
    //     const range = $('#shifts_filter_date_range').data('daterangepicker');
    //     const start_date = range ? range.startDate.format('YYYY-MM-DD') : null;
    //     const end_date = range ? range.endDate.format('YYYY-MM-DD') : null;

    //     $.ajax({
    //         url: '/gbs/get-shifts-map',
    //         method: 'GET',
    //         data: {
    //             user_id,
    //             start_date,
    //             end_date
    //         },
    //         success: function (data) {
    //             initShiftsMap(data); 
    //         },
    //         error: function (err) {
    //             console.error(err);
    //         }
    //     });
    // }
    //  let shiftsMap;
    // let shiftsMarkersLayer;

    // function initShiftsMap(data) {
    //     if (!shiftsMap) {
    //         shiftsMap = L.map('shifts_map').setView([33.3152, 44.3661], 10); 
    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //     maxZoom: 18,
    //         }).addTo(shiftsMap);
    //     }

    //     if (shiftsMarkersLayer) {
    //         shiftsMap.removeLayer(shiftsMarkersLayer);
    //     }

    //     shiftsMarkersLayer = L.layerGroup().addTo(shiftsMap);

    //     data.forEach(shift => {
    //         // Marker for start
    //         if (shift.start_latitude && shift.start_longitude) {
              
    //             const startPopup = `
    //                 <b>مندوب:</b> ${shift.user_name}<br>
    //                 <b>اليوم:</b> ${shift.day}<br>
    //                 <b>التاريخ:</b> ${shift.date}<br>
    //                 <b>وقت البدء:</b> ${shift.start_time}<br>
    //                 <b>زيارات:</b> الكلية ${shift.total_visits}, ناجحة ${shift.successful_visits}, فاشلة ${shift.failed_visits}
    //             `;
    //             const startMarker = L.marker([shift.start_latitude, shift.start_longitude], {
    //                 icon: L.icon({
    //                     iconUrl: '/path-to/green-marker.png',
    //                     iconSize: [25, 41],
    //                     iconAnchor: [12, 41],
    //                     popupAnchor: [0, -30],
    //                 })
    //             }).bindPopup(startPopup);
    //             shiftsMarkersLayer.addLayer(startMarker);
    //         }

    //         // Marker for end
    //         if (shift.end_latitude && shift.end_longitude) {
    //             const endPopup = `
    //                 <b>مندوب:</b> ${shift.user_name}<br>
    //                 <b>اليوم:</b> ${shift.day}<br>
    //                 <b>التاريخ:</b> ${shift.date}<br>
    //                 <b>وقت النهاية:</b> ${shift.end_time}<br>
    //                 <b>زيارات:</b> الكلية ${shift.total_visits}, ناجحة ${shift.successful_visits}, فاشلة ${shift.failed_visits}
    //             `;
    //             const endMarker = L.marker([shift.end_latitude, shift.end_longitude], {
    //                 icon: L.icon({
    //                     iconUrl: '/path-to/red-marker.png',
    //                     iconSize: [25, 41],
    //                     iconAnchor: [12, 41],
    //                     popupAnchor: [0, -30],
    //                 })
    //             }).bindPopup(endPopup);
    //             shiftsMarkersLayer.addLayer(endMarker);
    //         }
    //     });

    //     // Zoom to all markers
    //     const allCoords = data.flatMap(shift => {
    //         const coords = [];
    //         if (shift.start_latitude && shift.start_longitude) {
    //             coords.push([shift.start_latitude, shift.start_longitude]);
    //         }
    //         if (shift.end_latitude && shift.end_longitude) {
    //             coords.push([shift.end_latitude, shift.end_longitude]);
    //         }
    //         return coords;
    //     });

    //     if (allCoords.length > 0) {
    //         shiftsMap.fitBounds(allCoords);
    //     }
    // }
    let shiftsMap;
let shiftsMarkersLayer;

function showShiftsSection(type) {
    if (type === 'table') {
        $('#shifts_table_section').show();
        $('#shifts_map_section').hide();
    } else {
        $('#shifts_table_section').hide();
        $('#shifts_map_section').show();
        loadShiftsMapData();
    }
}

$('#user_id, #shifts_filter_date_range').on('change', function () {
    if ($('#shifts_map_section').is(':visible')) {
        loadShiftsMapData();
    }
});

function loadShiftsMapData() {
    const user_id = $('#user_id').val();
    const range = $('#shifts_filter_date_range').data('daterangepicker');
    const start_date = range ? range.startDate.format('YYYY-MM-DD') : null;
    const end_date = range ? range.endDate.format('YYYY-MM-DD') : null;

    $.ajax({
        url: '/gbs/get-shifts-map',
        method: 'GET',
        data: {
            user_id,
            start_date,
            end_date
        },
        success: function (data) {
            initShiftsMap(data);
        },
        error: function (err) {
            console.error('Error fetching map data:', err);
        }
    });
}
function initShiftsMap(data) {
    if (!shiftsMap) {
        shiftsMap = L.map('shifts_map').setView([33.3152, 44.3661], 10);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(shiftsMap);
    }

    if (shiftsMarkersLayer) {
        shiftsMap.removeLayer(shiftsMarkersLayer);
    }

    shiftsMarkersLayer = L.layerGroup().addTo(shiftsMap);

    const allCoords = [];

    data.forEach(shift => {
        const basePopup = `
            <b>مندوب:</b> ${shift.user_name}<br>
            <b>اليوم:</b> ${shift.day}<br>
            <b>التاريخ:</b> ${shift.date}<br>
            <b>الزيارات:</b> الكلية ${shift.expected_visits}, ناجحة ${shift.successful_visits}, فاشلة ${shift.missed_visits}
        `;

     
        if (shift.start_latitude && shift.start_longitude) {
            const popupContent = basePopup + `<br><b>وقت البدء:</b> ${shift.start_time}`;
            const startCircle = L.circleMarker([shift.start_latitude, shift.start_longitude], {
                radius: 10,
                color: 'green',
                fillColor: 'green',
                fillOpacity: 0.8
            }).bindPopup(popupContent);

            shiftsMarkersLayer.addLayer(startCircle);
            allCoords.push([shift.start_latitude, shift.start_longitude]);
        }

    
        if (shift.end_latitude && shift.end_longitude) {
            const popupContent = basePopup + `<br><b>وقت النهاية:</b> ${shift.end_time}`;
            const endCircle = L.circleMarker([shift.end_latitude, shift.end_longitude], {
                radius: 10,
                color: 'red',
                fillColor: 'red',
                fillOpacity: 0.8
            }).bindPopup(popupContent);

            shiftsMarkersLayer.addLayer(endCircle);
            allCoords.push([shift.end_latitude, shift.end_longitude]);
        }
    });

    if (allCoords.length > 0) {
        shiftsMap.fitBounds(allCoords, { padding: [50, 50] });
    }
}


</script>

@endsection