@extends('plantilla')

@section('titulo', $titulo)

@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/home">Inicio</a></li>
    <li class="breadcrumb-item active">Prospectos</li>
</ol>
<ol class="toolbar">
    <li class="btn-item"><a title="Nuevo" href="/prospecto/nuevo" class="fa fa-plus-circle" aria-hidden="true"><span>Nuevo</span></a></li>
    <li class="btn-item"><a title="Recargar" href="#" class="fa fa-refresh" aria-hidden="true" onclick='window.location.replace("/prospectos");'><span>Recargar</span></a></li>
    @if($patentadoAdicionales)
        <li class="btn-item"><a title="Exportar Correos" href="/prospecto/correos" class="far fa-envelope" aria-hidden="true"><span>Exportar Correos</span></a></li>
    @endif
</ol>
@endsection
@section('contenido')
<form method="POST">
    <div class="row">
        <div class="form-group col-sm-6">
            <label for="txtPeriodoDesde">Periodo desde</label>
            <input type="date" class="form-control" id="txtPeriodoDesde" name="txtPeriodoDesde" onchange="cargarGrilla();" value="2024-12-01">
        </div>
        <div class="form-group col-sm-6">
            <label for="txtPeriodoHasta">Periodo hasta</label>
            <input type="date" class="form-control" id="txtPeriodoHasta" name="txtPeriodoHasta" onchange="cargarGrilla();" value="2025-12-31">
        </div>
    </div>
</form>
<table id="grilla" class="display">
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Correo</th>
            <th>WhatsApp</th>
            <th>Edad</th>
            <th>Ciudad</th>
            <th>Campaña</th>
            <th>Fecha de Alta</th>
        </tr>
    </thead>
</table> 
<script>

    function cargarGrilla(){
        $("#grilla").dataTable().fnClearTable();
        $("#grilla").dataTable().fnDestroy();
        let periodoDesde = $("#txtPeriodoDesde").val() + " 00:00:00";
        let periodoHasta = $("#txtPeriodoHasta").val() + " 23:59:59";
        var dataTable = $('#grilla').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bInfo": true,
            "bSearchable": true,
            "pageLength": 25,
            "order": [[ 7, "desc" ]],
            "ajax": "{{ route('prospecto.cargarGrilla') }}?periodoDesde=" + periodoDesde + "&periodoHasta=" + periodoHasta
        });
    }

    window.onload = cargarGrilla();

</script>
@endsection