Agregando campos nuevos para vehículos y usarlo en carta porte 3.0 en CodeIgniter 4 #20

Para hacer uso de la carta porte necesitaremos extender los campos de la tabla vehículos ya que vamos a necesitar los siguientes campos nuevos

• permSCT
• numPermisoSCT
• configVehicular
• pesoBrutoVehicular
• anioModelo
• aseguraRespCivil
• polizaRespCivil

Primero creamos el archivo de migración con el siguiente comando

php spark migrate:create camposUbicacionesCartaPorte

Dentro del archivo creado metemos el siguiente código

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class CamposUbicacionesCartaPorte extends Migration {

    public function up() {

        $campos = [
            'permSCT' => [
                'type' => 'varchar',
                'constraint' => 64,
                'null' => true,
            ],
            'numPermisoSCT' => [
                'type' => 'varchar',
                'constraint' => 64,
                'null' => true,
            ],
            'configVehicular' => [
                'type' => 'varchar',
                'constraint' => 256,
                'null' => true,
            ],
            'pesoBrutoVehicular' => [
                'type' => 'varchar',
                'constraint' => 16,
                'null' => true,
            ],
            'anioModelo' => [
                'type' => 'varchar',
                'constraint' => 8,
                'null' => true,
            ],
            'aseguraRespCivil' => [
                'type' => 'varchar',
                'constraint' => 8,
                'null' => true,
            ],
            'polizaRespCivil' => [
                'type' => 'varchar',
                'constraint' => 256,
                'null' => true,
            ],
        ];

        $this->forge->addColumn('ubicaciones', $campos);
    }

    public function down() {
        
    }

}

Modificamos App/Models/VehiculosModels.php para los nuevos campos, quedaría de la siguiente forma

<?php

namespace App\Models;

use CodeIgniter\Model;

class VehiculosModel extends Model {

    protected $table = 'vehiculos';
    protected $primaryKey = 'id';
    protected $useAutoIncrement = true;
    protected $returnType = 'array';
    protected $useSoftDeletes = true;
    protected $allowedFields = ['id'
        , 'idEmpresa'
        , 'idTipoVehiculo'
        , 'descripcion'
        , 'placas'
        , 'permSCT'
        , 'numPermisoSCT'
        , 'configVehicular'
        , 'pesoBrutoVehicular'
        , 'anioModelo'
        , 'aseguraRespCivil'
        , 'polizaRespCivil'
        , 'created_at'
        , 'updated_at'
        , 'deleted_at'];
    protected $useTimestamps = true;
    protected $createdField = 'created_at';
    protected $deletedField = 'deleted_at';
    protected $validationRules = [
    ];
    protected $validationMessages = [];
    protected $skipValidation = false;

    public function mdlGetVehiculos($idEmpresas) {

        $result = $this->db->table('vehiculos a, empresas b, tipovehiculo c')
                ->select('a.id
                         ,b.nombre as nombreEmpresa
                         ,a.idEmpresa
                         ,a.idTipoVehiculo
                         ,c.codigo as codigoTipo
                         ,c.descripcion as descripcionTipo
                         ,a.descripcion
                         ,a.placas
                         ,a.permSCT
                         ,a.numPermisoSCT
                         ,a.configVehicular
                         ,a.pesoBrutoVehicular
                         ,a.anioModelo
                         ,a.aseguraRespCivil
                         ,a.polizaRespCivil
                         ,a.created_at
                         ,a.updated_at
                         ,a.deleted_at 
                         ,b.nombre as nombreEmpresa')
                ->where('a.idEmpresa', 'b.id', FALSE)
                ->where('a.idTipoVehiculo', 'c.id', FALSE)
                ->whereIn('a.idEmpresa', $idEmpresas);

        return $result;
    }

}

En App/Controllers/VehiculosController.php no se le hizo ningún cambio

En el archivo principal de la vista App/Views/vehiculos.php quedaria de la siguiente forma.

<?= $this->include('julio101290\boilerplate\Views\load\select2') ?>
<?= $this->include('julio101290\boilerplate\Views\load\datatables') ?>
<?= $this->include('julio101290\boilerplate\Views\load\nestable') ?>
<!-- Extend from layout index -->
<?= $this->extend('julio101290\boilerplate\Views\layout\index') ?>

<!-- Section content -->
<?= $this->section('content') ?>

<?= $this->include('modulesVehiculos/modalCaptureVehiculos') ?>

<!-- SELECT2 EXAMPLE -->
<div class="card card-default">
    <div class="card-header">
        <div class="float-right">
            <div class="btn-group">

