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

@section('content') <!-- Defining the content section -->
<div class="page-container">
<div class="row">
                    <div class="col-12">
                        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column">
                            <div class="flex-grow-1">
                                <h4 class="fs-18 text-uppercase fw-bold m-0">Workouts</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>Workouts Table Of contents</h4>
  
                            </div>
                            <!-- end card header -->
                             <!-- Success Message -->
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show col-xl-6" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

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

                            <div class="card-body">
                            <div class="d-flex flex-wrap gap-2">
                                  <a href="{{route('table_of_content.create')}}" class="btn btn-outline-primary" >Add Contents & Excersices</a>
                                    <a href="{{route('course.index')}}" class="btn btn-secondary">Back</a>
                                </div>
                                <div class="table-responsive-sm">
                    <table class="table mb-0">
                    <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Exercises</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($exercises as $excersice)
                <tr>
                    <td>{{ $excersice->title }}</td>
                    <td>
    <button class="btn btn-info" 
                        data-bs-toggle="modal" 
                        data-bs-target="#viewModal" 
                        onclick="showDescription('{{ $excersice->title }}', '{{ $excersice->description }}')">
                    View Description
                </button>
            </td>
            <td>
                <button class="btn btn-info" 
                        data-bs-toggle="modal" 
                        data-bs-target="#viewModal" 
                        data-title="{{ $excersice->title }}" 
                        data-exercises='@json($excersice->exercises)'
                        onclick="showExercises(this)">
                    View Exercises
                </button>
            </td>
                    <td>
                        <a href="{{route('table_of_content.edit',$excersice->id)}}" class="btn btn-sm btn-warning">Edit</a>
                        <form action="{{ route('table_of_content.destroy', $excersice->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="text-center">No Exercises found.</td>
                </tr>
            @endforelse
           
        </tbody>
                    </table>
                                </div> <!-- end table-responsive-->
                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->

               
                </div>
</div>
<!-- Modal -->
<div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewModalLabel">Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be dynamically loaded here -->
                <div id="modal-content">
                    <h5 id="modal-title"></h5>
                    <p id="modal-description"></p>
                    <ol id="modal-exercises"></ol>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    function showDescription(title, description) {
        // Set modal title
        document.getElementById('modal-title').textContent = title;

        // Set modal description as HTML
        document.getElementById('modal-description').innerHTML = description;

        // Clear exercises list
        document.getElementById('modal-exercises').innerHTML = '';
    }
</script>
<script>
    function showExercises(button) {
        // Retrieve data from the button's data attributes
        const title = button.getAttribute('data-title');
        const exercises = JSON.parse(button.getAttribute('data-exercises'));

        // Set modal title
        document.getElementById('modal-title').textContent = title;

        // Clear description
        document.getElementById('modal-description').textContent = '';

        // Populate exercises list
        const exerciseList = document.getElementById('modal-exercises');
        exerciseList.innerHTML = '';
        exercises.forEach(function (exercise) {
            const li = document.createElement('li');
            li.textContent = exercise.exercise_name;
            exerciseList.appendChild(li);
        });
    }
</script>
@endsection