@extends('admin.layout.layout')
@section('content')
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Edit Program Meal</h4>
            <form class="forms-sample" method="POST" action="{{ route('program-meal.update', $program_meal->id) }}">
                @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_meal->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_meal->gender === 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ $program_meal->gender === 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ $program_meal->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_meal->bmi_range_meals->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="meal_name">Meal Name</label>
                            <input type="text" class="form-control @error('meal_name') is-invalid @enderror"
                                name="meal_name" id="meal_name" placeholder="Enter Meal Name"
                                value="{{ old('meal_name', $program_meal->meal_name) }}" required>
                            @error('meal_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="calories">Calories</label>
                            <span class="text-danger small">(kcal)</span>
                            <input type="number" class="form-control @error('calories') is-invalid @enderror"
                                name="calories" id="calories" placeholder="Enter Calories"
                                value="{{ old('calories', $program_meal->calories) }}" required>
                            @error('calories')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="protein">Protein</label>
                            <span class="text-danger small">(grams)</span>
                            <input type="number" class="form-control @error('protein') is-invalid @enderror" name="protein"
                                id="protein" placeholder="Enter Protein"
                                value="{{ old('protein', $program_meal->protein) }}" required>
                            @error('protein')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="carbs">Carbs</label>
                            <span class="text-danger small">(grams)</span>
                            <input type="number" class="form-control @error('carbs') is-invalid @enderror"
                                name="carbs" id="carbs" placeholder="Enter Carbs"
                                value="{{ old('carbs', $program_meal->carbs) }}" required>
                            @error('carbs')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="fats">Fats</label>
                            <span class="text-danger small">(grams)</span>
                            <input type="number" class="form-control @error('fats') is-invalid @enderror"
                                name="fats" id="fats" placeholder="Enter Fats"
                                value="{{ old('fats', $program_meal->fats) }}" required>
                            @error('fats')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12">
                        <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_meal->description) }}</textarea>
                            @error('program_meal.description')
                                <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