                <button class="btn btn-primary btnAddVehiculos" data-toggle="modal" data-target="#modalAddVehiculos"><i class="fa fa-plus"></i>

                    <?= lang('vehiculos.add') ?>

                </button>

            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="tableVehiculos" class="table table-striped table-hover va-middle tableVehiculos">
                        <thead>
                            <tr>

                                <th>#</th>
                                <th><?= lang('vehiculos.fields.idEmpresa') ?></th>
                                <th><?= lang('vehiculos.fields.idTipoVehiculo') ?></th>
                                <th><?= lang('vehiculos.fields.descripcion') ?></th>
                                <th><?= lang('vehiculos.fields.placas') ?></th>
                                <th><?= lang('vehiculos.fields.created_at') ?></th>
                                <th><?= lang('vehiculos.fields.updated_at') ?></th>
                                <th><?= lang('vehiculos.fields.deleted_at') ?></th>

                                <th><?= lang('vehiculos.fields.actions') ?> </th>

                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.card -->

<?= $this->endSection() ?>


<?= $this->section('js') ?>
<script>

    /**
     * Cargamos la tabla
     */

    var tableVehiculos = $('#tableVehiculos').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        autoWidth: false,
        order: [[1, 'asc']],

        ajax: {
            url: '<?= base_url('admin/vehiculos') ?>',
            method: 'GET',
            dataType: "json"
        },
        columnDefs: [{
                orderable: false,
                targets: [8],
                searchable: false,
                targets: [8]

            }],
        columns: [{
                'data': 'id'
            },

            {
                'data': 'nombreEmpresa'
            },

            {
                'data': 'descripcionTipo'
            },

            {
                'data': 'descripcion'
            },

            {
                'data': 'placas'
            },

            {
                'data': 'created_at'
            },

            {
                'data': 'updated_at'
            },

            {
                'data': 'deleted_at'
            },

            {
                "data": function (data) {
                    return `<td class="text-right py-0 align-middle">
                         <div class="btn-group btn-group-sm">
                             <button class="btn btn-warning btnEditVehiculos" data-toggle="modal" idVehiculos="${data.id}" data-target="#modalAddVehiculos">  <i class=" fa fa-edit"></i></button>
                             <button class="btn btn-danger btn-delete" data-id="${data.id}"><i class="fas fa-trash"></i></button>
                         </div>
                         </td>`
                }
            }
        ]
    });



    $(document).on('click', '#btnSaveVehiculos', function (e) {


        var idVehiculos = $("#idVehiculos").val();
        var idEmpresa = $("#idEmpresaVehiculos").val();
        var idTipoVehiculo = $("#idTipoVehiculo").val();
        var descripcion = $("#descripcion").val();
        var placas = $("#placas").val();

        var permisoSCT = $("#permisoSCT").val();
        var numPermisoSCT = $("#numPermisoSCT").val();
        var configVehicular = $("#configVehicular").val();
        var pesoBrutoVehicular = $("#pesoBrutoVehicular").val();
        var anioModelo = $("#anioModelo").val();
        var aseguraRespCivil = $("#aseguraRespCivil").val();
        var polizaRespCivil = $("#polizaRespCivil").val();



        if (idEmpresa == 0 || idEmpresa == null) {

            Toast.fire({
                icon: 'error',
                title: "Tiene que seleccionar la empresa"
            });
            return;
        }

        if (idTipoVehiculo == 0 || idTipoVehiculo == null) {

            Toast.fire({
                icon: 'error',
                title: "Tiene que seleccionar el tipo de vehiculo"
            });
            return;
        }



        $("#btnSaveVehiculos").attr("disabled", true);

        var datos = new FormData();
        datos.append("idVehiculos", idVehiculos);
        datos.append("idEmpresa", idEmpresa);
        datos.append("idTipoVehiculo", idTipoVehiculo);
        datos.append("descripcion", descripcion);
        datos.append("placas", placas);

        datos.append("permSCT", permisoSCT);
        datos.append("numPermisoSCT", numPermisoSCT);
        datos.append("configVehicular", configVehicular);
        datos.append("pesoBrutoVehicular", pesoBrutoVehicular);
        datos.append("anioModelo", anioModelo);
        datos.append("aseguraRespCivil", aseguraRespCivil);
        datos.append("polizaRespCivil", polizaRespCivil);


        $.ajax({

            url: "<?= base_url('admin/vehiculos/save') ?>",
            method: "POST",
            data: datos,
            cache: false,
            contentType: false,
            processData: false,
            success: function (respuesta) {
                if (respuesta.match(/Correctamente.*/)) {

                    Toast.fire({
                        icon: 'success',
                        title: "Guardado Correctamente"
                    });

                    tableVehiculos.ajax.reload();
                    $("#btnSaveVehiculos").removeAttr("disabled");


                    $('#modalAddVehiculos').modal('hide');
                } else {

                    Toast.fire({
                        icon: 'error',
                        title: respuesta
                    });

                    $("#btnSaveVehiculos").removeAttr("disabled");


                }

            }

        }

        )

    });



    /**
     * Carga datos actualizar
     */


    /*=============================================
     EDITAR Vehiculos
     =============================================*/
    $(".tableVehiculos").on("click", ".btnEditVehiculos", function () {

        var idVehiculos = $(this).attr("idVehiculos");

        var datos = new FormData();
        datos.append("idVehiculos", idVehiculos);

        $.ajax({

            url: "<?= base_url('admin/vehiculos/getVehiculos') ?>",
            method: "POST",
            data: datos,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (respuesta) {
                $("#idVehiculos").val(respuesta["id"]);

                $("#idEmpresaVehiculos").val(respuesta["idEmpresa"]);
                $("#idEmpresaVehiculos").trigger("change");
                $("#idTipoVehiculo").val(respuesta["idTipoVehiculo"]);
                $("#idTipoVehiculo").trigger("change");
                $("#descripcion").val(respuesta["descripcion"]);
                $("#placas").val(respuesta["placas"]);

                var newOption = new Option(respuesta["idTipoVehiculo"] + ' ' + respuesta["descripcionTipo"], respuesta["idTipoVehiculo"], true, true);
                $('#idTipoVehiculo').append(newOption).trigger('change');
                $("#idTipoVehiculo").val(respuesta["idTipoVehiculo"]);

                $("#permisoSCT").val(respuesta["permSCT"]);
                $("#permisoSCT").trigger("change");
                $("#numPermisoSCT").val(respuesta["numPermisoSCT"]);
                $("#configVehicular").val(respuesta["configVehicular"]);
                $("#pesoBrutoVehicular").val(respuesta["pesoBrutoVehicular"]);
                $("#anioModelo").val(respuesta["anioModelo"]);
                $("#aseguraRespCivil").val(respuesta["aseguraRespCivil"]);
                $("#polizaRespCivil").val(respuesta["polizaRespCivil"]);


            }

        })

    })


    /*=============================================
     ELIMINAR vehiculos
     =============================================*/
    $(".tableVehiculos").on("click", ".btn-delete", function () {

        var idVehiculos = $(this).attr("data-id");

        Swal.fire({
            title: '<?= lang('boilerplate.global.sweet.title') ?>',
            text: "<?= lang('boilerplate.global.sweet.text') ?>",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '<?= lang('boilerplate.global.sweet.confirm_delete') ?>'
        })
                .then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: `<?= base_url('admin/vehiculos') ?>/` + idVehiculos,
                            method: 'DELETE',
                        }).done((data, textStatus, jqXHR) => {
                            Toast.fire({
                                icon: 'success',
                                title: jqXHR.statusText,
                            });


                            tableVehiculos.ajax.reload();
                        }).fail((error) => {
                            Toast.fire({
                                icon: 'error',
                                title: error.responseJSON.messages.error,
                            });
                        })
                    }
                })
    })

    $(function () {
        $("#modalAddVehiculos").draggable();

    });



    $("#idTipoVehiculo").select2({
        ajax: {
            url: "<?= site_url('admin/vehiculos/getTipoVehiculoAjax') ?>",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                // CSRF Hash
                var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
                var csrfHash = $('.txt_csrfname').val(); // CSRF hash
                var idEmpresa = $('.idEmpresaVehiculos').val(); // CSRF hash

                return {
                    searchTerm: params.term, // search term
                    [csrfName]: csrfHash, // CSRF Token
                    idEmpresa: idEmpresa // search term
                };
            },
            processResults: function (response) {

                // Update CSRF Token
                $('.txt_csrfname').val(response.token);
                return {
                    results: response.data
                };
            },
            cache: true
        }
    });


