@extends('layouts.app')

@section('content')
@php
	$header = $dashboard['header'] ?? [];
	$kpis = $dashboard['kpis'] ?? [];
	$monthly = $dashboard['monthly_attendance'] ?? ['labels' => [], 'values' => [], 'insight' => ''];
	$invoices = $dashboard['snack_invoices'] ?? ['rows' => [], 'last_30_days_total' => 0];
	$attendanceTimeline = $dashboard['attendance_timeline'] ?? ['rows' => [], 'week_status' => ''];
	$weeklyCompliance = $dashboard['weekly_compliance'] ?? ['labels' => [], 'values' => [], 'average' => 0, 'insight' => ''];

	$avatar = !empty($header['avatar'])
		? route('user_fit.users.image', ['filename' => $header['avatar']])
		: asset('images/no-user-imagen.jpg');
	$hasMonthlyAttendanceData = collect($monthly['values'] ?? [])->sum() > 0;
@endphp

<div class="container-fluid client-dash-wrapper py-2">
	<div class="client-dash-hero p-3 p-lg-4 mb-3">
		<div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
			<div class="d-flex align-items-center gap-3">
				<img src="{{ $avatar }}" alt="Avatar" class="client-avatar">
				<div>
					<h2 class="mb-1">{{ $header['client_name'] ?? 'Cliente' }}</h2>
					<div class="d-flex flex-wrap gap-2">
						<span class="chip chip-dark">Plan activo: {{ $header['plan_label'] ?? '-' }}</span>
						<span class="chip">{{ $header['membership_name'] ?? '-' }}</span>
						<span class="chip">Ciclo actual: {{ $header['cycle_label'] ?? '-' }}</span>
					</div>
				</div>
			</div>
			<div class="week-progress-card">
				<div class="small text-muted">Progreso semanal</div>
				<div class="fw-bold fs-5 mb-1">{{ $header['week_attendances'] ?? 0 }} de {{ $header['week_target'] ?? 0 }} asistencias</div>
				<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $header['week_progress_percent'] ?? 0 }}">
					<div class="progress-bar" style="width: {{ $header['week_progress_percent'] ?? 0 }}%"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="row g-3 mb-2">
	
		<div class="col-6 col-xl-3">
			<div class="kpi-card h-100">
				<div class="kpi-title">Asistencias totales</div>
				<div class="kpi-value">{{ number_format((int) ($kpis['total_attendances'] ?? 0), 0, ',', '.') }}</div>
				<div class="kpi-meta">acumuladas en el plan actual</div>
			</div>
		</div>
		<div class="col-6 col-xl-3">
			<div class="kpi-card h-100">
				<div class="kpi-title">Cumplimiento</div>
				<div class="kpi-value">{{ number_format((float) ($kpis['compliance_percent'] ?? 0), 2, ',', '.') }}%</div>
				<div class="kpi-meta">asistencias realizadas vs planificadas</div>
			</div>
		</div>
		<div class="col-6 col-xl-3">
			<div class="kpi-card h-100">
				<div class="kpi-title">Deuda total</div>
				<div class="kpi-value">Bs. {{ number_format((float) ($kpis['debt_total'] ?? 0), 2, ',', '.') }}</div>
				<div class="kpi-meta">saldo pendiente actual de membresia</div>
				@if(!empty($kpis['debt_expiration_date']))
					<div class="small text-muted">Vence: {{ $kpis['debt_expiration_date'] }}</div>
				@endif
			</div>
		</div>
		<div class="col-6 col-xl-3">
			<div class="kpi-card h-100">
				<div class="kpi-title">Gasto en snacks</div>
				<div class="kpi-value">Bs. {{ number_format((float) ($kpis['snacks_spend'] ?? 0), 2, ',', '.') }}</div>
				<div class="kpi-meta">acumulado</div>
			</div>
		</div>

	</div>



	@if (!empty($invoices['rows']) && count($invoices['rows']) > 0)
		<div class="row g-3 mt-1">
			<div class="col-12">
				<div class="panel-card">
					<div class="panel-header">Facturas de snacks (ultimas compras)</div>
					<div class="table-responsive">
						<table class="table table-sm align-middle mb-0">
							<thead>
								<tr>
									<th>Fecha</th>
									<th>Producto</th>
									<th>Cantidad</th>
									<th>Subtotal</th>
									<th>Total</th>
									<th>Deuda</th>
								</tr>
							</thead>
							<tbody>
								@foreach(($invoices['rows'] ?? []) as $row)
									<tr>
										<td>{{ $row['date'] }}</td>
										<td>{{ $row['product_name'] }}</td>
										<td>{{ $row['quantity'] }}</td>
										<td>Bs. {{ number_format((float) $row['total'], 2, ',', '.') }}</td>
										<td>Bs. {{ number_format((float) ($row['sale_total'] ?? 0), 2, ',', '.') }}</td>
										<td>Bs. {{ number_format((float) ($row['sale_debt'] ?? 0), 2, ',', '.') }}</td>
									</tr>
								@endforeach
							</tbody>
						</table>
					</div>
					<div class="small fw-semibold mt-2">Total facturado snacks (ultimos 30 dias): Bs. {{ number_format((float) ($invoices['last_30_days_total'] ?? 0), 2, ',', '.') }}</div>
				</div>
			</div>
		</div>
	@endif

	<div class="row g-3 mt-1">
		<div class="col-12 col-xxl-8">
			<div class="panel-card">
				<div class="panel-header">Asistencias detalladas (ultimas 8 sesiones)</div>
				<div class="table-responsive">
					<table class="table table-sm align-middle mb-0">
						<thead>
							<tr>
								<th>Fecha</th>
								<th>Dia planificado</th>
								<th>Asistio</th>
								<th>Nota</th>
							</tr>
						</thead>
						<tbody>
							@forelse(($attendanceTimeline['rows'] ?? []) as $row)
								<tr>
									<td>{{ $row['date'] }}</td>
									<td>{{ $row['planned'] ? 'Si' : 'No' }}</td>
									<td>{!! $row['attended'] ? '<span class="text-success">Si</span>' : '<span class="text-danger">No</span>' !!}</td>
									<td>{{ $row['note'] }}</td>
								</tr>
							@empty
								<tr>
									<td colspan="4" class="text-center text-muted">Sin asistencias registradas.</td>
								</tr>
							@endforelse
						</tbody>
					</table>
				</div>
				<div class="small fw-semibold mt-2">{{ $attendanceTimeline['week_status'] ?? '' }}</div>
			</div>
		</div>
		<div class="col-12 col-xxl-4">
			<div class="panel-card h-100">
				<div class="panel-header">Cumplimiento por semana</div>
				<canvas id="weeklyComplianceChart" height="160"></canvas>
				<p class="panel-insight mb-0">{{ $weeklyCompliance['insight'] ?? '' }}</p>
			</div>
		</div>
	</div>
	@if($hasMonthlyAttendanceData)
		<div class="row g-3 mt-3">
			<div class="col-12">
				<div class="panel-card h-100">
					<div class="panel-header">Asistencias mensuales</div>
					<canvas id="attendanceMonthlyChart" height="135"></canvas>
					<p class="panel-insight mb-0">{{ $monthly['insight'] ?? '' }}</p>
				</div>
			</div>
		</div>
	@endif
