@extends('panel.app')
@section('content')

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.min.js" integrity="sha384-RuyvpeZCxMJCqVUGFI0Do1mQrods/hhxYlcVfGPOfQtPJh0JCw12tUAZ/Mv10S7D" crossorigin="anonymous"></script>

<div class="content-header">
   <div class="col-sm-12 col-xl-10">
      <nav aria-label="breadcrumb" class="w-100 bg-white">
         <ol class="breadcrumb bg-white">
            <li class="breadcrumb-item"><a href="{{ route('panel.index') }}">Inicio</a></li>
            <li class="breadcrumb-item"><a href="{{ route('panel.index') }}">Administración</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.candidates.index') }}">Administración</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar</li>
         </ol>
      </nav>

      <!-- Nav tabs -->
<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
      type="button" role="tab" aria-controls="home" aria-selected="true">Seguidores</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
      type="button" role="tab" aria-controls="profile" aria-selected="false">Visitas por departamento
</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
      type="button" role="tab" aria-controls="contact" aria-selected="false">Visitas por país</button>
  </li>
</ul>

<!-- Tab content -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active p-3" id="home" role="tabpanel" aria-labelledby="home-tab">
    <h4 class="content-title content-title-xs mt-4">Porcentaje de seguidores</h4>

      <form action="{{ route('admin.candidates.updateFollowersQuality', $candidate) }}" method="POST" id="followersQualityForm">
         @csrf
         @method('POST')

         <div class="row">
            <div class="col-sm-12 col-md-4">
               <div class="form-group">
                  <label for="real_percentage" class="form-label">Reales</label>
                  <input type="number" step="0.1" min="0" max="100" name="real_percentage" id="real_percentage" class="form-control" value="{{ $followersQuality ? $followersQuality['real_percentage'] : 0 }}">
               </div>
            </div>
            
            <div class="col-sm-12 col-md-4">
               <div class="form-group">
                  <label for="suspicious_percentage" class="form-label">Dudosos</label>
                  <input type="number" step="0.1" min="0" max="100" name="suspicious_percentage" id="suspicious_percentage" class="form-control" value="{{ $followersQuality ? $followersQuality['suspicious_percentage'] : 0 }}">
               </div>
            </div>

            <div class="col-sm-12 col-md-4">
               <div class="form-group">
                  <label for="fake_percentage" class="form-label">Falsos</label>
                  <input type="number" step="0.1" name="fake_percentage" id="fake_percentage" class="form-control bg-light" value="{{ $followersQuality ? $followersQuality['fake_percentage'] : 0 }}" readonly>
               </div>
            </div>
         </div>

         <div class="mt-3">
            <button type="submit" id="submitButton" class="btn btn-primary">Guardar seguidores</button>
            <div id="percentageError" class="text-danger mt-2 d-none">La suma de "Reales" y "Dudosos" no puede ser mayor a 100.</div>
         </div>
      </form>
  </div>
  <div class="tab-pane fade p-3" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <form action="{{ route('admin.candidates.updateDepartmentVisits', $candidate) }}" method="POST" id="department-percentages-form">
    @csrf   

    <h4 class="content-title content-title-xs mt-4">Visitas por departamento</h4>
    <div class="table-responsive mt-5">
        <table class="table table-bordered table-sm text-center align-middle">
            <thead class="thead-light">
                <tr>
                    <th class="text-start">Departamento</th>
                    <th>Porcentaje (%)</th>
                    <th>Cálculo sobre 1000</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $departments = [
                        'Amazonas', 'Antioquia', 'Arauca', 'Atlántico', 'Bolívar', 'Boyacá', 'Caldas',
                        'Caquetá', 'Casanare', 'Cauca', 'Cesar', 'Chocó', 'Córdoba', 'Cundinamarca',
                        'Guainía', 'Guaviare', 'Huila', 'La Guajira', 'Magdalena', 'Meta', 'Nariño',
                        'Norte de Santander', 'Putumayo', 'Quindío', 'Risaralda', 'San Andrés',
                        'Santander', 'Sucre', 'Tolima', 'Valle del Cauca', 'Vaupés', 'Vichada'
                    ];
                @endphp

                @foreach ($departments as $department)
                <tr>
                    <td class="text-start">{{ $department }}</td>
                    <td>
                        <input type="number" min="0" max="100" step="0.01"
                               class="form-control percentage-input"
                               name="percentages[{{ $department }}]"
                               value="{{ isset($savedPercentages[$department]) ? $savedPercentages[$department] : 0 }}">
                    </td>
                    <td class="visits-cell">0</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="table-light fw-bold">
                    <td class="text-end">Total</td>
                    <td id="total-percentage">0%</td>
                    <td id="total-visits">0</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Actualizar porcentajes</button>
    </div>
