@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">Exercises</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>Contents For Exercise</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('exercise.create')}}" class="btn btn-outline-primary" >Add Contents For Exercise</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>Course</th>
            <th>Workout</th>
            <th>Exercise</th>
            <th>Content</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($exercises as $exercise)
            <tr>
                <td>{{ $exercise->course->title ?? 'N/A' }}</td>
                <td>{{ $exercise->workout->workout_title ?? 'N/A' }}</td>
                <td>{{ $exercise->tableTocExercise->exercise_name ?? 'Exercise '.$exercise->id }}</td>
                <td>
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#contentModal{{ $exercise->id }}">
                        View Content
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="contentModal{{ $exercise->id }}" tabindex="-1" aria-labelledby="contentModalLabel{{ $exercise->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-lg modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="contentModalLabel{{ $exercise->id }}">Exercise Content</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                @if ($exercise->content->isNotEmpty())
                                @foreach ($exercise->content as $content)
                                    @if (!empty($content->video_url))
                                        <video width="100%" height="auto" controls class="mb-3">
                                            <source src="{{ asset('storage/' . $content->video_url) }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    @endif

                                    @if (!empty($content->description))
                                        <div class="mb-4">{!! $content->description !!}</div>
                                    @endif
                                @endforeach
                            @else
                                <p>No content available.</p>
                            @endif

                            </div>

                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <a href="{{ route('exercise.edit', $exercise->id) }}" class="btn btn-sm btn-info">Edit</a>
                    <form method="POST" action="{{ route('exercise.destroy', $exercise->id) }}" style="display:inline-block;">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-danger" onclick="return confirm('Delete this item?')">Delete</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="5" class="text-center">No Exercise Content found.</td>
            </tr>
        @endforelse
    </tbody>
</table>

                                </div> <!-- end table-responsive-->
                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->

               
                </div>
</div>


@endsection