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

<!-- Quill CSS -->
<link href="{{ asset('assets/vendor/quill/quill.core.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet" type="text/css" />
<!-- Sweet Alert css-->
<link href="{{ asset('assets/vendor/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

@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">Add Nutrition For Workout</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 class="header-title">Nutrition For Workout</h4>
                </div>

                <div class="card-body">
                    <form id="nutrition-form" enctype="multipart/form-data">
                        @csrf

                        <!-- Select Course -->
                        <div class="mb-3">
                            <label for="meal_goal" class="form-label">Select Goal</label>
                            <select id="meal_goal" name="meal_goal" class="form-select">
                                <option value="" disabled selected>Select a goal</option>
                                <option value="Lose weight">Lose weight</option>
                                <option value="Build muscle">Build muscle</option>
                                <option value="Tone body">Tone body</option>
                                <option value="Improve general health">Improve general health</option>
                            </select>
                        </div>

                        <!-- Number of Weeks -->
                        <div class="mb-3">
                            <label for="number_of_weeks" class="form-label">Number of Weeks</label>
                            <input type="number" id="number_of_weeks" name="number_of_weeks" class="form-control" placeholder="Enter number of weeks">
                        </div>

                        <!-- Generate Weeks and Days Buttons -->
                        <div id="weeks-container" class="mb-3"></div>

                        <!-- Day Form -->
                        <div id="day-form-container" class="mb-3" style="display: none;">
                            <h5 id="selected-day-title" class="mb-3"></h5>
                            <div class="row">
                                <div class="col-lg-4">
                                    <label for="breakfast_image" class="form-label">Breakfast</label>
                                    <input type="file" name="breakfast_image" class="form-control mb-2">
                                    <textarea name="breakfast_short_description" class="form-control mb-2" placeholder="Short Description"></textarea>
                                    <div id="breakfast_description_editor" class="quill-editor mb-2" style="height: 100px;"></div>
                                    <input type="hidden" name="breakfast_description">
                                </div>
                                <div class="col-lg-4">
                                    <label for="lunch_image" class="form-label">Lunch</label>
                                    <input type="file" name="lunch_image" class="form-control mb-2">
                                    <textarea name="lunch_short_description" class="form-control mb-2" placeholder="Short Description"></textarea>
                                    <div id="lunch_description_editor" class="quill-editor mb-2" style="height: 100px;"></div>
                                    <input type="hidden" name="lunch_description">
                                </div>
                                <div class="col-lg-4">
                                    <label for="dinner_image" class="form-label">Dinner</label>
                                    <input type="file" name="dinner_image" class="form-control mb-2">
                                    <textarea name="dinner_short_description" class="form-control mb-2" placeholder="Short Description"></textarea>
                                    <div id="dinner_description_editor" class="quill-editor mb-2" style="height: 100px;"></div>
                                    <input type="hidden" name="dinner_description">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4">
                                    <label for="breakfast_prep_time" class="form-label">Breakfast Prep Time (in minutes)</label>
                                    <input type="number" name="breakfast_prep_time" class="form-control mb-2" placeholder="Enter preparation time for breakfast">
                                </div>
                                <div class="col-lg-4">
                                    <label for="lunch_prep_time" class="form-label">Lunch Prep Time (in minutes)</label>
                                    <input type="number" name="lunch_prep_time" class="form-control mb-2" placeholder="Enter preparation time for lunch">
                                </div>
                                <div class="col-lg-4">
                                    <label for="dinner_prep_time" class="form-label">Dinner Prep Time (in minutes)</label>
                                    <input type="number" name="dinner_prep_time" class="form-control mb-2" placeholder="Enter preparation time for dinner">
                                </div>
                            </div>
                            <div class="mt-3">
                                <button type="button" class="btn btn-primary" id="save-day">Save</button>
                                <button type="button" id="cancel-day" class="btn btn-secondary">Cancel</button>
                            </div>
                        </div>
                    </form>

                    <!-- Review Plan Button -->
                    <div id="review-plan-container" style="display: none; text-align: center; margin-top: 20px;">
                        <button id="review-plan-button" class="btn btn-success">Review Plan</button>
                    </div>

                    <!-- Review Plan Table -->
                    <div id="review-plan-table-container" style="display: none; margin-top: 20px;">
                        <h4>Weekly Nutrition Plan</h4>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Week</th>
                                    <th>Day</th>
                                    <th>Meal Type</th>
                                    <th>Description</th>
                                    <th>Prep Time</th>
                                </tr>
                            </thead>
                            <tbody id="review-plan-table-body">
                                <!-- Data will be dynamically inserted here -->
                            </tbody>
                        </table>
                        <div style="text-align: center; margin-top: 20px;">
                            <button id="close-review-plan-button" class="btn btn

