@extends('layouts.default')

@section('title', 'Editar Plan de Ejercicio')

@section('content')
<section class="content-header">
    <div aria-label="breadcrumb" class="card-breadcrumb">
        <h1>Editar Plan de Ejercicio</h1>
    </div>
    <div class="separator-breadcrumb border-top"></div>
</section>

<div class="content">
    <div class="card">
        <div class="card-body">
            <form action="{{ route('planes.update', $plan->id) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- Nombre del Plan -->
                <div class="mb-3">
                    <label for="nombre" class="form-label">Nombre del Plan</label>
                    <input type="text" name="nombre" class="form-control" value="{{ $plan->nombre }}" required>
                </div>

                <!-- Descripción -->
                <div class="mb-3">
                    <label for="descripcion" class="form-label">Descripción</label>
                    <textarea name="descripcion" class="form-control">{{ $plan->descripcion }}</textarea>
                </div>

                <!-- Selección de Ejercicios -->
                <div class="mb-3">
                    <label for="ejercicios" class="form-label">Ejercicios</label>
                    <select id="ejercicios" class="form-control select2" multiple>
                        @foreach($ejercicios as $ejercicio)
                            <option value="{{ $ejercicio->id }}" 
                                {{ isset($ejerciciosAsignados[$ejercicio->id]) ? 'selected' : '' }}>
                                {{ $ejercicio->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Contenedor dinámico para ejercicios seleccionados -->
                <div id="ejercicios-seleccionados" class="mt-3">
                    @foreach ($ejerciciosAsignados as $id => $data)
                        <div class="card mb-2 p-2 border shadow-sm ejercicio-item" id="ejercicio-{{ $id }}">
                            <div class="card-body">
                                <h6 class="card-title"><strong>{{ $ejercicios->find($id)->nombre }}</strong></h6>
                                <input type="hidden" name="ejercicios[{{ $id }}][id]" value="{{ $id }}">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label>Series:</label>
                                        <input type="number" name="ejercicios[{{ $id }}][series]" class="form-control" value="{{ $data['series'] }}" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Peso (kg):</label>
                                        <input type="number" name="ejercicios[{{ $id }}][peso]" class="form-control" value="{{ $data['peso'] }}" required>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <button type="button" class="btn btn-danger btn-sm remove-ejercicio" data-id="{{ $id }}">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <label>Días de la semana:</label>
                                        <div class="d-flex flex-wrap gap-2">
                                            @php
                                                $diasAsignados = isset($data['dias']) ? $data['dias'] : [];
                                            @endphp
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="lunes" class="form-check-input" {{ in_array('lunes', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Lunes</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="martes" class="form-check-input" {{ in_array('martes', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Martes</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="miércoles" class="form-check-input" {{ in_array('miércoles', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Miércoles</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="jueves" class="form-check-input" {{ in_array('jueves', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Jueves</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="viernes" class="form-check-input" {{ in_array('viernes', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Viernes</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="sábado" class="form-check-input" {{ in_array('sábado', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Sábado</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" name="ejercicios[{{ $id }}][dias][]" value="domingo" class="form-check-input" {{ in_array('domingo', $diasAsignados) ? 'checked' : '' }}>
                                                <label class="form-check-label">Domingo</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <button type="submit" class="btn btn-success mt-3">Actualizar Plan</button>
            </form>
        </div>
    </div>
</div>

<!-- Script para manejar la selección de ejercicios dinámicamente -->
<script>
    $(document).ready(function() {
        $('.select2').select2();

        // Detectar cambios en el select de ejercicios
        $('#ejercicios').on('select2:select', function(e) {
            let id = e.params.data.id;
            let nombreEjercicio = e.params.data.text;

            if ($('#ejercicio-' + id).length === 0) {
                $('#ejercicios-seleccionados').append(`
                    <div class="card mb-2 p-2 border shadow-sm ejercicio-item" id="ejercicio-${id}">
                        <div class="card-body">
                            <h6 class="card-title"><strong>${nombreEjercicio}</strong></h6>
                            <input type="hidden" name="ejercicios[${id}][id]" value="${id}">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label>Series:</label>
                                    <input type="number" name="ejercicios[${id}][series]" class="form-control" required>
                                </div>
                                <div class="col-md-4">
                                    <label>Peso (kg):</label>
                                    <input type="number" name="ejercicios[${id}][peso]" class="form-control" required>
                                </div>
                                <div class="col-md-4 d-flex align-items-end">
                                    <button type="button" class="btn btn-danger btn-sm remove-ejercicio" data-id="${id}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <label>Días de la semana:</label>
                                    <div class="d-flex flex-wrap gap-2">
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="lunes" class="form-check-input">
                                            <label class="form-check-label">Lunes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="martes" class="form-check-input">
                                            <label class="form-check-label">Martes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="miércoles" class="form-check-input">
                                            <label class="form-check-label">Miércoles</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="jueves" class="form-check-input">
                                            <label class="form-check-label">Jueves</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="viernes" class="form-check-input">
                                            <label class="form-check-label">Viernes</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="sábado" class="form-check-input">
                                            <label class="form-check-label">Sábado</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="ejercicios[${id}][dias][]" value="domingo" class="form-check-input">
                                            <label class="form-check-label">Domingo</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
            }
        });

        // Eliminar ejercicios seleccionados dinámicamente
        $(document).on('click', '.remove-ejercicio', function() {
            let id = $(this).data('id');
            $("#ejercicio-" + id).remove();

            let selectedValues = $('#ejercicios').val();
            let newValues = selectedValues.filter(value => value != id);
            $('#ejercicios').val(newValues).trigger('change');
        });
    });
</script>

@endsection