@extends('layout/principal')
@section('titulo', 'Home')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

@php
//filtrar por 'folios' unicos para luego mostrar cantidad
$folios_unicos = array_unique(array_column($chps, 'folio'));
@endphp

<div class="row">
    <div class="col-12 col-md-6">
        <h5 class="card-title">CERTIFICADO HISTÓRICO DE PRENDAS VIGENTES POR CONSTITUYENTE (CHP)</h5>
    </div>
    <div class="col-12 col-md-6">
        <!-- ===============  Boton Excel ================-->
        <form action="{{ route('chp.chpReporte') }}" method="post">
            @csrf
            <input type="hidden" name="chps" value="{{ json_encode($chps) }}">
            <button type="submit" class="btn-success btn-sm float-right"
            @if (($chps) && count($chps) > 0)
                style="background-color: #03743C; padding-left: 4px">Exportar a Excel <img
                src="../images/excel_001_20px_green.svg"></button>
            @else
                style="background-color: #c9c9c9; border-color: #b8b8b8;; padding-left: 4px"
                disabled >Exportar a Excel <img src="../images/excel_001_20px_gray.svg"></button>
            @endif
        </form>
        <!-- ===============  Fin Boton Excel ================-->
    </div>
</div>
<hr>
<!-- ============ MENSAJES ==================================================================== -->
{{-- Mensajes estandar de Laravel --------}}
@if (isset($errors) && $errors->any())
<div class="alert alert-danger" role="alert">
    @foreach ($errors->all() as $error)
    {{ $error }}
    @endforeach
</div>
@endif

{{-- Mensajes de Session personalizados --}}
@if (Session::has('success')) <div class="alert alert-success"> {{ Session::get('success') }} </div> @endif
@if (Session::has('danger')) <div class="alert alert-danger"> {{ Session::get('danger') }} </div> @endif
<!-- ========== FIN MENSAJES ================================================================== -->

<!-- ------------ Buscador ------------ -->
<div class="" id="buscador" style="background-color: #f6f6f6; padding: 1em;">
    <form action="{{ route('chp.reporte') }}" method="post" id="formulario_buscador">
        @csrf
        <div class="row mb-3">

            <div class="col-12 col-md-2 form-group">
                <label class="tx-12 tx-medium tx-gray-600" for="rut">RUT (12345678-9)</label>
                <input type="text" name="rut" id="rut" value="" class="form-control" placeholder="">
            </div>

            <div class="col-12 col-md-3 form-group">
                <label class="tx-12 tx-medium tx-gray-600" for="nombre">NOMBRE</label>
                <input type="text" name="nombre" id="nombre" value="" class="form-control" placeholder="">
            </div>

            <div class="col-12 col-md-3 form-group">
                <label class="tx-12 tx-medium tx-gray-600" for="id_usuario">USUARIO</label>
                <select name="id_usuario" id="id_usuario" value="" class="form-control">
                    <option value=""></option>
                    @foreach ($usuarios as $usuario)
                    <option value="{{ $usuario->id }}">{{ $usuario->name}}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-2 form-group">
                <label class="tx-12 tx-medium tx-gray-600" for="fecha_desde">FECHA EMISIÓN - DESDE</label>
                <input type="text" name="fecha_desde" id="fecha_desde" class="datepicker form-control"
                    style="background-color: #ffffff">
            </div>

            <div class="col-12 col-md-2 form-group">
                <label class="tx-12 tx-medium tx-gray-600" for="fecha_hasta">FECHA EMISIÓN - HASTA</label>
                <input type="text" name="fecha_hasta" id="fecha_hasta" class="datepicker form-control"
                    style="background-color: #ffffff">
            </div>

            <button type="submit" id="filtrar" class="btn-purple btn-sm btn-block mx-3 mt-3">Buscar</button>

        </div>
    </form>
    @if ($chps && count($chps) > 0)
    <div class="text-center">
        <h6>Encontrados <b> {{ count($folios_unicos); }} </b> folios | {{count($chps); }} filas</h6>
    </div>
    @endif
