@extends('layout.administrator.layout')

@section('css')
<style>
    .selectedDomi {
        border: 1px solid #fbb52b;
    }
</style>
@endsection

@section('sideBody')
<div class="card ml-2 mt-2" style="width: 18rem; display: contents;">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Navegar en Ciudades
            <div class="form-group input-group  mb-0 input-group-merge">
                <select class="form-control selectCity " name="" id="">
                    <option selected disabled value="">CIUDAD</option>
                    <option data-lat="4.7109886" data-long="-74.072092" data-city="1" value="">Bogotá</option>
                    <option data-lat="11.0041072" data-long="-74.8069813" data-city="1" value="">Barranquilla</option>
                </select>
            </div>
        </li>
        <!--<li class="list-group-item">Navegar en las localidades
            <div class="form-group input-group mb-0 input-group-merge ">
                <select class="form-control selectBarrio" id="listCiudad" name="">
                    <option selected disabled value="">Localidades</option>
                    <option data-lat="4.7109886" data-long="-74.072092" value="d">Bogotá</option>
                    <option data-lat="4.5916258" data-long="-74.1041342">Antonio nariño</option>
                    <option data-lat="4.6637926" data-long="-74.0764024">Barrios unidos</option>
                    <option data-lat="4.6086644" data-long="-74.1813364">Bosa</option>
                    <option data-lat="4.6548153" data-long="-74.0552684">Chapinero</option>
                    <option data-lat="4.579524" data-long="-74.1574289">Ciudad bolivar</option>
                    <option data-lat="4.7072598" data-long="-74.1094635">Engativá</option>
                    <option data-lat="4.673689" data-long="-74.143671">Fontivón</option>
                    <option data-lat="4.6303361" data-long="-74.1376942">Kennedy</option>
                    <option data-lat="4.597014" data-long="-74.0728759">La candelaria</option>
                    <option data-lat="4.6066345" data-long="-74.0881945">Los mártires</option>
                    <option data-lat="4.614995" data-long="-74.114656">Puente Aranda</option>
                    <option data-lat="4.5762835" data-long="-74.1173688">Rafael Uribe Uribe</option>
                    <option data-lat="4.5591989" data-long="-74.091471">San Cristobal</option>
                    <option data-lat="4.6121433" data-long="-74.0708166">Santa Fé</option>
                    <option data-lat="4.7207926" data-long="-74.074768">Suba</option>
                    <option data-lat="4.1125065" data-long="-74.5813021">Sumapaz</option>3d4.1125065!4d-74.5813021
                    <option data-lat="4.6422765" data-long="-74.0907071">Teusaquillo</option>
                    <option data-lat="4.5867775" data-long="-74.1444068">Tunjuelito</option>
                    <option data-lat="4.7033367" data-long="-74.0328803">Usaquén</option>
                    <option data-lat="4.508056" data-long="-74.1140039">Usme</option>
                </select>
            </div>
        </li>
        <li class="list-group-item">
            <a href="/domicilios/new" target="_blank" class="btn btn-primary btn-icon ml-sm-3 d-none d-md-block">
                <span class="btn-inner--icon">
                    <i class="fas fa-plus-circle"></i>
                </span>
                <span class="nav-link-inner--text">Nuevo Domicilio</span>
            </a>
        </li>-->
    </ul>
</div>
@endsection

