@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Tipos de Documentos')

{{-- {} Ajustes, propiedades y estilos --}}
@section('cabeza')

{{-- ! --}}
@parent

{{-- ! Select 2 v4.1.0 --}}
<link rel="stylesheet" href="{{ asset('archivos/librerias/select2/v4.1.0/css/select2.min.css') }}">

{{-- ! Data Tables v1.13.2 --}}
@include('librerias.datatables.css')

<link rel="stylesheet" href="{{ asset('archivos/css/aplicacion/seccion/registros/tiposDocumentos.css') }}">

@endsection

{{-- {} Encabezado de la sección --}}
@section('encabezado')

@component('aplicacion.elementos.boton', [
  'tipo' => 'submit',
  'id' => 'botonGuardar',
  'atributos' => '
    form=formularioTiposDocumentos
    formmethod=POST
    formaction=' . route('ejecutar') . '?0=0&procedimiento=p_registrar_tipos_documentos
  '
])
  Guardar
@endcomponent

@component('aplicacion.elementos.boton', [
  'id' => 'botonLimpiar',
  'clases' => 'btn btn-warning',
  'atributos' => '
    form=formularioTiposDocumentos
    data-accion=limpiar
  '
])
  Limpiar
@endcomponent

@endsection

{{-- {} Contenido de la sección --}}
@section('seccion')

<form
  class="form"
  id="formularioTiposDocumentos"
  autocomplete="off"
  data-tabla-limpiar-fila-activa="#tablaRegistros"
>

  @csrf

  <input id="id_tipo_documento" name="id_tipo_documento" hidden />

  <div class="row">

    <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'tipo_documento',
        'titulo' => 'Tipo de Documento',
        'atributos' => 'maxlength=100'
      ])
      @endcomponent
    </div>

    <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'titulo' => 'Referencia',
        'id' => 'referencia',
        'atributos' => 'maxlength=30'
      ])
      @endcomponent
    </div>

    <div class="col-6 col-sm-6 col-md-6 col-lg-1 col-xl-1 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta',[
        'tipo' => 'select',
        'id' => 'origen',
        'titulo' => 'Origen'
      ])

        <option value="D">Débito</option>
        <option value="C">Crédito</option>

      @endcomponent
    </div>

    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-3">
      @component('aplicacion.elementos.grupo.campos')

      @component('aplicacion.elementos.campo.etiqueta',[
        'tipo' => 'select',
        'id' => 'id_cuenta_contable',
        'atributos' => '
        data-peticion-procedimiento=p_traer_filtros
        data-peticion-parametros="renglon: CUENTAS_CONTABLES; tipo_filtro: TODAS"
        ',
        'titulo' => 'Cuenta Contable'
      ])
      @endcomponent

      @component('aplicacion.elementos.boton', [
        'clases' => 'btn btn-success',
        'atributos' => '
          data-accion=crear
          data-peticion-campo=id_cuenta_contable
        '
      ])
        <i class="fa-solid fa-plus"></i>
      @endcomponent

    @endcomponent
    </div>

    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'titulo' => 'Renglón',
        'id' => 'renglon_tipo_documento',
        'nombre' => 'renglon_tipo_documento',
        'atributos' => '
          data-peticion-procedimiento="p_traer_filtros"
          data-peticion-parametros="renglon: RENGLONES; tipo_filtro: TIPOS_DOCUMENTOS"
        '
      ])
      @endcomponent
    </div>

    @component('aplicacion.elementos.tabla-vieja', ['atributos' => 'data-tabla-seleccionable=doble'])

      <thead>
        <tr>

          <th
            class="id"
            data-columna-nombre="id_tipo_documento"
            data-columna-tipo="num"
            data-columna-ordenable
            data-columna-buscable
          >ID</th>

          <th
            data-columna-nombre="tipo_documento"
            data-columna-tipo="string"
            data-columna-ordenable
            data-columna-buscable
          >Tipo Documento</th>

          <th
            data-columna-nombre="referencia"
            data-columna-tipo="string"
            data-columna-ordenable
            data-columna-buscable
          >Referencia</th>

          <th
            data-columna-nombre="origen"
            data-columna-tipo="string"
            data-columna-ordenable
            data-columna-buscable
          >Origen</th>

          <th
            data-columna-nombre="cuenta_contable"
            data-columna-tipo="string"
            data-columna-ordenable
            data-columna-buscable
          >Cuenta Contable</th>

          <th
            data-columna-nombre="cuenta"
            data-columna-tipo="string"
            data-columna-ordenable
            data-columna-buscable
          >Cuenta</th>

          <th
          data-columna-nombre="renglon"
          data-columna-tipo="string"
          data-columna-ordenable
          data-columna-buscable
          >Renglón</th>

        </tr>
      </thead>

      <tbody>
        <tr>
          <td class="text-center" colspan="100%">Cargando ...</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <th colspan="100%">&nbsp;</th>
        </tr>
      </tfoot>

    @endcomponent

  </div>

</form>

@endsection

{{-- {} Programación de la sección --}}
@section('programacion')

{{-- ! --}}
@parent

{{-- ! Select 2 v4.1.0 --}}
<script src="{{ asset('archivos/librerias/select2/v4.1.0/js/select2.min.js') }}"></script>

{{-- ! Data Tables v1.13.2 --}}
@include('librerias.datatables.js')

{{-- ! iMask v6.4.3 --}}
<script src="{{ asset('archivos/librerias/imask/v6.4.3/imask.js') }}"></script>

{{-- ! --}}
<script type="module" src="{{ asset('archivos/js/aplicacion/seccion/registros/tiposDocumentos.js') }}"></script>

@endsection