</script>
<?= $this->endSection() ?>
        

El modal lo dividimos entre 3 archivo por que agregamos TABS “Pestañas” el archivo App/Views/modulesVehiculos/modalCaptureVehiculos.php quedaria con el siguiente código

<!-- Modal Vehiculos -->
<div class="modal fade" id="modalAddVehiculos" tabindex="-1" role="dialog" aria-labelledby="modalAddVehiculos" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?= lang('vehiculos.createEdit') ?></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">


                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#generales" type="button" role="tab" aria-controls="home" aria-selected="true">Generales</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#cartaPorte" type="button" role="tab" aria-controls="profile" aria-selected="false">Datos Carta Porte</button>
                    </li>

                </ul>


                <form id="form-vehiculos" class="form-horizontal">
                    <input type="hidden" id="idVehiculos" name="idVehiculos" value="0">

                    <div class="tab-content" id="myTabContent">


                        <div class="tab-pane fade show active" id="generales" role="tabpanel" aria-labelledby="generales">

                            <?= $this->include('modulesVehiculos/datosGenerales') ?>

                        </div>

                        <div class="tab-pane fade" id="cartaPorte" role="tabpanel" aria-labelledby="datosFacturacion">

                            <?= $this->include('modulesVehiculos/datosCartaPorte') ?>

                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal"><?= lang('boilerplate.global.close') ?></button>
                <button type="button" class="btn btn-primary btn-sm" id="btnSaveVehiculos"><?= lang('boilerplate.global.save') ?></button>
            </div>
        </div>
    </div>
