@extends('layouts.ownerLayout')

@section('title', 'Dashboard Propietario')

@section('vendor-style')
@vite('resources/assets/vendor/libs/apex-charts/apex-charts.scss')
@endsection

@section('vendor-script')
@vite('resources/assets/vendor/libs/apex-charts/apexcharts.js')
@endsection

@section('page-script')
<script>
  window.__ownerDashboardCharts = {
    status: {
      labels: @json($statusLabels ?? []),
      series: @json($statusSeries ?? []),
    },
    gains: {
      labels: @json($gainLabels ?? []),
      totalSeries: @json($gainTotalSeries ?? []),
      commissionSeries: @json($gainCommissionSeries ?? []),
    }
  };

  document.addEventListener('DOMContentLoaded', () => {
    const chartData = window.__ownerDashboardCharts || {};
    const statusEl = document.querySelector('#ownerStatusChart');
    const gainsEl = document.querySelector('#ownerGainChart');

    if (statusEl && typeof ApexCharts !== 'undefined') {
      const statusChart = new ApexCharts(statusEl, {
        chart: { type: 'donut', height: 320, toolbar: { show: false } },
        labels: chartData.status?.labels || [],
        series: chartData.status?.series || [],
        dataLabels: { enabled: true },
        legend: { position: 'bottom' },
        stroke: { width: 0 }
      });
      statusChart.render();
    }

    if (gainsEl && typeof ApexCharts !== 'undefined') {
      const gainsChart = new ApexCharts(gainsEl, {
        chart: { type: 'line', height: 320, toolbar: { show: false } },
        stroke: { width: [3, 3], curve: 'smooth' },
        markers: { size: 4 },
        xaxis: { categories: chartData.gains?.labels || [] },
        series: [
          { name: 'Total cobrado', data: chartData.gains?.totalSeries || [] },
          { name: 'Comisión', data: chartData.gains?.commissionSeries || [] },
        ],
        yaxis: {
          labels: {
            formatter: value => '$' + Number(value || 0).toLocaleString('es-CO', { maximumFractionDigits: 0 })
          }
        }
      });
      gainsChart.render();
    }
  });
</script>
@endsection

@section('content')
<div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
  <div>
    <h4 class="mb-1">Dashboard</h4>
    <p class="mb-0 text-body-secondary">Control de operación diaria y ganancia.</p>
  </div>
</div>

<div class="nav-align-top mb-4">
  <ul class="nav nav-pills flex-row gap-2" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dash-general" type="button" role="tab">
        <i class="icon-base ti tabler-layout-grid me-1"></i> General
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#dash-gains" type="button" role="tab">
        <i class="icon-base ti tabler-chart-line me-1"></i> Ganancias
      </button>
    </li>
  </ul>
</div>

<div class="tab-content p-0">
  <div class="tab-pane fade show active" id="dash-general" role="tabpanel">
    <div class="row g-4 mb-4">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <small class="text-body-secondary d-block">Serenatas hoy</small>
            <h4 class="mb-0">{{ number_format((int)($stats['today_services'] ?? 0), 0, ',', '.') }}</h4>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <small class="text-body-secondary d-block">Serenatas mañana</small>
            <h4 class="mb-0">{{ number_format((int)($stats['tomorrow_services'] ?? 0), 0, ',', '.') }}</h4>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <small class="text-body-secondary d-block">Próximos 7 días</small>
            <h4 class="mb-0">{{ number_format((int)($stats['week_services'] ?? 0), 0, ',', '.') }}</h4>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <small class="text-body-secondary d-block">Pendientes</small>
            <h4 class="mb-0">{{ number_format((int)($stats['pending_services'] ?? 0), 0, ',', '.') }}</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">Estado general de servicios</h5>
      </div>
      <div class="card-body">
        <div id="ownerStatusChart"></div>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="dash-gains" role="tabpanel">
    <div class="row g-4 mb-4">
      <div class="col-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <small class="text-body-secondary d-block">Total cobrado (mes actual)</small>
            <h4 class="mb-0">${{ number_format((float)($stats['month_total_charged'] ?? 0), 0, ',', '.') }}</h4>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="card">
          <div class="card-body">
            <small class="text-body-secondary d-block">Comisiones ganadas (mes actual)</small>
            <h4 class="mb-0">${{ number_format((float)($stats['month_commission'] ?? 0), 0, ',', '.') }}</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">Tendencia últimos 6 meses</h5>
      </div>
      <div class="card-body">
        <div id="ownerGainChart"></div>
      </div>
    </div>
  </div>
</div>
@endsection