@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Resultados de organización')

@section('vendor-style')
@vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss','resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'])
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function(){
  const performanceMonthInput = document.getElementById('performance_month');
  const performanceCompanySelect = document.getElementById('performance_company');
  const performanceOrderValueInput = document.getElementById('performance_order_value');
  const performanceDateFromInput = document.getElementById('performance_date_from');
  const performanceDateToInput = document.getElementById('performance_date_to');
  const performanceRiderIdInput = document.getElementById('performance_rider_id');
  const performanceCourierIdInput = document.getElementById('performance_courier_id');
  const performanceReloadBtn = document.getElementById('performance_reload');
  const performanceLoading = document.getElementById('performance_loading');
  const performanceError = document.getElementById('performance_error');
  const performanceEmpty = document.getElementById('performance_empty');
  const performanceCoverageLabel = document.getElementById('performance_coverage_label');
  const performanceCoverageDesc = document.getElementById('performance_coverage_desc');
  const performanceRevenueActual = document.getElementById('performance_revenue_actual');
  const performanceRevenueProjected = document.getElementById('performance_revenue_projected');
  const performanceOrdersActual = document.getElementById('performance_orders_actual');
  const performanceOrdersProjected = document.getElementById('performance_orders_projected');
  const performanceOrdersTarget = document.getElementById('performance_orders_target');
  const performanceLastMetric = document.getElementById('performance_last_metric');
  const performanceTableEl = document.getElementById('performance_table');

  const detailModalEl = document.getElementById('performanceDetailModal');
  const detailModalTitle = document.getElementById('performanceDetailTitle');
  const detailModalSubtitle = document.getElementById('performanceDetailSubtitle');
  const detailModalBody = document.getElementById('performanceDetailBody');
  const detailModal = detailModalEl ? new bootstrap.Modal(detailModalEl) : null;

  const performanceDefaults = @json($performanceDefaults ?? []);
  const PERFORMANCE_ENDPOINT = @json(route('admin.api.organization.performance'));

  const createDebounce = (fn, delay = 300) => {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => fn.apply(null, args), delay);
    };
  };

  const formatNumber = (value, decimals = 0, empty = '—') => {
    const num = Number(value);
    if (!Number.isFinite(num)) return empty;
    return num.toLocaleString('es-ES', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  };

  const formatCurrency = (value, empty = '—') => {
    const num = Number(value);
    if (!Number.isFinite(num)) return empty;
    return num.toLocaleString('es-ES', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const formatPercent = (value, empty = '—') => {
    const num = Number(value);
    if (!Number.isFinite(num)) return empty;
    return `${num.toFixed(1)}%`;
  };

  const formatDelta = (value, suffix = '', decimals = 2) => {
    const num = Number(value);
    if (!Number.isFinite(num) || num === 0) return `±0${suffix}`;
    const sign = num > 0 ? '+' : '';
    return `${sign}${formatNumber(num, decimals)}${suffix}`;
  };

  const formatDate = value => {
    if (!value) return '—';
    try {
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return '—';
      return date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
    } catch (error) {
      return '—';
    }
  };

  const numericSortValue = value => {
    const num = Number(value);
    return Number.isFinite(num) ? num : 0;
  };

  if (performanceDefaults && typeof performanceDefaults === 'object') {
    if (performanceMonthInput && performanceDefaults.month) {
      performanceMonthInput.value = performanceDefaults.month;
    }
    if (performanceOrderValueInput && performanceDefaults.order_value !== undefined) {
      const val = Number(performanceDefaults.order_value);
      if (Number.isFinite(val)) {
        performanceOrderValueInput.value = val.toFixed(2);
      }
    }
    if (performanceDateFromInput && performanceDefaults.date_from) {
      performanceDateFromInput.value = performanceDefaults.date_from;
    }
    if (performanceDateToInput && performanceDefaults.date_to) {
      performanceDateToInput.value = performanceDefaults.date_to;
    }
  }

  const updatePerformanceSummary = (summary = {}, meta = {}) => {
    const coveragePct = Number(meta.coverage_ratio ?? 0) * 100;
    if (performanceCoverageLabel) {
      performanceCoverageLabel.textContent = formatPercent(coveragePct);
    }
    if (performanceCoverageDesc) {
      const covered = Math.round(Number(meta.days_covered ?? 0));
      const total = Math.max(0, Math.round(Number(meta.period_days ?? 0)));
      if (!meta.latest_metric_date) {
        performanceCoverageDesc.textContent = 'Aún no hay métricas para este periodo.';
      } else if (total > 0) {
        performanceCoverageDesc.textContent = `Cobertura de ${covered}/${total} días del periodo.`;
      } else {
        performanceCoverageDesc.textContent = 'Cobertura pendiente de definir periodo.';
      }
    }
    if (performanceRevenueActual) {
      performanceRevenueActual.textContent = formatCurrency(summary.revenue_actual ?? 0);
    }
    if (performanceRevenueProjected) {
      performanceRevenueProjected.textContent = formatCurrency(summary.revenue_projected ?? 0);
    }
    if (performanceOrdersActual) {
      performanceOrdersActual.textContent = formatNumber(summary.orders_actual ?? 0, 0, '0');
    }
    if (performanceOrdersProjected) {
      performanceOrdersProjected.textContent = formatNumber(summary.orders_projected ?? 0, 0, '0');
    }
    if (performanceOrdersTarget) {
      performanceOrdersTarget.textContent = formatNumber(summary.orders_target ?? 0, 0, '0');
    }
    if (performanceLastMetric) {
      performanceLastMetric.textContent = meta.latest_metric_date ? formatDate(meta.latest_metric_date) : '—';
    }
  };

  const fetchPerformanceData = async () => {
    if (!PERFORMANCE_ENDPOINT) {
      return { rows: [], summary: {}, meta: {} };
    }
    const url = new URL(PERFORMANCE_ENDPOINT, window.location.origin);
    if (performanceMonthInput && performanceMonthInput.value) {
      url.searchParams.set('month', performanceMonthInput.value);
    }
    if (performanceCompanySelect && performanceCompanySelect.value) {
      url.searchParams.set('company_id', performanceCompanySelect.value);
    }
    if (performanceOrderValueInput && performanceOrderValueInput.value !== '') {
      const val = Number(performanceOrderValueInput.value);
      if (Number.isFinite(val)) {
        url.searchParams.set('order_value', val.toString());
      }
    }
    if (performanceDateFromInput && performanceDateFromInput.value) {
      url.searchParams.set('date_from', performanceDateFromInput.value);
    }
    if (performanceDateToInput && performanceDateToInput.value) {
      url.searchParams.set('date_to', performanceDateToInput.value);
    }
    if (performanceRiderIdInput && performanceRiderIdInput.value) {
      const val = Number(performanceRiderIdInput.value);
      if (Number.isFinite(val) && val > 0) {
        url.searchParams.set('rider_id', String(Math.trunc(val)));
      }
    }
    if (performanceCourierIdInput && performanceCourierIdInput.value) {
      url.searchParams.set('courier_id', performanceCourierIdInput.value.trim());
    }
    const res = await fetch(url.toString(), { headers: { 'Accept': 'application/json' } });
    if (!res.ok) {
      throw new Error('performance_fetch_failed');
    }
    return res.json();
  };

  const performanceTable = performanceTableEl ? new DataTable(performanceTableEl, {
    paging: true,
    pageLength: 25,
    ordering: true,
    order: [[6, 'desc']],
    searching: true,
    autoWidth: false,
    columns: [
      {
        data: 'user_name',
        render: function (data, type, row) {
          if (type === 'display') {
            const name = data || 'Sin nombre';
            const badge = row.cost_is_default ? '<span class="badge bg-label-warning text-warning ms-1">Costo estimado</span>' : '';
            const emailLine = row.user_email ? `<div class="text-muted small">${row.user_email}</div>` : '';
            return `<div class="fw-semibold">${name}${badge}</div>${emailLine}`;
          }
          if (type === 'filter') {
            return `${data || ''} ${row.user_email || ''}`;
          }
          return data || '';
        }
      },
      {
        data: 'company_name',
        render: function (data, type) {
          if (type === 'display') {
            return data ? `<span class="fw-semibold">${data}</span>` : '<span class="text-muted">Sin empresa</span>';
          }
          if (type === 'filter') {
            return data || 'Sin empresa';
          }
          return data || '';
        }
      },
      {
        data: 'weekly_contract_hours',
        render: function (data, type, row) {
          if (type === 'display') {
            const weekly = data !== null && data !== undefined ? `${formatNumber(data, 1)} h/sem` : '—';
            const monthly = row.monthly_hours_target ? formatNumber(row.monthly_hours_target, 1) : null;
            return `<div class="fw-semibold">${weekly}</div>${monthly ? `<div class="text-muted small">${monthly} h/mes</div>` : ''}`;
          }
          if (type === 'filter') {
            return `${row.weekly_contract_hours ?? ''}`;
          }
          return numericSortValue(data);
        }
      },
      {
        data: 'orders_actual',
        render: function (data, type, row) {
          if (type === 'display') {
            const actual = formatNumber(data, 0, '0');
            const target = row.orders_target !== null && row.orders_target !== undefined ? formatNumber(row.orders_target, 0, '0') : '—';
            return `<div class="fw-semibold">${actual}</div><div class="text-muted small">Objetivo ${target}</div>`;
          }
          if (type === 'filter') {
            return `${row.orders_actual ?? 0}`;
          }
          return numericSortValue(data);
        }
      },
      {
        data: 'orders_projected',
        render: function (data, type, row) {
          if (type === 'display') {
            const projected = formatNumber(data, 0, '0');
            const pct = row.target_achievement_pct !== null && row.target_achievement_pct !== undefined
              ? row.target_achievement_pct
              : null;
            let badge = '';
            if (pct !== null) {
              let badgeClass = 'bg-label-secondary text-body';
              if (pct >= 100) {
                badgeClass = 'bg-label-success text-success';
              } else if (pct >= 80) {
                badgeClass = 'bg-label-warning text-warning';
              }
              badge = `<span class="badge ${badgeClass}">${formatPercent(pct)}</span>`;
            }
            return `<div class="fw-semibold">${projected}</div>${badge ? `<div>${badge}</div>` : ''}`;
          }
          if (type === 'filter') {
            return `${row.orders_projected ?? 0}`;
          }
          return numericSortValue(data);
        }
      },
      {
        data: 'revenue_actual',
        render: function (data, type, row) {
          if (type === 'display') {
            const actual = formatCurrency(data, '€0.00');
            const projected = formatCurrency(row.revenue_projected ?? null, '€0.00');
            return `<div class="fw-semibold">${projected}</div><div class="text-muted small">Actual ${actual}</div>`;
          }
          if (type === 'filter') {
            return `${row.revenue_actual ?? 0} ${row.revenue_projected ?? 0}`;
          }
          return numericSortValue(row.revenue_projected ?? data);
        }
      },
      {
        data: 'latest_metric_date',
        render: function (data, type, row) {
          if (type === 'display') {
            const dateLabel = formatDate(data);
            const days = row.days_with_metrics ? `<div class="text-muted small">${row.days_with_metrics} días reportados</div>` : '';
            return `<div class="fw-semibold">${dateLabel}</div>${days}`;
          }
          if (type === 'sort' || type === 'type') {
            const ts = data ? Date.parse(data) : NaN;
            return Number.isFinite(ts) ? ts : 0;
          }
          return data || '';
        }
      },
      {
        data: null,
        orderable: false,
        searchable: false,
        className: 'text-center',
        render: function (_, type) {
          if (type === 'display') {
            return `
              <button class="btn btn-sm btn-outline-primary view-details" type="button">
                <i class="ti tabler-eye me-1"></i> Ver
              </button>`;
          }
          return '';
        }
      }
    ]
  }) : null;

  const loadPerformanceData = async () => {
    if (performanceError) performanceError.classList.add('d-none');
    if (performanceEmpty) performanceEmpty.classList.add('d-none');
    if (performanceLoading) performanceLoading.classList.remove('d-none');
    try {
      const data = await fetchPerformanceData();
      updatePerformanceSummary(data.summary || {}, data.meta || {});
      const rows = Array.isArray(data.rows) ? data.rows : [];
      if (performanceTable) {
        performanceTable.clear();
        performanceTable.rows.add(rows);
        performanceTable.draw();
      }
      if ((!rows.length) && performanceEmpty) {
        performanceEmpty.classList.remove('d-none');
      }
    } catch (error) {
      if (performanceError) performanceError.classList.remove('d-none');
    } finally {
      if (performanceLoading) performanceLoading.classList.add('d-none');
    }
  };

  const loadCompanies = async () => {
    if (!performanceCompanySelect) return;
    const res = await fetch(`{{ url('/admin/api/companies') }}`);
    if (!res.ok) return;
    const j = await res.json();
    const list = j.data || [];
    const current = performanceCompanySelect.value || '';
    performanceCompanySelect.innerHTML = '<option value="">Empresa: Todas</option>';
    list.forEach(c => {
      const option = document.createElement('option');
      option.value = c.id;
      option.textContent = c.name;
      performanceCompanySelect.appendChild(option);
    });
    if (current) {
      performanceCompanySelect.value = current;
    }
  };

  const syncDatesWithMonth = () => {
    if (!performanceMonthInput || !performanceMonthInput.value) return;
    const parts = performanceMonthInput.value.split('-');
    if (parts.length !== 2) return;
    const year = Number(parts[0]);
    const month = Number(parts[1]);
    if (!Number.isFinite(year) || !Number.isFinite(month)) return;
    const firstDay = new Date(year, month - 1, 1);
    const lastDay = new Date(year, month, 0);
    const pad = n => String(n).padStart(2, '0');
    const toISO = date => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
    if (performanceDateFromInput) {
      performanceDateFromInput.value = toISO(firstDay);
    }
    if (performanceDateToInput) {
      performanceDateToInput.value = toISO(lastDay);
    }
  };

  if (performanceReloadBtn) {
    performanceReloadBtn.addEventListener('click', function(ev){
      ev.preventDefault();
      loadPerformanceData();
    });
  }
  if (performanceMonthInput) {
    performanceMonthInput.addEventListener('change', function(){
      syncDatesWithMonth();
      loadPerformanceData();
    });
  }
  if (performanceCompanySelect) {
    performanceCompanySelect.addEventListener('change', loadPerformanceData);
  }
  if (performanceDateFromInput) {
    performanceDateFromInput.addEventListener('change', loadPerformanceData);
  }
  if (performanceDateToInput) {
    performanceDateToInput.addEventListener('change', loadPerformanceData);
  }
  if (performanceOrderValueInput) {
    const debouncePerformanceReload = createDebounce(loadPerformanceData, 600);
    performanceOrderValueInput.addEventListener('input', () => debouncePerformanceReload());
  }
  if (performanceRiderIdInput) {
    const debounceRider = createDebounce(loadPerformanceData, 500);
    performanceRiderIdInput.addEventListener('input', () => debounceRider());
  }
  if (performanceCourierIdInput) {
    const debounceCourier = createDebounce(loadPerformanceData, 500);
    performanceCourierIdInput.addEventListener('input', () => debounceCourier());
  }

  loadCompanies()
    .catch(() => {})
    .finally(() => {
      if (performanceDateFromInput && !performanceDateFromInput.value && performanceMonthInput && performanceMonthInput.value) {
        syncDatesWithMonth();
      }
      loadPerformanceData();
    });

  const buildDetailContent = row => {
    const hasValue = value => value !== null && value !== undefined && !Number.isNaN(value);
    const numberVal = (value, decimals = 0, suffix = '') => hasValue(value) ? `${formatNumber(value, decimals)}${suffix}` : '—';
    const currencyVal = value => hasValue(value) ? formatCurrency(value) : '—';

    const weeklyHours = numberVal(row.weekly_contract_hours, 1, ' h');
    const monthlyHours = numberVal(row.monthly_hours_target, 1, ' h');
    const hoursWorked = numberVal(row.hours_worked, 1, ' h');
    const hoursExpected = numberVal(row.hours_expected_to_date, 1, ' h');
    const hoursRemainingValue = hasValue(row.hours_remaining) ? row.hours_remaining : null;
    const hoursRemaining = numberVal(row.hours_remaining, 1, ' h');

    const ordersActual = numberVal(row.orders_actual, 0);
    const ordersExpected = numberVal(row.orders_expected_to_date, 0);
    const ordersTarget = numberVal(row.orders_target, 0);
    const ordersProjected = numberVal(row.orders_projected, 0);
    const ordersRemainingValue = hasValue(row.orders_remaining) ? row.orders_remaining : null;
    const ordersPendingLabel = hasValue(row.orders_remaining)
      ? (row.orders_remaining > 0
          ? `${formatNumber(row.orders_remaining, 0)} pendientes`
          : row.orders_remaining < 0
            ? `${formatNumber(Math.abs(row.orders_remaining), 0)} sobre objetivo`
            : 'Objetivo al día')
      : '—';
    const ordersPending = ordersPendingLabel;
    const ordersPerHour = numberVal(row.orders_per_hour, 2);
    const achievement = hasValue(row.target_achievement_pct) ? formatPercent(row.target_achievement_pct) : '—';

    const revenueActual = currencyVal(row.revenue_actual);
    const revenueProjected = currencyVal(row.revenue_projected);
    const costMonthly = currencyVal(row.cost_monthly);
    const costToDate = currencyVal(row.cost_to_date);
    const hourlyCostValue = hasValue(row.cost_monthly) && hasValue(row.monthly_hours_target) && row.monthly_hours_target > 0
      ? row.cost_monthly / row.monthly_hours_target
      : null;
    const hourlyCost = currencyVal(hourlyCostValue);
    const balanceActualValue = hasValue(row.balance_actual) ? row.balance_actual : null;
    const balanceProjectedValue = hasValue(row.balance_projected) ? row.balance_projected : null;
    const balanceActual = currencyVal(balanceActualValue);
    const balanceProjected = currencyVal(balanceProjectedValue);

    const firstMetric = row.first_metric_date ? formatDate(row.first_metric_date) : '—';
    const latestMetric = row.latest_metric_date ? formatDate(row.latest_metric_date) : '—';
    const daysWithMetrics = numberVal(row.days_with_metrics, 0);

    const projectedPositive = balanceProjectedValue !== null ? balanceProjectedValue >= 0 : null;
    const achievementValue = hasValue(row.target_achievement_pct) ? row.target_achievement_pct : null;
    let summaryBadgeClass = 'bg-label-secondary text-body';
    let summaryTitle = 'Información general';
    let summarySubtitle = 'Revisa los indicadores para entender el desempeño.';

    if (projectedPositive !== null) {
      if (projectedPositive && achievementValue !== null && achievementValue >= 90) {
        summaryBadgeClass = 'bg-label-success text-success';
        summaryTitle = 'Rentabilidad proyectada positiva';
        summarySubtitle = 'Los ingresos estimados cubren los costes mensuales actuales.';
      } else if (!projectedPositive) {
        summaryBadgeClass = 'bg-label-danger text-danger';
        summaryTitle = 'Atención: rentabilidad negativa';
        summarySubtitle = 'Los costes superan los ingresos proyectados. Requiere seguimiento cercano.';
      } else {
        summaryBadgeClass = 'bg-label-warning text-warning';
        summaryTitle = 'Rentabilidad ajustada';
        summarySubtitle = 'Hay margen positivo, pero conviene vigilar el desempeño.';
      }
    }

    const summaryOrdersText = ordersRemainingValue !== null
      ? (ordersRemainingValue > 0
          ? `${formatNumber(ordersRemainingValue, 0)} pedidos pendientes para alcanzar el objetivo mensual.`
          : ordersRemainingValue < 0
            ? `Supera el objetivo mensual por ${formatNumber(Math.abs(ordersRemainingValue), 0)} pedidos.`
            : 'Objetivo mensual alcanzado.')
      : 'Sin datos suficientes para comparar con el objetivo.';

    const summaryHoursText = hoursRemainingValue !== null
      ? (hoursRemainingValue > 0
          ? `${formatNumber(hoursRemainingValue, 1)} horas por asignar.`
          : 'No hay horas restantes registradas.')
      : 'No se han definido horas restantes.';

    const summaryCard = `
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
          <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
            <div class="d-flex align-items-start gap-3">
              <span class="badge rounded-pill ${summaryBadgeClass} px-3 py-2" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Clasifica la rentabilidad proyectada combinando ingresos estimados y costes del rider.">${summaryTitle}</span>
              <p class="mb-0 text-muted">${summarySubtitle}</p>
            </div>
            <div class="d-flex flex-wrap gap-4 text-muted small">
              <div>
                <span class="text-uppercase fw-semibold d-block" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Ingresos acumulados menos los costes registrados hasta la fecha.">Balance actual</span>
                <span class="text-body fw-semibold">${balanceActual}</span>
              </div>
              <div>
                <span class="text-uppercase fw-semibold d-block" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Estimación de margen al cierre del periodo usando los ingresos proyectados y el coste mensual.">Balance proyectado</span>
                <span class="text-body fw-semibold">${balanceProjected}</span>
              </div>
              <div>
                <span class="text-uppercase fw-semibold d-block" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Pedidos que aún faltan para cumplir el objetivo mensual.">Pedidos pendientes</span>
                <span class="text-body fw-semibold">${ordersPendingLabel}</span>
              </div>
            </div>
          </div>
          <hr class="my-3">
          <div class="row g-3 small text-muted">
            <div class="col-md-6 d-flex align-items-start gap-2">
              <i class="ti tabler-clock text-primary"></i>
              <div>
                <span class="text-body fw-semibold d-block" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Comparación entre las horas contratadas y las registradas para identificar pendientes.">Horas</span>
                ${summaryHoursText}
              </div>
            </div>
            <div class="col-md-6 d-flex align-items-start gap-2">
              <i class="ti tabler-target text-primary"></i>
              <div>
                <span class="text-body fw-semibold d-block" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Lectura rápida del avance de pedidos frente al plan mensual.">Pedidos</span>
                ${summaryOrdersText}
              </div>
            </div>
          </div>
        </div>
      </div>`;

    return `${summaryCard}
      <div class="row g-4">
        <div class="col-md-6">
          <h6 class="text-muted text-uppercase small mb-2">Contrato</h6>
          <dl class="row mb-0 small">
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Horas comprometidas cada semana según el contrato.">Horas semanales</dt><dd class="col-6">${weeklyHours}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Horas totales contratadas para el mes.">Horas mensuales</dt><dd class="col-6">${monthlyHours}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Coste bruto por hora aplicado al rider (puede ser estimado si no hay datos reales).">Coste por hora</dt><dd class="col-6">${hourlyCost}${row.cost_is_default ? ' <span class="badge bg-label-warning text-warning">Estimado</span>' : ''}</dd>
          </dl>
        </div>
        <div class="col-md-6">
          <h6 class="text-muted text-uppercase small mb-2">Horas trabajadas</h6>
          <dl class="row mb-0 small">
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Total de horas reportadas por el rider durante el periodo analizado.">Trabajadas</dt><dd class="col-6">${hoursWorked}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Horas que deberían haberse trabajado según el plan hasta la fecha seleccionada.">Esperadas a la fecha</dt><dd class="col-6">${hoursExpected}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Horas que quedan por asignar para cumplir la carga mensual del contrato.">Restantes</dt><dd class="col-6">${hoursRemaining}</dd>
          </dl>
        </div>
        <div class="col-md-6">
          <h6 class="text-muted text-uppercase small mb-2">Pedidos</h6>
          <dl class="row mb-0 small">
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Pedidos completados y validados en el periodo.">Realizados</dt><dd class="col-6">${ordersActual}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Pedidos previstos según el calendario hasta la fecha actual.">Esperados</dt><dd class="col-6">${ordersExpected}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Meta total de pedidos asignada para el mes.">Objetivo</dt><dd class="col-6">${ordersTarget}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Estimación de pedidos totales al cierre si continúa el ritmo actual.">Proyección</dt><dd class="col-6">${ordersProjected}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Pedidos que faltan (positivo) o se superan (negativo) respecto al objetivo.">Estado</dt><dd class="col-6">${ordersPending}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Promedio de pedidos generados por cada hora registrada.">Pedidos por hora</dt><dd class="col-6">${ordersPerHour}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Porcentaje del objetivo alcanzado (Pedidos realizados / Objetivo).">% Logro</dt><dd class="col-6">${achievement}</dd>
          </dl>
        </div>
        <div class="col-md-6">
          <h6 class="text-muted text-uppercase small mb-2">Ingresos y coste</h6>
          <dl class="row mb-0 small">
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Ingresos ya facturados o registrados durante el periodo.">Ingresos actuales</dt><dd class="col-6">${revenueActual}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Estimación de ingresos totales cuando termine el periodo.">Ingresos proyectados</dt><dd class="col-6">${revenueProjected}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Coste total del contrato para el mes completo.">Coste mensual</dt><dd class="col-6">${costMonthly}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Coste acumulado hasta la fecha según las horas registradas.">Coste acumulado</dt><dd class="col-6">${costToDate}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Diferencia entre ingresos actuales y coste acumulado.">Balance actual</dt><dd class="col-6">${balanceActual}</dd>
            <dt class="col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Margen previsto al finalizar el periodo (ingresos proyectados menos coste mensual).">Balance proyectado</dt><dd class="col-6">${balanceProjected}</dd>
          </dl>
        </div>
        <div class="col-md-12">
          <h6 class="text-muted text-uppercase small mb-2">Métricas recibidas</h6>
          <dl class="row mb-0 small">
            <dt class="col-sm-4 col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Primer día del periodo en el que se recibieron métricas.">Primer día</dt><dd class="col-sm-8 col-6">${firstMetric}</dd>
            <dt class="col-sm-4 col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Fecha más reciente con información registrada.">Último día</dt><dd class="col-sm-8 col-6">${latestMetric}</dd>
            <dt class="col-sm-4 col-6 text-muted" data-bs-toggle="tooltip" data-bs-placement="top" tabindex="0" title="Cantidad de días del rango seleccionado con datos disponibles.">Días con datos</dt><dd class="col-sm-8 col-6">${daysWithMetrics}</dd>
          </dl>
        </div>
      </div>
    `;
  };

  if (performanceTableEl && performanceTable) {
    performanceTableEl.addEventListener('click', event => {
      const button = event.target.closest('.view-details');
      if (!button) return;
      const rowEl = button.closest('tr');
      const rowData = performanceTable.row(rowEl).data();
      if (!rowData) return;
      if (detailModalTitle) {
        detailModalTitle.textContent = rowData.user_name || 'Rider';
      }
      if (detailModalSubtitle) {
        detailModalSubtitle.textContent = rowData.company_name || 'Sin empresa asociada';
      }
      if (detailModalBody) {
        detailModalBody.innerHTML = buildDetailContent(rowData);
        detailModalBody.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
          bootstrap.Tooltip.getOrCreateInstance(el);
        });
      }

      if (detailModal) {
        detailModal.show();
      }
    });
  }
});
</script>
@endsection

