@extends('layouts.admin')
@section('estilos')
<link href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet">
@endsection
@section('contenido')
<section>
  {!!Form::open(array('autocomplete'=>'off','id'=>'form-nproy', 'enctype'=>'multipart/form-data','method'=>'POST'))!!}
   <!--<form action="create" method="POST" enctype="multipart/form-data">-->  
  <div class="col-sm-12 col-sm-6">
    <label>Nombre del Proyecto o Actividad</label>
    <input type="text" class="form-control" name="nombre" value="" placeholder="Nombre del proyecto" onkeypress="return numerosyletras(event)" required>
    <label>Cliente</label>
    <input type="text" class="form-control" id="srhCli" value="" placeholder="Buscar un Cliente" onkeypress="return numerosyletras(event)" required>
    <div id="OpcCli" style="position:absolute; z-index:100; display:none;"></div>
    <input type="hidden" name="cli" id="cli" value="" required>
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <label>Inicio</label>
        <input type="text" name="dateini" class="form-control fecha" value="{{date('Y-m-d')}}" placeholder="Fecha de inicio" onkeypress="return false" data-date-start-date="0d" required>
      </div>
      <div class="col-sm-12 col-md-6">
        <label>Fin</label>
        <input type="text" name="datefin" class="form-control fecha" value="{{date('Y-m-d')}}" placeholder="Fecha de fin" onkeypress="return false" data-date-start-date="0d" required>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <label>Costo del Proyecto</label>
        <input type="text" class="form-control" name="costo" id="costo" 
        placeholder="$00000.00" 
        oninput="formatearNumero(this)" 
        onblur="aplicarFormatoFinal(this)" 
        required>
