@extends('layouts.app') <!-- Extending the master layout -->

@section('content') <!-- Defining the content section -->
<div class="page-container">
    <div class="row">
        <div class="col-12">
            <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column">
                <div class="flex-grow-1">
                    <h4 class="fs-18 text-uppercase fw-bold m-0">Course Meal Plans</h4>
                </div>
            </div><!-- end card header -->
        </div>
    </div> <!-- end row-->
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed d-flex align-items-center">
                    <h4>Course Meal Plans</h4>
                </div>
                <!-- end card header -->

                <!-- Success Message -->
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show col-xl-6" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <!-- Error Messages -->
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show col-xl-6" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="card-body">
                    <div class="table-responsive-sm">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>Course</th>
                                    <th>Week</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($mealPlans as $mealPlan)
                    <tr>
                        <td>{{ $mealPlan->course->title }}</td>
                        <td>Week {{ $mealPlan->week }}</td>
                        <td>
                            <button class="btn btn-info" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#mealPlanModal" 
                                    data-course-id="{{ $mealPlan->course_id }}" 
                                    data-week="{{ $mealPlan->week }}"
                                    onclick="fetchMealPlan(this)">
                                View Meal Plan
                            </button>
                            <a href="{{ route('nutrition.edit', $mealPlan->course_id) }}" class="btn btn-warning">Edit</a>
                            <form action="{{ route('nutrition.destroy', $mealPlan->course_id) }}" method="POST" style="display:inline-block;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">Delete</button>
                        </td>
                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center">No Meal Plans found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div> <!-- end table-responsive-->
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
</div>

<!-- Meal Plan Modal -->
<div class="modal fade" id="mealPlanModal" tabindex="-1" aria-labelledby="mealPlanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mealPlanModalLabel">Meal Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6 id="mealPlanCourse"></h6>
                <h6 id="mealPlanWeek"></h6>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Meal Type</th>
                            <th>Description</th>
                            <th>Prep Time</th>
                        </tr>
                    </thead>
                    <tbody id="mealPlanTableBody">
                        <!-- Data will be dynamically inserted here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // Fetch Meal Plan via AJAX and Show in Modal
    function fetchMealPlan(button) {
        const courseId = button.getAttribute('data-course-id');
        const week = button.getAttribute('data-week');

        // Set modal title and week
        document.getElementById('mealPlanCourse').textContent = `Course ID: ${courseId}`;
        document.getElementById('mealPlanWeek').textContent = `Week: ${week}`;

        // Clear the table body before fetching new data
        const tableBody = document.getElementById('mealPlanTableBody');
        tableBody.innerHTML = '';

        // Make an AJAX request to fetch the meal plan
        fetch(`{{ route('nutrition.fetchbyweek') }}?course_id=${courseId}&week=${week}`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Populate the table with meal plan data
                    data.nutrition.forEach(meal => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${meal.meal_type}</td>
                            <td>${meal.description || 'N/A'}</td>
                            <td>${meal.prep_time ? meal.prep_time + ' minutes' : 'N/A'}</td>
                        `;
                        tableBody.appendChild(row);
                    });
                } else {
                    alert('Failed to fetch meal plan. Please try again.');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while fetching the meal plan. Please try again.');
            });
    }
</script>

@endsection