@section('content')
<div class="row g-4 mb-4">
  <div class="col-12">
    <div class="card border-0 shadow-sm text-white position-relative overflow-hidden" style="background: linear-gradient(135deg, #1e7dd6 0%, #5b36ff 100%);">
      <div class="card-body p-4 p-lg-5 position-relative">
        <div class="row g-4 align-items-center">
          <div class="col-lg-8">
            <span class="badge bg-white text-primary fw-semibold d-inline-flex align-items-center gap-2 px-3 py-2 mb-3">
              <i class="ti tabler-chart-line icon-16px"></i>
              Resultados económicos
            </span>
            <h4 class="text-white mb-2">Comprueba si el rendimiento cubre los costes previstos</h4>
            <p class="text-white-50 mb-0">Analiza pedidos, ingresos y márgenes estimados por rider y empresa para tomar decisiones informadas.</p>
          </div>
          <div class="col-lg-4 text-lg-end">
            <div class="d-flex flex-wrap justify-content-lg-end gap-2">
              <button class="btn btn-light text-primary fw-semibold" id="performance_reload">
                <i class="ti tabler-refresh icon-18px me-1"></i> Actualizar datos
              </button>
            </div>
          </div>
        </div>
      </div>
      <span class="position-absolute top-0 end-0 rounded-circle" style="width: 240px; height: 240px; background: radial-gradient(circle at center, rgba(255,255,255,0.45) 0, rgba(255,255,255,0) 70%); transform: translate(25%, -35%);"></span>
    </div>
  </div>
