@extends('layout')

@section('topmenu') 
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="nav nav-pills ml-auto">
    <li class="nav-item">
      <a class="nav-link active" href="{{ route('/dashboard/maps/app') }}">Saltillo Seguro App</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="{{ route('/dashboard/maps/admin') }}">Administrador</a>
    </li>
  </ul>
</div> 
@stop 

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script src="{{ asset('dashboard/js/maps/app.js')}}"></script>

<meta name="csrf-token" content="{{ csrf_token() }}" />
@csrf


<div class="container">
<div class="row">
    <div class="col-md-12 form-group">
        <h5 id="titleView">Mapa de Reportes App Saltillo Seguro</h5>
    </div>
</div>

<div class="row form-group text-center">
    
    
    <div class="col-md-4">
        <h6>Fecha de Inicio</h6>
        <input id="Inicio" type="text" class="date form-control" name="init" placeholder="" required> 
    </div>
    <div class="col-md-4">
        <h6>Fecha Final</h6>
        <input id="Fin" type="text" class="date form-control" name="end" placeholder="" required> 
    </div>
    <div class="col-md-4">
        <h6>.</h6>
        <button type="button" class="btn btn-primary" onClick="buttonPressed()">Generar Reporte</button>
    </div>
</div>
    
<script type="text/javascript">
$('.date').datepicker({
    format: 'yyyy-mm-dd'
});
</script>     


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2TmYfYb_-bnCmcXVJwDuLy5fQTbAjgFE"></script>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div style="background-color: red; width: 100%; height: 400px;" id="googleMap"></div>           

</div>              
@stop