@extends('layouts.admin')

@section('title' , 'Location Logs')

@section('breadcrumb-item')
    <li class="breadcrumb-item active">Action Logs</li>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Location Logs</p>
        </div>
 
        <div class="card-body" style="overflow-x: auto">
            <form action="{{ route('admin.location.search') }}" method="POST">
                @csrf
            <div class="row">
                <div class="col-3">
                    <div class="form-group">
                        <label>Employees</label>
                        <select class="form-control js-example-theme-multiple" name="employee_ids[]" multiple>
                            @foreach(_employees() as $employee)
                                <option value="{{ $employee->id }}"
                                    {{ isset($employee_ids) && in_array($employee->id, $employee_ids) ? 'selected' : '' }}>
                                    {{ $employee->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label>Report Type</label>
                        <select name="status" class="form-control ">
                            @foreach($statuses as $key => $value)
                                <option value="{{ $value }}"
                                    {{ isset($status) ? $status == $value ? 'selected' : '' : '' }}>
                                    {{ $key }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label>Start Date</label>
                        <input class="datepicker1" name="start_date" value="{{ request()->start_date ?? date('Y-m-d') }}" />
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <label>End Date</label>
                        <input id="datepicker2" name="end_date" value="{{ request()->end_date ?? date('Y-m-d') }}" />
                    </div>
                </div>
            </div>
    
          @if(isset($locations))            
                <div class="row">
                    <div class="col-12">
                        <div style="margin-top: 30px; text-align: center" class="form-group">
                            <button class="btn btn-success" type="submit" onclick="showMarkersOnMap()"><i class="fa fa-search"></i>
                                Search
                            </button>
                        </div>
                    </div>
                </div>
         @endif
            </form>
       
        </div>
      
        <div class="card-body" style="overflow-x:auto;">
            <div style="width: 1000px; height: 500px;" id="map"></div>
        </div>
    </div>
    <div class="card">
        <table class="table  table-hover p-2">
            <thead>
                <tr>
                    <th scope="col">Sr No:</th>
                    <th scope="col">Summary</th>
                    <th scope="col">Action</th>
                    <th scope="col">Date & Time</th>
                </tr>
            </thead>
            <tbody>
                @php 
                $index = 1;
                @endphp

            @foreach($locations as $location)
                <tr>
                    <td>{{ $index++ }}</td>
                    <td>
                    @if ($location['type'] === 'order_declined' && !empty($location['declined_order']['shop']['name']))
                        {{ $location['declined_order']['shop']['name'] }}
                    @elseif ($location['type'] === 'payment_received' && !empty($location['payment']['order']['shop']['name']))
                    {{ $location['payment']['order']['shop']['name'] }}
                    @elseif (!empty($location['order']['shop']['name']))
                        {{ $location['order']['shop']['name'] }}
                    @else
                        NULL
                    @endif
                    </td>
                    <td>{{ $location['type'] ?? 'NULL' }}</td>
                    <td>{{ isset($location['created_at']) ? date('Y-m-d h:i A', strtotime($location['created_at'])) : 'NULL' }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection

@section('scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvFONX7Ym69kY4YLGPsYI_Ms6GcOLujMI&libraries=places">
    </script>

    <script>

    $(document).ready(function() {
    $('.js-example-theme-multiple').select2({
    theme: 'classic',

    });

    $('.datepicker1').datepicker({
    format: 'yyyy-mm-dd',
    uiLibrary: 'bootstrap4',
    });

    $('#datepicker2').datepicker({
    format: 'yyyy-mm-dd',
    uiLibrary: 'bootstrap4',
    });
    });
    </script>

    <script type="text/javascript">

        const karachi = { lat: 24.946218, lng: 67.005615 };

        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 10,
            center: {lat: "24.8396255", lng: "67.1656471"},
            center: karachi
        });

        new google.maps.Marker({
            position: karachi,
            map,
            title: "karachi",
        });
       
   

        function showMarkersOnMap() {
    var locations = null;
    console.log('Data',locations);
    // Create a map object
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: { lat: parseFloat(locations[0].latitude), lng: parseFloat(locations[0].longitude)} // Set a default center if needed
    });
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();
    
    // Loop through the locations array and create a marker for each location
    for (var i = 0; i < locations.length; i++) {
        var location = locations[i];
     
        // Check if the coordinates are valid numbers
        var latitude = parseFloat(location.latitude);
      
        var longitude = parseFloat(location.longitude);
      
        if (isNaN(latitude) || isNaN(longitude)) {
            console.error('Invalid latitude or longitude values');
            continue;
        }
          function formatDateAndTime(dateTimeString) {
            try {
                var options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true };
                return new Date(dateTimeString).toLocaleDateString('en-US', options);
            } catch (error) {
                console.error('Error formatting date and time:', error);
                return 'Invalid Date';
            }
        }
        var marker = new google.maps.Marker({
            position: { lat: latitude, lng: longitude },
            map: map
        });

        bounds.extend(marker.getPosition()); // Extend the bounds to include the marker position
        
        // Show $statuses (selection) on marker
        var shop_name;
        if (location.type === 'order_declined' && location.declined_order && location.declined_order.shop && location.declined_order.shop.name) {
            shop_name = location.declined_order.shop.name;
        } else if ((location.type === 'order_placed' || location.type === 'payment_received') && location.order && location.order.shop && location.order.shop.name) {
            shop_name = location.order.shop.name;
        } else {
            shop_name = 'Null';
        }

        var attemptType = location.type || 'NULL';

        var createdDateAndTime = formatDateAndTime(location.created_at);
        console.log('Created Date and Time:', createdDateAndTime);


        var indexing = i + 1;
        google.maps.event.addListener(marker, 'mouseover', (function (marker, shop_name,attemptType, createdDateAndTime, indexing) {
                return function () {
                    infowindow.setContent('<strong><b>Attempt:</b></strong> ' + attemptType + '<br>' +
                                          '<strong><b>Shop Name:</b></strong> ' + shop_name + '<br>' +
                                          '<strong><b>Date & Time:</b></strong> ' + createdDateAndTime
                                          );
                    infowindow.open(map, marker);
                };
            })(marker, shop_name,attemptType, createdDateAndTime, indexing));
   google.maps.event.addListener(marker, 'mouseout', function () {
            infowindow.close();
        });
    }
    map.fitBounds(bounds);
}

window.onload = function() {
    showMarkersOnMap();
};

    </script>

@endsection