@extends('adminlte::page')

@section('title', 'Recepcion')

@section('content_header')
    <h1>Recepción vehiculo</h1>


    <form id="form_recepcion" action="{{ url('admin/recepcion/guardar') }}"  data-type="{{ $action }}" enctype="multipart/form-data" role="form" data-toggle="validator" method="POST">
    {{ csrf_field() }}
        <div id="div_recepcion">
            <input id="vehiculo_id" name="vehiculo_id" style="display: none;" class="hidden" value="">
            
            <div class="row"><div class="col-md-6"><div class="js-form-alerts"></div></div>
            </div><br>


    <input type='text' class="hidden" id='step' style="display: none;" value='0'>

     <!-- /.row -->
    <div class="row">                <!-- ********** Informacion general de la recepcion ************ -->
    <div class="col-md-12">

    <div style="margin-top:12px !important; background-color: #fff0 !important;" id='regForm'>

 
   <div class="row">
                <!-- ********** Informacion general de la recepcion ************ -->
                <div class="col-md-4" style="background-color: white;
  padding: 20px;">
                    <div class="box box-primary">
                        <div class="box-header with-border"><h3 class="box-title"><i class="fa fa-list-alt"></i>&nbsp;Inf. Ingreso</h3></div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="fecha_entrada">Fecha entrada</label>
                                        <div class="input-group date">
                                            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                            <input id="fecha_entrada" style="margin-left: 10px;" name="fecha_entrada" value="{{$fecha_entrada }}"
                                               class="datepicker form-control" data-date-format="dd/mm/yyyy" required>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <!-- /.col -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tiempo_ingreso">Tiempo ingreso</label>
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
                                            <input id="tiempo_ingreso" name="tiempo_ingreso" class="form-control control_recep head_recep"
                                             
                                                   readonly>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.col -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="transportista_id">Transportista</label>
                                        <select id="transportista_id" name="transportista_id" data-size="6"
                                                class="form-control selectpicker control_recep head_recep req" data-live-search="true" required>
                                            <option value="">Seleccione...</option>
                                       
                                            @foreach ($transportistas as $trans)

                                            <option value="{{ $trans['id'] }}">{{ $trans['nombre'] }}</option>
                                         
                                            @endforeach
                                        </select>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <!-- /.col -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="nombre_operador">Nombre operador</label>
                                        <input class="form-control control_recep head_recep" id="nombre_operador" name="nombre_operador" value=""
                                      >
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="origen">Origen</label>
                                        <input class="form-control control_recep head_recep" id="origen" name="origen" value="" >
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="numero_madrina">N&uacute;mero trailer</label>
                                        <input value="" id="numero_madrina" name="numero_madrina"
                                               class="form-control control_recep head_recep" >
                                    </div>
                                </div>
                                <!-- /.col -->
                            </div>
                            <!--/.row-->
                        </div>
                        <!-- /box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /col --><!-- *********************** TERMINA Informacion general de la recepcion ******************** -->
               
               
               
                <div class="col-md-8" style="background-color: white;
  padding: 20px;">
                    <!-- ************************** informacion vehiculos de la recepcion ************************************ -->
                    <div class="box box-primary">
                        <div class="box-header with-border"><h3 class="box-title"><i class="fa fa-list-alt"></i>&nbsp;Inf. Vehículo</h3></div>
                        <div class="box-body">
                            <div class="row row-reingreso hidden">
                                <div class="col-md-12">
                                    <div class="alert alert-warning">
                                        <strong>Recuerda!</strong>&nbsp; Registrar todos los datos obligatorios
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                              
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="search">Buscar VIN (VW, SEAT, CUPRA, HONDA)</label>
                                        <input autocomplete="off" id="search" name="search" placeholder="Buscar" class="form-control">
                                        <ul id="suggesstion-box" class="list-group"></ul>
                                    </div>
                                </div>
                                <!-- /.col -->
                                <input type="hidden" id="fecha_factura" name="fecha_factura" value="">
                              
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="vin">VIN</label>
                                        <input id="vin" name="vin" placeholder="VIN" class="form-control control_car control_recep text-uppercase req"
                                               maxlength="17" data-minlength="17"  value="" data-type_reg="{{ $action }}"
                                             required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <!-- /.col -->
                              
                                <!--/.col-->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Versión</label>
                                        <input id="version" name="version"  value="" class="form-control control_recep">
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="color">Color</label>
                                        <input id="color" name="color" placeholder="Color veh&iacute;culo"  value=""
                                               class="form-control control_recep control_car req" maxlength="30" autocomplete="off" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <!-- /col -->
                          


                                <!--/.col-->
                            </div>
                            <!--/.row-->
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="anio">Año</label>
                                        <select id="anio" name="anio"  class="form-control selectpicker select-mobile req" required>
                                            <option value="">Seleccione...</option>
                                            <option  value="2024">2024</option>
                                            <option  value="2023">2023</option>
                                            <option  value="2022">2022</option>
                                            <option  value="2021">2021</option>
                                            <option  value="2020">2020</option>
                                            <option  value="2019">2019</option>
                                            <option  value="2018">2018</option>
                                            <option  value="2017">2017</option>
                                            <option  value="2016">2016</option>
                                        </select>
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="estado_vehiculo">Estado vehículo</label>
                                        <select name="estado_vehiculo" id="estado_vehiculo"
                                           class="form-control selectpicker control_recep select-mobile req" required>
                                            <option value="">Seleccione...</option>
                                            <option value="NUEVO" >Nuevo</option>
                                            <option value="USADO">Usado</option>
                                        </select>
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="kilometraje">Kilometraje</label>
                                        <input id="kilometraje" name="kilometraje" placeholder="Kilometraje" class="form-control control_recep control_car req"
                                               value="" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <!-- /.col -->
                             
                           
                        </div>
                    </div>
                </div>
            </div>

                 <div class="col-md-12" style="background-color: white;
  padding: 20px; margin-top:20px;">
                    <!-- ************************** informacion vehiculos de la recepcion ************************************ -->
                    <div class="box box-primary">
                        <div class="box-header with-border"><h3 class="box-title"><i class="fa fa-list-alt"></i>&nbsp;Daños</h3></div>
                        <div class="box-body">

                               <div class="row">
                                 <div class="col-md-12">
                                <p>Código de daños <small>(Sólo de referencia)</small></p>
                                 </div>


                              


                             


                                <!-- /.col -->
                                <div class="col-md-6">
                                    <label for="detalle_danios">Detalle daños</label>
                                    <textarea id="detalle_danios" name="detalle_danios"
                                              class="form-control control_recep control_car"></textarea>
                                    <br>
                                </div>
                                <!--/.col-->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="observaciones_vehiculo">Observaciones veh&iacute;culo</label>
                                        <textarea id="observaciones_vehiculo" name="observaciones_vehiculo" 
                                                  class="form-control control_recep control_car"></textarea>
                                    </div>
                                </div>
                                <!-- /.col -->
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Daños vehículo</label>
                                        <div class="checkbox">
                                            <input class="toggleCheck sw_control control_recep danios_class"
                                              
                                                   id="danios_vehiculo" name="danios_vehiculo" data-width="100%" data-toggle="toggle"
                                                   data-size="small" data-onstyle="danger" data-offstyle="success" data-on="SI" data-off="NO" type="checkbox">
                                        </div>
                                    </div>
                                </div>
                                <!--/.col-->

                           


                                 


                            </div>


                            <!-- /.row -->
                        </div>
                        <!-- /box-body -->
                    </div>
                    <!-- /box -->
                </div>
                <!-- /.col -->


     <!--datoas de archivos-->
                <div class="col-md-12" style="background-color: white;
  padding: 20px; margin-top:20px;">
                    <!-- ************************** informacion vehiculos de la recepcion ************************************ -->
                    <div class="box box-primary">
                        <div class="box-header with-border"><h3 class="box-title"><i class="fa fa-list-alt"></i>&nbsp;Archivos</h3></div>
                        <div class="box-body">

                               <div class="row">

                                   <div class="col-md-6">
                                 <label>Hoja daños</label>
                                    <div class="form-group">
                                     <input class="form-control" name="folio_hoja_danios" placeholder="Folio hoja daños" value="">
                                   
                                     <div class="invoiceBox">
                                       <label for="file">
                                         <div class="boxi1 boxFile" data-text="Seleccionar archivo">
                                           Seleccionar archivo
                                         </div>
                                       </label>
                                       <input id="file" multiple=""  name="hoja_danios"  size="6000" type="file" accept="application/pdf,image/x-png,image/gif,image/jpeg,image/jpg,image/tiff">
                                     </div>



                                    
                                    </div>
                                     </div>


                                   <div class="col-md-6">
                                      <label>Hoja traslado</label>
                                        <div class="form-group">
                                        <input class="form-control" name="folio_hoja_traslado" placeholder="Folio hoja traslado" value="">
                                     
                                        
                                    <div class="invoiceBox">
                                       <label for="file2">
                                         <div class="boxi2 boxFile" data-text="Seleccionar archivo">
                                           Seleccionar archivo
                                         </div>
                                       </label>
                                       <input id="file2" multiple=""  name="hoja_traslado"  size="6000" type="file" accept="application/pdf,image/x-png,image/gif,image/jpeg,image/jpg,image/tiff">
                                     </div>

                                        
                                        
                                        
                                        </div>
                                  </div>


                                 <div class="col-md-6">
                                    <label>Hoja viajera</label>
                                    <div class="form-group">
                                
                                    <div class="invoiceBox">
                                       <label for="file3">
                                         <div class="boxi3 boxFile" data-text="Seleccionar archivo">
                                           Seleccionar archivo
                                         </div>
                                       </label>
                                       <input id="file3" multiple=""  name="hoja_viajera"  size="6000" type="file" accept="application/pdf,image/x-png,image/gif,image/jpeg,image/jpg,image/tiff">
                                     </div>

                                </div>
                                </div>


                                 <div class="col-md-6">
                                   <label>Hoja avaluo</label>
                                    <div class="form-group">
                               
                                 
                                   <div class="invoiceBox">
                                       <label for="file4">
                                         <div class="boxi4 boxFile" data-text="Seleccionar archivo">
                                           Seleccionar archivo
                                         </div>
                                       </label>
                                       <input id="file4" multiple=""  name="hoja_avaluo"  size="6000" type="file" accept="application/pdf,image/x-png,image/gif,image/jpeg,image/jpg,image/tiff">
                                     </div>
                                     
                                
                                </div>
                                </div>
                                
                                </div>

                         </div>
                        </div>
                     </div>
 <!--datoas de archivos fin-->





   </div>


    