</div>
@endsection

@push('styles')
<style>
	.client-dash-wrapper {
		--dash-ink: #1e293b;
		--dash-muted: #64748b;
		--dash-accent: #fdba00;
		--dash-accent-2: #16a34a;
	}
	.client-dash-hero {
		border-radius: 16px;
		background: radial-gradient(circle at top right, rgba(253, 186, 0, 0.35), rgba(255, 255, 255, 0.95) 45%), #fff;
		border: 1px solid rgba(30, 41, 59, 0.08);
		box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
	}
	.client-avatar {
		width: 68px;
		height: 68px;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid #fff;
		box-shadow: 0 4px 12px rgba(0,0,0,.12);
	}
	.chip {
		display: inline-flex;
		align-items: center;
		padding: 5px 10px;
		border-radius: 999px;
		font-size: .82rem;
		color: var(--dash-ink);
		background: #eef2f7;
	}
	.chip-dark {
		background: #111827;
		color: #f8fafc;
	}
	.week-progress-card {
		min-width: 280px;
		background: #fff;
		border: 1px solid rgba(30, 41, 59, 0.1);
		border-radius: 12px;
		padding: 12px;
	}
	.week-progress-card .progress {
		height: 10px;
		border-radius: 999px;
		background: #e2e8f0;
	}
	.week-progress-card .progress-bar {
		background: linear-gradient(90deg, var(--dash-accent), #f97316);
	}
	.kpi-card {
		background: #fff;
		border: 1px solid rgba(30, 41, 59, .08);
		border-radius: 14px;
		padding: 14px;
	}
	.kpi-title {
		color: var(--dash-muted);
		font-size: .86rem;
		margin-bottom: 6px;
	}
	.kpi-value {
		color: var(--dash-ink);
		font-size: 1.65rem;
		font-weight: 700;
		line-height: 1;
	}
	.kpi-meta {
		color: var(--dash-muted);
		font-size: .78rem;
		margin-top: 6px;
	}
	.panel-card {
		background: #fff;
		border: 1px solid rgba(30, 41, 59, .08);
		border-radius: 14px;
		padding: 14px;
		box-shadow: 0 8px 18px rgba(2, 6, 23, .05);
	}
	.panel-header {
		color: var(--dash-ink);
		font-weight: 700;
		margin-bottom: 10px;
	}
	.panel-insight {
		margin-top: 10px;
		color: var(--dash-muted);
		font-size: .82rem;
	}
	@media (max-width: 992px) {
		.week-progress-card {
			min-width: 100%;
		}
	}
</style>
@endpush

@push('scripts')
@php
	$chartPayload = [
		'monthlyLabels' => $monthly['labels'] ?? [],
		'monthlyValues' => $monthly['values'] ?? [],
		'weekLabels' => $weeklyCompliance['labels'] ?? [],
		'weekValues' => $weeklyCompliance['values'] ?? [],
	];
@endphp
<script id="client-dashboard-chart-data" type="application/json">{!! json_encode($chartPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush