@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Proceso de Preselección Facturas')

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

{{-- ! --}}
@parent

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

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

@endsection

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

<form
  method="POST"
  action="{{route ('ejecutar')}}?procedimiento=p_registrar_preseleccion_facturas"
  class="form"
  id="formularioPreseleccionFacturas"
	autocomplete="off"
>

  @csrf

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

  <div class="row">

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

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

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

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

      @endcomponent
    </div>

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

    <div class="col-6 col-sm-3 col-md-3 col-lg-2 col-xl-2 col-xxl-3">
      @component('aplicacion.elementos.campo.etiqueta', [
        'tipo' => 'date',
        'id' => 'desde_fecha',
        'atributos' => '
          data-peticion-procedimiento=p_traer_fecha_reporte
        ',
        'titulo' => 'Desde Fecha'
      ])
      @endcomponent
    </div>

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

    <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'desde_dia_vencimiento',
        'mascara' => ['tipo' => 'entero'],
        'titulo' => 'Desde Días Venc.'
      ])
      @endcomponent
    </div>

    <div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-2">
      @component('aplicacion.elementos.campo.etiqueta', [
        'id' => 'hasta_dia_vencimiento',
        'mascara' => ['tipo' => 'entero'],
        'titulo' => 'Hasta Días Venc.'
      ])
      @endcomponent
    </div>

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

        <option></option>

        <option value="SELECCIONADAS">
          SELECCIONADAS
        </option>

        <option value="NO_SELECCIONADAS">
          NO SELECCIONADAS
        </option>

      @endcomponent
    </div>

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

    <div class="d-flex justify-content-between">

      <button type="submit" hidden></button>

      <div class="col-auto">

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

        @component('aplicacion.elementos.boton', [
          'tipo' => 'reset',
          'id' => 'botonLimpiar'
        ])
          Limpiar
        @endcomponent

      </div>

    </div>

  </div>

</form>

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

	<thead>
		<tr>

			<th class="text-center" data-columna-nombre="seleccionado" data-columna-tipo="checkbox">
				<input type="checkbox" class="form-check-input" disabled>
			</th>

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

			<th
				data-columna-nombre="concepto"
				data-columna-tipo="string"
				data-columna-ordenable
				data-columna-buscable
			>Concepto</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="dias_vencidos"
				data-columna-tipo="num"
				data-columna-ordenable
				data-columna-buscable
			>Dias Vencidos</th>

			<th
				data-columna-nombre="transcurrido"
				data-columna-tipo="num"
				data-columna-ordenable
				data-columna-buscable
			>Transcurrido</th>

			<th
				data-columna-nombre="monto_factura"
				data-columna-tipo="num-fmt"
				data-columna-ordenable
				data-columna-buscable
			>Monto Factura</th>

			<th
				data-columna-nombre="monto_pagado"
				data-columna-tipo="num-fmt"
				data-columna-ordenable
				data-columna-buscable
			>Monto Pagado</th>

			<th
				data-columna-nombre="balance_pendiente"
				data-columna-tipo="num_fmt"
				data-columna-ordenable
				data-columna-buscable
				data-columna-sumar
			>Bal. Pendiente</th>

			<th
				class="aplicado text-end"
				data-columna-nombre="aplicado"
				data-columna-tipo="input"
				data-columna-campo-atributos='
					class="form-control fw-bold text-end"
          inputmode=decimal
					onclick=this.select()
					data-mascara=numerico
				'
				data-columna-ordenable
				data-columna-buscable
				data-columna-sumar
			>Monto Pagar</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

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

@endsection
