@extends('layouts.app')

<!-- 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')
<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">Edit Nutrition Plan for Course: {{ $courses->firstWhere('id', $course_id)->title }}</h4>
                </div>
            </div>
        </div>
    </div>
    <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">Edit Nutrition Plan</h4>
                </div>
                <div class="card-body">
                    <!-- Weeks Container -->
                    <div id="weeks-container" class="mb-3">
                        @php $weeks = $nutrition->groupBy('week'); @endphp
                        @foreach ($weeks as $week => $meals)
                            <div class="mb-3 week-section" data-week="{{ $week }}">
                                <h5>Week {{ $week }}</h5>
                                <div class="d-flex flex-wrap">
                                    @php $days = $meals->groupBy('day'); @endphp
                                    @foreach ($days as $day => $dayMeals)
                                        <button type="button" class="btn btn-outline-primary me-2 mb-2 day-button" 
                                                data-week="{{ $week }}" 
                                                data-day="{{ $day }}">
                                            {{ $day }}
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Day Form -->
                    <div id="day-form-container" class="mb-3" style="display: none;">
                        <h5 id="selected-day-title" class="mb-3"></h5>
                        <input type="hidden" id="current-week">
                        <input type="hidden" id="current-day">
                        <div class="row" id="meals-container">
                            <!-- Meals will be dynamically generated here -->
                        </div>
                        <div class="mt-3">
                            <button type="button" class="btn btn-secondary close-day-form">Close</button>
                        </div>
                    </div>

                    <!-- Add New Week Button -->
                    <div class="mt-4">
                        <button type="button" class="btn btn-success add-week-button" id="add-week-button">Add New Week</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- Quill 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>
    const courseId = "{{ $course_id }}";
    const mealTypes = ['breakfast', 'lunch', 'dinner'];
    const editors = {}; // Store Quill editor instances
    const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

    // Handle Day Button Click
    document.addEventListener('click', async function (event) {
        if (event.target.classList.contains('day-button')) {
            const week = event.target.getAttribute('data-week');
            const day = event.target.getAttribute('data-day');
            showDayForm(week, day);
        }
    });

    // Function to show day form
    async function showDayForm(week, day) {
        document.getElementById('selected-day-title').textContent = `Week ${week}, Day: ${day}`;
        document.getElementById('current-week').value = week;
        document.getElementById('current-day').value = day;
        
        const container = document.getElementById('meals-container');
        container.innerHTML = '';

        try {
            const response = await fetch("{{ route('nutrition.getMeal') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ course_id: courseId, week, day })
            });

            const data = await response.json();

            mealTypes.forEach(type => {
                const meal = data.meals.find(m => m.meal_type === type) || {};
                const editorId = `description_${type.toLowerCase()}`;
                const html = `
                    <div class="col-12 mb-4">
                        <h6 style="text-transform:uppercase">${type}</h6>
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <label class="form-label">Short Description</label>
                                <input type="text" class="form-control" id="short_description_${type}" value="${meal.short_description || ''}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Prep Time (minutes)</label>
                                <input type="number" class="form-control" id="prep_time_${type}" value="${meal.prep_time || ''}">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <label class="form-label">Image</label>
                                <input type="file" class="form-control" id="image_${type}">
                                <div class="mt-2">
                                    <img id="image_preview_${type}" src="${meal.image_url || ''}" style="max-width:100%;max-height:200px;${meal.image_url ? '' : 'display:none'}" />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Description</label>
                                <div id="${editorId}" style="height:150px">${meal.description || ''}</div>
                                <input type="hidden" id="hidden_${editorId}" value="">
                            </div>
                        </div>
                        <button class="btn btn-primary save-meal" data-type="${type}">Save ${type}</button>
                    </div>`;
                container.insertAdjacentHTML('beforeend', html);

               // Initialize Quill editor (always create new)
            editors[editorId] = new Quill(`#${editorId}`, {
                theme: 'snow'
            });

            // Update hidden input when editor content changes
            editors[editorId].on('text-change', function() {
                document.getElementById(`hidden_${editorId}`).value = editors[editorId].root.innerHTML;
            });

            // Set content
            editors[editorId].root.innerHTML = meal.description || '';
            });

            document.getElementById('day-form-container').style.display = 'block';
        } catch (error) {
            console.error('Error loading meals:', error);
            Swal.fire('Error', 'Could not load meal data.', 'error');
        }
    }

    // Handle Close Button Click
    document.addEventListener('click', function (event) {
        if (event.target.classList.contains('close-day-form')) {
            // Hide the day form
            document.getElementById('day-form-container').style.display = 'none';
            
            // Clear the container
            document.getElementById('meals-container').innerHTML = '';
            
            // Clear all editor instances
            Object.keys(editors).forEach(editorId => {
                if (editors[editorId]) {
                    // Remove the editor instance
                    delete editors[editorId];
                }
            });
            
            // Reset the selected day title
            document.getElementById('selected-day-title').textContent = '';
        }
    });

