@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Procesos de Cobros para Facturas')

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

@endsection

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

@component('aplicacion.elementos.boton', [
  'id' => 'botonBuscar',
  'clases' => 'btn btn-primary'
])
  Buscar
@endcomponent

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

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

@endsection

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

{{-- ! --}}
<form
  class="form"
  id="formularioCobrosFacturas"
	autocomplete="off"
	data-campo-prevenir="#tasa"
	data-campo-deshabilitar="#tasa"
	data-tabla-limpiar="#tablaRegistros, #tablaRegistrosDetalleCheques"
>

  @csrf

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

  <div class="row">

    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-5">
      @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-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-peticion-tabla=clientes
            data-peticion-campo=cliente
						data-peticion-filtro=cobros_facturas
            data-ventana-emergente-titulo=Clientes
          '
        ])
          <i class="fa-solid fa-magnifying-glass"></i>
        @endcomponent

      @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', [
        'tipo' => 'date',
        'id' => 'fecha',
        'valor' => date('Y-m-d'),
        'titulo' => 'Fecha'
      ])
      @endcomponent
    </div>

		<div class="col-4 col-sm-2 col-md-3 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_moneda',
				'valor' => '1',
				'atributos' => '
				data-peticion-procedimiento=p_traer_filtros
				data-peticion-parametros="renglon: MONEDAS"
				',
				'titulo' => 'Moneda'
			])
			@endcomponent
		</div>

    <div class="col-4 col-sm-2 col-md-2 col-lg-2 col-xl-2 col-xxl-1">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'tasa',
        'mascara' => [
					'tipo' => 'numerico',
					'valor' => ['maximo' => '1000']
				],
				'atributos' => 'disabled',
				'titulo' => 'Tasa'
			])
			@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' => 'metodo_aplicacion',
        'atributos' => '
          data-peticion-procedimiento="p_traer_filtros"
          data-peticion-parametros="renglon: MEDIOS_PAGOS; tipo_filtro: METODOS_APLICACION"
        ',
        'titulo' => 'Método de Aplicación'
      ])
      @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-3 col-sm-2 col-md-3 col-lg-2 col-xl-2 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'referencia',
        'titulo' => 'Referencia'
      ])
      @endcomponent
    </div>

    <div class="col-4 col-sm-6 col-md-2 col-lg-2 col-xl-2 col-xxl-2">

			@component('aplicacion.elementos.grupo.campos')

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

				@component('aplicacion.elementos.boton', [
					'id' => 'botonDetalleCheque',
					'atributos' => '
						data-bs-toggle=modal
						data-bs-target=#ventanaEmergenteDetalleCheques
						data-ventana-emergente-titulo=Cheques
					',
					'clases' => 'd-none btn btn-success'
				])
					<i class="fa-solid fa-plus"></i>
				@endcomponent

			@endcomponent

    </div>

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

    <div class="col-12 col-sm-8 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'concepto',
        '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="p-1 rounded-1 bg-tertiary fs-6 text-white"></div>
		</div>

		@component('aplicacion.elementos.tabla-vieja', [
			'id' => 'tablaRegistros'
		])

			<thead>
				<tr>

					<th
						class="text-center"
						data-columna-nombre="seleccionado"
						data-columna-tipo="checkbox"
						data-columna-campo-atributos='
							class=form-check-input
							data-columna-afectar-nombre=aplicado
							data-columna-afectar-valor=balance
						'
					>
						<input type="checkbox" class="form-check-input" disabled>
					</th>

					<th
						data-columna-nombre="numero_factura"
						data-columna-tipo="string"
						data-columna-ordenable
						data-columna-buscable
					># Factura</th>

					<th
						data-columna-nombre="fecha"
						data-columna-tipo="date"
						data-columna-ordenable
						data-columna-buscable
					>Fecha</th>

					<th
						data-columna-nombre="condicion"
						data-columna-tipo="num"
						data-columna-ordenable
						data-columna-buscable
					>Condición</th>

					<th
						data-columna-nombre="concepto"
						data-columna-tipo="string"
						data-columna-ordenable
						data-columna-buscable
					>Concepto</th>

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

					<th
						class="balance text-end"
						data-columna-nombre="balance"
						data-columna-tipo="num-fmt"
						data-columna-ordenable
						data-columna-buscable
						data-columna-sumar
					>Balance</th>

					<th
						class="aplicado text-end"
						data-columna-nombre="aplicado"
						data-columna-tipo="input"
						data-columna-ordenable
						data-columna-buscable
						data-columna-sumar
						data-columna-campo-atributos='
							class="form-control fw-bold text-end"
							inputmode=decimal
							onclick=this.select()
							data-mascara=numerico
							data-columna-valor-maximo=balance
							data-columna-afectar-nombre=seleccionado
						'
					>Aplicado</th>

					<th
						class="pendiente text-end"
						data-columna-nombre="pendiente"
						data-columna-tipo="num-fmt"
						data-columna-ordenable
						data-columna-buscable
						data-columna-sumar
					>Pendiente</th>

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

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

{{-- ! --}}
@component('aplicacion.elementos.VentanaEmergente', [
  'id' => 'ventanaEmergenteDetalleCheques',
  'titulo' => 'Detalle de Cheques',
  'clasesContenedor' => 'modal-xl',
  'clasesContenedorTitulo' => 'bg-success',
  'tipoBoton1' => 'button',
  'clasesBoton1' => 'd-none',
  'atributosBoton1' => '',
  'textoBoton1' => 'Agregar',
  'textoBoton2' => 'Cerrar'
])

  <div class="row">

    <form
			class="form col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12"
			id="formularioDetalleCheques"
			autocomplete="off"
		>

      <div class="row">

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

        <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-4">
          @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-3">
					@component('aplicacion.elementos.campo.etiqueta', [
						'id' => 'montoDetalle',
						'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' => 'beneficiario',
            'nombre' => 'beneficiario',
            'titulo' => 'Beneficiario'
          ])
          @endcomponent
        </div>

				<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1 text-end">
					@component('aplicacion.elementos.boton', [
						'tipo' => 'submit',
						'id' => 'botonAgregar'
					])
						Agregar
					@endcomponent
				</div>

      </div>

    </form>

    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
      @component('aplicacion.elementos.tabla-vieja', [
        'id' => 'tablaRegistrosDetalleCheques',
      ])

        <thead>
          <tr>

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

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

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

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

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

            <th class="text-center" 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
    </div>

  </div>

@endcomponent

@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>

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

@endsection