</div>
<br>
<!-- ------------ Fin Buscador ------------ -->

<!-- ------------ Tabla ------------------------------------------------- -->
@if ($filtro_control == 1) {{-- --}}
<div class="table-responsive">
    <table class="datatable cell-border display compact hover row-border nowrap tabla_historico" id="tablaReporte"
        style="font-size: 13px; width:100%">
        <thead>
            <tr>
                <th>Archivo</th>
                {{-- <th>ID</th> --}}
                <th>Prendas</th>
                <th>Rut</th>
                <th>Nombre</th>
                <th>Tipo Documento</th>
                <th>Naturaleza Anotación</th>
                <th>Repertorio</th>
                <th>Notaría</th>
                <th>Comuna</th>
                <th>Nro Documento</th>
                <th>Oficina Inscripción</th>
                <th>Fecha Inscripción</th>
                <th>Región</th>
                <th>Acreedor</th>
                <th>Folio</th>
                <th>Fecha Emisión</th>
                <th>Fecha Ingreso</th>
                <th>Usuario Cargador</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($chps as $chp)
            <tr>
                <td><a href="{{ asset('cav/cpv_'.$cpv->folio) }}.pdf" class="btn-panal-info btn-sm mr-1"
                        onclick="window.open(this.href,'windowname','resizable,height=800,width=720'); return false;"><ion-icon
                            name="document-text-outline" size="small" style="vertical-align: middle"></ion-icon> CPV</a></td>
                {{-- <td>{{$cpv->id_cpv}}</td> --}}
                <td>{{ $chp->cantidad_prendas }}</td>
                <td>{{ $chp->constituyente_rut }}</td>
                <td>{{ $chp->constituyente_nombre }}</td>
                <td>{{ $chp->tipo_documento }}</td>
                <td>{{ $chp->naturaleza }}</td>
                <td>{{ $chp->nro_repertorio }}</td>
                <td>{{ $chp->notaria }}</td>
                <td>{{ $chp->comuna }}</td>
                <td>{{ $chp->nro_documento }}</td>
                <td>{{ $chp->oficina_inscripcion }}</td>
                <td>{{ $chp->fecha_inscripcion }}</td>
                <td>{{ $chp->region }}</td>
                <td>{{ $chp->acreedor }}</td>
                <td>{{ $chp->folio }}</td>
                <td>{{ $chp->fecha_emision }}</td>
                <td>{{ $chp->created_at }}</td>
                <td>{{ $chp->usuario_cargador }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div><!-- table-responsive -->
@endif
<!-- ----------- Fin Tabla --------- -->

<!-- ------------ Scripts ------------------------------------------------- -->
<script src="{{ asset('assets/js/utilitarios/valida_buscador_fechas.js') }}"></script>

<script> // Filtro de busqueda: exige al menos un campo con datos
    document.getElementById('formulario_buscador').addEventListener('submit', function(event) {
    event.preventDefault();
    var rut = document.getElementById('rut').value;
    var nombre = document.getElementById('nombre').value;
    var id_usuario = document.getElementById('id_usuario').value;
    var fecha_desde = document.getElementById('fecha_desde').value;
    var fecha_hasta = document.getElementById('fecha_hasta').value;
    if (rut == '' && nombre == '' && id_usuario == '' && fecha_desde == '' && fecha_hasta == '') {
    alert('Debe seleccionar al menos un criterio de búsqueda');
    } else {
        // Solo enviar el formulario si hay al menos un criterio
        this.submit();
    }
    // this.submit();
    });

    $(document).ready(function() {
        $('#tablaReporte').DataTable({
            "paging": true,
            "pageLength": 200,
            scrollY: "600px",
            scrollX: true,
            scrollCollapse: true,
            "language": {
                "url": "/assets/lib/datatable/language/es-MX.json"
            }
        });
    });
</script>
<!-- ----------- Fin Scripts --------- -->

@endsection