</div>

<?= $this->section('js') ?>


<script>

    $(document).on('click', '.btnAddVehiculos', function (e) {




        $("#idVehiculos").val("0");

        $("#idEmpresaVehiculos").val("0");

        $(".datosVehiculos").val("");

        $("#idEmpresaVehiculos").trigger("change");


        $("#idTipoVehiculo").val("0");

        $("#idTipoVehiculo").trigger("change");


        $("#btnSaveVehiculos").removeAttr("disabled");

    });

    /* 
     * AL hacer click al editar
     */



    $(document).on('click', '.btnEditVehiculos', function (e) {


        var idVehiculos = $(this).attr("idVehiculos");

        //LIMPIAMOS CONTROLES
        $(".form-control").val("");

        $("#idVehiculos").val(idVehiculos);
        $("#btnGuardarVehiculos").removeAttr("disabled");

    });



    $("#idEmpresaVehiculos").select2();
    $("#permisoSCT").select2();
    $("#configVehicular").select2();

</script>


<?= $this->endSection() ?>
        

El código App/Views/modulesVehiculos/datosGenerales.php quedaría con el siguiente código

<p>
<h3>Datos Generales</h3>
<div class="form-group row">
    <label for="idEmpresa" class="col-sm-2 col-form-label">Empresa</label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>

            <select class="form-control idEmpresaVehiculos form-controlVehiculos" name="idEmpresaVehiculos" id="idEmpresaVehiculos" style="width:80%;">
                <option value="0">Seleccione empresa</option>
                <?php
                foreach ($empresas as $key => $value) {

                    echo "<option value='$value[id]'>$value[id] - $value[nombre] </option>  ";
                }
                ?>

            </select>

        </div>
    </div>
</div>
<div class="form-group row">
    <label for="idEmpresa" class="col-sm-2 col-form-label">Tipo Vehiculo</label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>

            <select class="form-control idTipoVehiculo form-controlVehiculos " name="idTipoVehiculo" id="idTipoVehiculo" style="width:80%;">
                <option value="0">Seleccione tipo Vehiculo</option>


            </select>

        </div>
    </div>
</div>
<div class="form-group row">
    <label for="descripcion" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.descripcion') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="descripcion" id="descripcion" class="form-control datosVehiculos <?= session('error.descripcion') ? 'is-invalid' : '' ?>" value="<?= old('descripcion') ?>" placeholder="<?= lang('vehiculos.fields.descripcion') ?>" autocomplete="off">
        </div>
    </div>
</div>
<div class="form-group row">
    <label for="placas" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.placas') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="placas" id="placas" class="form-control datosVehiculos <?= session('error.placas') ? 'is-invalid' : '' ?>" value="<?= old('placas') ?>" placeholder="<?= lang('vehiculos.fields.placas') ?>" autocomplete="off">
        </div>
    </div>
</div>


</p>

El archivo App/Views/modulesVehiculos/datosCartaPorte.php quedaría con el siguiente código

