@extends('layouts.app')

@section('link')
    <link href="{{ asset('css/theme.default.css') }}" rel="stylesheet">
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    
    <link href="{{ asset('css/admin_filters.css') }}" rel="stylesheet">
    <link href="{{ asset('css/leaflet.css') }}" rel="stylesheet">
    <link href="{{ asset('css/MarkerCluster.css') }}" rel="stylesheet">
    <link href="{{ asset('css/MarkerCluster.Default.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
    #myTable tbody td:nth-child(7) {
        padding: 4px 8px 0px 8px;
    }
    
    #modal-add .modal-dialog {
        width: 1250px;
    }
    #mymap {
        border:1px solid red;
        width: 96%;
        height: 600px;
    }
    
    .number-icon
    {
        background-image: url("/images/my_marker.png");
        text-align:center;
        color:black;  
        padding-top:10px;
    }

</style>
@endsection

@section('content')
<div class="container">
@include('shared.messages')
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-flag"></span> {{__('texte.representatives_arr.routes.objects.objects_list')}} {{date("d.m.Y",strtotime($driver_route->created_at))}} {{__('texte.representatives_arr.routes.objects.of')}} {{$driver_route->driver->name}} 
                    </h3>
                    <div class="pull-right">
                        <button class="btn btn-primary back-btn" onclick="window.history.back()">{{__('texte.representatives_arr.routes.objects.back')}}</button>
                    </div>                    
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="myTable" class="table table-striped table-bordered table-hover dataTables-example dataTable" width="100%">
                            <thead>
                                <th>{{__('texte.representatives_arr.routes.objects.type')}}</th>
                                <th>{{__('texte.representatives_arr.routes.objects.subtype')}}</th>
                                <th>{{__('texte.representatives_arr.routes.objects.contragent')}}</th>
                                <th>{{__('texte.representatives_arr.routes.objects.object')}}</th>
                                <th>{{__('texte.representatives_arr.routes.objects.delivery_address')}}</th>
                                <th>{{__('texte.representatives_arr.routes.objects.visited_at')}}</th>                          
                            </thead>
                            <tbody>   
                                @if(count($driver_route_objects)>0)
                                    @foreach($driver_route_objects as $driver_route_object)
                                    <tr id="object_{{$driver_route_object->id}}">
                                        <td>{{$driver_route_object->obect->subtype->type->name}}<input class="object_id" type="hidden" name="object_id[]" value="{{$driver_route_object->id}}"></td>
                                        <td>{{$driver_route_object->obect->subtype->name}}</td>
                                        <td>{{$driver_route_object->obect->contragent->company_name ?? $driver_route_object->obect->contragent->driver->name}}</td>
                                        <td>{{$driver_route_object->obect->user->name}}</td>
                                        <td>{{$driver_route_object->obect->delivery_address}}</td>
                                        <td>{{$driver_route_object->visitation_time!=null ? date("d.m.Y H:i",strtotime($driver_route_object->visitation_time)) : ''}}</td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7">
                                            <p>{{__('texte.representatives_arr.routes.objects.no_objects')}}</p>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    
                    <div id="mymap"></div>
                    
                   
                </div>                                
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/chosen.js') }}"></script>
<script src="{{ asset('js/datatables.min.js') }}"></script> 
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>

<script src="{{ asset('js/leaflet.js') }}"></script>
<script src="{{ asset('js/leaflet.markercluster.js') }}"></script>

<script type="text/javascript">
   
   var driver_id = {{$driver_route->driver_id}}
    
    
    $(document).ready(function(){
        $('#myTable > tbody').sortable({
            items: 'tr',
            cursor: 'move',
            axis:   'y',
            update: function (event, ui) {
                var data = $('#myTable > tbody').sortable('serialize');
                var driver_route_id = {{$driver_route->id}};
                $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/save_driver_route_objects_order',
                            type: 'POST',
                    data: { 'data' : data,
                            'driver_route_id' : driver_route_id},
                });
            }
        });
    });
    
    //Map initialisation
    
    var locations = <br />
<b>Notice</b>:  Undefined variable: driver_route_objects in <b>D:\dev\sklad\resources\views\driver_routes\objects.blade.php</b> on line <b>133</b><br />
null;
    
    var marker_order='0';
    
    var map = L.map('mymap',{
        center: [43.251061, 27.855555],
        zoom: 9
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    var numberIcon = L.divIcon({
            className: "number-icon",
            iconSize: [50, 50],
            iconAnchor: [10, 44],
            popupAnchor: [3, -40],
            html: marker_order        
    });
        
    var markers = L.markerClusterGroup();
    
    for(var i=0;i<locations.length;i++){    
        var numberIcon = L.divIcon({
            className: "number-icon",
            iconSize: [50, 50],
            iconAnchor: [10, 44],
            popupAnchor: [3, -40],
            html: locations[i].object_order        
        });
    
        var marker = L.marker([locations[i].gps_lat, locations[i].gps_lng], {icon: numberIcon}).bindPopup('Контрагент - <a href="contragents/'+ locations[i].contragent_id +'">' + locations[i].contragent_name + '</a>.<br /> Обект - <a href="objects/'+ locations[i].id +'">' + locations[i].object_name + '</a>');
        markers.addLayer(marker);
    }
    
    if(locations.length > 0){
        map.addLayer(markers);

        var group = new L.featureGroup([markers]);

        map.fitBounds(group.getBounds());
    }
</script>
@endsection