@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Procesos de Caja')

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

{{-- ! --}}
@parent

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

{{-- ! --}}
{{-- <link rel="stylesheet" href="{{ asset('archivos/css/aplicacion/seccion/procesos/caja.css') }}"> --}}

@endsection

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

@component('aplicacion.elementos.boton', [
  'tipo' => 'submit',
  'id' => 'boton_guardar',
  'atributos' => '
    form=formulario_cuentas
    formmethod=POST
  '
])
  Guardar
@endcomponent

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

@endsection

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

<div class="row">

  <form class="form">
    <div class="row">

      <input type="text" id="id_entidad" name="id_entidad" value="-1" hidden>
      <input type="text" id="id_cajero" name="id_cajero" value="{{ $caja->id_cajero }}" hidden>

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

          @component('aplicacion.elementos.campo.etiqueta', [
            'id' => 'id_cliente',
            'mascara' => ['tipo' => 'entero'],
            'titulo' => 'Cliente'
          ])
          @endcomponent

          @component('aplicacion.elementos.campo', [
            'id' => 'cliente',
            'clases' => '
              input-group-text
              col-9 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10
              text-start
            ',
            'atributos' => 'disabled'
          ])
          @endcomponent

          @component('aplicacion.elementos.boton', [
            'atributos' => '
              data-bs-toggle=modal
              data-bs-target=#ventanaEmergenteConsulta
              data-ventana=ventanaEmergenteConsulta
              data-peticion-tabla=clientes
              data-peticion-campo=cliente
              data-peticion-filtro=cuentas
              data-ventana-emergente-titulo=Clientes
            '
          ])
            <i class="fa-solid fa-magnifying-glass"></i>
          @endcomponent

        @endcomponent
      </div>

      <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
        @component('aplicacion.elementos.campo.etiqueta', [
          'id' => 'cajero',
          'valor' => $caja->cajero,
          'atributos' => 'disabled',
          'titulo' => 'Cajero'
        ])
        @endcomponent
      </div>

      <div class="col-2 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
        @component('aplicacion.elementos.campo.etiqueta', [
          'id' => 'turno',
          'valor' => $caja->turno,
          'mascara' => ['tipo' => 'entero'],
          'atributos' => 'disabled',
          'titulo' => 'Turno'
        ])
        @endcomponent
      </div>

      <div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2 col-xxl-2">
        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'date',
          'id' => 'fecha',
          'valor' => $caja->fecha,
          'atributos' => 'disabled',
          'titulo' => 'Fecha'
        ])
        @endcomponent
      </div>

    </div>
  </form>

  <div class="list-group list-group-horizontal text-center" role="tablist">

    <a class="list-group-item list-group-item-action list-group-item-tertiary-opposite active"
      href="#cuentas"
      role="tab"
      aria-selected="true"
      data-bs-toggle="list"
    >Cuentas</a>

    <a class="list-group-item list-group-item-action list-group-item-tertiary-opposite"
      href="#prestamos"
      role="tab"
      aria-selected="false"
      data-bs-toggle="list"
    >Préstamos</a>

    <a class="list-group-item list-group-item-action list-group-item-tertiary-opposite"
      href="#documentos"
      role="tab"
      aria-selected="false"
      data-bs-toggle="list"
    >Documentos</a>

  </div>

  <div class="tab-content">

    <div class="tab-pane active show" id="cuentas" role="tabpanel">
      <form
        class="form"
        id="formulario_cuentas"
        action="{{ route('ejecutar') }}?0=0&procedimiento=p_registrar_documentos_cuentas"
        autocomplete="off"
        data-campo-prevenir="id_cuenta"
        data-campo-deshabilitar="numero_orden, beneficiario"
        data-selector-actualizar="id_cuenta"
        data-selector-limpiar="id_tipo_documento"
      >

        @csrf

        <input type="date" name="fecha" value="{{ $caja->fecha }}" hidden>

        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 align-self-start">
            <div class="row">

              <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 col-xxl-8">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_cuenta',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="
                      renglon: CUENTAS;
                      tipo_filtro: INVERSIONES_CLIENTE;
                      valor: eval(() => id_cliente.value)
                    "
                  ',
                  'titulo' => 'Cuenta'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_tipo_documento',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="
                      renglon: TIPOS_DOCUMENTOS;
                      tipo_filtro: CUENTA;
                      valor: eval(() => formulario_cuentas.id_cuenta.value)
                    "
                  ',
                  'titulo' => 'Tipo de Documento'
                ])
                @endcomponent
              </div>

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

                  @component('aplicacion.elementos.campo.etiqueta', [
                    'tipo' => 'select',
                    'nombre' => 'id_medio_pago',
                    'atributos' => '
                      data-peticion-procedimiento="p_traer_filtros"
                      data-peticion-parametros="renglon: MEDIOS_PAGOS; tipo_filtro: CUENTAS"
                    ',
                    'titulo' => 'Medio de Pago'
                  ])
                  @endcomponent

                  @component('aplicacion.elementos.boton', [
                    'nombre' => 'boton_desglose',
                    'atributos' => '
                      data-bs-toggle=modal
                      data-bs-target=#ventana_desglose
                      data-ventana-emergente-titulo=Desglose
                    ',
                    'clases' => 'btn btn-success d-none'
                  ])
                    <i class="fa-solid fa-pen-to-square"></i>
                  @endcomponent

                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'monto',
                  'mascara' => ['tipo' => 'numerico'],
                  'titulo' => 'Monto'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'referencia',
                  'mascara' => ['tipo' => 'entero'],
                  'titulo' => 'Referencia'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_cuenta_banco',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="renglon: BANCOS; tipo_filtro: CUENTAS"
                    disabled
                  ',
                  'titulo' => 'Cuenta de Banco'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'concepto',
                  'atributos' => 'maxlength=250',
                  'titulo' => 'Concepto'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'numero_orden',
                  'mascara' => ['tipo' => 'entero'],
                  'atributos' => 'disabled',
                  'titulo' => '# Orden'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 col-xxl-8">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'beneficiario',
                  'atributos' => 'maxlength=100',
                  'atributos' => 'disabled',
                  'titulo' => 'Beneficiario'
                ])
                @endcomponent
              </div>

              {{-- <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_cuenta_contable',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="renglon: CUENTAS_CONTABLES; tipo_filtro: TODAS"
                  ',
                  'titulo' => 'Cuenta Contable'
                ])
                @endcomponent
              </div> --}}

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

      </form>
    </div>

    <div class="tab-pane" id="prestamos" role="tabpanel">
      <form
        class="form"
        id="formulario_prestamos"
        action="{{ route('ejecutar') }}?0=0&procedimiento=p_registrar_documentos_prestamos"
        autocomplete="off"
        data-campo-prevenir="id_prestamo"
        data-selector-actualizar="id_prestamo"
        data-selector-limpiar="id_tipo_documento"
        data-tabla-limpiar="#tabla_prestamos"
      >

        @csrf

        <input type="date" name="fecha" value="{{ $caja->fecha }}" hidden>

        <div class="row">

          <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 align-self-start">
            <div class="row">

              <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 col-xxl-8">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_prestamo',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="
                      renglon: CUENTAS;
                      tipo_filtro: PRESTAMOS;
                      valor: eval(() => id_cliente.value)
                    "
                  ',
                  'titulo' => 'Préstamo'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_tipo_documento',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="
                      renglon: TIPOS_DOCUMENTOS;
                      tipo_filtro: CUENTA;
                      valor: eval(() => formulario_prestamos.id_prestamo.value)
                    "
                  ',
                  'titulo' => 'Tipo de Documento'
                ])
                @endcomponent
              </div>

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

                  @component('aplicacion.elementos.campo.etiqueta', [
                    'tipo' => 'select',
                    'nombre' => 'id_medio_pago',
                    'atributos' => '
                      data-peticion-procedimiento="p_traer_filtros"
                      data-peticion-parametros="renglon: MEDIOS_PAGOS; tipo_filtro: CUENTAS"
                    ',
                    'titulo' => 'Medio de Pago'
                  ])
                  @endcomponent

                  @component('aplicacion.elementos.boton', [
                    'nombre' => 'boton_desglose',
                    'atributos' => '
                      data-bs-toggle=modal
                      data-bs-target=#ventana_desglose
                      data-ventana-emergente-titulo=Desglose
                    ',
                    'clases' => 'btn btn-success d-none'
                  ])
                    <i class="fa-solid fa-pen-to-square"></i>
                  @endcomponent

                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'monto',
                  'mascara' => ['tipo' => 'numerico'],
                  'titulo' => 'Monto'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'referencia',
                  'mascara' => ['tipo' => 'entero'],
                  'titulo' => 'Referencia'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'tipo' => 'select',
                  'nombre' => 'id_cuenta_banco',
                  'atributos' => '
                    data-peticion-procedimiento="p_traer_filtros"
                    data-peticion-parametros="renglon: BANCOS; tipo_filtro: CUENTAS"
                    disabled
                  ',
                  'titulo' => 'Cuenta de Banco'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                @component('aplicacion.elementos.campo.etiqueta', [
                  'nombre' => 'concepto',
                  'atributos' => 'maxlength=250',
                  'titulo' => 'Concepto'
                ])
                @endcomponent
              </div>

              <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                <div class="card-group">

                  <div class="card">

                    <p class="card-header p-1 bg-primary-subtle fw-bolder text-center">&nbsp;</p>

                    <ul class="list-group list-group-flush">

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Cargos',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Mora',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Seguros',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Comisión',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Interés',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Capital',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'valor' => 'Total',
                          'clases' => 'form-control border-0 bg-transparent',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                    </ul>

                  </div>

                  <div class="card">

                    <p class="card-header px-3 py-1 bg-primary-subtle fw-bolder text-end">Pendiente</p>

                    <ul class="list-group list-group-flush">

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'cargos_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'mora_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'seguros_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'comision_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'interes_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'capital_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'total_pendiente',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                    </ul>

                  </div>

                  <div class="card">

                    <p class="card-header px-3 py-1 bg-primary-subtle fw-bolder text-end">Aplicar</p>

                    <ul class="list-group list-group-flush">

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'cargos_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'mora_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'seguros_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'comision_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'interes_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'capital_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                      <li class="list-group-item">
                        @component('aplicacion.elementos.campo.etiqueta', [
                          'nombre' => 'total_aplicar',
                          'mascara' => ['tipo' => 'numerico'],
                          'clases' => 'form-control border-0 text-end',
                          'atributos' => 'disabled'
                        ])
                        @endcomponent
                      </li>

                    </ul>

                  </div>

                </div>
              </div>

            </div>
          </div>

          <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 align-self-start">
            @component('aplicacion.elementos.tabla', [
              'id' => 'prestamos',
              'clases' => 'table-primary'
            ])
            @endcomponent
          </div>

        </div>

      </form>
    </div>

    <div class="tab-pane" id="documentos" role="tabpanel">
      @component('aplicacion.elementos.tabla', [
        'id' => 'documentos',
        'clases' => 'table-primary'
      ])
      @endcomponent
    </div>

  </div>

