@extends('adminlte::page')

@section('title', 'Mantenimiento')

@section('content_header')

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-6">
                    <h1><i class="fa fa-th" aria-hidden="true"></i> Registro de Vehículo</h1>
                </div>

                <div class="col-md-6" id="grupo__accion">
                    <br><br>
                    <div class="float-right">
                        <button type="button" class="btn btn-primary" id="busquedaVeh"> <i class="fas fa-search"></i> Buscar
                        </button>
                        <button type="submit" class="btn btn-info toastrDefaultSuccess" id="btn_Grabar" name="btn_Grabar">
                            <i class="fas fa-save">
                                Grabar</i></button>
                        <button type="submit" class="btn btn-info toastrDefaultSuccess" id="btn_Modifica"
                            name="btn_Modifica"> <i class="fas fa-save">
                                Modificar</i></button>
                        <button type="button" class="btn btn-danger" onclick="LimpiarTodo()"> <i class="fas fa-trash">
                                Limpiar</i></button>
                    </div>

                </div>
            </div>
        </div>
    </section>
@stop

@section('content')
    <!--<section class="content">
                                            <div class="container-fluid">-->
    <div style="display:none;" id="loader"></div>
    <div id="DivPrincipal">
        <form id="vehiculo_form" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <!-- left column -->
                <div class="col-md-6">
                    <!-- general form elements -->
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title">Datos Principales</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <input id="id_vehiculo" name="id_vehiculo" hidden value="0">
                                        <label>Placa del Vehículo:</label>

                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-car"></i></span>
                                            </div>
                                            <input type="text" class="form-control" id="idPlaca" name="idPlaca"
                                                data-inputmask="'mask': 'AAA-9999'" style="width: 9ch;">
                                        </div>
                                        <!-- /.input group -->
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Año del Vehículo:</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                            </div>
                                            <input type="text" class="form-control" data-inputmask-alias="datetime"
                                                id="anioVehiculo" name="anioVehiculo" data-inputmask-inputformat="yyyy"
                                                data-mask>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Tipo Combustible</label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="tipoCombustible"
                                            name="tipoCombustible">
                                            <option value="GASOLINA" selected="selected">GASOLINA</option>
                                            <option value="DIESEL">DIESEL</option>
                                            <option value="GAS">GAS</option>
                                            <option value="ELECTRICO">ELECTRICO</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Estado: </label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="estado"
                                            name="estado">
                                            <option value="A" selected="selected">Activo</option>
                                            <option value="I">Inactivo</option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Color Vehículo</label>
                                        <input type="text" class="form-control" id="colorVehiculo" name="colorVehiculo"
                                            placeholder="color" value="AMARILLO" readonly>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="InputOperacion">Chasis: </label>
                                        <input type="text" class="form-control" id="Chasis" name="Chasis"
                                            data-inputmask="'mask': '#([A]|[9])([A]|[9])([A]|[9])([A]|[9])([A]|[9])([A]|[9])([A]|[9])([A]|[9])([A]|[9])9999999' "
                                            placeholder="Ingrese el Chasis">
                                    </div>
                                </div>
                            </div>



                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Marca: </label>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <div class="form-group">

                                                <select class="form-control select2bs4" style="width: 100%;"
                                                    id="marca" name="marca" tabindex="-1">
                                                    <!--<option selected="selected">Chevrolet</option>
                                                                        <option>Hyundai</option>
                                                                        <option>Mazda</option>-->
                                                    <option value='0'>Seleccionar</option>
                                                    @foreach ($marcas as $marca)
                                                        <option value="{{ $marca->IdDetcatalogo }}">
                                                            {{ $marca->Descricion }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-light" id="addMarca"
                                                    name="addMarca"> <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <label>Modelo: </label>
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <div class="form-group">

                                                <select class="form-control select2bs4" style="width: 100%;"
                                                    id="modelo" name="modelo">
                                                    <option selected="selected">Seleccionar</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-light" id="addModelo"
                                                    name="addModelo"> <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="form-group">
                                <label for="InputOperacion">Operación: </label>
                                <input type="text" class="form-control" id="operacion" readonly  name="operacion"
                                    placeholder="Tipo Operación" value="SERV.TRANSP.URBANO">
                            </div>

                            <div class="form-group">
                                <label for="InputClaseTrans">Clase Transporte: </label>
                                <input type="text" class="form-control" id="claseTransporte" readonly name="claseTransporte"
                                    placeholder="Clase Tranporte" value="COMERCIAL">
                            </div>





                            <!--<div class="form-check">
                                                                                                                                                                                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                                                                                                                                                            <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                                                                                                                                                                        </div>-->
                        </div>
                        <!-- /.card-body -->

                        {{-- <div class="card-footer">
                            <!--<button type="submit" class="btn btn-primary">Submit</button>-->
                        </div> --}}


                    </div>
                </div>
                <!-- fin datos Principales -->
                <div class="col-md-6">
                    <!-- Form Element sizes -->
                    <div class="card card-warning">
                        <div class="card-header">
                            <h3 class="card-title">Documentación</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label>Pertenece a:</label>
                                <select class="form-control select2bs4" style="width: 100%;" id="pertenece"
                                    name="pertenece">
                                    <option selected value="">Seleccione.... </option>
                                    @foreach ($socios as $socio)
                                        <option value="{{ $socio->IdSocios }}"> {{ $socio->nombre_completo }} </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- <div class="form-group">
                                <label>Emisión Licencia: </label>
                                <div class="input-group date" id="reservationdate2" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" id="emiLicencia"
                                        name="emiLicencia" data-target="#reservationdate2" />
                                    <div class="input-group-append" data-target="#reservationdate2"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Caducidad Licencia: </label>
                                <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" id="caduLicencia"
                                        name="caduLicencia" data-target="#reservationdate" />
                                    <div class="input-group-append" data-target="#reservationdate"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="form-group">


                                <label>Caducidad Matricula:</label>
                                <input name="matricula" type="date" class="form-control" id="matricula">
                                {{-- <div class="input-group date" id="reservationdate1" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" id="matricula"
                                        name="matricula" data-target="#reservationdate1" />
                                    <div class="input-group-append" data-target="#reservationdate1"
                                        data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div> --}}
                            </div>

                            <div class="form-group">
                                <label for="exampleInputFile">Matricula: </label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="certMatriculacion"
                                            accept=".pdf" name="certMatriculacion">
                                        <label class="custom-file-label" for="exampleInputFile">Cargar archivo pdf</label>
                                    </div>
                                    {{-- <div class="input-group-append">
                                    <span class="input-group-text">Cargar</span>
                                </div> --}}
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="exampleInputFile">Resolución: </label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="permisoOperacion"
                                            accept=".pdf" name="permisoOperacion">
                                        <label class="custom-file-label" for="exampleInputFile">Cargar archivo pdf</label>
                                    </div>
                                    {{-- <div class="input-group-append">
                                    <span class="input-group-text">Cargar</span>
                                </div> --}}
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>

            </div>
        </form>
        <div class="card card-success" id="card_reports" name="card_reports">
            <div class="card-header bg-warning">
                <h3 class="card-title">Documentos Ingresados</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6 text-center">
                        <div class="form-group">
                            <label for="exampleInputFile">Certificado de Matriculación</label>
                            <div class="input-group justify-content-center">
                                <button type="button" class="btn btn-info" onclick="verificarPdf(1)"> <i
                                        class="fas fa-eye">
                                        Ver Pdf</i></button>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 text-center">
                        <div class="form-group">
                            <label for="exampleInputFile">Permiso de Operación</label>
                            <div class="input-group justify-content-center">
                                <button type="button" class="btn btn-info" onclick="verificarPdf(2)">
                                    <i class="fas fa-eye">
                                        Ver Pdf</i></button>

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

            </div>
        </div>

    </div>
    <!--</div>
                                                                                                                                           </section>-->

    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--xl large-->
    <div class="modal fade" id="modal-xl">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Búsqueda de Vehículo</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <div class="row">
                        <div class="col-12">

                            <!-- /.card -->
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title"></h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <table id="tblBuscarVehiculos" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Cod. Vehiculo</th>
                                                <th>Placa Vehiculo</th>
                                                <th>Fecha Ingreso</th>
                                                <th>Codigo Marca</th>
                                                <th>Codigo Modelo</th>
                                                <th>Socio</th>
                                                <th style="display:none;">AnioVehiculo</th>
                                                <th style="display:none;">TipoCombustible</th>
                                                <th style="display:none;">ColorVehiculo</th>
                                                <th style="display:none;">IdMarca</th>
                                                <th style="display:none;">IdModelo</th>
                                                <th style="display:none;">AmbienteOperacion</th>
                                                <th style="display:none;">ClaseTransporte</th>
                                                <th style="display:none;">Estado</th>
                                                <th style="display:none;">PerteneceVehiculo</th>
                                                <th style="display:none;">FechaCaducidadLicencia</th>
                                                <th style="display:none;">FechaCaducidadMatricula</th>
                                                <th style="display:none;">Chasis</th>
                                                <th style="display:none;">emisionLicencia</th>
                                            </tr>
                                        </thead>
                                        <tfoot>

                                        </tfoot>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                                                                                                                                      <button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--MODAL MARCAS-->
    <div class="modal fade" id="modal-marcas">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Marcas de Vehículos</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <form id="marca_form" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-12">

                                <div class="card-body">
                                    <input id="IdDetcatalogo" name="IdDetcatalogo" hidden value="0">
                                    <input id="CodigoCatalogo" name="CodigoCatalogo" hidden value="0">
                                    <div class="form-group">
                                        <label for="InputOperacion">Descripcíon: </label>
                                        <input type="text" class="form-control" id="descricion" name="descricion"
                                            placeholder="Ingrese la Marca">
                                    </div>
                                    <div class="form-group">
                                        <label>Estado: </label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="estado"
                                            name="estado">
                                            <option value="A" selected="selected">Activo</option>
                                            <option value="I">Inactivo</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-rigth">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    <button type="button" class="btn btn-primary" id="btnGuardarMarca" name="btnGuardarMarca">Guardar
                        Cambios</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!--END MODAL MARCAS-->
    </div>

    <!--MODAL MODELOS-->
    <div class="modal fade" id="modal-modelos">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fas fa-search"> </i> Modelos de Vehículos</h4>
                    <button id="CloseModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--<p>One fine body&hellip;</p>-->
                    <form id="modelo_form" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-12">

                                <div class="card-body">
                                    <input id="IdDetcatalogo" name="IdDetcatalogo" hidden value="0">
                                    <input id="CodigoCatalogo" name="CodigoCatalogo" hidden value="0">
                                    <input id="IdPadre" name="IdPadre" hidden hidden value="0">
                                    <input id="marca" name="marca" hidden hidden value="0">
                                    <div class="form-group">
                                        <label>Marca: </label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="marca2"
                                            name="marca2" disabled="true" tabindex="-1">
                                            @foreach ($marcas as $marca)
                                                <option value="{{ $marca->IdDetcatalogo }}"> {{ $marca->Descricion }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="InputOperacion">Descripcíon: </label>
                                        <input type="text" class="form-control" id="descricion" name="descricion"
                                            placeholder="Ingrese el Modelo">
                                    </div>
                                    <div class="form-group">
                                        <label>Estado: </label>
                                        <select class="form-control select2bs4" style="width: 100%;" id="estado"
                                            name="estado">
                                            <option value="A" selected="selected">Activo</option>
                                            <option value="I">Inactivo</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-rigth">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    <button type="button" class="btn btn-primary" id="btnGuardarModelo" name="btnGuardarModelo">Guardar
                        Cambios</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!--END MODAL MODELOS-->
    </div>

@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css\mantenimiento\vehiculos\estilos_vehiculo.css') }}">
@stop

@section('js')
    <script src="../../js/Vehiculos.js"></script>
    <script>
        const LimpiarTodo = () => {
            location.reload();
        }
        const verificarPdf = (tipo) => {
            console.log($('#id_vehiculo').val());
            if ($('#id_vehiculo').val() == "") {
                toastr.error("Escoja un vehiculo.!!");
            } else {
                var w = window.open("/mostrarArchivoVehiculo/" + $('#id_vehiculo').val() + "/" + tipo);
                w.document.title = (tipo == 1 ? 'Certificado de Matriculación' : 'Certificado de Permiso Operación');
            }
        }
    </script>
@stop