<form method="GET" class="mb-4">
  <div class="form-group">
    <label for="period">Periodo:</label>
    <select name="period" id="period" class="form-control" onchange="this.form.submit()">
      <?php foreach ($availablePeriods as $year): ?>
        <option value="<?= $year ?>" <?= $year == $currentPeriod ? 'selected' : '' ?>>
          <?= $year ?>
        </option>
      <?php endforeach; ?>
    </select>
  </div>
</form>



<div class="row mt-4">
  <!-- Cards iniciales -->
  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-primary text-white rounded-circle p-3 mr-3">
          <i class="fe fe-folder-plus fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">Trámites</p>
          <h4 class="mb-0"><?= $cardCounts['Trámites totales']; ?></h4>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-warning text-white rounded-circle p-3 mr-3">
          <i class="fe fe-refresh-cw fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">En Proceso</p>
          <h4 class="mb-0"><?= $cardCounts['En proceso']; ?></h4>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-danger text-white rounded-circle p-3 mr-3">
          <i class="fe fe-alert-triangle fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">Observados</p>
          <h4 class="mb-0"><?= $cardCounts['Observado']; ?></h4>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-3 mb-4">
    <div class="card shadow-sm border-0">
      <div class="card-body d-flex align-items-center">
        <div class="bg-success text-white rounded-circle p-3 mr-3">
          <i class="fe fe-check-circle fe-24"></i>
        </div>
        <div>
          <p class="mb-0 text-muted">Resueltos</p>
          <h4 class="mb-0"><?= $cardCounts['Resuelto']; ?></h4>
        </div>
      </div>
    </div>
  </div>

    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <strong class="card-title">Resumen de Trámites por su Estado General</strong>
            </div>
            <div class="card-body">
                <canvas id="barChart" width="300" height="300"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <strong class="card-title">Gráfico de Trámites por Prioridad</strong>
            </div>
            <div class="card-body">
                <canvas id="priorityChart" width="300" height="300"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <strong class="card-title">Resumen de Trámites por su Estado Detallado</strong>
            </div>
            <div class="card-body">
                <canvas id="locationBarChart" width="300" height="300"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <strong class="card-title">Algunos Trámites Urgentes</strong>
            </div>
            <div class="card-body">
                <table class="table table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Expediente</th>
                            <th>Asunto</th>
                            <th>Estado</th>
                            <th>Fecha de Entrada</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($urgentProcesses as $index => $process): ?>
                            <tr>
                                <td><?= $index + 1 ?></td>
                                <td><?= htmlspecialchars($process->num_exped) ?></td>
                                <td><?= htmlspecialchars($process->subject) ?></td>
                                <td><?= htmlspecialchars($process->general_state) ?></td> 
                                <td><?= date('d/m/Y', strtotime($process->entry_date)) ?></td>
                                <td>
                                    <a href="<?= BASE_HREF ?>processes/<?= htmlspecialchars($process->id); ?>/show-process" class="btn btn-sm btn-primary">
                                    Ver
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6 class="card-title mb-3">Últimas Notificaciones</h6>
        <ul class="list-group list-group-flush">
          <?php foreach ($lastNotifications as $notification): ?>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <?= htmlspecialchars($notification->message); ?>
              <span class="badge badge-<?= $notification->is_read ? 'secondary' : 'primary'; ?> badge-pill">
                <?= $notification->is_read ? 'Leído' : 'No leído'; ?>
              </span>
            </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>
  </div>


  <div class="col-lg-6 mb-4">
        <div class="card shadow-sm border-0">
            <div class="card-header">
                <strong class="card-title">Últimos trámites derivados al equipo</strong>
            </div>
            <div class="card-body">
                <table class="table table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Expediente</th>
                            <th>Asunto</th>
                            <th>Estado</th>
                            <th>Fecha de Entrada</th>
                            <th>Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($lastDerivedProcesses as $index => $process): ?>
                            <tr>
                                <td><?= $index + 1 ?></td>
                                <td><?= htmlspecialchars($process->num_exped) ?></td>
                                <td><?= htmlspecialchars($process->subject) ?></td>
                                <td><?= htmlspecialchars($process->general_state) ?></td> 
                                <td><?= date('d/m/Y', strtotime($process->entry_date)) ?></td>
                                <td>
                                    <a href="<?= BASE_HREF ?>processes/<?= htmlspecialchars($process->id); ?>/show-process" class="btn btn-sm btn-primary">
                                    Ver
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>






<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctxBar = document.getElementById('barChart').getContext('2d');
    const barChart = new Chart(ctxBar, {
        type: 'bar',
        data: {
        labels: <?= json_encode(array_keys($processSummary)); ?>,
        datasets: [{
            label: 'Cantidad',
            data: <?= json_encode(array_values($processSummary)); ?>,
            backgroundColor: ['#efa302', '#dd3445', '#3ad29f'],
            borderRadius: 6,
        }]
        },
        options: {
        responsive: true,
        scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: false 
                    },
                    ticks: {
                        stepSize: 5
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
        plugins: {
            legend: {
            display: false
            }
        }
        }
    });


    const ctxPriority = document.getElementById('priorityChart').getContext('2d');
    const priorityData = <?= json_encode($prioritySummary); ?>;

    const labels = priorityData.map(item => item.priority);
    const data = priorityData.map(item => item.count);

    const priorityChart = new Chart(ctxPriority, {
        type: 'doughnut', 
        data: {
            labels: labels,
            datasets: [{
                label: 'Cantidad de Trámites',
                data: data,
                backgroundColor: ['#42A5F5', '#efa302', '#dd3445'],
                hoverBackgroundColor: ['#2196F3', '#FBC02D', '#c62828'],
                borderColor: '#fff',
                borderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            cutout: '60%',
            plugins: {
                legend: {
                    position: 'top'
                },
                tooltip: {
                    enabled: true,
                    callbacks: {
                        label: function(context) {
                            return `${context.raw} trámites`;
                        }
                    }
                }
            }
        }
    });

    const locationBarChart = document.getElementById('locationBarChart').getContext('2d');
    const locationbarChart = new Chart(locationBarChart, {
        type: 'bar',
        data: {
        labels: <?= json_encode(array_keys($summaryByLocationState)); ?>,
        datasets: [{
            label: 'Cantidad',
            data: <?= json_encode(array_values($summaryByLocationState)); ?>,
            backgroundColor: [
                '#efa302', // PENDIENTE
                '#1a68fe', // RECIBIDO
                '#17a2b8', // DERIVADO
                '#dd3445', // OBSERVADO
                '#3ad29f', // RESUELTO
            ],
            borderRadius: 6,
        }]
        },
        options: {
        responsive: true,
        scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: false
                    },
                    ticks: {
                        stepSize: 5
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
        plugins: {
            legend: {
            display: false
            }
        }
        }
    });
</script>