@push('css')
<!-- Daterangepicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

<h4 class="mb-3 -pl-3 alternative-font font-bold mt-2">Influencia de la cuenta</h4>

<!-- Datos del perfil -->
<div class="card w-100 w-sm-auto p-3 mt-3 pb-2" style="border-radius: 5px;">
   <table class="table table-borderless mb-0">
      <tbody>
         <tr>
            <td class="info--title alternative-font">Seguidores</td>
            <td class="fw-bold alternative-font text-lg">{{ short_number($socialProfile->follower_count) }}</td>
         </tr>
         <tr>
            <td class="info--title alternative-font">Engagement</td>
            <td class="fw-bold alternative-font text-lg">{{ number_format($accountInfluencyAvgRetention * 100, 2) }}%</td>
            <td class="text-muted small text-gray-600 text-xs alternative-font">
               El puntaje se basa en todos los videos del perfil
               <a href="#" class="ms-1 text-muted" data-bs-toggle="tooltip" title="Calculada con la siguiente fórmula: (me gusta + comentarios + compartidos) / visitas de manera histórica.">
                  <i data-feather="help-circle" class="svg-14"></i>
               </a>
            </td>
         </tr>
         <tr>
            <td class="info--title alternative-font">Compromiso de la audiencia</td>
            <td class="fw-bold alternative-font text-lg">
               {{-- {{ number_format(($accountInfluencyTotalLikes / $socialProfile->follower_count) * 100, 1) }}% --}}
               0%
            </td>
            <td class="text-muted small text-gray-600 text-xs alternative-font">
               El cálculo se hace mediante la división de la cantidad de me gusta entre la cantidad de seguidores y se multiplica por 100
            </td>
         </tr>
         <tr>
            <td class="info--title alternative-font">Region</td>
            <td class="fw-bold alternative-font text-lg">CO</td>
            <td class="text-muted small text-gray-600 text-xs alternative-font">
               Región donde se encuentra ubicado el usuario
            </td>
         </tr>
         <tr>
            <td class="info--title alternative-font">Industria</td>
            <td class="fw-bold alternative-font text-lg">N/A</td>
            <td class="text-muted small text-gray-600 text-xs alternative-font">
               Industria del contenido de la cuenta
            </td>
         </tr>
         <tr>
            <td class="info--title alternative-font">Primer video</td>
            <td class="fw-bold alternative-font text-lg" style="min-width: 160px;">{{ $firstVideoDate }}</td>
            <td class="text-muted small text-gray-600 text-xs alternative-font">
               Fecha cuando publicó el primer video 
               <a href="#" class="ms-1 text-muted" data-bs-toggle="tooltip" title="Para ver todos los primeros videos del usuario, ve a la pestaña de videos.">
                  <i data-feather="help-circle" class="svg-14"></i>
               </a>
            </td>
         </tr>
      </tbody>
   </table>
</div>

<!-- Métricas generales -->

<div class="d-flex flex-wrap justify-content-end align-items-center mb-3">
   <div class="mt-3">
      <div class="d-flex align-items-center text-end gap-3">
         <div class="form-check">
            <input class="form-check-input" type="checkbox" id="showMedianValues" checked>
            <label class="form-check-label" for="showMedianValues">Mostrar la media</label>
         </div>

         <div class="form-check">
            <input class="form-check-input" type="checkbox" id="chooseDateRange">
            <label class="form-check-label" for="chooseDateRange">Rango de fechas</label>
         </div>

         <button id="selectorButton" disabled class="btn btn-sm btn-outline-ligth rounded-sm">
            7 días
         </button>
      </div>
   </div>
</div>

