@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Registro de Seguimientos')

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

@endsection

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

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

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

@endsection

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

<form
  class="form"
  id="formularioSeguimientos"
  data-tabla-limpiar="#tablaRegistros"
	autocomplete="off"
>

  @csrf

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

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

  <div class="row">

		<div class="col-12 col-sm-6 col-md-6 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', [
					'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-12 col-sm-6 col-md-6 col-lg-2 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'id' => 'contacto',
				'atributos' => '
					maxlength=250
				',
				'titulo' => 'Contacto'
			])
			@endcomponent
		</div>

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

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

		<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-4">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'email',
				'titulo' => 'Correo',
				'id' => 'correo',
				'atributos' => '
					multiple
					maxlength=200
				',
			])
			@endcomponent
		</div>

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

				<option value="1">SI</option>
				<option value="0">NO</option>

			@endcomponent
		</div>

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

		<div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'titulo' => 'Estado',
				'id' => 'id_estado'
			])
				<option value="PENDIENTE">Pendiente</option>
				<option value="FINALIZADO">Finalizado</option>
				<option value="EN PROCESO">En proceso</option>
			@endcomponent
		</div>

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

		<div class="col-12 col-sm-6 col-md-3 col-lg-6 col-xl-2 col-xxl-2">
			@component('aplicacion.elementos.campo.etiqueta', [
				'tipo' => 'select',
				'id' => 'id_usuario_asignado',
				'atributos' => '
					data-peticion-procedimiento="p_traer_filtros"
					data-peticion-parametros="renglon: USUARIOS"
				',
				'titulo' => 'Usuario Asignado'
			])
			@endcomponent
		</div>

    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Subtarea <i class="fa-solid fa-arrows-up-down"></i>
    </button>

    <div class="collapse" id="collapseExample">
      <div class="card card-body">

				<div class="row">

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

							<option value="PENDIENTE">Pendiente</option>
							<option value="FINALIZADO">Finalizado</option>
							<option value="EN PROCESO">En proceso</option>

						@endcomponent
					</div>

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

					<div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
						@component('aplicacion.elementos.campo.etiqueta', [
							'tipo' => 'date',
							'titulo' => 'Fecha de Entrega',
							'id' => 'fecha_entrega',
							'valor' => date("Y-m-d")
						])
						@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', [
							'tipo' => 'select',
							'titulo' => 'Encargado',
							'id' => 'id_usuario',
							'atributos' => '
								data-peticion-tabla=usuarios
							'
						])
						@endcomponent
					</div>

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

				</div>

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

            <thead>
              <tr>

                <th class="estado" data-columna-nombre="estado" data-columna-tipo="string" data-columna-sumar="filas">
                  Estado
                </th>

                <th data-columna-nombre="detalle" data-columna-tipo="string">
                  Detalle
                </th>

                <th data-columna-nombre="fecha_entrega" data-columna-tipo="string" data-columna-ordenable>
                  Fecha Entrega
                </th>

                <th data-columna-nombre="encargado" data-columna-tipo="string" data-columna-ordenable>
                  Encargado
                </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>

  </div>

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

@endsection