@section('content')
<div class="nav-wrapper ml-3 mr-3" style="padding-top: 8px !important">
    <ul class="nav nav-pills nav-fill nav-pills-warning flex-column flex-md-row" id="tabs-icons-text" role="tablist">
        <li class="nav-item">
            <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fas fa-map mr-2"></i>Mapa</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fas fa-motorcycle mr-2"></i>Domicilios</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="mapContainer mt-2" style="height: 76vh; width:100%">
                <div id="map" style="height:100%"></div>
            </div>
        </div>
        <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="card shadow mt-2">
                <div class="card-header border-0">
                    <div class="row align-items-center mb-3">
                        <div class="col-8">
                            <h3 class="mb-0">Domicilios</h3>
                        </div>
                    </div>
                    <form action="/administrator" method="get">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="form-group">
                                    <label>Cliente</label>
                                    <input type="text" class="form-control" value="{{request()->customer}}" name="customer" placeholder="Nombre del cliente">
                                </div>
                                <div class="form-group">
                                    <label>Domiciliario</label>
                                    <input type="text" class="form-control" value="{{request()->delivery_man}}" name="delivery_man" placeholder="Nombre del domiciliario">
                                </div>
                            </div>
                            <div class="col-6">
                                <label>Rango de fecha</label>
                                <div class="row">
                                    <div class="form-group col">
                                        <input type="text" class="form-control" value="{{request()->init_date}}" id="datetimeinit" name="init_date" placeholder="Fecha inicio">
                                    </div>
                                    <div class="form-group col">
                                        <input type="text" class="form-control" value="{{request()->fin_date}}" id="datetimefin" name="fin_date" placeholder="Fecha final">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Estado</label>
                                    <select name="delivery_state" class="form-control">
                                        <option value="">Todos</option>
                                        @foreach(Config::get('const.delivery_states') as $key => $value)
                                        <option value="{{$key}}" {{request()->delivery_state == $key ? 'selected' : ''}}>{{$value}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <button class="btn btn-warning btn-block">Filtrar</button>
                                <a href="/administrator" class="btn btn-warning btn-block">Restaurar</a>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light text-center">
                            <tr>
                                <th scope="col" class="pr-1 pl-1">Referencia</th>
                                <th scope="col" class="pr-1 pl-1">Cliente</th>
                                <th scope="col" class="pr-1 pl-1">Domiciliario</th>
                                <th scope="col" class="pr-1 pl-1">Identificacion</th>
                                <th scope="col" class="pr-1 pl-1">Fecha</th>
                                <th scope="col" class="pr-1 pl-1">Estado</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @if(count($deliveries)>0)
                            @foreach($deliveries as $delivery)
                            <tr>
                                <td class="pr-1 pl-1">
                                    {{$delivery->reference}}
                                </td>
                                <td class="pr-1 pl-1">
                                    {{$delivery->getCustomer->name}} {{$delivery->getCustomer->last_name}}
                                </td>
                                <td class="pr-1 pl-1">
                                    @if($delivery->getDeliveryMan)
                                    {{$delivery->getDeliveryMan->getData->name}} {{$delivery->getDeliveryMan->getData->last_name}}
                                    @else
                                    <p>Sin definir</p>
                                    <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#modalAsignDelivery_{{$delivery->id}}">Asignar</button>
                                    @endif
                                </td>
                                <td class="pr-1 pl-1">
                                    @if($delivery->getDeliveryMan)
                                    {{$delivery->getDeliveryMan->getData->id_number}}
                                    @else
                                    Sin definir
                                    @endif
                                </td>
                                <td class="pr-1 pl-1">
                                    {{$delivery->date}}
                                </td>
                                <td class="pr-1 pl-1">
                                    {{Config::get('const.delivery_states')[$delivery->delivery_state]}}
                                </td>
                                <td class="pr-1 pl-1">
                                    <a class="btn btn-danger btn-sm" href="/tracking/{{$delivery->reference}}" target="_blank">Detalle</a>
                                </td>
                            </tr>
                            <div class="modal fade" id="modalAsignDelivery_{{$delivery->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
                                <form action="/administrator/domiciliary/asign/{{$delivery->id}}" method="post">
                                    @csrf
                                    @method('put')
                                    <input type="hidden" name="domiciliary_id" class="domi_id">
                                    <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
                                        <div class="modal-content modal-sm">
                                            <div class="modal-header">
                                                <h6 class="modal-title" id="modal-title-default">Asignar domiciliario</h6>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">×</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="form-group col-8">
                                                        <input type="text" class="form-control" id="nameDomi_{{$delivery->id}}" placeholder="Nombre del domiciliario">
                                                    </div>
                                                    <div class="form-group col-4">
                                                        <button class="btn btn-info btn-block buscarDomiciliarios" id="{{$delivery->id}}">Buscar</button>
                                                    </div>
                                                </div>
                                                <div class="domiciliarios">

                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-success">Asignar</button>
                                                <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Cerrar</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            @endforeach
                            @else
                            <tr>
                                <td colspan="7">No se encontraron domicilios</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {!! $deliveries->appends(Request::all())->render() !!}
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    // This example adds a marker to indicate the position of Bondi Beach in Sydney,
    // Colombia.
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: {
                lat: 11.0041072,
                lng: -74.8069813
            }
        });

        var full = "{{asset('assets/maxargon/assets/images/marcadores/marcadorMorado.png')}}";
        var vacio = "{{asset('assets/maxargon/assets/images/marcadores/marcadorAmarillo.png')}}";


        var marker1 = new google.maps.Marker({
            position: {
                lat: 4.6674463,
                lng: -74.161379
            },
            map: map,
            icon: full,
        });

        var marker2 = new google.maps.Marker({
            position: {
                lat: 4.692939,
                lng: -74.072092
            },
            map: map,
            icon: full,
        });

        var marker3 = new google.maps.Marker({
            position: {
                lat: 4.663340,
                lng: -74.123613
            },
            map: map,
            icon: full,
        });

        var marker4 = new google.maps.Marker({
            position: {
                lat: 4.704401,
                lng: -74.103701
            },
            map: map,
            icon: full,
        });

        var marker5 = new google.maps.Marker({
            position: {

                lat: 4.651021,
                lng: -74.103701
            },
            map: map,
            icon: full,
        });

        var marker6 = new google.maps.Marker({
            position: {
                lat: 4.726300,
                lng: -74.065935
            },
            map: map,
            icon: full,
        });

        var marker7 = new google.maps.Marker({
            position: {
                lat: 4.633911,
                lng: -74.105074
            },
            map: map,
            icon: full,
        });

        var marker8 = new google.maps.Marker({
            position: {

                lat: 4.631858,
                lng: -74.137346
            },
            map: map,
            icon: full,
        });

        var marker9 = new google.maps.Marker({
            position: {
                lat: 4.7106886,
                lng: -74.072092
            },
            map: map,
            icon: full,
        });

        var marker10 = new google.maps.Marker({
            position: {
                lat: 4.653074,
                lng: -74.092714
            },
            map: map,
            icon: full,
        });

        var marker11 = new google.maps.Marker({
            position: {
                lat: 4.701664,
                lng: -74.111254
            },
            map: map,
            icon: vacio,
        });

        var marker12 = new google.maps.Marker({
            position: {

                lat: 4.667446,
                lng: -74.056322
            },
            map: map,
            icon: vacio,
        });

        var marker13 = new google.maps.Marker({
            position: {
                lat: 4.645546,
                lat: -74.100268
            },
            map: map,
            icon: vacio,
        });

        var marker14 = new google.maps.Marker({
            position: {
                lat: 4.587371,
                lng: -74.099581
            },
            map: map,
            icon: vacio,
        });


        marker1.addListener('click', function() {
            infowindowVerde.open(map, marker1);
            map.setCenter(marker1.getPosition());
            map.setZoom(17);
        });
        marker2.addListener('click', function() {
            infowindowVerde.open(map, marker2);
            map.setCenter(marker2.getPosition());
            map.setZoom(17);
        });
        marker3.addListener('click', function() {
            infowindowVerde.open(map, marker3);
            map.setCenter(marker3.getPosition());
            map.setZoom(17);
        });
        marker4.addListener('click', function() {
            infowindowVerde.open(map, marker4);
            map.setCenter(marker4.getPosition());
            map.setZoom(17);
        });
        marker5.addListener('click', function() {
            infowindowVerde.open(map, marker5);
            map.setCenter(marker5.getPosition());
            map.setZoom(17);
        });
        marker6.addListener('click', function() {
            infowindowVerde.open(map, marker6);
            map.setCenter(marker6.getPosition());
            map.setZoom(17);
        });
        marker7.addListener('click', function() {
            infowindowVerde.open(map, marker7);
            map.setCenter(marker7.getPosition());
            map.setZoom(17);
        });
        marker8.addListener('click', function() {
            infowindowVerde.open(map, marker8);
            map.setCenter(marker8.getPosition());
            map.setZoom(17);
        });
        marker9.addListener('click', function() {
            infowindowVerde.open(map, marker9);
            map.setCenter(marker9.getPosition());
            map.setZoom(17);
        });
        marker10.addListener('click', function() {
            infowindowVerde.open(map, marker10);
            map.setCenter(marker10.getPosition());
            map.setZoom(17);
        });

        var contentStringVerde = `<div class="container-fluid">
            <div class="row justify-content-center align-items-center mt-4">
                <div class="card-deck flex-row flex-nowrap mb-3">
                  <div class="card">
                    <div class="card-body pb-1">
                      <h5 class="card-title text-center m-0 mb-0">Informacion del Domicilio</h5>
                      <h5 class="card-title text-center m-0 mb-1">Domiciliario:  <b class="text-success text-uppercase">Jaime Barrios Tlf: 315.870.185</b></h5>
                        <table class="table-sm text-center table-bordered table table-hover table-responsive p-0 m-0" style="font-size: 12px;">
                          <thead>
                            <tr class="text-white bg-success">
                              <th scope="col" colspan="6">DATOS</th>
                            </tr>
                          </thead>
                          <tbody class="text-center">
                            <tr>
                              <th class="p-1 m-1">Cliente</th>
                              <th class="p-1 m-1">Costo</th>
                              <th class="p-1 m-1">Distancia</th>
                              <th class="p-1 m-1">Telf Cliente</th>
                            </tr>
                            <tr>
                              <td class="p-1 m-1">Angelo Caruso</td>
                              <td class="p-1 m-1">$30.000</td>
                              <td class="p-1 m-1">17.832 Km</td>
                              <td class="p-1 m-1">320.582.876</td>
                            </tr>
                          </tbody>
                        </table>
                      <a class="justify-content-center align-items-center text-center">
                      <h5 class="card-title text-center m-0 mb-0"><small>
                      <button class="text-center text-white btn-success btn btn-sm btnDetail mt-3 mb-1"><i class="fa fa-info-circle" aria-hidden="true"></i> Detalles</button>

                      <h5>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>`;

        var infowindowVerde = new google.maps.InfoWindow({
            content: contentStringVerde
        });

        $("#menu-toggle").click(function(e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });

        $('#commands-tab').on('shown.bs.tab', function() {
            $('.inputUser').focus()
        })

        $('.selectCity').on('change', function() {
            var latitud = $(this).children("option:selected").data("lat");
            var longitud = $(this).children("option:selected").data("long");
            // alert(latitud + ' - ' + longitud);
            var cityMap = new google.maps.LatLng(latitud, longitud);
            map.panTo(cityMap);
            map.setZoom(12);
        })

        $('.selectBarrio').on('change', function() {
            var latitud = $(this).children("option:selected").data("lat");
            var longitud = $(this).children("option:selected").data("long");
            // alert(latitud + ' - ' + longitud);
            var cityMap = new google.maps.LatLng(latitud, longitud);
            map.panTo(cityMap);
            if ($(this).val() === 'd') {
                map.setZoom(12);
            } else {
                map.setZoom(14);
            }
        })

    }
