Edit File - File Manager

Edit File: show.blade.php

@extends('admin.layout.master')
@section('content')

<section id="multiple-column-form">
        <div class="row">
            {{-- start order details --}}
            @include('admin.assign_delegate_orders.details.main')
            {{-- end order details --}}

{{-- provider details --}}
            @include('admin.assign_delegate_orders.details.provider')
            {{-- end provider details --}}

{{-- user details --}}
            @include('admin.assign_delegate_orders.details.user')
            {{-- end user details --}}

<div id="map" style="width: 100%; height: 600px"></div>
            
            <div class="single-marker lines-between"
                data-img="data:image/png;base64,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">
                <input type="text" hidden class="lat" value="{{ $order->lat }}" />
                <input type="text" hidden class="lng" value="{{ $order->lng }}" />
            </div>
            @foreach ($delegates as $delegate)
                <div class="single-marker" data-object="{{ $delegate }}" data-img="{{ $delegate->image }}">
                    <input type="text" hidden class="lat" value="{{ $delegate->lat }}" />
                    <input type="text" hidden class="lng" value="{{ $delegate->lng }}" />
                </div>
            @endforeach

<div class="col-12 d-flex justify-content-center mt-3">
                <a href="{{ url()->previous() }}" type="reset"
                    class="btn btn-outline-warning mr-1 mb-1">{{ __('admin.back') }}</a>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script src="{{ asset('admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('admin/app-assets/js/scripts/extensions/sweet-alerts.js') }}"></script>
    <script src="{{ asset('admin/app-assets/js/scripts/pages/app-email.js') }}"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9S2ndLXNQAUC10JXWv9ajJljAxcVF-eM&callback=initMap&libraries=places&language=ar" type="text/javascript"></script>

// Create a path for each marker to the fixed point

//Intialize the Direction Service

url: markersNum[i].dataset.img, // Path to your custom marker image
                        scaledSize: new google.maps.Size(50, 50), // Adjust the size as needed
    
                        anchor: new google.maps.Point(25, 50), // Adjust the anchor point if necessary

<script>

var markers = {};
        function initMap() {
            var mapOptions = {
                center: new google.maps.LatLng({{ $order->lat }}, {{ $order->lng }}),
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Object to store markers by user ID

marker = new google.maps.Marker({
                    position: new google.maps.LatLng({{$order->lat}}, {{$order->lng}}),
                    map: map,
                    title: '# {{$order->order_num}}'
                });
            @foreach($delegates as $key => $user)
            // Create marker
            markers['marker_{{$user->id}}'] = new google.maps.Marker({
                position: new google.maps.LatLng({{$user->lat}}, {{$user->lng}}),
                map: map,
                icon: {
                    url: '{{$user->image}}',
                    scaledSize: new google.maps.Size(50, 50)
                },
                 title: '{{$user->name}}'
            });

// Add click event to marker
            google.maps.event.addListener(markers['marker_{{$user->id}}'], 'click', (function(marker) {
                return function() {
                let order_num = "{{ $user?->orders?->first()?->order_num ?? '' }}";
                console.log("order_num=>",order_num)
                 //   let userItem = JSON.parse("{{$user->orders}}");
                    let has_orders = order_num != "" ? "{{ __('admin.yes') }}" :  "{{ __('admin.no') }}"
                    var infowindow = new google.maps.InfoWindow({
                            content:`<div class="d-flex justify-content-center">{{ __('admin.name') }}: ("{{$user->name}}")</div>
                              <div class="d-flex justify-content-center mt-1">{{ __('admin.has_order') }}: (${has_orders})</div>
                               ${order_num != ""  ? "<div class='d-flex justify-content-center mt-1'>{{ __('admin.order_num') }}: (#" + order_num + ")</div>" :
                                '<div class="mt-1 text-center"><a href="#" class="btn btn-primary assign-btn" data-delegate_id="{{$user->id}}">{{ __('admin.assign_to_me') }}</a></div>'}`
                    });

infowindow.open(map, marker);
                }
            })(markers['marker_{{$user->id}}']));
            @endforeach

}
    </script>
  <script type="module">
        import { io } from "https://cdn.socket.io/4.7.5/socket.io.esm.min.js";
        const socket    = io('https://thunder-way.com:4797',{ query: {
            sender_id   : "1",
            sender_type : "Admin",
            sender_name : "admin",
            avatar      : ""
        } });

// Listen for location updates from the server
        socket.on('moveMarker', (data) => {
            console.log("data",data)
              // Update marker position
                markers['marker_' + data.sender_id].setPosition(new google.maps.LatLng(data.lat, data.lng));
                // Optionally center the map on the new marker position
               // map.panTo(new google.maps.LatLng(data.lat, data.lng));
        });
   </script>
    <script>
        // $(document).ready(function () {
        $(document).on("click", '.assign-btn', function(e) {
            e.preventDefault();
            let order_id = "{{ $order->id }}"
            let delegate_id = $(this).data('delegate_id')
            let url = '/admin/assign-delegate-orders/' + order_id + '/assign/' + delegate_id
            $.ajax({
                type: "GET",
                url: url,
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    Swal.fire({
                        position: 'top-start',
                        type: response.key,
                        title: response.msg,
                        showConfirmButton: false,
                        timer: 1500,
                        confirmButtonClass: 'btn btn-primary',
                        buttonsStyling: false,
                    })
                    setTimeout(function() {
                        window.location.replace(response.url)
                    }, 1000);
                }
            })
        })
        // })
    </script>
@endsection

Back to File Manager