<div style="overflow:auto;">
  <div style="float:right;">
    <button type="button" class='btn btn-success btn-block js_next_button  btn-submit' id="nextBtn" >Next</button>
  </div>
</div>

  




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




   
           
               
            </div>
          

        <!--** row ***************************************************** -->
        <div id="logger"><br>Debug:<br><br></div>
    </form>



@stop

@section('content')
    
@stop

@section('css')
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.invoiceBox > input {
  display: none;
}
.invoiceBox label {
	display: block;
}
.boxFile {
	display: inline-block;
  width: 100%;
  border: 1px solid grey;
  background: #fff;
  color: grey;
  padding: 10px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.boxFile:hover {
	cursor: pointer;
	background: grey;
	color: #fff;
}
.boxFile i {
	display: block;
	font-size: 26px;
	margin-bottom: 5px;
}
.attached,
.attached:hover,
.attached:focus {
	background: green;
  color: #fff;
  border: 1px solid green;
}
</style>
@stop

@section('js')
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
   
document.querySelector('#file').addEventListener('change', function(e) {
  var boxFile = document.querySelector('.boxi1');
  boxFile.classList.remove('attached');
  boxFile.innerHTML = boxFile.getAttribute("data-text");
  if(this.value != '') {
    var allowedExtensions = /(\.pdf|\.jpg|\.jpeg|\.png|\.gif\.tiff)$/i;
    if(allowedExtensions.exec(this.value)) {
      boxFile.innerHTML = e.target.files[0].name;
      boxFile.classList.add('attached');
    } else {
      this.value = '';
      alert('El archivo que intentas subir no está permitido.\nLos archivos permitidos son .pdf, .jpg, .jpeg, .png, .gif y .tiff');
      boxFile.classList.remove('attached');
    }
  }
});

document.querySelector('#file2').addEventListener('change', function(e) {
  var boxFile = document.querySelector('.boxi2');
  boxFile.classList.remove('attached');
  boxFile.innerHTML = boxFile.getAttribute("data-text");
  if(this.value != '') {
    var allowedExtensions = /(\.pdf|\.jpg|\.jpeg|\.png|\.gif\.tiff)$/i;
    if(allowedExtensions.exec(this.value)) {
      boxFile.innerHTML = e.target.files[0].name;
      boxFile.classList.add('attached');
    } else {
      this.value = '';
      alert('El archivo que intentas subir no está permitido.\nLos archivos permitidos son .pdf, .jpg, .jpeg, .png, .gif y .tiff');
      boxFile.classList.remove('attached');
    }
  }
});

document.querySelector('#file3').addEventListener('change', function(e) {
  var boxFile = document.querySelector('.boxi3');
  boxFile.classList.remove('attached');
  boxFile.innerHTML = boxFile.getAttribute("data-text");
  if(this.value != '') {
    var allowedExtensions = /(\.pdf|\.jpg|\.jpeg|\.png|\.gif\.tiff)$/i;
    if(allowedExtensions.exec(this.value)) {
      boxFile.innerHTML = e.target.files[0].name;
      boxFile.classList.add('attached');
    } else {
      this.value = '';
      alert('El archivo que intentas subir no está permitido.\nLos archivos permitidos son .pdf, .jpg, .jpeg, .png, .gif y .tiff');
      boxFile.classList.remove('attached');
    }
  }
});

document.querySelector('#file4').addEventListener('change', function(e) {
  var boxFile = document.querySelector('.boxi4');
  boxFile.classList.remove('attached');
  boxFile.innerHTML = boxFile.getAttribute("data-text");
  if(this.value != '') {
    var allowedExtensions = /(\.pdf|\.jpg|\.jpeg|\.png|\.gif\.tiff)$/i;
    if(allowedExtensions.exec(this.value)) {
      boxFile.innerHTML = e.target.files[0].name;
      boxFile.classList.add('attached');
    } else {
      this.value = '';
      alert('El archivo que intentas subir no está permitido.\nLos archivos permitidos son .pdf, .jpg, .jpeg, .png, .gif y .tiff');
      boxFile.classList.remove('attached');
    }
  }
});

$(function(){
    $("#fecha_entrada").datepicker({
        dateFormat: "dd-mm-yy"
    });
});

</script>
@stop