-danger">Close</button>
                        </div>
                    </div>
                </div> <!-- end card-body -->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
</div>

<!-- Quill Editor JS -->
<script src="{{ asset('assets/vendor/quill/quill.min.js') }}"></script>
<!-- Sweet Alerts js -->
<script src="{{ asset('assets/vendor/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
    // Initialize Quill editors
    const breakfastEditor = new Quill('#breakfast_description_editor', { theme: 'snow' });
    const lunchEditor = new Quill('#lunch_description_editor', { theme: 'snow' });
    const dinnerEditor = new Quill('#dinner_description_editor', { theme: 'snow' });

    const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    let completedDays = {}; // Track completed days for each week

    // Generate Weeks and Days Buttons
    document.getElementById('number_of_weeks').addEventListener('input', function () {
        const weeksContainer = document.getElementById('weeks-container');
        weeksContainer.innerHTML = ''; // Clear previous weeks

        const numberOfWeeks = this.value;
        if (!numberOfWeeks || numberOfWeeks <= 0) {
            Swal.fire({
                title: 'Error!',
                text: 'Please enter a valid number of weeks.',
                icon: 'error',
                confirmButtonText: 'OK',
            });
            return;
        }

        for (let week = 1; week <= numberOfWeeks; week++) {
            const weekDiv = document.createElement('div');
            weekDiv.className = 'mb-4';
            weekDiv.innerHTML = `<h5>Week ${week}</h5>`;

            const daysButtonsContainer = document.createElement('div');
            daysButtonsContainer.className = 'mb-3';
            daysButtonsContainer.id = `week-${week}-days-buttons`;

            for (let dayIndex = 0; dayIndex < daysOfWeek.length; dayIndex++) {
                const dayButton = document.createElement('button');
                dayButton.type = 'button';
                dayButton.className = 'btn btn-outline-primary me-2 mb-2';
                dayButton.textContent = daysOfWeek[dayIndex];
                dayButton.dataset.week = week;
                dayButton.dataset.day = daysOfWeek[dayIndex];
                dayButton.disabled = dayIndex > 0; // Disable all days except the first one initially
                dayButton.addEventListener('click', function () {
                    showDayForm(this.dataset.week, this.dataset.day, dayIndex);
                });
                daysButtonsContainer.appendChild(dayButton);
            }

            weekDiv.appendChild(daysButtonsContainer);
            weeksContainer.appendChild(weekDiv);
        }
    });

    // Show Day Form
    function showDayForm(week, day, dayIndex) {
        const dayFormContainer = document.getElementById('day-form-container');
        const selectedDayTitle = document.getElementById('selected-day-title');
        selectedDayTitle.textContent = `Nutrition for Week ${week}, ${day}`;
        dayFormContainer.style.display = 'block';

        // Reset the form fields when switching to a new day
        resetDayForm();

        // Save the current week and day index for enabling the next day
        const saveDayButton = document.getElementById('save-day');
        saveDayButton.dataset.week = week; // Set the week
        saveDayButton.dataset.dayIndex = dayIndex; // Set the day index
    }

    // Cancel Day Form
    document.getElementById('cancel-day').addEventListener('click', function () {
        const dayFormContainer = document.getElementById('day-form-container');
        dayFormContainer.style.display = 'none';

        // Reset the form fields when canceling
        resetDayForm();
    });

    // Save Day and Enable Next Day
    document.getElementById('save-day').addEventListener('click', function (e) {
        e.preventDefault();

        // Copy Quill editor content to hidden inputs
        document.querySelector('input[name="breakfast_description"]').value = breakfastEditor.root.innerHTML.trim();
        document.querySelector('input[name="lunch_description"]').value = lunchEditor.root.innerHTML.trim();
        document.querySelector('input[name="dinner_description"]').value = dinnerEditor.root.innerHTML.trim();

        // Retrieve the week and day index from the dataset
        const week = this.dataset.week;
        const dayIndex = parseInt(this.dataset.dayIndex);

        // Ensure the day is retrieved correctly
        const day = daysOfWeek[dayIndex];

        // Prepare form data
        const formData = new FormData(document.getElementById('nutrition-form'));
        formData.append('week', week);
        formData.append('day', day);

        // Show loading modal with percentage
        Swal.fire({
            title: 'Saving Nutrition Plan...',
            html: 'Progress: <b id="save-progress">0%</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: 0%;" id="save-progress-bar"></div></div>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
                // Simulate progress (since we can't get real upload progress easily)
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 10;
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(progressInterval);
                    }
                    document.getElementById('save-progress').textContent = `${Math.round(progress)}%`;
                    document.getElementById('save-progress-bar').style.width = `${progress}%`;
                }, 300);
            }
        });

        // Send the AJAX request
        fetch('{{ route('nutrition.store') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                Swal.close(); // Close the loading modal
                if (data.success) {
                    if (!completedDays[week]) {
                        completedDays[week] = [];
                    }
                    completedDays[week].push(dayIndex);

                    // Mark the current day as completed
                    const daysButtonsContainer = document.getElementById(`week-${week}-days-buttons`);
                    const dayButtons = daysButtonsContainer.querySelectorAll('button');
                    dayButtons[dayIndex].classList.remove('btn-outline-primary');
                    dayButtons[dayIndex].classList.add('btn-success');
                    dayButtons[dayIndex].textContent += ' (Completed)';
                    dayButtons[dayIndex].disabled = true;

                    // Enable the next day button
                    if (dayIndex + 1 < dayButtons.length) {
                        dayButtons[dayIndex + 1].disabled = false;
                    } else if (completedDays[week].length === daysOfWeek.length) {
                        // All days completed for the week
                        Swal.fire({
                            title: 'Success!',
                            text: `All days for Week ${week} have been completed.`,
                            icon: 'success',
                            confirmButtonText: 'OK',
                        }).then(() => {
                            // Show the "Review Plan" button
                            document.getElementById('review-plan-container').style.display = 'block';
                        });
                    }

                    // Reset the form fields
                    resetDayForm();

                    // Hide the day form
                    const dayFormContainer = document.getElementById('day-form-container');
                    dayFormContainer.style.display = 'none';
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: data.message || 'Failed to save data. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK',
                    });
                }
            })
            .catch(error => {
                Swal.close(); // Close the loading modal
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred while saving the data. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                });
            });
    });

    // Review Plan Button Click
    document.getElementById('review-plan-button').addEventListener('click', function () {
        const meal_goal = document.getElementById('meal_goal').value;

        if (!meal_goal) {
            Swal.fire({
                title: 'Error!',
                text: 'Please select a course.',
                icon: 'error',
                confirmButtonText: 'OK',
            });
            return;
        }

        // Show loading modal for review plan
        Swal.fire({
            title: 'Loading Nutrition Plan...',
            html: 'Progress: <b id="review-progress">0%</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: 0%;" id="review-progress-bar"></div></div>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 20;
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(progressInterval);
                    }
                    document.getElementById('review-progress').textContent = `${Math.round(progress)}%`;
                    document.getElementById('review-progress-bar').style.width = `${progress}%`;
                }, 200);
            }
        });

        fetch(`{{ route('nutrition.fetch') }}?meal_goal=${meal_goal}`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
        })
            .then(response => response.json())
            .then(data => {
                Swal.close(); // Close the loading modal
                if (data.success) {
                    const tableBody = document.getElementById('review-plan-table-body');
                    tableBody.innerHTML = ''; // Clear existing rows

                    data.nutrition.forEach(item => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.week}</td>
                            <td>${item.day}</td>
                            <td>${item.meal_type}</td>
                            <td>${item.description || 'N/A'}</td>
                            <td>${item.prep_time ? item.prep_time + ' minutes' : 'N/A'}</td>
                        `;
                        tableBody.appendChild(row);
                    });

                    // Show the table
                    document.getElementById('review-plan-table-container').style.display = 'block';
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Failed to fetch data. Please try again.',
                        icon: 'error',
                        confirmButtonText: 'OK',
                    });
                }
            })
            .catch(error => {
                Swal.close(); // Close the loading modal
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred while fetching the data. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'OK',
                });
            });
    });

    // Close Review Plan Table
    document.getElementById('close-review-plan-button').addEventListener('click', function () {
        document.getElementById('review-plan-table-container').style.display = 'none';
    });

    // Reset the form fields
    function resetDayForm() {
        // Clear Quill editor content
        breakfastEditor.root.innerHTML = '';
        lunchEditor.root.innerHTML = '';
        dinnerEditor.root.innerHTML = '';

        // Clear file inputs
        document.querySelector('input[name="breakfast_image"]').value = '';
        document.querySelector('input[name="lunch_image"]').value = '';
        document.querySelector('input[name="dinner_image"]').value = '';

        // Clear short description textareas
        document.querySelector('textarea[name="breakfast_short_description"]').value = '';
        document.querySelector('textarea[name="lunch_short_description"]').value = '';
        document.querySelector('textarea[name="dinner_short_description"]').value = '';

        // Clear hidden inputs
        document.querySelector('input[name="breakfast_description"]').value = '';
        document.querySelector('input[name="lunch_description"]').value = '';
        document.querySelector('input[name="dinner_description"]').value = '';

        // Clear prep time inputs
        document.querySelector('input[name="breakfast_prep_time"]').value = '';
        document.querySelector('input[name="lunch_prep_time"]').value = '';
        document.querySelector('input[name="dinner_prep_time"]').value = '';
    }
</script>

@endsection