@extends('layouts.app')
@section('head')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">

@endsection
@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">{{$title}}</div>
                <div class="panel panel-default" style="float: right; width: 60%">
                    <div class="panel-heading">Datos Máquina <a href="{{explode('ventas', url()->current())[0]}}maquinas/{{$venta->maquina->id}}/edit">editar</a></div>
                    <div class="panel-body">
                        <table id="tmaquina" class="display">
                            <thead>
                                <th></th>
                                <th></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Nombre:</th>
                                    <td>{{$venta->maquina->name}}</td>
                                </tr>
                                <tr>
                                    <th>Marca:</th>
                                    <td>{{$venta->maquina->marca}}</td>
                                </tr>
                                <tr>
                                    <th>Modelo:</th>
                                    <td>{{$venta->maquina->model}}</td>
                                </tr>
                                <tr>
                                    <th>Numero de serie:</th>
                                    <td>{{$venta->maquina->serialNumber}}</td>
                                </tr>
                                <tr>
                                    <th>Motor:</th>
                                    <td>{{$venta->maquina->motor}}</td>
                                </tr>
                                <tr>
                                    <th>Poliza:</th>
                                    <td>{{$venta->maquina->polizaNumber}}</td>
                                </tr>
                                <tr>
                                    <th>Ubicación de poliza:</th>
                                    <td>{{$venta->maquina->polizaLocation}}</td>
                                </tr>
                                <tr>
                                    <th>Manuales:</th>
                                    <td><a href="{{$venta->maquina->manuales}}" target="_blank">Ver manuales</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel panel-default" style="float: left; width: 40%">
                    <div class="panel-heading">Datos Cliente <a href="{{explode('ventas', url()->current())[0]}}clientes/{{$venta->cliente->id}}/edit">editar</a></div>
                    <div class="panel-body">
                        <table id="tcliente" class="display">
                            <thead>
                                <th></th>
                                <th></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Nombre:</th>
                                    <td>{{$venta->cliente->name}}</td>
                                </tr>
                                <tr>
                                    <th>Télefono:</th>
                                    <td>{{$venta->cliente->tel}}</td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td>{{$venta->cliente->email}}</td>
                                </tr>
                                <tr>
                                    <th>Vendedor:</th>
                                    <td>{{$venta->seller->name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                </div>
                <div class="panel panel-default" style="float: left; width: 40%">
                    <div class="panel-heading">Encuestas disponibles</div>
                    <div class="panel-body">
                        @foreach($availablePolls as $poll)
                            <a href="{{$poll['url']}}" target="_blank">{{$poll['name']}}</a><br>
                        @endforeach
                    </div>
                </div>
        </div>
    </div>

    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                Archivos
                <form enctype="multipart/form-data" action="{{url('admin/ventas/file')}}/{{$venta->id}}" method="post">
                    {{ csrf_field() }}
                    <input type="file" name="img">
                    <input type="submit">
                </form>
            </div>
            <div class="panel-body">
                <div class="imgrow">
                    @foreach($venta->files() as $file)
                        @if(strpos($file, '.pdf'))
                            <div class="column">
                                <iframe src="{{$file}}" style=" width:100%; height:420px"></iframe>
                                <a href="{{$file}}" target="_blank">Ver</a>
                                <form action="{{url('admin/ventas/delete/file')}}" method="post">
                                    {{ csrf_field() }}

                                    <input type="hidden" name="url" value="{{$file}}">  
                                    <button type="">Borrar</button>

                                </form>
                            </div>
                        @else
                            <div class="column">
                                <img src="{{$file}}" alt="" style="width:100%" onclick="showImg(this);">
                            </div>
                        @endif
                        
                    @endforeach                     
                </div>

                <div class="imgcontainer">
                  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
                  <img id="expandedImg" style="width:100%">
                  <div id="imgtext"></div>
                  <form action="{{url('admin/ventas/delete/file')}}" method="post">
                        {{ csrf_field() }}

                    <input id="inputUrl" type="hidden" name="url" >  
                    <button type="">Borrar</button>

                  </form>
                </div>
            </div>
        </div>
    </div>
   


    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">Para cambiar la ubicación de la venta selecciona la nueva en el mapa</div>
            <div class="panel-body">

                <form class="form-horizontal" role="form" method="POST" action="{{url()->current()}}" id="mainForm" enctype="multipart/form-data">
                    {{ csrf_field() }}
                                        

                    <label for="sellDate" class="col-md-2 control-label">Fecha de venta</label>
                    <div class="col-md-4">
                        <input id="sellDate" type="date" class="form-control" name="sellDate" value="{{explode(' ', $venta->sellDate)[0]}}" autofocus>
                    </div>
                    <br>
                    <br>
                    <br>

                    <label for="finGarantia" class="col-md-2 control-label">Fin de garantia</label>
                    <div class="col-md-4">
                        <input id="finGarantia" type="date" class="form-control" name="finGarantia" value="{{explode(' ', $venta->finGarantia)[0]}}" autofocus>
                    </div>
                    <br>
                  

                    <br>
                    <br>
                    <div>
                        <label for="nota" class="col-md-1 control-label">Nota</label>
                        <div class="">
                            <textarea name='nota' rows="5"  form='mainForm' style="width:100%;">{{$venta->nota}}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="submit" class="btn btn-primary">
                                Guardar
                            </button>
                        </div>
                    </div>

                    <input type="hidden" name="clatitude" id="clatitud" value="{{$venta->cliente->location->latitude}}">
                    <input type="hidden" name="clongitude" id="clongitud" value="{{$venta->cliente->location->longitude}}">
                    <input type="hidden" name="mlatitude" id="mlatitude" value="{{$venta->maquina->location->latitude}}">
                    <input type="hidden" name="mlongitude" id="mlongitude" value="{{$venta->maquina->location->longitude}}">
                    <input id="mdireccion" type="hidden" name="mdireccion" value="{{$venta->maquina->location->direccion}}">
                    <input id="zipCode" type="hidden" name="zipCode" value="{{$venta->maquina->location->zipCode}}">


                </form>



                 <!-- MAPA-->
                <input style="color:gray;"  id="pac-input" class="controls" type="text" placeholder="Buscar...">
                <div id="map"></div>
                <!-- MAPA-->
            </div>
        </div>
    </div>
</div>






    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWK2NJxKlLXK8tQ5ZVgTy7n0VFhIhMOxw&libraries=places&callback=initAutocomplete" defer>
    </script>
    <script>
        var marker;
        var map;
        var markers = [];
        var geocoder;
        var infowindow;
        var cinfowindow;
        var minfowindow;


        var iconImage;
        var clientMarker;
        var bounds;

        function initAutocomplete() 
        {
            map = new google.maps.Map(document.getElementById('map'), 
            {
                center: 
                {
                    lat: 19.4325933, 
                    lng: -99.1332306
                },
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            geocoder = new google.maps.Geocoder;
            infowindow = new google.maps.InfoWindow;
            cinfowindow = new google.maps.InfoWindow;
            minfowindow = new google.maps.InfoWindow;

            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');
            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() 
            {
                searchBox.setBounds(map.getBounds());
            });
            searchBox.addListener('places_changed', function() 
            {
                var places = searchBox.getPlaces();
                if (places.length == 0) 
                {
                    return;
                }
                // Clear out the old markers.
                markers.forEach(function(marker) 
                {
                    marker.setMap(null);
                });
                markers = [];
                // For each place, get the icon, name and location.
                var bounds = new google.maps.LatLngBounds();
                places.forEach(function(place) 
                {
                    var icon = 
                    {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };
                    // Create a marker for each place.
                    markers = [];
                    marker = new google.maps.Marker(
                    {
                        map: map,
                        icon: icon,
                        title: place.name,
                        position: place.geometry.location
                    });
                    markers.push(marker);
                    if (place.geometry.viewport) 
                    {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } 
                    else 
                    {
                        bounds.extend(place.geometry.location);
                    }
                });
                //geocodeMar();
                map.fitBounds(bounds);
            });
            map.addListener('click', function(event) 
            {
                console.log(event.latLng)
                addMarker(event.latLng);
            });



            iconImage = {
              url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
              // This marker is 20 pixels wide by 32 pixels high.
              size: new google.maps.Size(20, 32),
              // The origin for this image is (0, 0).
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(0, 32)
            };
            var shape = {
              coords: [1, 1, 1, 20, 18, 20, 18, 1],
              type: 'poly'
            };
           
            var clienteLocation = {lat: parseFloat($('#clatitud').val()), lng: parseFloat($('#clongitud').val())};

            clientMarker = new google.maps.Marker(
            {
                position: clienteLocation,
                map: map,
                icon: iconImage,
                title: "Cliente",
                zIndex: 0
            });
            markers.push(clientMarker);


            var maquinaLocation = {lat: parseFloat($('#mlatitude').val()), lng: parseFloat($('#mlongitude').val())};

            maquinaMarker = new google.maps.Marker(
            {
                position: maquinaLocation,
                map: map,
                icon: iconImage,
                title: "Maquina",
                zIndex: 0
            });
            markers.push(maquinaMarker);
            addInfoWindow(clientMarker, 'Cliente: ', cinfowindow);
            addInfoWindow(maquinaMarker, "Maquina: ", minfowindow);
            bounds = new google.maps.LatLngBounds();
            bounds.extend(maquinaMarker.position);
            bounds.extend(clientMarker.position);
            map.fitBounds(bounds);
        }
        function geocodeMar(location, iwindow)
        {
            document.getElementById('mlatitude').value = marker.position.lat();
            document.getElementById('mlongitude').value = marker.position.lng();
            geocoder.geocode({'location': location}, function(results, status) 
            {
                if (status === google.maps.GeocoderStatus.OK) 
                {
                    $('#zipCode').val('');

                    if (results[1]) 
                    {
                        var addressComps = results[1].address_components
                        for (var i = addressComps.length - 1; i >= 0; i--) 
                        {
                            if (addressComps[i].types[0] == 'postal_code') 
                            {
                                $('#zipCode').val(addressComps[i].short_name);
                            }
                        }
                        document.getElementById('mdireccion').value = results[1].formatted_address;
                        iwindow.setContent(results[1].formatted_address);
                        iwindow.open(map, markers[0]);
                    } 
                    else 
                    {
                        window.alert('No results found');
                    }
                } 
                else 
                {
                    window.alert('Geocoder failed due to: ' + status);
                }
            });
        }
        function addInfoWindow(marker, content, iwindow)
        {
            geocoder.geocode({'location': marker.position}, function(results, status) 
            {
                if (status === google.maps.GeocoderStatus.OK) 
                {
                    $('#zipCode').val('');

                    if (results[1]) 
                    {
                        var addressComps = results[1].address_components
                        for (var i = addressComps.length - 1; i >= 0; i--) 
                        {
                            if (addressComps[i].types[0] == 'postal_code') 
                            {
                                $('#zipCode').val(addressComps[i].short_name);
                            }
                        }
                        var string = content + results[1].formatted_address;
                        //document.getElementById('direccion').value = results[1].formatted_address;
                        iwindow.setContent(string);
                        iwindow.open(map, marker);
                    } 
                    else 
                    {
                        window.alert('No results found');
                    }
                } 
                else 
                {
                    window.alert('Geocoder failed due to: ' + status);
                }
            });
            //iwindow.setContent(content);
            //iwindow.open(map, marker);
        }
        function addMarker(location) 
        {
            markers.forEach(function(marker) 
            {
                if (!marker.title) 
                {
                    marker.setMap(null);
                }
            });
            markers = []
            marker = new google.maps.Marker(
            {
                position: location,
                map: map
            });
            markers.push(marker);
            geocodeMar(location, infowindow);
        }
        $(document).ready(function() {
           
           var tableC = $('#tcliente').DataTable(
                {
                    paging: false,
                    searching: false,
                    ordering: false,
                    bInfo: false
                });
           var tableM = $('#tmaquina').DataTable(
            {
                paging: false,
                searching: false,
                ordering: false,
                bInfo: false
            });
        });  
        function showImg(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            $('#inputUrl').val(imgs.src);
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }       
    </script>
    
@endsection