@extends('adminlte::page')
@section('content_header')
@section('plugins.Datatables', true)
<h1>Clientes</h1>
@stop

@section('content')
{{-- Setup data for datatables --}}
@php
$heads = [
    'Id',
    'Cliente',
    'RUT',
    'Dirección',
    'Acciones',
    'Mapa'
];

  $btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit"><i class="fa fa-lg fa-fw fa-pen"></i></button';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';
  $btnShow = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';

              $config = [
                'data' => $clientes,
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, null,['orderable' => true]],
];

@endphp

@if(session()->has('success'))
<div class="alert alert-success" role="alert">
  {{session()->get('success')}}
  </div>
@endif

@if(session()->has('danger'))
<div class="alert alert-danger" role="alert">
  {{session()->get('danger')}}
  </div>
@endif

<x-adminlte-datatable id="table1" :heads="$heads" head-theme="dark" theme="light" striped hoverable with-buttons>
    @foreach($config['data'] as $row)
        <tr>
                <td>{{$row->cliente_id}}</td>
                <td>{{$row->cliente_nombre}}</td>
                <td>@if ($row->cliente_esFacturable == 1) {{number_format($row->cliente_rut,0,".",".")}}-{{$row->cliente_dv}} @endif</td>
                <td>{{$row->cliente_direccion}}</td>
                <td>
                    <a href="{{route('clientes.show',$row->cliente_id)}}" class="btn btn-xs btn-default text-primary mx-1 shadow"><i class="fa fa-pen fa-fw"></i></a>
                    <a href="{{route('clientes.destroy',$row->cliente_id)}}" class="btn btn-xs btn-default text-danger mx-1 shadow"><i class="fa fa-trash fa-fw"></i></a>
                    {{-- <a href="javascript:void(0)" class="btn btn-xs btn-default text-success mx-1 shadow"><i class="fa fa-eye fa-fw"></i></a> --}}
                    <x-adminlte-button data-toggle="modal" data-target="#modalMin" icon="fas fa-eye" onclick="detalleDocumentos({{$row->cliente_id}})"/>                        
                </td>
                <td><a href="javascript:void(0)" onclick="mostrarMapa('{{$row->cliente_lat}}','{{$row->cliente_long}}','{{$row->cliente_direccion}}')" class="btn btn-xs btn-default mx-1 shadow"><i class="fa fa-map-marker"></i></a></td>
        </tr>
    @endforeach
</x-adminlte-datatable>
@csrf


{{-- Minimal --}}
<x-adminlte-modal id="mostrarMapa" title="Minimal" size="lg">
{{-- Example button to open modal --}}
<div id="map" style="height: 400px;width: 100%;"></div>

<x-slot name="footerSlot">
  <x-adminlte-button theme="danger" label="Cerrar" data-dismiss="modal"/>
</x-slot>

</x-adminlte-modal>
@stop

@section('js')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl3ynABIEYXM9QC8icGka6BDhSDEvd1ho&callback=initMap&libraries=places,drawing,geometry,visualization" async defer></script>

<script type="text/javascript">
function detalleDocumentos(cliente_id)
{

}
function mostrarMapa(latitud,longitud,dir)
{
  $("#mostrarMapa").modal('toggle');

  $(".modal-title").html("DIRECCIÓN : " + dir);
		var myLatLng = {
			lat: parseFloat(latitud),
			lng: parseFloat(longitud)
		};
		var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 18,
			center: myLatLng,
		});

		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			title: dir
		});

}

</script>

@stop