@extends('layouts.default')

@section('title', 'Detalle del Seguimiento')

@section('header_styles')
    <!-- Estilos específicos -->
    <link rel="stylesheet" href="{{ asset('css/pages.css') }}">
@stop

@section('content')
<section class="content-header">
    <div aria-label="breadcrumb" class="card-breadcrumb">
        <h1>Detalle del Seguimiento</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('alumnos.index') }}">Alumnos</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detalle del Seguimiento</li>
        </ol>
    </div>
    <div class="separator-breadcrumb border-top"></div>
</section>

<section class="content">
    <!-- Card de Datos Personales -->
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="card p-0">
                <div class="card-header d-flex">
                    <div class="d-flex">
                        <span class="mt-8">
                            <img src="{{ $alumno->usuario->imagen ? asset('storage/' . $alumno->usuario->imagen) : asset('img/default-profile.png') }}" 
                                 alt="Foto de {{ $alumno->usuario->name }}" class="image-set">
                        </span>
                        <div class="m-2">
                            <strong>{{ $alumno->usuario->name }}</strong>
                            <p>{{ $alumno->usuario->email }}</p>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p><strong>Fecha de Nacimiento:</strong> {{ $alumno->fecha_nacimiento }}</p>
                    <p><strong>Dirección:</strong> {{ $alumno->direccion }}</p>
                    <p><strong>Teléfono:</strong> {{ $alumno->celular }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs con Íconos -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="text-primary">Seguimientos</h5>
        </div>
        <div class="card-body">
            <ul class="nav nav-tabs pt-15" id="seguimientoTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="datos-tab" data-bs-toggle="tab" href="#datos" role="tab" aria-controls="datos" aria-selected="true">
                        <i class="im im-icon-Profile"></i> Datos Principales
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="medidas-tab" data-bs-toggle="tab" href="#medidas" role="tab" aria-controls="medidas" aria-selected="false">
                        <i class="im im-icon-Ruler-Vertical"></i> Medidas Corporales
                    </a>
                </li>
            </ul>
            <div class="tab-content py-3" id="seguimientoTabContent">
                <!-- Datos Principales -->
                <div class="tab-pane fade show active" id="datos" role="tabpanel" aria-labelledby="datos-tab">
                    <form action="{{ route('alumnos.seguimiento.agregar', $alumno->id) }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <label for="fecha" class="form-label">Fecha</label>
                                <input type="date" id="fecha" name="fecha" value="{{ date('Y-m-d') }}" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label for="peso" class="form-label">Peso</label>
                                <input type="number" step="0.01" id="peso" name="peso" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="imc" class="form-label">IMC</label>
                                <input type="number" step="0.01" id="imc" name="imc" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="masa_muscular" class="form-label">Masa Muscular</label>
                                <input type="number" step="0.01" id="masa_muscular" name="masa_muscular" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="porcentaje_masa_muscular" class="form-label">% Masa Muscular</label>
                                <input type="number" step="0.01" id="porcentaje_masa_muscular" name="porcentaje_masa_muscular" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="masa_magra_corporal" class="form-label">Masa Magra</label>
                                <input type="number" step="0.01" id="masa_magra_corporal" name="masa_magra_corporal" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="masa_osea" class="form-label">Masa Ósea</label>
                                <input type="number" step="0.01" id="masa_osea" name="masa_osea" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="porcentaje_grasa" class="form-label">% Grasa Corporal</label>
                                <input type="number" step="0.01" id="porcentaje_grasa" name="porcentaje_grasa" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="porcentaje_agua" class="form-label">% Agua</label>
                                <input type="number" step="0.01" id="porcentaje_agua" name="porcentaje_agua" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="metabolismo_basal" class="form-label">Metabolismo Basal</label>
                                <input type="number" step="0.01" id="metabolismo_basal" name="metabolismo_basal" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="grasa_visceral" class="form-label">Grasa Visceral</label>
                                <input type="number" step="0.01" id="grasa_visceral" name="grasa_visceral" class="form-control">
                            </div>
                        </div>
              
                    
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">Agregar Seguimiento</button>
                        </div>
                    </form>
                </div>

                   <!-- Medidas Corporales -->
                   <div class="tab-pane fade" id="medidas" role="tabpanel" aria-labelledby="medidas-tab">
                    <form>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="cintura" class="form-label">Cintura</label>
                                <input type="number" step="0.01" id="cintura" name="cintura" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label for="pierna_derecha" class="form-label">Pierna Derecha</label>
                                <input type="number" step="0.01" id="pierna_derecha" name="pierna_derecha" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="pierna_izquierda" class="form-label">Pierna Izquierda</label>
                                <input type="number" step="0.01" id="pierna_izquierda" name="pierna_izquierda" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="brazo_derecho" class="form-label">Brazo Derecho</label>
                                <input type="number" step="0.01" id="brazo_derecho" name="brazo_derecho" class="form-control">
                            </div>
                            <div class="col-md-6 mt-3">
                                <label for="brazo_izquierdo" class="form-label">Brazo Izquierdo</label>
                                <input type="number" step="0.01" id="brazo_izquierdo" name="brazo_izquierdo" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!-- Botón Ver Informe -->
<div class="d-flex justify-content-end mb-4">
    <a href="{{ route('seguimientos.show', $alumno->id) }}" class="btn btn-primary btn-lg">
        <i class="fa fa-eye me-2"></i> Ver Informe de Seguimiento
    </a>
</div>

    <!-- Tabla de Historial de Seguimientos -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="text-primary">Historial de Seguimientos</h5>
        </div>
        <div class="card-body">
                        
            <table id="seguimientos-table" class="table table-bordered table-hover table-striped dt-responsive nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Peso</th>
                        <th>IMC</th>
                        <th>Masa Muscular</th>
                        <th>% Masa Muscular</th>
                        <th>% Grasa</th>
                        <th>% Agua</th>
                        <th>Masa Magra</th>
                        <th>Masa Ósea</th>
                        <th>Metabolismo Basal</th>
                        <th>Grasa Visceral</th>
                        <th>Cintura</th>
                        <th>Pierna Derecha</th>
                        <th>Pierna Izquierda</th>
                        <th>Brazo Derecho</th>
                        <th>Brazo Izquierdo</th>
                        <th>Opciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($alumno->seguimientos as $seguimiento)
                        <tr>
                            <td>{{ $seguimiento->fecha }}</td>
                            <td>{{ $seguimiento->peso }}</td>
                            <td>{{ $seguimiento->imc }}</td>
                            <td>{{ $seguimiento->masa_muscular }}</td>
                            <td>{{ $seguimiento->porcentaje_masa_muscular }}</td>
                            <td>{{ $seguimiento->porcentaje_grasa }}</td>
                            <td>{{ $seguimiento->porcentaje_agua }}</td>
                            <td>{{ $seguimiento->masa_magra_corporal }}</td>
                            <td>{{ $seguimiento->masa_osea }}</td>
                            <td>{{ $seguimiento->metabolismo_basal }}</td>
                            <td>{{ $seguimiento->grasa_visceral }}</td>
                            <td>{{ $seguimiento->cintura }}</td>
                            <td>{{ $seguimiento->pierna_derecha }}</td>
                            <td>{{ $seguimiento->pierna_izquierda }}</td>
                            <td>{{ $seguimiento->brazo_derecho }}</td>
                            <td>{{ $seguimiento->brazo_izquierdo }}</td>
                            <td class="text-center">
                                <div class="d-flex justify-content-center">
                                    <a href="{{ route('seguimientos.edit', $seguimiento->id) }}" class="btn btn-sm btn-primary me-2" title="Editar">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <form action="{{ route('seguimientos.destroy', $seguimiento->id) }}" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar este seguimiento?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" title="Eliminar">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            
            
        </div>
    </div>
</section>
@stop

@section('footer_scripts')
<script src="{{ asset('js/seguimientos-datatable.js') }}"></script>

@stop