@extends('layouts.admin')
@section('title','Reconocimiento')
@section('styles')
@endsection
@section('options')
@endsection
@section('preference')
@endsection
@section('content')
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            RECONOCIMIENTO
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="{{route('reconocimientos.index')}}">Reconocimientos</a></li>
                <li class="breadcrumb-item active" aria-current="page">Registro de Reconocimiento</li>
            </ol>
        </nav>
    </div>
    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    {!! Form::open(['route'=>'reconocimientos.store', 'method'=>'POST', 'files' => true]) !!}
                    <div class="row">
                      <div class="col-md-4" >
                          <div class="form-group">
                            <label for="comandante">Comandante de Puesto</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="text" class="form-control" name="comandante" id="comandante" aria-describedby="helpId" value="CAP. DIM. JOSE GERSSON AGUILAR SASARI" required> 
                          </div>
                      </div>
                      <div class="col-md-4" >
                        <div class="form-group">
                          <label for="guc">GRAN UNIDAD DE COMBATE</label>
                          <select  class="form-control" name="guc" id="guc" >
                            <option value="DIV-1" >DIV-1</option>
                            <option value="DIV-2" >DIV-2</option>
                            <option value="DIV-3" >DIV-3</option>
                            <option value="DIV-4" >DIV-4</option>
                            <option value="DIV-5" >DIV-5</option>
                            <option value="DIV-6" >DIV-6</option>
                            <option value="DIV-7" >DIV-7</option>
                            <option value="DIV-8" >DIV-8</option>
                            <option value="DIV-9" >DIV-9</option>
                            <option value="DIV-10" >DIV-10</option>
                            <option value="DIV-MEC" >DIV-MEC</option>
                          </select>  
                        </div>
                      </div>
                      <div class="col-md-4" >
                        <div class="form-group">
                          <label for="puc">PEQUEÑA UNIDAD DE COMBATE</label>
                          <select  class="form-control" name="puc" id="puc" >
                            <option value="U-1" >U-1</option>
                            <option value="U-2" >U-2</option>
                            <option value="U-3" >U-3</option>
                            <option value="U-4" >U-4</option>
                            <option value="U-5" >U-5</option>
                            <option value="U-6" >U-6</option>
                            <option value="U-7" >U-7</option>
                            <option value="U-8" >U-8</option>
                            <option value="U-9" >U-9</option>
                            <option value="U-10" >U-10</option>
                            <option value="U-11" >U-11</option>
                          </select>  
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-4" >
                        <div class="form-group">
                          <label for="pma">PUESTO MILITAR ADELANTADO</label>
                          <select  class="form-control" name="pma" id="pma" >
                            <option value="PMA-1" >PMA-1</option>
                            <option value="PMA-2" >PMA-2</option>
                            <option value="PMA-3" >PMA-3</option>
                            <option value="PMA-4" >PMA-4</option>
                            <option value="PMA-5" >PMA-5</option>
                            <option value="PMA-6" >PMA-6</option>
                            <option value="PMA-7" >PMA-7</option>
                            <option value="PMA-8" >PMA-8</option>
                            <option value="DIV-9" >PMA-9</option>
                            <option value="PMA-10" >PMA-10</option>
                            <option value="PMA-MEC" >PMA-MEC</option>
                          </select>  
                        </div>
                      </div>
                      <div class="col-md-4" >
                        <div class="form-group">
                            <label for="componentes">COMPONENTES</label><br>
                            <textarea class="form-control" name="componentes" cols="40" rows="5">OO-SUB       1                                                                           SOF.             1                                                                           SGTO.           1                                                                           SLDO.           1</textarea>
                            
                          </div>
                      </div>
                      <div class="col-md-4" >
                          <div class="form-group">
                            <label for="efectivo">EFECTIVO TOTAL</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="number" class="form-control" name="efectivo" id="efectivo" aria-describedby="helpId" value="4" required> 
                          </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="transporte">MEDIO DE TRANSPORTE</label>
                            <select class="form-control" name="transporte" id="transporte" >
                              <option value="MOTORIZADO" >MOTORIZADO</option>
                              <option value="VIA ORDINARIA-CAMINO" >VIA ORDINARIA-CAMINO</option>
                            </select>  
                        </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="armamento">DETALLE ARMAMENTO</label><br>
                            <textarea class="form-control" name="armamento" cols="40" rows="5" ></textarea>
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="itinerario">ITINERARIO</label><br>
                            <textarea class="form-control" name="itinerario" cols="40" rows="5" ></textarea>
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="incidentes">INCIDENTES</label><br>
                            <textarea class="form-control" name="incidentes" cols="40" rows="5" ></textarea>
                          </div>
                      </div>
                    </div>  
                    <h4>DATOS DEL HITO</h4><br>

                    <div class="row">
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="nombre">NOMBRE</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="text" class="form-control" name="nombre" id="nombre" aria-describedby="helpId" value="HITO 12" required> 
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="numeracion">NUMERO</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="number" class="form-control" name="numeracion" id="numeracion" aria-describedby="helpId" value="1" required> 
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="estado">ESTADO</label>
                            <select class="form-control" name="estado" id="estado" >
                              <option value="BUENO" >BUENO</option>
                              <option value="REGULAR" >REGULAR</option>
                              <option value="MALO" >MALO</option>
                              <option value="SUSTRAIDO" >SUSTRAIDO</option>
                            </select>  
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="material">MATERIAL DE CONSTRUCCIÓN</label>                            
                            <select class="js-example-basic-multiple w-100" multiple="multiple" name="material" id="material" required>
                              <option value="HORMIGON">HORMIGON</option>
                              <option value="PIEDRA">PIEDRA</option>
                              <option value="CEMENTO">CEMENTO</option>
                              <option value="FIBRA">FIBRA</option>
                              <option value="HIERRO">HIERRO</option>
                            </select>
                          </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="vecino">PAÍS VECINO</label>
                            <select class="form-control" name="vecino" id="vecino" >
                              <option value="ARGENTINA" >ARGENTINA</option>
                              <option value="BRASIL" >BRASIL</option>
                              <option value="CHILE" >CHILE</option>
                              <option value="PARAGUAY" >PARAGUAY</option>
                              <option value="PERU" >PERÚ</option>
                            </select>
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="distancia">DISTÁNCIA AL PMA</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="number" class="form-control" name="distancia" id="distancia" aria-describedby="helpId" value="1" required> 
                          </div>
                      </div>
                      <div class="col-md-3" >
                        <div class="form-group">
                          <label for="lat">LATITUD</label>
                          <input type="text" class="form-control" name="lat" id="lat" aria-describedby="helpId" required readonly > 
                        </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="lon">LONGITUD</label>
                            <input type="text" class="form-control" name="lon" id="lon" aria-describedby="helpId" required readonly > 
                          </div>
                      </div>                    
                    </div>     
                      
                    

                    <div class="row">
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="departamento">DEPARTAMENTO</label>
                            <select class="form-control" name="departamento" id="departamento" >
                              <option value="LA PAZ" >LA PAZ</option>
                              <option value="ORURO" >ORURO</option>
                              <option value="POTOSI" >POTOSÍ</option>
                              <option value="SANTA CRUZ" >SANTA CRUZ</option>
                              <option value="PANDO" >PANDO</option>
                              <option value="BENI" >BENI</option>
                              <option value="TARIJA" >TARIJA</option>
                            </select>
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="provincia">PROVINCIA</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="text" class="form-control" name="provincia" id="provincia" aria-describedby="helpId" value="OMASUYOS" required> 
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="municipio">MUNICIPIO</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="text" class="form-control" name="municipio" id="municipio" aria-describedby="helpId" value="ACHACACHI" required> 
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="localidad">LOCALIDAD</label>
                            <input onblur="aMayusculas1(this.value,this.id)" type="text" class="form-control" name="localidad" id="localidad" aria-describedby="helpId" value="ACHACACHI" required> 
                          </div>
                      </div>
                    </div>

                    <h4>RECONOCIMIENTO</h4><br>

                    <div class="row">
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="fechain">FECHA DE INICIO</label>
                            <input type="datetime-local" class="form-control" name="fechain" id="fechain" aria-describedby="helpId" required> 
                          </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="fechafin">FECHA DE FINALIZACIÓN</label>
                            <input type="datetime-local" class="form-control" name="fechafin" id="fechafin" aria-describedby="helpId" required> 
                          </div>
                      </div>
                    </div>

                    <h4>TERRENO</h4><br>

                    <div class="row">
                      <div class="col-md-4" >
                          <div class="form-group">
                            <label for="helipunto">HELIPUNTO</label>
                            <select class="form-control" name="helipunto" id="helipunto" >
                              <option value="SI" selected>SI</option>
                              <option value="NO" >NO</option>
                            </select>
                          </div>
                      </div>
                      <div class="col-md-4" >
                        <div class="form-group">
                          <label for="latheli">LATITUD HELIPUNTO</label>
                          <input type="text" class="form-control" name="latheli" id="latheli" aria-describedby="helpId"  > 
                        </div>
                      </div>
                      <div class="col-md-4" >
                          <div class="form-group">
                            <label for="longheli">LONGITUD HELIPUNTO</label>
                            <input type="text" class="form-control" name="longheli" id="longheli" aria-describedby="helpId" > 
                          </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-3" >
                        <div class="form-group">
                          <label for="observacion">OBSERVACION Y CAMPOS DE TIRO</label>
                          <select  class="form-control" name="observacion" id="observacion" >
                            <option value="SI" selected>SI</option>
                            <option value="NO" >NO</option>
                          </select>  
                        </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="detalleobs">DESCRIPCIÓN</label><br>
                            <textarea class="form-control" name="detalleobs" cols="40" rows="5" ></textarea>
                          </div>
                      </div>
                      <div class="col-md-3" >
                        <div class="form-group">
                          <label for="obstaculos">OBSTACULOS</label>
                          <select  class="form-control" name="obstaculos" id="obstaculos" >
                            <option value="SI" selected>SI</option>
                            <option value="NO" >NO</option>
                          </select>  
                        </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="detalleobsta">DESCRIPCIÓN</label><br>
                            <textarea class="form-control" name="detalleobsta" cols="40" rows="5" ></textarea>
                          </div>
                      </div>                      
                    </div>

                    <h4>VECINO</h4><br>

                    <div class="row">
                      <div class="col-md-3" >
                        <div class="form-group">
                          <label for="unidad">UNIDAD MILITAR CERCANA</label>
                          <select  class="form-control" name="unidad" id="unidad" >
                            <option value="SI" selected>SI</option>
                            <option value="NO" >NO</option>
                          </select>  
                        </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="detalleuni">DETALLE DE LA UNIDAD</label><br>
                            <textarea class="form-control" name="detalleuni" cols="40" rows="5" ></textarea>
                          </div>
                      </div>
                      <div class="col-md-3" >
                        <div class="form-group">
                          <label for="observacionv">OBSERVACIÓN Y CAMPOS DE TIRO</label>
                          <select  class="form-control" name="observacionv" id="observacionv" >
                            <option value="SI" selected>SI</option>
                            <option value="NO" >NO</option>
                          </select>  
                        </div>
                      </div>
                      <div class="col-md-3" >
                          <div class="form-group">
                            <label for="detalleobsvecino">DESCRIPCIÓN</label><br>
                            <textarea class="form-control" name="detalleobsvecino" cols="40" rows="5" ></textarea>
                          </div>
                      </div>                      
                    </div>

                    <h4>FOTOGRAFIAS</h4><br>

                    <div class="row">
                      <div class="col-md-4 grid-margin stretch-card">
                        <div class="card">
                          <div class="card-body">
                            <h4 class="card-title d-flex">Fotografia 1
                              <small class="ml-auto align-self-end">
                              </small>
                            </h4>
                            <input type="file" name="foto1" id="foto1" class="dropify" capture="environment" required/>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 grid-margin stretch-card">
                        <div class="card">
                          <div class="card-body">
                            <h4 class="card-title d-flex">Fotografia 2
                              <small class="ml-auto align-self-end">
                              </small>
                            </h4>
                            <input type="file" name="foto2" id="foto2" class="dropify" capture="environment" required/>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 grid-margin stretch-card">
                        <div class="card">
                          <div class="card-body">
                            <h4 class="card-title d-flex">Fotografia 3
                              <small class="ml-auto align-self-end">
                              </small>
                            </h4>
                            <input type="file" name="foto3" id="foto3" class="dropify" capture="environment" required/>
                          </div>
                        </div>
                      </div>
                    </div>

                              
                    
                     <button type="submit" class="btn btn-primary mr-2">Registrar</button>
                     <a href="{{route('reconocimientos.index')}}" class="btn btn-light">
                        Cancelar
                     </a>
                     {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
{!! Html::script('melody/js/data-table.js') !!}
{!! Html::script('melody/js/dropify.js') !!}
{!! Html::script('melody/js/select2.js') !!}
<script type="text/javascript">
  function aMayusculas1(obj,id){
    obj = obj.toUpperCase();
    document.getElementById(id).value = obj;
  }
</script>
<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {

        document.getElementById('lat').value = position.coords.latitude;
        document.getElementById('lon').value = position.coords.longitude;
        document.getElementById('latheli').value = position.coords.latitude;
        document.getElementById('longheli').value = position.coords.longitude;
      }, function (error) {
            alert('Error al obtener la ubicación: ' + error.message);
        });
  } else {
      alert('Tu navegador no soporta geolocalización.');
  }
</script>
@endsection