</div>

<div class="card border-0 shadow-sm mb-4">
  <div class="card-body">
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center mb-3 gap-2">
      <div>
        <h6 class="mb-1">Filtros de análisis</h6>
        <p class="text-muted mb-0 small">Selecciona el rango temporal y los criterios para ajustar la proyección económica.</p>
      </div>
    </div>
    <div class="row g-3 align-items-end">
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_month">Mes base</label>
        <input type="month" id="performance_month" class="form-control form-control-sm">
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_date_from">Fecha desde</label>
        <input type="date" id="performance_date_from" class="form-control form-control-sm">
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_date_to">Fecha hasta</label>
        <input type="date" id="performance_date_to" class="form-control form-control-sm">
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_company">Empresa</label>
        <select id="performance_company" class="form-select form-select-sm">
          <option value="">Todas</option>
        </select>
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_rider_id">ID Rider</label>
        <input type="number" min="1" id="performance_rider_id" class="form-control form-control-sm" placeholder="Ej. 1024">
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_courier_id">Courier ID</label>
        <input type="text" id="performance_courier_id" class="form-control form-control-sm" placeholder="Buscar courier">
      </div>
      <div class="col-sm-6 col-lg-2">
        <label class="form-label small text-muted mb-1" for="performance_order_value">€/pedido</label>
        <div class="input-group input-group-sm">
          <span class="input-group-text">€</span>
          <input type="number" step="0.01" min="0" id="performance_order_value" class="form-control" placeholder="5.50">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-xl-3 col-sm-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <small class="text-muted text-uppercase fw-semibold">Cobertura de métricas</small>
        <h5 class="mb-1" id="performance_coverage_label">0%</h5>
        <p class="text-muted mb-1 small" id="performance_coverage_desc">Aún no hay métricas para este periodo.</p>
        <p class="text-muted mb-0 small">Último dato: <span id="performance_last_metric">—</span></p>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-sm-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <small class="text-muted text-uppercase fw-semibold">Ingresos</small>
        <h5 class="mb-1" id="performance_revenue_projected">€0.00</h5>
        <p class="text-muted mb-0 small">Actual: <span id="performance_revenue_actual">€0.00</span></p>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-sm-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <small class="text-muted text-uppercase fw-semibold">Pedidos</small>
        <h5 class="mb-1"><span id="performance_orders_projected">0</span> <small class="text-muted">proj.</small></h5>
        <p class="text-muted mb-0 small">Actual: <span id="performance_orders_actual">0</span> · Objetivo: <span id="performance_orders_target">0</span></p>
      </div>
    </div>
  </div>
</div>

<div class="alert alert-danger d-none" role="alert" id="performance_error">
  No se pudo cargar la información de resultados. Inténtalo nuevamente.
</div>
<div class="alert alert-info d-none" role="alert" id="performance_empty">
  Aún no hay métricas disponibles para los filtros seleccionados.
</div>
<div class="d-flex align-items-center gap-2 mb-3 d-none" id="performance_loading">
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span>Cargando resultados...</span>
</div>

<div class="card border-0 shadow-sm">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table align-middle table-hover" id="performance_table">
        <thead class="table-light">
          <tr>
            <th>Rider</th>
            <th>Empresa</th>
            <th>Contrato</th>
            <th>Pedidos</th>
            <th>Proyección</th>
            <th>Ingresos</th>
            <th>Últ. métrica</th>
            <th>Acciones</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="performanceDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0" id="performanceDetailTitle">Detalle del rider</h5>
          <small class="text-muted" id="performanceDetailSubtitle"></small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <div id="performanceDetailBody"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
@endsection