@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Cambios de Cuentas')

{{-- {} 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/cambiosCuentas.css') }}"> --}}

@endsection

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

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

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

@endsection

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


<form
  class="form"
  id="formularioCambiosCuentas"
  autocomplete="off"
  data-tabla-actualizar="#tablaRegistros"
>

  @csrf

  <input id="id_cuenta" name="id_cuenta" hidden>

  <div class="row">

    <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-9 col-md-9 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-peticion-tabla=clientes
            data-peticion-campo=cliente
            data-ventana-emergente-titulo=Entidades
          '
        ])
          <i class="fa-solid fa-magnifying-glass"></i>
        @endcomponent

      @endcomponent
    </div>

    <div  class="col-8 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'select',
        'id' => 'id_cuenta',
        'atributos' => '
          data-peticion-procedimiento=p_traer_cuentas_cliente
          data-peticion-parametros="
            renglon: PRESTAMOS;
            id_cliente: eval($(`#id_cliente`).val())
          "
        ',
        'titulo' => 'Cuenta'
      ])
      @endcomponent
    </div>

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

    <div class="col-7 col-sm-3 col-md-2 col-lg-3 col-xl-3 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'date',
        'id' => 'fecha',
        'titulo' => 'Fecha',
        'valor' => date('Y-m-d'),
        'atributos' => 'max=' . date('Y-m-d')
      ])
      @endcomponent
    </div>

  </div>

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

</form>

@include('aplicacion.elementos.ventanaEmergenteConsulta')

@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/cambiosCuentas.js') }}"></script>

@endsection
