@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" 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="col-md-6">
                        <div class="form-group">
                            <label for="sets">Number of Sets</label>
                            <input type="number" class="form-control @error('sets') is-invalid @enderror" name="sets"
                                id="sets" placeholder="Enter Number of Sets"
                                value="{{ old('sets', $program_exercise->sets) }}" required>
                            @error('sets')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="reps">Number of Reps</label>
                            <input type="number" class="form-control @error('reps') is-invalid @enderror" name="reps"
                                id="reps" placeholder="Enter Number of Reps"
                                value="{{ old('reps', $program_exercise->reps) }}" required>
                            @error('reps')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="rest">Rest Time</label>
                            <span class="text-danger small">(seconds)</span>
                            <input type="number" class="form-control @error('rest') is-invalid @enderror" name="rest"
                                id="rest" placeholder="Enter Rest Time"
                                value="{{ old('rest', $program_exercise->rest) }}" required>
                            @error('rest')
                                <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>
                <button type="submit" class="btn btn-primary me-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();
    </script>
@endsection