@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" />
<style> #rounds-container {
        margin-top: 20px !important;
    }
    .progress-container {
        width: 100%;
        background-color: #f1f1f1;
        margin-top: 10px;
    }
    .progress-bar {
        width: 0%;
        height: 20px;
        background-color: #4CAF50 !important;
        text-align: center;
        line-height: 20px;
        color: white !important;
    }
    /* Overlay for blocking the screen */
    .upload-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    .upload-progress-content {
        background: #fff;
        padding: 30px 40px;
        border-radius: 8px;
        text-align: center;
        width: 500px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
</style>
@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">Workout Information</h4>
                </div>
            </div><!-- end card header -->
        </div>
        <!--end col-->
    </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">Add Workout table of content</h4>
                </div>
                <div class="card-body">
                    <form id="workout-form" enctype="multipart/form-data">
                        @csrf
                        <!-- Display Validation Errors -->
                        <div class="alert alert-danger" id="error-messages" style="display: none;">
                            <ul></ul>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-12">
                                <h5 class="mb-3">Workout table of content</h5>
                                <div class="mb-3">
                                    <label for="course" class="form-label">Select Course</label>
                                    <select id="course" name="course_id" class="form-select">
                                        <option value="" disabled selected>Select a course</option>
                                        @foreach($courses as $course)
                                            <option value="{{ $course->id }}">{{ $course->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="workout" class="form-label">Select Workout</label>
                                    <select id="workout" name="workout_id" class="form-select">
                                        <option value="" disabled selected>Select a workout</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="exercise" class="form-label">Select Workout Exercise</label>
                                    <select id="exercise" name="exercise_id" class="form-select">
                                        <option value="" disabled selected>Select a Exercise</option>
                                    </select>
                                </div>
                                <!-- Places of Classes -->
                                <div class="mb-3">
                                    <label for="exercise_type" class="form-label">Select Exercise Type</label>
                                    <select id="exercise_type" name="exercise_type" class="form-select">
                                        <option value="" disabled selected>Select an Exercise Type</option>
                                        <option value="warmup">Warmup</option>
                                        <option value="approach">Approach</option>
                                        <option value="rounds">Rounds</option>
                                    </select>
                                </div>
                                <!-- Warmup Fields -->
                                <div id="warmup-fields" style="display: none;">
                                    <div class="mb-3">
                                        <label for="video_file" class="form-label">Video File</label>
                                        <input type="file" class="form-control" name="video_file[]" accept="video/*">
                                    </div>
                                    <div class="mb-3">
                                        <label for="video_thumbnail" class="form-label">Video Thumbnail</label>
                                        <input type="file" class="form-control" name="video_thumbnail[]" accept="image/*">
                                    </div>
                                    <div class="mb-3">
                                        <label for="description" class="form-label">Description</label>
                                        <div id="warmup-editor" style="height: 200px;"></div>
                                        <input type="hidden" name="description[]" id="warmup-description">
                                    </div>
                                </div>
                                <!-- Approach Fields -->
                                <div id="approach-fields" style="display: none;">
                                    <div class="mb-3">
                                        <label for="video_file" class="form-label">Video File</label>
                                        <input type="file" class="form-control" name="video_file[]" accept="video/*">
                                    </div>
                                    <div class="mb-3">
                                        <label for="video_thumbnail" class="form-label">Video Thumbnail</label>
                                        <input type="file" class="form-control" name="video_thumbnail[]" accept="image/*">
                                    </div>
                                    <div class="mb-3">
                                        <label for="description" class="form-label">Description</label>
                                        <div id="approach-editor" style="height: 200px;"></div>
                                        <input type="hidden" name="description[]" id="approach-description">
                                    </div>
                                    <h5 class="mb-3">Approach Table</h5>
                                    <table class="table" id="approach-table">
                                        <thead>
                                            <tr>
                                                <th>Approach</th>
                                                <th>Quantity</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><input type="text" class="form-control" name="approach_data[][approach]" placeholder="Enter Approach"></td>
                                                <td><input type="number" class="form-control" name="approach_data[][quantity]" placeholder="Enter Quantity"></td>
                                                <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <button type="button" class="btn btn-success" id="add-approach-row">Add Row</button>
                                </div>
                                <!-- Rounds Fields -->
                                <div id="rounds-fields" style="display: none;">
                                    <div id="video-description-container">
                                        <div class="video-description">
                                            <div class="mb-3">
                                                <label for="video_file" class="form-label">Video File</label>
                                                <input type="file" class="form-control" name="video_file[]" accept="video/*">
                                            </div>
                                            <div class="mb-3">
                                                <label for="video_thumbnail" class="form-label">Video Thumbnail</label>
                                                <input type="file" class="form-control" name="video_thumbnail[]" accept="image/*">
                                            </div>
                                            <div class="mb-3">
                                                <label for="description" class="form-label">Description</label>
                                                <div id="rounds-editor-1" style="height: 200px;"></div>
                                                <input type="hidden" name="description[]" id="rounds-description-1">
                                            </div>
                                            <button type="button" class="btn btn-danger remove-video-description">Remove Video & Description</button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary mt-3" id="add-video-description">Add Video & Description</button>
                                    <div id="rounds-container">
                                        <div class="round-table">
                                            <h6>Round 1</h6>
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Exercise</th>
                                                        <th>Quantity</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td><input type="text" class="form-control" name="rounds[1][exercise][]" placeholder="Enter Exercise"></td>
                                                        <td><input type="number" class="form-control" name="rounds[1][quantity][]" placeholder="Enter Quantity"></td>
                                                        <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <button type="button" class="btn btn-success add-round-row">Add Row</button>
                                            <button type="button" class="btn btn-danger remove-round-table">Remove Round Table</button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary mt-3" id="add-round-table">Add New Round Table</button>
                                </div>
                                <!-- Submit Button -->
                                <div class="mt-4">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                    <a href="{{ route('excersice.all') }}" class="btn btn-secondary">Back</a>
                                </div>
                                
                                <!-- Progress Bar -->
                                <div class="progress-container">
                                    <div class="progress-bar"></div>
                                    <p class="text-center mt-2" id="upload-status"></p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div> <!-- end card-body -->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>

  <!-- Upload Overlay -->
<div class="upload-overlay" id="uploadOverlay">
    <div class="upload-progress-content">
        <div class="progress-container">
            <div class="progress-bar"></div>
            <p id="upload-status" class="mt-3">Preparing upload...</p>
        </div>
    </div>
</div>

</div>

<!-- Quill Editor js -->
<script src="{{asset('assets/vendor/quill/quill.min.js')}}"></script>

<script>
    document.getElementById('course').addEventListener('change', function () {
        const courseId = this.value;
        const workoutSelect = document.getElementById('workout');
        // Clear existing options
        workoutSelect.innerHTML = '<option value="" disabled selected>Loading...</option>';
        // Make AJAX request to fetch workouts
        fetch(`/fitness_laravel/public/coffee/workouts-by-course/${courseId}`)
            .then(response => response.json())
            .then(data => {
                // Populate the workout dropdown
                workoutSelect.innerHTML = '<option value="" disabled selected>Select a workout</option>';
                data.forEach(workout => {
                    const option = document.createElement('option');
                    option.value = workout.id;
                    option.textContent = workout.workout_title;
                    workoutSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error fetching workouts:', error);
                workoutSelect.innerHTML = '<option value="" disabled selected>Error loading workouts</option>';
            });
    });
</script>

<script>
    document.getElementById('workout').addEventListener('change', function () {
        const workoutId = this.value;
        const exerciseSelect = document.getElementById('exercise');
        // Clear existing options
        exerciseSelect.innerHTML = '<option value="" disabled selected>Loading...</option>';
        // Make AJAX request to fetch exercises
        fetch(`/fitness_laravel/public/coffee/exercises-by-workout/${workoutId}`)
            .then(response => response.json())
            .then(data => {
                // Populate the exercise dropdown
                exerciseSelect.innerHTML = '<option value="" disabled selected>Select an exercise</option>';
                data.forEach(exercise => {
                    const option = document.createElement('option');
                    option.value = exercise.id;
                    option.textContent = exercise.exercise_name; // Adjust based on the field you want to display
                    exerciseSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error fetching exercises:', error);
                exerciseSelect.innerHTML = '<option value="" disabled selected>Error loading exercises</option>';
            });
    });
</script>

<script>
    document.getElementById('exercise_type').addEventListener('change', function () {
        const type = this.value;
        // Hide all fields initially
        document.getElementById('warmup-fields').style.display = 'none';
        document.getElementById('approach-fields').style.display = 'none';
        document.getElementById('rounds-fields').style.display = 'none';
        // Show fields based on selected type
        if (type === 'warmup') {
            document.getElementById('warmup-fields').style.display = 'block';
        } else if (type === 'approach') {
            document.getElementById('approach-fields').style.display = 'block';
        } else if (type === 'rounds') {
            document.getElementById('rounds-fields').style.display = 'block';
        }
    });
    
    // Initialize Quill editors
    const warmupEditor = new Quill("#warmup-editor", {
        theme: "snow",
        modules: {
            toolbar: [
                [{ font: [] }, { size: [] }],
                ["bold", "italic", "underline", "strike"],
                [{ color: [] }, { background: [] }],
                [{ script: "super" }, { script: "sub" }],
                [{ header: [!1, 1, 2, 3, 4, 5, 6] }, "blockquote", "code-block"],
                [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
                ["direction", { align: [] }],
                ["link", "image", "video"],
                ["clean"]
            ]
        }
    });
    
    const approachEditor = new Quill("#approach-editor", {
        theme: "snow",
        modules: {
            toolbar: [
                [{ font: [] }, { size: [] }],
                ["bold", "italic", "underline", "strike"],
                [{ color: [] }, { background: [] }],
                [{ script: "super" }, { script: "sub" }],
                [{ header: [!1, 1, 2, 3, 4, 5, 6] }, "blockquote", "code-block"],
                [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
                ["direction", { align: [] }],
                ["link", "image", "video"],
                ["clean"]
            ]
        }
    });
    
    // Initialize Quill editors for the first video/description
    const videoDescriptionEditors = {};
    let videoDescriptionCount = 1;
    videoDescriptionEditors[videoDescriptionCount] = new Quill("#rounds-editor-1", {
        theme: "snow",
        modules: {
            toolbar: [
                [{ font: [] }, { size: [] }],
                ["bold", "italic", "underline", "strike"],
                [{ color: [] }, { background: [] }],
                [{ script: "super" }, { script: "sub" }],
                [{ header: [!1, 1, 2, 3, 4, 5, 6] }, "blockquote", "code-block"],
                [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
                ["direction", { align: [] }],
                ["link", "image", "video"],
                ["clean"]
            ]
        }
    });
    
    // Add new video and description
    document.getElementById("add-video-description").addEventListener("click", function () {
        videoDescriptionCount++;
        const container = document.getElementById("video-description-container");
        const newVideoDescription = `
            <div class="video-description">
                <div class="mb-3">
                    <label for="video_file" class="form-label">Video File</label>
                    <input type="file" class="form-control" name="video_file[]" accept="video/*">
                </div>
                <div class="mb-3">
                    <label for="video_thumbnail" class="form-label">Video Thumbnail</label>
                    <input type="file" class="form-control" name="video_thumbnail[]" accept="image/*">
                </div>
                <div class="mb-3">
                    <label for="description" class="form-label">Description</label>
                    <div id="rounds-editor-${videoDescriptionCount}" style="height: 200px;"></div>
                    <input type="hidden" name="description[]" id="rounds-description-${videoDescriptionCount}">
                </div>
                <button type="button" class="btn btn-danger remove-video-description">Remove Video & Description</button>
            </div>
        `;
        container.insertAdjacentHTML("beforeend", newVideoDescription);
        
        // Initialize Quill editor for the new video/description
        videoDescriptionEditors[videoDescriptionCount] = new Quill(`#rounds-editor-${videoDescriptionCount}`, {
            theme: "snow",
            modules: {
                toolbar: [
                    [{ font: [] }, { size: [] }],
                    ["bold", "italic", "underline", "strike"],
                    [{ color: [] }, { background: [] }],
                    [{ script: "super" }, { script: "sub" }],
                    [{ header: [!1, 1, 2, 3, 4, 5, 6] }, "blockquote", "code-block"],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
                    ["direction", { align: [] }],
                    ["link", "image", "video"],
                    ["clean"]
                ]
            }
        });
    });
    
    // Handle form submission
    function handleFormSubmit(event) {
    event.preventDefault();

    const errorBox = document.getElementById('error-messages');
    const errorList = errorBox.querySelector('ul');
    errorBox.style.display = 'none';
    errorList.innerHTML = '';

    document.getElementById('warmup-description').value = cleanQuillHTML(warmupEditor);
    document.getElementById('approach-description').value = cleanQuillHTML(approachEditor);
    Object.keys(videoDescriptionEditors).forEach(id => {
        document.getElementById(`rounds-description-${id}`).value = cleanQuillHTML(videoDescriptionEditors[id]);
    });

    const form = document.getElementById('workout-form');
    const formData = new FormData(form);

    const overlay = document.getElementById('uploadOverlay');
    const progressBar = overlay.querySelector('.progress-bar');
    const progressBarContainer = overlay.querySelector('.progress-container');
    const uploadStatus = overlay.querySelector('#upload-status');

    overlay.style.display = 'flex';
    progressBarContainer.style.display = 'block';
    progressBar.style.width = '0%';
    progressBar.classList.remove('bg-danger', 'bg-success');
    progressBar.classList.add('bg-primary');
    uploadStatus.textContent = 'Preparing upload...';

    const xhr = new XMLHttpRequest();
    xhr.open('POST', "{{ route('exercise.store') }}", true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = percent + '%';
            progressBar.textContent = percent + '%';
            uploadStatus.textContent = `Uploading... ${percent}% complete`;
        }
    });

    xhr.onload = function () {
        try {
            const res = JSON.parse(xhr.responseText);
            if (xhr.status >= 200 && xhr.status < 300) {
                uploadStatus.textContent = 'Success! Redirecting...';
                progressBar.classList.remove('bg-primary');
                progressBar.classList.add('bg-success');
                setTimeout(() => {
                    window.location.href = "{{ route('excersice.content') }}";
                }, 1000);
            } else if (xhr.status === 422 && res.errors) {
                for (const field in res.errors) {
                    res.errors[field].forEach(msg => {
                        const li = document.createElement('li');
                        li.textContent = msg;
                        errorList.appendChild(li);
                    });
                }
                errorBox.style.display = 'block';
                overlay.style.display = 'none';
            } else {
                showUploadError("An unexpected error occurred.");
            }
        } catch (e) {
            console.error('JSON parse error:', e);
            showUploadError("Upload failed while parsing response.");
        }
    };

    xhr.onerror = function () {
        showUploadError("Network error occurred during upload.");
    };

    xhr.send(formData);
}
// Utility: Strip empty Quill data
function cleanQuillHTML(editor) {
    const html = editor.root.innerHTML.trim();
    return (html && html !== '<p><br></p>') ? html : '';
}

// Utility: Show upload error and reset overlay
function showUploadError(message) {
    const overlay = document.getElementById('uploadOverlay');
    const progressBar = document.querySelector('.progress-bar');
    const uploadStatus = document.getElementById('upload-status');

    progressBar.classList.remove('bg-primary');
    progressBar.classList.add('bg-danger');
    progressBar.style.width = '100%';
    progressBar.textContent = 'Failed';
    uploadStatus.textContent = message;
    setTimeout(() => {
        overlay.style.display = 'none';
    }, 3000);
}

    
    // Attach form submit handler
    document.getElementById('workout-form').addEventListener('submit', handleFormSubmit);
    
    // Add row to the approach table
    document.getElementById('add-approach-row').addEventListener('click', function () {
        const table = document.getElementById('approach-table').querySelector('tbody');
        const newRow = `
            <tr>
                <td><input type="text" class="form-control" name="approach_data[][approach]" placeholder="Enter Approach"></td>
                <td><input type="number" class="form-control" name="approach_data[][quantity]" placeholder="Enter Quantity"></td>
                <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
            </tr>
        `;
        table.insertAdjacentHTML('beforeend', newRow);
    });
    
    // Add new round table
    document.getElementById("add-round-table").addEventListener("click", function () {
        const container = document.getElementById("rounds-container");
        const roundCount = container.querySelectorAll(".round-table").length + 1;
        const newTable = `
            <div class="round-table">
                <h6>Round ${roundCount}</h6>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Exercise</th>
                            <th>Quantity</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" class="form-control" name="rounds[${roundCount}][exercise][]" placeholder="Enter Exercise"></td>
                            <td><input type="number" class="form-control" name="rounds[${roundCount}][quantity][]" placeholder="Enter Quantity"></td>
                            <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-success add-round-row">Add Row</button>
                <button type="button" class="btn btn-danger remove-round-table">Remove Round Table</button>
            </div>
        `;
        container.insertAdjacentHTML("beforeend", newTable);
    });
    
    // Event delegation for dynamically added "Add Row" buttons
    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("add-round-row")) {
            const tableBody = e.target.closest(".round-table").querySelector("tbody");
            // Create a new row
            const roundNumber = e.target.closest('.round-table').querySelector('h6').textContent.split(' ')[1];
            const newRow = `
                <tr>
                    <td><input type="text" class="form-control" name="rounds[${roundNumber}][exercise][]" placeholder="Enter Exercise"></td>
                    <td><input type="number" class="form-control" name="rounds[${roundNumber}][quantity][]" placeholder="Enter Quantity"></td>
                    <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
                </tr>
            `;
            // Append the new row to the table body
            tableBody.insertAdjacentHTML("beforeend", newRow);
        }
    });
    
    // Event delegation for dynamically added "Remove Row" buttons
    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("remove-row")) {
            e.target.closest("tr").remove();
        }
    });
    
    // Remove round table
    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("remove-round-table")) {
            e.target.closest(".round-table").remove();
        }
    });
    
    // Remove video and description
    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("remove-video-description")) {
            const videoDescription = e.target.closest(".video-description");
            const editorId = videoDescription.querySelector("div[id^='rounds-editor-']").id.split("-")[2];
            delete videoDescriptionEditors[editorId]; // Remove the editor instance
            videoDescription.remove();
        }
    });
</script>
@endsection