@extends('layouts.default')

@section('title', 'Informe de Seguimiento')

@section('header_styles')
    <link rel="stylesheet" href="{{ asset('vendors/apexcharts/css/apexcharts.css') }}">
@stop

@section('content')
<section class="content-header">
    @if($alumno->preparador)
        <div class="alert alert-info mb-3">
            <i class="fas fa-user-shield me-2"></i>Mi preparador físico es: <strong>{{ $alumno->preparador->name }}</strong>
        </div>
    @endif
    <div aria-label="breadcrumb" class="card-breadcrumb">
        <h1 class="mb-3">Informe de Seguimiento</h1>
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Informe de Seguimiento</li>
        </ol>
    </div>
    <div class="separator-breadcrumb border-top"></div>
</section>
<section class="content-header">
   
    <div aria-label="breadcrumb" class="card-breadcrumb">
      
    </div>
</section>


<section class="content">
   <!-- Filtros -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="text-primary">Filtros</h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <!-- Botones de filtro rápido -->
            <div class="col-12 col-md-4 d-flex flex-wrap gap-2">
                <button class="btn btn-primary w-100 w-md-auto" onclick="applyFilter(7)">Últimos 7 días</button>
                <button class="btn btn-primary w-100 w-md-auto" onclick="applyFilter(15)">Últimos 15 días</button>
                <button class="btn btn-primary w-100 w-md-auto" onclick="applyFilter(30)">Últimos 30 días</button>
            </div>

            <!-- Rango de fechas -->
            <div class="col-12 col-md-8">
                <div class="row g-2 align-items-center">
                    <div class="col-12 col-md-auto">
                        <label for="start_date" class="form-label mb-0">Desde:</label>
                        <input type="date" id="start_date" class="form-control">
                    </div>
                    <div class="col-12 col-md-auto">
                        <label for="end_date" class="form-label mb-0">Hasta:</label>
                        <input type="date" id="end_date" class="form-control">
                    </div>
                    <div class="col-12 col-md-auto">
                        <button class="btn btn-primary w-100 w-md-auto" onclick="applyCustomFilter()">Aplicar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Tabs para Gráficos -->
    <ul class="nav nav-tabs" id="seguimientoTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="datos-corporales-tab" data-bs-toggle="tab" href="#datos-corporales" role="tab" aria-controls="datos-corporales" aria-selected="true">Datos Corporales</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="medidas-cuerpo-tab" data-bs-toggle="tab" href="#medidas-cuerpo" role="tab" aria-controls="medidas-cuerpo" aria-selected="false">Medidas de Cuerpo</a>
        </li>
    </ul>

    <div class="tab-content mt-3" id="seguimientoTabsContent">
        <!-- Gráficos de Datos Corporales -->
        <div class="tab-pane fade show active" id="datos-corporales" role="tabpanel" aria-labelledby="datos-corporales-tab">
            <div class="row">
                @foreach (['peso', 'porcentaje_grasa', 'masa_muscular', 'porcentaje_masa_muscular', 'porcentaje_agua', 'imc', 'masa_osea', 'metabolismo_basal', 'grasa_visceral'] as $field)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5>{{ ucwords(str_replace('_', ' ', $field)) }}</h5>
                        </div>
                        <div class="card-body">
                            <div id="{{ $field }}Chart" class="h350"></div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Gráficos de Medidas de Cuerpo -->
        <div class="tab-pane fade" id="medidas-cuerpo" role="tabpanel" aria-labelledby="medidas-cuerpo-tab">
            <div class="row">
                @foreach (['cintura', 'pierna_derecha', 'pierna_izquierda', 'brazo_derecho', 'brazo_izquierdo'] as $field)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5>{{ ucwords(str_replace('_', ' ', $field)) }}</h5>
                        </div>
                        <div class="card-body">
                            <div id="{{ $field }}Chart" class="h350 mb-3" style="min-height: 350px;"></div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Informe Detallado -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="text-primary">Informe Detallado</h5>
        </div>
        <div class="card-body" id="writtenReport">
            <p>No hay suficientes registros para generar un informe comparativo.</p>
        </div>
    </div>
</section>
@stop

@section('footer_scripts')
<script src="{{ asset('vendors/apexcharts/js/apexcharts.min.js') }}"></script>
<script>
    const seguimientos = @json($seguimientos ?? []);
</script>
<script src="{{ asset('js/seguimientos.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        renderCharts(seguimientos);
        updateTable(seguimientos);
        generateWrittenReport(seguimientos);
    });
</script>

@stop