<hr style="margin:10px 0px;">
      </div>
    </div>
    <label>Agregue Cotización</label>
    <input type="file" name="recibo" id="imagen-main" class="file" required>
    <label>Dirección web</label>
    <input type="text" class="form-control" name="url" value="" placeholder="URL del proyecto (proyectos web)" onkeypress="return numerosyletras(event)"><hr style="margin:10px 0px;">
    <label>Lider del proyecto</label>
    <input type="hidden" name="lider" id="lider" value="" required>
    <input type="text" class="form-control" id="srhlider" value="" placeholder="Buscar lider" onkeypress="return numerosyletras(event)" required>
    <div id="OpcLid" style="position:absolute; z-index:100; display:none;"></div><hr>
    <fieldset>
      <legend>Colaboradores</legend>
      <input type="text" class="form-control" id="srhcol" value="" placeholder="Buscar un colaborador" onkeypress="return numerosyletras(event)">
      <div id="OpcCol" style="position:absolute; z-index:100; display:none;"></div>
      <br>
      <table class="table table-responsive table-bordered">
        <thead>
          <th>Colaborador</th>
          <th></th>
        </thead>
        <tbody  id="cols">
          <input type="hidden" name="cantcol" id="cantcol" value="0">
        </tbody>
      </table>
    </fieldset><hr>
    <div class="col-sm-12 col-md-6 text-center">
      <button type="reset" class="btn btn-danger" onclick="window.history.back();" style="width:200px;"><i class="fa fa-close"></i>&nbsp;Cancelar</button>
    </div>
    <div class="col-sm-12 col-md-6 text-center">
      <button type="submit" class="btn btn-info" style="width:200px;"><i class="fa fa-save"></i>&nbsp;Guardar</button>
    </div>
  </div>
  <div class="col-sm-12 col-md-6">
    <label>Descripción del proyecto</label>
    <textarea name="descpr" class="form-control" rows="10" placeholder="Detalles del proyecto" onkeypress="return numerosyletras(event)" required></textarea>
    <hr>
    <button type="button" data-toggle="collapse" data-target="#dirproy" class="btn btn-primary btn-sm" style="width:300px"><i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp;Agregar Dirección</button>
    <div class="row collapse" id="dirproy">
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Calle</label><span style="color: red; font-size: 1.2em;"> *</span>
        <input type="text" class="form-control" name="calle" placeholder="Ingrese Calle" onkeypress="return numerosyletras(event)">
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Colonia</label><span style="color: red; font-size: 1.2em;"> *</span>
        <input type="text" class="form-control" placeholder="Ingrese Colonia" name="colonia" onkeypress="return numerosyletras(event)">
      </div>
      <div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
          <label>Número Exterior</label><span style="color: red; font-size: 1.2em;"> *</span>
          <input type="text" class="form-control"  placeholder="Numero Exterior" name="numExt" onkeypress="return numerosyletras(event)">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
          <label>Número Interior</label>
          <input type="text" class="form-control"  placeholder="Numero Interior" name="numInt" onkeypress="return numerosyletras(event)">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
          <label>Código Postal</label><span style="color: red; font-size: 1.2em;"> *</span>
          <input type="text" class="form-control" name="cp" placeholder="Codigo Postal" onkeypress="return solonumeros(event)">
        </div>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>País</label><span class="rojo" style="color: red; font-size: 1.2em;"> *</span>
        <select class="form-control" name="pais" id="pais" onchange="getEstados(this.value, 'estad')">
          <option selected="" value="0">Seleccione...</option>
          @foreach ($paises as $ps)
          <option value="{{$ps->ps_is}}">{{$ps->ps_nombre}}</option>
          @endforeach
        </select>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Estado</label><span class="rojo" style="color: red; font-size: 1.2em;"> *</span>
        <select class="form-control" id="estad" name="estad" onchange="getMunicipios(this.value, 'municipio')">
          <option value="0"  selected>Seleccione...</option>
        </select>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Delegación / Municipio</label><span class="rojo" style="color: red; font-size: 1.2em;"> *</span>
        <select class="form-control" id="municipio" name="municipio">
          <option selected="" value="0" >Seleccione...</option>
        </select>
      </div>
      <div class="col-xs-12 col-md-6 col-lg-6">
        <label>Ciudad</label><span style="color: red; font-size: 1.2em;"> *</span>
        <input type="text" class="form-control" name="ciudad" placeholder="Ingrese Ciudad" onkeypress="return soloLetras(event)">
      </div>
    </div>
  </div>
  <!--</form>-->
  {!!Form::close()!!}
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/es.js"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.es.min.js') }}"></script>
<script type="text/javascript" src="{{asset('js/estados.js')}}"></script>
<script type="text/javascript" src="{{asset('js/proyectos.js')}}"></script>
<script type="text/javascript">
  $('.fecha').datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    language:'es',
    orientation: "bottom auto",
    startDate: null,
  });

  $(".file").fileinput({
    language: "es",
    showCaption: false,
    showUpload: false,
    browseLabel: "Cotizacion...",
    browseIcon: " <i class=\"fa fa-file-image-o\" style=\"color:#fff;\"></i>",
    browseClass: "btn btn-primary",
    showRemove: false,
    uploadAsync: true,
    overwriteInitial: false,
    initialPreviewAsData: true, // Muestra la vista previa de imágenes o PDFs
    initialPreviewFileType: 'image', // Indica que puede manejar archivos multimedia
    allowedFileExtensions: ["jpg", "png", "jpeg", "pdf"], // Extensiones permitidas
    previewFileType: ['image', 'pdf'], // Tipos que deben mostrarse en la vista previa
    initialPreviewConfig: [
        {type: "pdf", caption: "Archivo PDF", key: 1},
        {type: "image", caption: "Imagen", key: 2}
    ],
    fileActionSettings: {
        showZoom: true, // Permite ampliar el archivo
        zoomIcon: '<i class="fa fa-search-plus"></i>',
    },
  });
  
function formatearNumero(input) {
    let valor = input.value;

    // Elimina caracteres no numéricos excepto el punto decimal
    valor = valor.replace(/[^0-9.]/g, "");

    // Asegurar que solo haya un punto decimal
    let partes = valor.split(".");
    if (partes.length > 2) {
        valor = partes[0] + "." + partes.slice(1).join("");
    }

    // Formatear número con comas, pero sin aplicarlas mientras se escribe
    let num = parseFloat(valor);
    if (!isNaN(num)) {
        input.dataset.rawValue = valor; // Guardar el valor sin formato
    }

    // Solo actualizar si el usuario terminó de escribir (evento "blur")
}

function aplicarFormatoFinal(input) {
    let valor = input.dataset.rawValue || input.value;

    let num = parseFloat(valor);
    if (!isNaN(num)) {
        input.value = num.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
}



</script>
@endsection