</div>

{{-- ! --}}
@include('aplicacion.elementos.VentanaEmergenteConsulta')

{{-- ! --}}
@component('aplicacion.elementos.ventana', [
  'id' => 'desglose',
  'titulo' => 'Desglose',
  'cabeza' => ['clases' => 'bg-success'],
  'pie' => [
    'contenido' => '
      <button type=button class="btn btn-warning">Limpiar</button>
      <button type=button class="btn btn-secondary" data-bs-dismiss=modal>Cerrar</button>
    '
  ]
])

  <form class="form" id="formulario_desglose" autocomplete="off">

    <div class="row">

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

      <div class="col-auto flex-grow-1">
        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'select',
          'id' => 'id_banco',
          'atributos' => 'data-peticion-tabla=bancos',
          'titulo' => 'Banco'
        ])
        @endcomponent
      </div>

      <div class="col-12 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
        @component('aplicacion.elementos.campo.etiqueta', [
          'id' => 'montoCheque',
          'nombre' => 'monto',
          'mascara' => ['tipo' => 'numerico'],
          'titulo' => 'Monto'
        ])
        @endcomponent
      </div>

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

      <div class="col-auto text-end">
        @component('aplicacion.elementos.boton', [
          'tipo' => 'submit',
          'id' => 'boton_agregar'
        ])
          Agregar
        @endcomponent
      </div>

    </div>

    @component('aplicacion.elementos.tabla', [
      'id' => 'cheques',
      'clases' => 'table-primary'
    ])

      <thead>
        <tr>

          <th data-columna-nombre="numero_cheque" data-columna-tipo="num" data-columna-sumar="filas">
            # Cheque
          </th>

          <th data-columna-nombre="id_banco" data-columna-tipo="num">
            ID Banco
          </th>

          <th data-columna-nombre="banco" data-columna-tipo="string">
            Banco
          </th>

          <th
            class="text-end"
            data-columna-nombre="monto"
            data-columna-tipo="num-fmt"
            data-columna-ordenable
            data-columna-sumar
          >Monto</th>

          <th data-columna-nombre="beneficiario" data-columna-tipo="string" data-columna-ordenable>
            Beneficiario
          </th>

          <th class="text-center eliminar" data-columna-tipo="eliminar"></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

    @component('aplicacion.elementos.tabla', [
      'id' => 'billetes',
      'clases' => 'table-primary'
    ])

      <thead>
        <tr>

          <th data-columna-nombre="descripcion" data-columna-tipo="num">
            Descripción
          </th>

          <th
            class="text-end"
            data-columna-nombre="cantidad"
            data-columna-tipo="input"
            data-columna-campo-atributos='
              class="form-control text-end fw-bold"
              inputmode=decimal
              onclick=this.select()
              data-mascara=numerico
              data-mascara-decimales=0
            '
          >Cantidad</th>

          <th class="text-end" data-columna-nombre="monto" data-columna-tipo="num" data-columna-sumar>
            Monto
          </th>

          <th class="d-none" data-columna-nombre="valor" data-columna-tipo="num">
            Valor
          </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

  </form>

@endcomponent

@endsection

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

{{-- ! --}}
@parent

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

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

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

@endsection
