@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Registros de Solicitudes')

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

@endsection

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

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

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

@component('aplicacion.elementos.boton', [
	'tipo' => 'button',
	'id' => 'botonImprimir',
	'atributos' => 'disabled'
])
	Imprimir
@endcomponent

@endsection

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

<form
  id="formularioSolicitudes"
  autocomplete="off"
	data-campo-prevenir="#id_renglon"
	data-tabla-limpiar="#tablaRegistros, #tablaRegistrosRelacionados"
>

  @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.boton', [
        'clases' => 'btn btn-primary w-100',
        'atributos' => '
          data-bs-toggle=modal
          data-bs-target=#ventanaEmergenteConsulta
          data-peticion-procedimiento=p_traer_cuentas_clientes
          data-peticion-campo=cuenta
          data-ventana-emergente-titulo=Cuentas
        '
      ])
        <div class="d-flex justify-content-between align-items-center">
          Cuentas
          <i class="fa-solid fa-magnifying-glass"></i>
        </div>
      @endcomponent
    </div> --}}

		<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-8 col-md-9 col-lg-9 col-xl-10 col-xxl-10
						text-start
					',
					'atributos' => 'disabled'
				])
				@endcomponent

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

			@endcomponent
		</div>

		<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="#datosSolicitud"
        role="tab"
        aria-selected="true"
        data-bs-toggle="list"
      >Datos de la Solicitud</a>

      <a class="list-group-item list-group-item-action list-group-item-tertiary-opposite"
        href="#datosTrabajo"
        tabindex="-1"
        role="tab"
        aria-selected="false"
        data-bs-toggle="list"
      >Solicitudes Realizadas</a>

    </div>

		<div class="tab-content">

      <div class="tab-pane active show" id="datosSolicitud" role="tabpanel">
        <div class="row">

          <div class="col-6 col-sm-5 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_tipo_cuenta',
              'atributos' => '
                data-peticion-procedimiento="p_traer_filtros"
                data-peticion-parametros="
                  renglon: TIPOS_CUENTAS;
                  tipo_filtro: APORTES_AHORROS
                "
              ',
              'titulo' => 'Tipo de Cuenta'
            ])
            @endcomponent
          </div>

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

          <div class="col-4 col-sm-5 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_renglon',
              'atributos' => '
                data-peticion-procedimiento="p_traer_filtros"
                data-peticion-parametros="
                  renglon: RENGLONES;
                  tipo_filtro: TIPO_CUENTA;
                  valor: eval($(`#id_tipo_cuenta`).val())
                "
              ',
              'titulo' => 'Renglón'
            ])
            @endcomponent
          </div>

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

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

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

          <div class="col-12 col-sm-4 col-md-6 col-lg-2 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_tipo_credito',
              'atributos' => 'data-peticion-tabla=tipos_creditos',
              'titulo' => 'Tipo de Crédito'
            ])
            @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' => 'select',
              'id' => 'tipo_prestamo',
              'atributos' => '
                data-peticion-procedimiento=p_traer_filtros
                data-peticion-parametros="renglon: TIPOS_CALCULOS"
              ',
              'titulo' => 'Tipo de Préstamo'
            ])
            @endcomponent
          </div>

          <div class="col-12 col-sm-4 col-md-6 col-lg-2 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'forma_pago',
              'atributos' => 'data-peticion-tabla=formas_pagos',
              'titulo' => 'Forma de Pago'
            ])
            @endcomponent
          </div>

					<div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'tiempo',
							'mascara' => [
								'tipo' => 'entero',
								'valor' => ['maximo' => '500']
							],
							'titulo' => 'Tiempo'
						])
						@endcomponent
					</div>

					<div class="col-3 col-sm-2 col-md-2 col-lg-1 col-xl-1 col-xxl-1">
						@component('aplicacion.elementos.campo.etiqueta', [
							'id' => 'tasa_interes',
							'mascara' => [
								'tipo' => 'numerico',
								'valor' => ['maximo' => '100']
							],
							'titulo' => '% Interés'
						])
						@endcomponent
					</div>

          <div class="col-12 col-sm-7 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_oficial',
              'atributos' => 'data-peticion-tabla=oficiales',
              'titulo' => 'Oficial',
            ])
            @endcomponent
          </div>

          <div class="col-12 col-sm-7 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_garantia',
              'atributos' => 'data-peticion-tabla=garantias',
              'titulo' => 'Garantia',
            ])
            @endcomponent
          </div>

          <div class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_cobrador',
                'atributos' => 'data-peticion-tabla=cobradores',
              'titulo' => 'Cobrador'
            ])
            @endcomponent
          </div>

          <div class="col-12 col-sm-7 col-md-3 col-lg-3 col-xl-2 col-xxl-2">
            @component('aplicacion.elementos.campo.etiqueta', [
              'tipo' => 'select',
              'id' => 'id_tipo_tasa',
              'atributos' => 'data-peticion-tabla=tipos_tasas',
              'titulo' => 'Tipo de Tasa',
            ])
            @endcomponent
          </div>

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

        </div>
      </div>

      <div class="tab-pane" id="datosTrabajo" role="tabpanel">
        <div class="row">

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

        </div>
      </div>

    </div>

  </div>

</form>

@include('aplicacion.elementos.ventanaEmergenteConsulta')

@endsection

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

{{-- ! --}}
@parent

{{-- ! 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/solicitudes.js') }}"></script>

@endsection