<p>
<h3>Datos Carta Porte</h3>


<div class="form-group row">
    <label for="permisoSCT" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.permisoSCT') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>

            <select class="form-control permisoSCT form-controlVehiculos " name="permisoSCT" id="permisoSCT" style="width:80%;">
                <option value="0">Seleccione tipo permiso</option>

                <option value="TPAF01">TPAF01 - Autotransporte Federal de carga general</option>
                <option value="TPAF02">TPAF02 - Transporte privado de carga</option>
                <option value="TPAF03">TPAF03 - Autotransporte Federal de Carga Especializada de materiales y residuos peligrosos</option>
                <option value="TPAF04">TPAF04 - Transporte de automóviles sin rodar en vehículo tipo góndola</option>
                <option value="TPAF05">TPAF05 - Transporte de carga de gran peso y/o volumen de hasta 90 toneladas</option>
                <option value="TPAF06">TPAF06 - Transporte de carga especializada de gran peso y/o volumen de más 90 toneladas</option>
                <option value="TPAF07">TPAF07 - Transporte Privado de materiales y residuos peligrosos</option>
                <option value="TPAF08">TPAF08 - Autotransporte internacional de carga de largo recorrido</option>
                <option value="TPAF09">TPAF09 - Autotransporte internacional de carga especializada de materiales y residuos peligrosos de largo recorrido</option>
                <option value="TPAF10">TPAF10 - Autotransporte Federal de Carga General cuyo ámbito de aplicación comprende la franja fronteriza con Estados Unidos</option>
                <option value="TPAF11">TPAF11 - Autotransporte Federal de Carga Especializada cuyo ámbito de aplicación comprende la franja fronteriza con Estados Unidos</option>
                <option value="TPAF12">TPAF12 - Servicio auxiliar de arrastre en las vías generales de comunicación</option>
                <option value="TPAF13">TPAF13 - Servicio auxiliar de servicios de arrastre, arrastre y salvamento, y depósito de vehículos en las vías generales de comunicación</option>
                <option value="TPAF14">TPAF14 - Servicio de paquetería y mensajería en las vías generales de comunicación</option>
                <option value="TPAF15">TPAF15 - Transporte especial para el tránsito de grúas industriales con peso máximo de 90 toneladas</option>
                <option value="TPAF16">TPAF16 - Servicio federal para empresas arrendadoras servicio público federal</option>
                <option value="TPAF17">TPAF17 - Empresas trasladistas de vehículos nuevos</option>
                <option value="TPAF18">TPAF18 - Empresas fabricantes o distribuidoras de vehículos nuevos</option>
                <option value="TPAF19">TPAF19 - Autorización expresa para circular en los caminos y puentes de jurisdicción federal con configuraciones de tractocamión doblemente articulado</option>
                <option value="TPAF20">TPAF20 - Autotransporte Federal de Carga Especializada de fondos y valores</option>
                <option value="TPTM01">TPTM01 - Permiso temporal para navegación de cabotaje</option>
                <option value="TPTA01">TPTA01 - Concesión y/o autorización para el servicio regular nacional y/o internacional para empresas mexicanas</option>
                <option value="TPTA02">TPTA02 - Permiso para el servicio aéreo regular de empresas extranjeras</option>
                <option value="TPTA03">TPTA03 - Permiso para el servicio nacional e internacional no regular de fletamento</option>
                <option value="TPTA04">TPTA04 - Permiso para el servicio nacional e internacional no regular de taxi aéreo</option>
                <option value="TPXX00">TPXX00 - Permiso no contemplado en el catálogo</option>
            </select>

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