</script>
<script>
    $('.buscarDomiciliarios').on('click', function(e) {
        e.preventDefault()
        let id = $(this).attr('id')
        let name = $('#nameDomi_' + id).val()
        $.ajax({
            type: "get",
            url: "/administrator/domiciliary/search",
            data: {
                name: name
            },
            dataType: "json",
            success: function(response) {
                let data = response.domiciliary
                $('.domiciliarios').empty()
                if (data.length > 0) {
                    data.map(c => {
                        $('.domiciliarios').append(
                            `
                            <div class="card cardDomi" id="${c.id}" style="cursor: pointer">
                                <div class="card-body">
                                    <div class="media media-single">
                                        <a href="#">
                                            <img class="avatar avatar-xl" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/512x512/delivery_man.png" alt="...">
                                        </a>
                                        <div class="media-body ml-2">
                                            <h4>${c.get_data.name + ' ' + c.get_data.last_name}</h4>
                                            <small class="text-green">Cel: ${c.get_data.cellphone}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            `
                        )
                    })
                } else {
                    $('.domiciliarios').append('<p>No se encontraron domiciliarios</p>')
                }
            }
        });
    })

    $('body').on('click', '.cardDomi', function() {
        $('.cardDomi').removeClass('selectedDomi')
        $(this).addClass('selectedDomi')
        $('.domi_id').val($(this).attr('id'))
    })


    $('#datetimeinit').datetimepicker({
        format: 'DD/MM/YYYY',
        showClose: true,
        icons: {
            up: 'fas fa-chevron-up text-warning',
            down: 'fas fa-chevron-down text-warning',
            time: 'far fa-clock',
            close: 'fas fa-times text-warning'
        }
    });


    $('#datetimefin').datetimepicker({
        format: 'DD/MM/YYYY',
        showClose: true,
        icons: {
            up: 'fas fa-chevron-up text-warning',
            down: 'fas fa-chevron-down text-warning',
            time: 'far fa-clock',
            close: 'fas fa-times text-warning'
        }
    });
</script>
@endsection