@extends('admin.layout.layout')
@section('content')
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Edit Program Exercise</h4>
            <form class="forms-sample" id="editProgramExerciseForm" method="POST"
                action="{{ route('program-exercise.update', $program_exercise->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="fitness_category_id">Fitness Category</label>
                            <select class="form-control @error('fitness_category_id') is-invalid @enderror"
                                name="fitness_category_id" id="fitness_category_id" required>
                                <option value="">Select Fitness Category</option>
                                @foreach ($fitnessCategories as $fitnessCategory)
                                    <option value="{{ $fitnessCategory->id }}"
                                        {{ old('fitness_category_id', $program_exercise->fitness_category_id) == $fitnessCategory->id ? 'selected' : '' }}>
                                        {{ $fitnessCategory->name }}</option>
                                @endforeach
                            </select>
                            @error('fitness_category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="gender">Gender</label>
                            <select class="form-control @error('gender') is-invalid @enderror" name="gender" id="gender"
                                required>
                                <option value="">Select Gender</option>
                                <option value="male" {{ $program_exercise->gender === 'male' ? 'selected' : '' }}>Male
                                </option>
                                <option value="female" {{ $program_exercise->gender === 'female' ? 'selected' : '' }}>Female
                                </option>
                                <option value="other" {{ $program_exercise->gender === 'other' ? 'selected' : '' }}>Other
                                </option>
                            </select>
                            @error('gender')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group pt-3">
                        <label for="fitness_category_id">BMI Ranges</label>
                        <div class="row">
                            @foreach ($bmi_ranges as $bmi_range)
                                <div class="col-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input ms-1 @error('bmi_range_id') is-invalid @enderror"
                                            type="checkbox" name="bmi_range_id[]" id="bmi_range_{{ $bmi_range->id }}"
                                            value="{{ $bmi_range->id }}" @if ($program_exercise->bmi_range_exercises->contains('bmi_range_id', $bmi_range->id)) checked @endif
                                            required>
                                        <label class="form-check-label" for="bmi_range_{{ $bmi_range->id }}">
                                            {{ $bmi_range->bmi_from }} - {{ $bmi_range->bmi_to }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                            @error('bmi_range_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="exercise_type">Exercise Type</label>
                            <select class="form-control @error('exercise_type') is-invalid @enderror" name="exercise_type"
                                id="exercise_type" required>
                                <option value="">Select Exercise Type</option>
                                <option value="at home"
                                    {{ old('exercise_type', $program_exercise->exercise_type) == 'at home' ? 'selected' : '' }}>
                                    At Home
                                </option>
                                <option value="at gym"
                                    {{ old('exercise_type', $program_exercise->exercise_type) == 'at gym' ? 'selected' : '' }}>
                                    At Gym
                                </option>
                            </select>
                            @error('exercise_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>


                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="exercise_name">Exercise Name</label>
                            <input type="text" class="form-control @error('exercise_name') is-invalid @enderror"
                                name="exercise_name" id="exercise_name" placeholder="Enter Exercise Name"
                                value="{{ old('exercise_name', $program_exercise->exercise_name) }}" required>
                            @error('exercise_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group border p-3">
                                <label for="sets_month1">Month 1 Sets</label>
                                <input type="number" class="form-control @error('sets_month1') is-invalid @enderror"
                                    name="sets_month1" id="sets_month1" placeholder="Enter Month 1 Sets"
                                    value="{{ old('sets_month1', $program_exercise->sets['month1']) }}">
                                @error('sets_month1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group border p-3">
                                <label for="reps_month1">Month 1 Reps</label>
                                <input type="number" class="form-control @error('reps_month1') is-invalid @enderror"
                                    name="reps_month1" id="reps_month1" placeholder="Enter Month 1 Reps"
                                    value="{{ old('reps_month1', $program_exercise->reps['month1']) }}">
                                @error('reps_month1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group border p-3">
                                <label for="rest_month1">Month 1 Rest Time (seconds)</label>
                                <input type="number" class="form-control @error('rest_month1') is-invalid @enderror"
                                    name="rest_month1" id="rest_month1" placeholder="Enter Month 1 Rest Time"
                                    value="{{ old('rest_month1', $program_exercise->rest['month1']) }}">
                                @error('rest_month1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group border p-3">
                                <label for="sets_month2">Month 2 Sets</label>
                                <input type="number" class="form-control @error('sets_month2') is-invalid @enderror"
                                    name="sets_month2" id="sets_month2" placeholder="Enter Month 2 Sets"
                                    value="{{ old('sets_month2', $program_exercise->sets['month2']) }}">
                                @error('sets_month2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group border p-3">
                                <label for="reps_month2">Month 2 Reps</label>
                                <input type="number" class="form-control @error('reps_month2') is-invalid @enderror"
                                    name="reps_month2" id="reps_month2" placeholder="Enter Month 2 Reps"
                                    value="{{ old('reps_month2', $program_exercise->reps['month2']) }}">
                                @error('reps_month2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group border p-3">
                                <label for="rest_month2">Month 2 Rest Time (seconds)</label>
                                <input type="number" class="form-control @error('rest_month2') is-invalid @enderror"
                                    name="rest_month2" id="rest_month2" placeholder="Enter Month 2 Rest Time"
                                    value="{{ old('rest_month2', $program_exercise->rest['month2']) }}">
                                @error('rest_month2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group border p-3">
                                <label for="sets_month3">Month 3 Sets</label>
                                <input type="number" class="form-control @error('sets_month3') is-invalid @enderror"
                                    name="sets_month3" id="sets_month3" placeholder="Enter Month 3 Sets"
                                    value="{{ old('sets_month3', $program_exercise->sets['month3']) }}">
                                @error('sets_month3')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group border p-3">
                                <label for="reps_month3">Month 3 Reps</label>
                                <input type="number" class="form-control @error('reps_month3') is-invalid @enderror"
                                    name="reps_month3" id="reps_month3" placeholder="Enter Month 3 Reps"
                                    value="{{ old('reps_month3', $program_exercise->reps['month3']) }}">
                                @error('reps_month3')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group border p-3">
                                <label for="rest_month3">Month 3 Rest Time (seconds)</label>
                                <input type="number" class="form-control @error('rest_month3') is-invalid @enderror"
                                    name="rest_month3" id="rest_month3" placeholder="Enter Month 3 Rest Time"
                                    value="{{ old('rest_month3', $program_exercise->rest['month3']) }}">
                                @error('rest_month3')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="day">Day</label>
                            <select class="form-control @error('day') is-invalid @enderror" name="day"
                                id="day" required>
                                <option value="">Select Day</option>
                                <option value="Day 1"
                                    {{ old('day', $program_exercise->day) == 'Day 1' ? 'selected' : '' }}>Day 1</option>
                                <option value="Day 2"
                                    {{ old('day', $program_exercise->day) == 'Day 2' ? 'selected' : '' }}>Day 2</option>
                                <option value="Day 3"
                                    {{ old('day', $program_exercise->day) == 'Day 3' ? 'selected' : '' }}>Day 3</option>
                                <option value="Day 4"
                                    {{ old('day', $program_exercise->day) == 'Day 4' ? 'selected' : '' }}>Day 4</option>
                                <option value="Day 5"
                                    {{ old('day', $program_exercise->day) == 'Day 5' ? 'selected' : '' }}>Day 5</option>
                                <option value="Day 6"
                                    {{ old('day', $program_exercise->day) == 'Day 6' ? 'selected' : '' }}>Day 6</option>
                            </select>
                            @error('day')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" name="description" id="description"
                                placeholder="Enter Description" rows="4" required>{{ old('description', $program_exercise->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="animation">Animation</label>
                            <input type="file" class="form-control @error('animation') is-invalid @enderror"
                                name="animation" id="animation">
                            @error('animation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="focus_points">Focus Points</label>
                            <input type="file" class="form-control @error('focus_points') is-invalid @enderror"
                                name="focus_points[]" id="focus_points" multiple>
                            @error('focus_points')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="muscle_highlights">Muscle Highlights</label>
                            <input type="file" class="form-control @error('muscle_highlights') is-invalid @enderror"
                                name="muscle_highlights[]" id="muscle_highlights" multiple>
                            @error('muscle_highlights')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="focus_points_text">Focus Points Text</label>
                            <div id="focusPointsContainer">
                                @foreach (explode(',', $program_exercise->focus_points_text) as $focusPointText)
                                    <input type="text" class="form-control" name="focus_points_text[]"
                                        placeholder="Enter focus point text" value="{{ $focusPointText }}">
                                @endforeach
                                <!-- The initial input field -->
                                <input type="text" class="form-control" name="focus_points_text[]"
                                    placeholder="Enter focus point text" id="focus_points_text">
                            </div>
                            <small class="form-text text-muted">Press Enter to add another focus point
                                (comma-separated).</small>
                        </div>
                    </div>



                </div>
                <button type="button" onclick="submitForm()" class="btn btn-primary mr-2 text-white">Update</button>
            </form>
        </div>
    </div>
    <script>
        const checkboxes = document.querySelectorAll('input[type=checkbox][name="bmi_range_id[]"]');

        const setCheckboxRequired = () => {
            const checked = Array.from(checkboxes).some((c) => c.checked);
            checkboxes.forEach((c) => c.required = !checked);
        }

        checkboxes.forEach((checkbox) => {
            checkbox.addEventListener('click', setCheckboxRequired);
        });

        // set checkbox required initially if no checkbox is checked
        setCheckboxRequired();


        document.addEventListener('DOMContentLoaded', function() {
            const focusPointsContainer = document.getElementById('focusPointsContainer');

            // Function to create a new input field
            function createNewInput() {
                const newInput = document.createElement('input');
                newInput.type = 'text';
                newInput.className = 'form-control';
                newInput.name = 'focus_points_text[]';
                newInput.placeholder = 'Enter focus point text';
                newInput.value = '';
                focusPointsContainer.appendChild(newInput);
                newInput.focus();
            }

            // Listen for keydown event on the last input field
            focusPointsContainer.addEventListener('keydown', function(e) {
                const inputFields = focusPointsContainer.querySelectorAll('input[type="text"]');
                const lastInput = inputFields[inputFields.length - 1];

                if (e.key === 'Enter' && e.target === lastInput && lastInput.value.trim() !== '') {
                    createNewInput();
                }
            });

            // Remove any existing input fields
            const existingInputs = focusPointsContainer.querySelectorAll('input[type="text"]');
            existingInputs.forEach(function(input) {
                focusPointsContainer.removeChild(input);
            });

            // Initialize with one input field
            createNewInput();
        });

        function submitForm() {
            document.getElementById('editProgramExerciseForm').submit();
        }
    </script>
@endsection