<div class="form-group row">
    <label for="numPermisoSCT" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.numPermisoSCT') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="numPermisoSCT" id="numPermisoSCT" class="form-control datosVehiculos <?= session('error.numPermisoSCT') ? 'is-invalid' : '' ?>" value="<?= old('numPermisoSCT') ?>" placeholder="<?= lang('vehiculos.fields.numPermisoSCT') ?>" autocomplete="off">
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="configVehicular" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.configVehicular') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>

            <select class="form-control configVehicular form-controlVehiculos " name="configVehicular" id="configVehicular" style="width:80%;">
                <option value="0">Seleccione Configuracion Vehicular</option>
                <option value="VL">VL - Vehículo ligero de carga</option>
                <option value="C2">C2 - Camión Unitario</option>
                <option value="C3">C3 - Camión Unitario</option>
                <option value="C2R2">C2R2 - Camión-Remolque</option>
                <option value="C3R2">C3R2 - Camión-Remolque</option>
                <option value="C2R3">C2R3 - Camión-Remolque</option>
                <option value="C3R3">C3R3 - Camión-Remolque</option>
                <option value="T2S1">T2S1 - Tractocamión Articulado</option>
                <option value="T2S2">T2S2 - Tractocamión Articulado</option>
                <option value="T2S3">T2S3 - Tractocamión Articulado</option>
                <option value="T3S1">T3S1 - Tractocamión Articulado</option>
                <option value="T3S2">T3S2 - Tractocamión Articulado</option>
                <option value="T3S3">T3S3 - Tractocamión Articulado</option>
                <option value="T2S1R2">T2S1R2 - Tractocamión Semirremolque-Remolque</option>
                <option value="T2S2R2">T2S2R2 - Tractocamión Semirremolque-Remolque</option>
                <option value="T2S1R3">T2S1R3 - Tractocamión Semirremolque-Remolque</option>
                <option value="T3S1R2">T3S1R2 - Tractocamión Semirremolque-Remolque</option>
                <option value="T3S1R3">T3S1R3 - Tractocamión Semirremolque-Remolque</option>
                <option value="T3S2R2">T3S2R2 - Tractocamión Semirremolque-Remolque</option>
                <option value="T3S2R3">T3S2R3 - Tractocamión Semirremolque-Remolque</option>
                <option value="T3S2R4">T3S2R4 - Tractocamión Semirremolque-Remolque</option>
                <option value="T2S2S2">T2S2S2 - Tractocamión Semirremolque-Semirremolque</option>
                <option value="OTROEVGP">OTROEVGP - Especializado de carga Voluminosa y/o Gran Peso</option>
                <option value="OTROSG">OTROSG - Servicio de Grúas</option>
                <option value="GPLUTA">GPLUTA - Grúa de Pluma Tipo A</option>
                <option value="GPLUTB">GPLUTB - Grúa de Pluma Tipo B</option>
                <option value="GPLUTC">GPLUTC - Grúa de Pluma Tipo C</option>
                <option value="GPLUTD">GPLUTD - Grúa de Pluma Tipo D</option>
                <option value="GPLATA">GPLATA - Grúa de Plataforma Tipo A</option>
                <option value="GPLATB">GPLATB - Grúa de Plataforma Tipo B</option>
                <option value="GPLATC">GPLATC - Grúa de Plataforma Tipo C</option>
                <option value="GPLATD">GPLATD - Grúa de Plataforma Tipo D</option>

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

<div class="form-group row">
    <label for="pesoBrutoVehicular" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.pesoBrutoVehicular') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="pesoBrutoVehicular" id="pesoBrutoVehicular" class="form-control datosVehiculos <?= session('error.pesoBrutoVehicular') ? 'is-invalid' : '' ?>" value="<?= old('pesoBrutoVehicular') ?>" placeholder="<?= lang('vehiculos.fields.pesoBrutoVehicular') ?>" autocomplete="off">
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="anioModelo" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.anioModelo') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="anioModelo" id="anioModelo" class="form-control datosVehiculos <?= session('error.anioModelo') ? 'is-invalid' : '' ?> anioModelo" value="<?= old('anioModelo') ?>" placeholder="<?= lang('vehiculos.fields.anioModelo') ?>" autocomplete="off">
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="aseguraRespCivil" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.aseguraRespCivil') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="aseguraRespCivil" id="aseguraRespCivil" class="form-control datosVehiculos <?= session('error.aseguraRespCivil') ? 'is-invalid' : '' ?>" value="<?= old('aseguraRespCivil') ?>" placeholder="<?= lang('vehiculos.fields.aseguraRespCivil') ?>" autocomplete="off">
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="polizaRespCivil" class="col-sm-2 col-form-label"><?= lang('vehiculos.fields.polizaRespCivil') ?></label>
    <div class="col-sm-10">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
            </div>
            <input type="text" name="polizaRespCivil" id="polizaRespCivil" class="form-control datosVehiculos <?= session('error.polizaRespCivil') ? 'is-invalid' : '' ?>" value="<?= old('polizaRespCivil') ?> polizaRespCivil" placeholder="<?= lang('vehiculos.fields.polizaRespCivil') ?>" autocomplete="off">
        </div>
    </div>
</div>

</p>

Y listo ya es posible capturar los datos de vehículo para la carta porte