</form>
  </div>
  <div class="tab-pane fade p-3" id="contact" role="tabpanel" aria-labelledby="contact-tab">
   <h4 class="content-title content-title-xs mt-4">Visitas por país</h4>

   <form action="{{ route('admin.candidates.updateVisits', $candidate) }}" method="POST">
         @csrf
         @method('POST')

         <div class="row">
            @php
               $chunks = array_chunk($countries, 4, true);
               $colClass = 'col-md-3'; // 4 columnas por fila
            @endphp

            @foreach($chunks as $chunk)
               <div class="{{ $colClass }}">
                  <table class="table table-sm">
                     <thead>
                        <tr>
                           <th>País</th>
                           <th>Visitas</th>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach($chunk as $en => $es)
                           <tr>
                              <td style="font-size: 0.875rem;">{{ $es }}</td>
                              <td>
                                 <input type="number"
                                        name="visits[{{ $en }}]"
                                        value="{{ $visits[$en] ?? 0 }}"
                                        class="form-control form-control-sm"
                                        min="0" />
                              </td>
                           </tr>
                        @endforeach
                     </tbody>
                  </table>
               </div>
            @endforeach
         </div>

         <div class="mt-3">
            <button type="submit" class="btn btn-primary">Guardar visitas</button>
         </div>
      </form>
  </div>
</div>


      


      

      


   </div>
</div>


<script>
   function updateFakePercentage() {
      const real = parseFloat(document.getElementById('real_percentage').value) || 0;
      const suspicious = parseFloat(document.getElementById('suspicious_percentage').value) || 0;
      const total = real + suspicious;
      const fakeInput = document.getElementById('fake_percentage');
      const errorDiv = document.getElementById('percentageError');
      const submitButton = document.getElementById('submitButton');

      if (total > 100) {
         fakeInput.value = 0;
         errorDiv.classList.remove('d-none');
         submitButton.disabled = true;
      } else {
         fakeInput.value = (100 - total).toFixed(1);
         errorDiv.classList.add('d-none');
         submitButton.disabled = false;
      }
   }

   document.getElementById('real_percentage').addEventListener('input', updateFakePercentage);
   document.getElementById('suspicious_percentage').addEventListener('input', updateFakePercentage);

   window.addEventListener('DOMContentLoaded', updateFakePercentage);
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('department-percentages-form');
    const percentageInputs = form.querySelectorAll('.percentage-input');
    const visitsCells = form.querySelectorAll('.visits-cell');
    const totalPercentageCell = document.getElementById('total-percentage');
    const totalVisitsCell = document.getElementById('total-visits');
    const TOTAL_VISITS = 1000;  // Base fija de visitas

    function recalculateTotal() {
        let totalPercentage = 0;
        let minIndex = -1;
        let minValue = Infinity;
        let totalVisits = 0;

        percentageInputs.forEach((input, i) => {
            let value = parseFloat(input.value) || 0;
            value = Math.round(value * 100) / 100; // 2 decimales
            input.value = value;

            totalPercentage += value;

            if (value < minValue) {
                minValue = value;
                minIndex = i;
            }
        });

        // Ajustar para que el total no pase 100%
        if (totalPercentage > 100 && minIndex >= 0) {
            const excess = totalPercentage - 100;
            let newValue = parseFloat(percentageInputs[minIndex].value) - excess;
            newValue = Math.max(0, Math.round(newValue * 100) / 100);
            percentageInputs[minIndex].value = newValue;
            totalPercentage = 100;
        }

        // Actualizar porcentaje total
        totalPercentageCell.textContent = totalPercentage.toFixed(2) + '%';

        // Actualizar visitas por fila y total visitas
        visitsCells.forEach((cell, i) => {
            const pct = parseFloat(percentageInputs[i].value) || 0;
            const visits = Math.round((pct / 100) * TOTAL_VISITS);
            cell.textContent = visits.toLocaleString();
            totalVisits += visits;
        });

        totalVisitsCell.textContent = totalVisits.toLocaleString();
    }

    percentageInputs.forEach(input => {
        input.addEventListener('input', recalculateTotal);
    });

    recalculateTotal();
});
</script>

@stop