@extends('layouts.default')

@section('title', 'Seguimiento Mensual de Ejercicios')

@section('content')
<!-- Content Header -->
<section class="content-header">
    <div aria-label="breadcrumb" class="card-breadcrumb">
        <h1>Seguimiento Mensual de Ejercicios</h1>
    </div>
    <div class="separator-breadcrumb border-top"></div>
</section>

<!-- Main content -->
<div class="content">
    <div class="clearfix"></div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Resumen Mensual</h5>
            <div>
                <select id="mes" class="form-select" onchange="this.form.submit()">
                    @foreach($meses as $mes)
                        <option value="{{ $mes }}" {{ request('mes') == $mes ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::createFromFormat('Y-m', $mes)->format('F Y') }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="card-body">
            <!-- Resumen de Progreso -->
            <div class="row mb-4">
                <div class="col-12">
                    <h6>Resumen de Progreso</h6>
                    @if($progresos->isNotEmpty())
                        <div class="alert alert-info">
                            <ul class="mb-0">
                                @foreach($progresos as $progreso)
                                    <li>{{ $progreso }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @else
                        <p class="text-muted">No hay suficientes datos para mostrar el progreso.</p>
                    @endif
                </div>
            </div>

            <!-- Gráficos de Evolución -->
            <div class="row mb-4">
                <div class="col-12">
                    <h6>Evolución del Peso por Ejercicio</h6>
                    <div class="chart-container" style="position: relative; height:400px;">
                        <canvas id="evolucionPeso"></canvas>
                    </div>
                </div>
            </div>

            <!-- Tabla de Ejercicios del Mes -->
            <div class="row">
                <div class="col-12">
                    <h6>Ejercicios Realizados</h6>
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Ejercicio</th>
                                    <th>Peso (kg)</th>
                                    <th>Repeticiones</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($seguimientos as $seguimiento)
                                    <tr>
                                        <td>{{ $seguimiento->fecha->format('d/m/Y') }}</td>
                                        <td>{{ $seguimiento->planEjercicioDia->planEjercicio->ejercicio->nombre }}</td>
                                        <td>{{ $seguimiento->peso_levantado }}</td>
                                        <td>{{ $seguimiento->repeticiones_realizadas }}</td>
                                        <td>
                                            @if($seguimiento->completado)
                                                <span class="badge bg-success">Completado</span>
                                            @else
                                                <span class="badge bg-warning">Incompleto</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('seguimientos.ejercicios.show', $seguimiento->id) }}" 
                                               class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">No hay ejercicios registrados para este mes.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('evolucionPeso').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {!! json_encode($datosGrafico) !!},
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Peso (kg)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Fecha'
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Evolución del Peso por Ejercicio'
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection