@extends('../padre.padre')

@section('contenido') 
<div class="container-fluid">
<div class="d-flex justify-content-center mt-3">
  <h2 class="h4 font-weight-bold">VENTAS POR PARTICIPANTE</h2>
</div>

<form action="datosparticipantes" method="GET" id="formFiltro" class="bg-white p-3 border rounded shadow-sm mb-4 mx-auto" style="max-width: 1100px;">
  <div class="row align-items-end">
    <div class="col-6 col-md-2 mb-2">
      <label class="small font-weight-bold mb-1">Fecha Inicial</label>
      <input required type="date" name="fi" id="fecI" value="{{$fi}}" class="form-control form-control-sm">
    </div>
    <div class="col-6 col-md-2 mb-2">
      <label class="small font-weight-bold mb-1">Fecha Final</label>
      <input required type="date" name="ff" id="fecF" value="{{$ff}}" class="form-control form-control-sm">
    </div>
    <div class="col-12 col-md-4 mb-2">
      <label class="small font-weight-bold mb-1">Participante</label>
      <input list="listaParticipantes" name="parti" id="parti" value="{{$parti}}" class="form-control form-control-sm" placeholder="Buscar por Nombre o CC...">
      <datalist id="listaParticipantes">
        @foreach($participantesAll as $p)
          <option value="{{$p->idPartici}}">{{$p->nombreParti}} {{$p->apellidoPart}}</option>
        @endforeach
      </datalist>
    </div>
    <div class="col-6 col-md-2 mb-2">
      <label class="small font-weight-bold mb-1">Agrupado</label>
      <select name="agrupado" class="form-control form-control-sm">
        <option value="General" {{ $agrupado == 'General' ? 'selected' : '' }}>General</option> 
        <option value="Resumido" {{ $agrupado == 'Resumido' ? 'selected' : '' }}>Resumido</option>
      </select>
    </div>
    <div class="col-6 col-md-2 mb-2">
        <label class="small font-weight-bold mb-1">Bodega</label>
        <div class="d-block w-100">
            @include('../menu.bodegas')
        </div>
    </div>
  </div>
  
  <hr class="my-2">
  
  <div class="row align-items-center">
    <div class="col-md-12 d-flex justify-content-between align-items-center">
        <div class="btn-group" role="group">
            <button type="submit" id="botonf" class="btn btn-sm btn-primary font-weight-bold px-3">
                🔍 Consultar
            </button>
            <button type="submit" name="exportar" class="btn btn-sm btn-success font-weight-bold px-3" value="1">
                excel Excel
            </button>
            <button type="button" class="btn btn-sm btn-info font-weight-bold px-3" data-toggle="modal" data-target="#modalGrafica" id="btnVerGrafica">
                📊 Gráfica
            </button>
        </div>
        
        <div class="ml-auto d-flex align-items-center">
            <span class="small text-muted mr-2 d-none d-sm-inline">Volver al inicio:</span>
            @include('menu.botonRegresar')
        </div>
    </div>
  </div>
</form>

<div class="table-responsive shadow-sm rounded">
    @include('../menu/exportar.exportarparticipantes') 
</div>

@if(isset($datos) && method_exists($datos, 'links'))
    <div class="d-flex justify-content-center mt-3">
        {{ $datos->links() }}
    </div>
@endif
</div>

<!-- Modal para la Gráfica -->
<div class="modal fade" id="modalGrafica" tabindex="-1" role="dialog" aria-labelledby="modalGraficaLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title h6" id="modalGraficaLabel">Rendimiento de Participantes (Top 10)</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-2">
        <canvas id="chartParticipantes" style="width: 100%; height: 350px;"></canvas>
      </div>
      <div class="modal-footer py-1">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

@endsection

@section('pie')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const btnGrafica = document.getElementById('btnVerGrafica');
    if (!btnGrafica) return;

    btnGrafica.addEventListener('click', function() {
        const table = document.getElementById('tablep'); 
        if (!table) {
            alert('No hay datos en la tabla para graficar.');
            return;
        }

        const participants = {};
        const rows = table.querySelectorAll('tbody tr');
        
        if (rows.length === 0) {
            alert('La tabla está vacía.');
            return;
        }

        rows.forEach(row => {
            const cells = row.querySelectorAll('td, th');
            if (cells.length < 5) return;

            let nombre = "";
            let valorStr = "";

            if ("{{$agrupado}}" === "Resumido") {
                nombre = (cells[1].innerText.trim() + " " + cells[2].innerText.trim()).trim();
                valorStr = cells[3] ? cells[3].innerText : "0";
            } else {
                nombre = (cells[9].innerText.trim() + " " + cells[10].innerText.trim()).trim();
                valorStr = cells[5] ? cells[5].innerText : "0";
            }

            let valor = parseFloat(valorStr.replace(/[^0-9.-]+/g, ""));
            if (isNaN(valor)) valor = 0;
            if (nombre === "" || nombre === "null") nombre = "Sin Nombre";

            if (!participants[nombre]) {
                participants[nombre] = 0;
            }
            participants[nombre] += valor;
        });

        const sortedParticipants = Object.entries(participants)
            .sort((a, b) => b[1] - a[1])
            .slice(0, 10);

        if (sortedParticipants.length === 0) {
            alert('No se pudieron extraer datos de la tabla.');
            return;
        }

        const ctx = document.getElementById('chartParticipantes').getContext('2d');
        if (window.myChart) {
            window.myChart.destroy();
        }

        window.myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: sortedParticipants.map(p => p[0]),
                datasets: [{
                    label: 'Ventas Totales ($)',
                    data: sortedParticipants.map(p => p[1]),
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: { beginAtZero: true }
                },
                plugins: {
                    legend: { display: false },
                    title: {
                        display: true,
                        text: 'Top 10 Participantes por Ventas'
                    }
                }
            }
        });
        
        // Abrir el modal
        $('#modalGrafica').modal('show');
    });

    // Asegurar que el modal se pueda cerrar manualmente si los data-attributes fallan
    document.querySelectorAll('[data-dismiss="modal"], [data-bs-dismiss="modal"]').forEach(btn => {
        btn.addEventListener('click', function() {
            $('#modalGrafica').modal('hide');
        });
    });
});
</script>
@endsection