<div class="border g-3 p-3" style="border-radius: 5px;">
   <div class="row row-cols-2 row-cols-md-3 row-cols-lg-">
      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 capitalize mb-1">Videos</p>
            <p class="text-lg md:text-xl font-600">{{ $socialProfile->videos }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Visitas totales</p>
            <p class="text-lg md:text-xl font-600" id="totalViews">{{ short_number($accountInfluencyTotalViews) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Me gusta</p>
            <p class="text-lg md:text-xl font-600"  id="totalLikes">{{ short_number($accountInfluencyTotalLikes) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Comentarios totales</p>
            <p class="text-lg md:text-xl font-600" id="totalComments">{{ short_number($accountInfluencyTotalComments) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Total videos compartidos</p>
            <p class="text-lg md:text-xl font-600" id="totalShares">{{ short_number($accountInfluencyTotalShares) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Retención total</p>
            <p class="text-lg md:text-xl font-600">
               {{ short_number($accountInfluencyTotalRetention) }}
               <a href="#" class="ms-1 text-muted" data-bs-toggle="tooltip" title="Me gusta + compartir + comentarios">
                  <i data-feather="help-circle" class="svg-14"></i>
               </a>
            </p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Avg. visitas</p>
            <p class="text-lg md:text-xl font-600" id="avgViews">{{ short_number($accountInfluencyAvgViews) }}</p>
         </div>
      </div>
   </div>
   <div class="row row-cols-2 row-cols-md-3 row-cols-lg-">
      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Avg. Me gusta</p>
            <p class="text-lg md:text-xl font-600" id="avgLikes">{{ short_number($accountInfluencyAvgLikes) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Avg. Comentarios</p>
            <p class="text-lg md:text-xl font-600" id="avgComments">{{ short_number($accountInfluencyAvgComments) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Avg. Compartidos</p>
            <p class="text-lg md:text-xl font-600" id="avgShares">{{ short_number($accountInfluencyAvgShares) }}</p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Avg. Duración</p>
            <p class="text-lg md:text-xl font-600">
               {{ floor($accountInfluencyAvgDuration / 60) }}:{{ str_pad($accountInfluencyAvgDuration % 60, 2, '0', STR_PAD_LEFT) }}
            </p>
         </div>
      </div>

      <div class="col">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Avg. Engagement</p>
            <p class="text-lg md:text-xl font-600">
               {{ short_number($accountInfluencyAvgRetention * 100, 2) }}%
            </p>
         </div>
      </div>

      {{-- Este se oculta o se muestra --}}
      <div class="col median-counter">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Media de visualizaciones</p>
            <p class="text-lg md:text-xl font-600" id="medianViews">
               {{ short_number($accountInfluencyMedianViews) }}
            </p>
         </div>
      </div>
   </div>

   <div class="row row-cols-2 row-cols-md-3 row-cols-lg-">
      <div class="col median-counter">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Media de me gusta</p>
            <p class="text-lg md:text-xl font-600" id="medianLikes">
               {{ short_number($accountInfluencyMedianLikes) }}
            </p>
         </div>
      </div>

      <div class="col median-counter">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Media de comentarios</p>
            <p class="text-lg md:text-xl font-600" id="medianComments">
               {{ short_number($accountInfluencyMedianComments) }}
            </p>
         </div>
      </div>

      <div class="col median-counter">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Media de compartidos</p>
            <p class="text-lg md:text-xl font-600" id="medianShares">
               {{ short_number($accountInfluencyMedianShares) }}
            </p>
         </div>
      </div>

      <div class="col median-counter">
         <div class="rounded alternative-font">
            <p class="flex items-center text-xs xl:text-sm text-gray-600 mb-1 account-influency-title">Media de duración</p>
            <p class="text-lg md:text-xl font-600">
               {{ floor($accountInfluencyMedianDuration / 60) }}:{{ str_pad($accountInfluencyMedianDuration % 60, 2, '0', STR_PAD_LEFT) }}
            </p>
         </div>
      </div>
   </div>
</div>

@push('js')
<!-- Moment.js (requerido por daterangepicker) -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

<!-- Daterangepicker JS -->
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
   // Inicializar tooltips de Bootstrap
   const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
   const tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
   });
</script>

<script>
   // Mostrar/ocultar valores medianos
   const medianCheckbox = document.getElementById('showMedianValues');
   const medianElements = document.querySelectorAll('.median-counter');

   function toggleMedians() {
      medianElements.forEach(el => {
         el.style.display = medianCheckbox.checked ? 'block' : 'none';
      });
   }

   medianCheckbox.addEventListener('change', toggleMedians);
   toggleMedians(); // Ejecutar al cargar
</script>

<script>

   function formatNumberShort(n) {
      if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
      if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
      if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
      return n.toString();
   }

   $(function () {
      const $checkbox = $("#chooseDateRange");
      const $button = $("#selectorButton");

      function formatDate(date) {
         return date.format("DD-MM-YYYY");
      }

      // Inicializar daterangepicker
      $button.daterangepicker(
         {
            minYear: 2024,
            autoApply: true,
            ranges: {
               Hoy: [moment(), moment()],
               Ayer: [moment().subtract(1, "days"), moment().subtract(1, "days")],
               "Últimos 7 días": [moment().subtract(6, "days"), moment()],
               "Últimos 30 días": [moment().subtract(29, "days"), moment()],
               "Este mes": [moment().startOf("month"), moment().endOf("month")],
               "Mes anterior": [
                  moment().subtract(1, "month").startOf("month"),
                  moment().subtract(1, "month").endOf("month"),
               ],
            },
            locale: {
               format: "DD-MM-YYYY",
               separator: " - ",
               applyLabel: "Aplicar",
               cancelLabel: "Cancelar",
               fromLabel: "Desde",
               toLabel: "Hasta",
               customRangeLabel: "Personalizado",
               weekLabel: "S",
               daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
               monthNames: [
                  "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
                  "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre",
               ],
               firstDay: 1,
            },
            autoUpdateInput: false,
            alwaysShowCalendars: true,
            startDate: moment().subtract(6, "days"),
            endDate: moment(),
            minDate: "01-01-2025",
            opens: "left",
            drops: "up",
         },
         function (start, end, label) {
            // Actualizar botón de texto
            if (label === "Custom Range" || label === "Personalizado") {
               $button.text(formatDate(start) + " - " + formatDate(end));
            } else {
               $button.text(label);
            }

            // ⚡ Llamar a la API con el rango de fechas
            $.get("/api/account-influency/stats", {
               start_date: start.format("YYYY-MM-DD"),
               end_date: end.format("YYYY-MM-DD")
            }).done(function (data) {
               console.log("📊 Nuevas estadísticas:", data);

               $("#totalViews").text(formatNumberShort(data.totals.accountInfluencyTotalViews));
               $("#totalLikes").text(formatNumberShort(data.totals.accountInfluencyTotalLikes));
               $("#totalComments").text(formatNumberShort(data.totals.accountInfluencyTotalComments));
               $("#totalShares").text(formatNumberShort(data.totals.accountInfluencyTotalShares));
               // $("#totalDuration").text(formatNumberShort(data.totals.accountInfluencyTotalDuration));

               $("#avgViews").text(formatNumberShort(data.averages.accountInfluencyAvgViews));
               $("#avgLikes").text(formatNumberShort(data.averages.accountInfluencyAvgLikes));
               $("#avgComments").text(formatNumberShort(data.averages.accountInfluencyAvgComments));
               $("#avgShares").text(formatNumberShort(data.averages.accountInfluencyAvgShares));
               // $("#avgDuration").text(formatNumberShort(data.averages.accountInfluencyAvgDuration));

               $("#medianViews").text(formatNumberShort(data.medians.accountInfluencyMedianViews));
               $("#medianLikes").text(formatNumberShort(data.medians.accountInfluencyMedianLikes));
               $("#medianComments").text(formatNumberShort(data.medians.accountInfluencyMedianComments));
               $("#medianShares").text(formatNumberShort(data.medians.accountInfluencyMedianShares));
            }).fail(function () {
               alert("Error al cargar métricas. Intenta nuevamente.");
            });
         }
      );

      // Deshabilitar o habilitar el botón según checkbox
      $checkbox.on("change", function () {
         $button.prop("disabled", !$(this).is(":checked"));
      });

      if (!$checkbox.is(":checked")) {
         $button.prop("disabled", true);
      }
   });
</script>
@endpush