@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;
    }
</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 action="{{ route('exercise.store') }}" enctype="multipart/form-data" method="POST" onsubmit="return handleFormSubmit(event)">
                        @csrf
                        <!-- Display Validation Errors -->
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <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>
                            </div>
                        </div>
                    </form>
                </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>

<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();
        
     
        // Process Warmup Description
        const warmupContent = warmupEditor.root.innerHTML.trim();
        document.getElementById('warmup-description').value = 
            (warmupContent && warmupContent !== '<p><br></p>') ? warmupContent : '';
        
        // Validate Warmup Description if other fields exist
        if (document.getElementById('warmup-fields').style.display !== 'none' && 
            !document.getElementById('warmup-description').value) {
            alert("Please enter a warmup description.");
            return false;
        }
        
        // Process Approach Description
        const approachContent = approachEditor.root.innerHTML.trim();
        document.getElementById('approach-description').value = 
            (approachContent && approachContent !== '<p><br></p>') ? approachContent : '';
        
        // Validate Approach Description if other fields exist
        if (document.getElementById('approach-fields').style.display !== 'none' && 
            !document.getElementById('approach-description').value) {
            alert("Please enter an approach description.");
            return false;
        }
        
        // Process Rounds Descriptions
        Object.keys(videoDescriptionEditors).forEach(editorId => {
            const editor = videoDescriptionEditors[editorId];
            const roundsContent = editor.root.innerHTML.trim();
            const inputField = document.getElementById(`rounds-description-${editorId}`);
            
            inputField.value = (roundsContent && roundsContent !== '<p><br></p>') ? roundsContent : '';
            
            // Validate Rounds Description if other fields exist
            if (document.getElementById('rounds-fields').style.display !== 'none' && !inputField.value) {
                alert("Please enter all round descriptions.");
                return false;
            }
        });
        
        // Submit the form
        event.target.submit();
        return true;
    }
    
    // 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