@extends(auth()->user()->hasRole('Шофьор') ? 'layouts.app_mobile' : '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/style.css') }}" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap-datepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.businessHours.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.timepicker.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>
    #mymap {
        border:1px solid red;
        width: 100%;
        height: 600px;
    }
    
    .promotion_descr{
        max-width: 500px;
        text-align: center;
        margin: 40px auto;
    }
    
    .btn-me {
        width: 156px;
        margin-bottom: 3px;
    }
    
    .chosen-container{
        width: 100% !important;
    }
    
    .btn-black {
        color: #fff;
        background-color: #000;
        border-color: #000;
    }
    
    .btn-dark_danger {
        color: #fff;
        background-color: #d95351;
        border-color: #c85652;
    }
    
    .hidden{
        display:nonte !important;
    }
    
    .margin-10{
        margin-bottom: 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">                    
                    @if($driver_route!=null)
                    <h3 class="panel-title" style="text-align:center;">{{__('texte.driver_routes_arr.show.route')}} {{$driver_route->driver->name}}</h3>
                    @else
                    <span>Няма маршрут за показване</span>
                    @endif
                </div>
                @if($driver_route!=null)
                <div class="panel-body" style="text-align: center;">
                    <div>                       
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <h4>{{__('texte.driver_routes_arr.show.cmr')}}: {{date("d.m.Y",strtotime($driver_route->created_at))}}</h4>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <h4>{{__('texte.driver_routes_arr.show.count_objects')}}: {{count($driver_route_objects)}}</h4>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <h4>{{__('texte.driver_routes_arr.show.course')}}: {{$driver_route->course_id}}</h4>
                            </div>
                        </div>                        
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <h4>{{__('texte.driver_routes_arr.show.weight')}}: {{number_format($total_weight,2,'.','')}}</h4>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <h4>{{__('texte.driver_routes_arr.show.driver')}}: {{$driver_route->driver->name}}</h4>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="form-group">
                                <h4>{{__('texte.driver_routes_arr.show.vehicle')}}: {{$driver_route->course->vehicle->reg_number}}</h4>
                            </div>
                        </div>
                        
                        @if(count($driver_route_objects)>0)
                            <div id="mymap"></div>
                            @foreach($driver_route_objects as $index=>$driver_route_object)
                                <button class="btn {{$driver_route_object->visited==0 ? 'btn-success' : ($driver_route_object->visited==1 ? 'btn-info' : 'btn-danger')}} btn-block btn-object" style="margin-bottom:2px;" data-toggle="collapse" href="#container_{{$driver_route_object->object_id}}" data-object_id="{{$driver_route_object->object_id}}" id="btn-object{{$driver_route_object->id}}" type="button">{{$driver_route_object->object_order}}. {{$driver_route_object->obect->contragent->company_name ?? $driver_route_object->obect->contragent->user->name}} - {{$driver_route_object->obect->user->name}}</button>
                                <div id="container_{{$driver_route_object->object_id}}" class="panel-collapse collapse">
                                    <div class="gap-15"></div>
                                    @if($driver_route_object->visited==0)
                                    <button data-route_item_id="{{$driver_route_object->id}}" id="btn-visited" class="btn btn-me {{$driver_route_object->visitation_time==null ? 'btn-info': 'btn-black'}} btn-visited">{{__('texte.driver_routes_arr.show.visited')}}</button>
                                    <button class="btn btn-me btn-alt btn-navigate" data-lat="{{$driver_route_object->gps_lat}}" data-lng="{{$driver_route_object->gps_lng}}">{{__('texte.driver_routes_arr.show.navigate')}}</button>
                                    <button class="btn btn-me btn-danger btn-cancel" onclick="cancel_visitation({{$driver_route_object->id}})">{{__('texte.driver_routes_arr.show.cancelled')}}</button>
                                    @endif
                                    
                                    <div class="gap-15"></div>      
                                    
                                    <div class="col-md-12" style="text-align:center;">
                                    @if(count($route_documents->where('documentable_id',$driver_route_object->object_id))>0)
                                     <table class='table table-striped table-bordered table-hover' style="width:30%;margin-left:auto;margin-right:auto;">
                                        <tr>
                                            <th>{{__('texte.driver_routes_arr.show.document')}}</th>
                                            <th>{{__('texte.driver_routes_arr.show.amount')}}</th>
                                            <th>{{__('texte.driver_routes_arr.show.payment')}}</th>
                                        </tr>
                                        @foreach($route_documents->where('documentable_id',$driver_route_object->object_id) as $document)
                                            <tr>
                                                <td>{{$document->number.' / '.date('d.m.Y',strtotime($document->date))}}</td>                                                        
                                                <td>{{number_format($document->total,5,'.','')}}</td>
                                                <td>{{$document->payment_type==0 ? 'в брой' : 'по банка'}}</td>
                                            </tr>
                                        @endforeach  
                                    </table>
                                    @endif
                                    </div>
                                    <div class="gap-15"></div> 

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.object_type')}}:</b> {{$driver_route_object->obect->subtype->type->name}}, {{$driver_route_object->obect->subtype->name}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.location')}}:</b> {{$driver_route_object->obect->location->area->name}}, {{$driver_route_object->obect->location->name}}
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.region')}}:</b> {{$driver_route_object->obect->subregion->region->name}}, {{$driver_route_object->obect->subregion->name}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.address')}}:</b> {{$driver_route_object->obect->delivery_address}}
                                        </div>
                                    </div>     
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.email')}}:</b> {{$driver_route_object->obect->user->email}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.phone')}}:</b> <a href="tel:{{$driver_route_object->obect->user->mobile}}">{{$driver_route_object->obect->user->mobile}}</a>
                                        </div>
                                    </div>                                        
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.driver_routes_arr.show.contact_person')}}:</b> {{$driver_route_object->obect->contact_person}}
                                        </div>
                                    </div>  
                                </div>
                            @endforeach
                        @else
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <h3>{{__('texte.driver_routes_arr.show.no_added_objects')}}</h3>
                                </div>
                            </div>
                        @endif                        
                    </div>
                </div>
                @endif
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.businessHours.min.js') }}"></script>
<script src="{{ asset('js/jquery.timepicker.min.js') }}"></script>
<script src="{{ asset('js/chosen.js') }}"></script>

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