// Function to reinitialize Quill editors when the form is reopened
function reinitializeQuillEditors() {
    Object.keys(editors).forEach(editorId => {
        const quill = editors[editorId];
        if (quill && quill.root) {
            quill.root.innerHTML = ''; // Clear the editor content
        }
    });
}

    // Handle Add New Week Button Click
    document.addEventListener('click', function (event) {
        if (event.target.classList.contains('add-week-button')) {
        const weeksContainer = document.getElementById('weeks-container');
        const existingWeeks = weeksContainer.querySelectorAll('.week-section');
        const newWeekNumber = existingWeeks.length > 0 ? 
            Math.max(...Array.from(existingWeeks).map(el => parseInt(el.getAttribute('data-week')))) + 1 : 1;

        const newWeekDiv = document.createElement('div');
        newWeekDiv.className = 'mb-3 week-section';
        newWeekDiv.setAttribute('data-week', newWeekNumber);

        newWeekDiv.innerHTML = `
            <h5>Week ${newWeekNumber}</h5>
            <div class="d-flex flex-wrap">
                ${daysOfWeek.map(day => `
                    <button type="button" class="btn btn-outline-primary me-2 mb-2 day-button" 
                            data-week="${newWeekNumber}" 
                            data-day="${day}">
                        ${day}
                    </button>
                `).join('')}
            </div>`;

        weeksContainer.appendChild(newWeekDiv);

        Swal.fire('Success!', `Week ${newWeekNumber} added successfully.`, 'success');
        }
    });

    // Handle Save Meal Button Click
    document.addEventListener('click', async function (event) {
        if (event.target.classList.contains('save-meal')) {
            const button = event.target;
            const type = button.getAttribute('data-type');
            const week = document.getElementById('current-week').value;
            const day = document.getElementById('current-day').value;

            // Collect data from the form fields
            const shortDescription = document.getElementById(`short_description_${type}`).value;
            const prepTime = document.getElementById(`prep_time_${type}`).value;
            const imageInput = document.getElementById(`image_${type}`);
            const editorId = `description_${type.toLowerCase()}`;
            const description = editors[editorId]?.root.innerHTML || '';

            // Prepare form data for submission
            const formData = new FormData();
            formData.append('course_id', courseId);
            formData.append('week', week);
            formData.append('day', day);
            formData.append('meal_type', type);
            formData.append('short_description', shortDescription);
            formData.append('prep_time', prepTime);
            formData.append('description', description);

            // Add image file if selected
            if (imageInput.files.length > 0) {
                formData.append('image', imageInput.files[0]);
            }

            try {
                // Show loading indicator
                button.disabled = true;
                button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...';

                // Send data to the server
                const response = await fetch("{{ route('nutrition.saveMeal') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    },
                    body: formData,
                });

                const data = await response.json();

                if (data.success) {
                    Swal.fire('Success!', 'Meal data saved successfully.', 'success');
                    // Update image preview if image was uploaded
                    if (data.image_url) {
                        const preview = document.getElementById(`image_preview_${type}`);
                        preview.src = data.image_url;
                        preview.style.display = 'block';
                    }
                } else {
                    Swal.fire('Error!', data.message || 'Failed to save meal data.', 'error');
                }
            } catch (error) {
                console.error('Error saving meal data:', error);
                Swal.fire('Error!', 'An error occurred while saving meal data.', 'error');
            } finally {
                button.disabled = false;
                button.textContent = `Save ${type}`;
            }
        }
    });

    // Handle image preview
    document.addEventListener('change', function(event) {
        if (event.target && event.target.id && event.target.id.startsWith('image_')) {
            const type = event.target.id.split('_')[1];
            const preview = document.getElementById(`image_preview_${type}`);
            const file = event.target.files[0];
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        }
    });
</script>