<script type="text/javascript">

    $('#object,#contragent,#important').chosen();    
        
    //Map initialisation
    
    if($('#mymap').length > 0){
        var locations = <br />
<b>Notice</b>:  Undefined variable: driver_route_objects in <b>D:\dev\sklad\resources\views\driver_routes\show.blade.php</b> on line <b>213</b><br />
null;

        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 googleIcon = L.icon({
            iconUrl: '/images/pin-icon-png-9.jpg',
            iconSize: [50, 50], // size of the icon
            });

        var markers = L.markerClusterGroup();

        for(var i=0;i<locations.length;i++){
            var marker = L.marker([locations[i].gps_lat, locations[i].gps_lng], {icon: googleIcon}).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);
        }

        map.addLayer(markers);

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

        map.fitBounds(group.getBounds());   
    }   
    
    
    $('.btn-visited').on('click', function(){
        if(!$(this).hasClass('btn-primary')){
            var element = $(this);
            var driver_route_object_id = $(this).attr('data-route_item_id');
            var driver_route_id = {!!$driver_route->id ?? 0!!};
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                url: '/driver_route_object_visited',
                type: 'POST',
                data: { 'driver_route_object_id' : driver_route_object_id,
                        'driver_route_id' : driver_route_id},
                success: function(response){
                    if(response.warning){
                        alert(response.warning);
                    }
                    else{
                        alert(response.success);
                        $(element).closest('.panel-collapse').find('button').remove();
                        $('#btn-object'+driver_route_object_id).removeClass('btn-success').addClass('btn-info');
                    }
                }
            });
        }
    });
   
     
     $('.btn-navigate').on('click', function(){
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var lat = $(this).attr('data-lat');
            var lng = $(this).attr('data-lng');
            window.open("google.navigation:q="+lat+","+lng+"" , '_system');
        }
        else{
            alert('Тази опция работи само на мобилни устройства!');
        }
    });
    
    function cancel_visitation(object_id){
        if(confirm('Потвърждавате ли отказ от доставка ?')){
            var driver_route_object_id = object_id;
            var driver_route_id = {!!$driver_route->id ?? 0!!};
            
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                url: '/driver_route_object_cancelled',
                type: 'POST',
                data: { 'driver_route_object_id' : driver_route_object_id,
                        'driver_route_id' : driver_route_id},
                success: function(response){
                    if(response.warning){
                        alert(response.warning);
                    }
                    else{
                        alert(response.success);
                        $('#btn-object'+driver_route_object_id).removeClass('btn-success').addClass('btn-danger');
                        $('#container_'+$('#btn-object'+driver_route_object_id).attr('data-object_id')).find('button').remove();
                    }
                }
            });
        }        
    }
     
</script>
@endsection