@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 for Course: {{ $course->title }}</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">
                                    <button type="button" class="btn btn-outline-primary"  data-bs-toggle="modal" data-bs-target="#top-modal">Add Workout</button>
                                    <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>Course</th>
                <th>Image</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($workouts as $workout)
            <tr>
                <td>{{ $workout->workout_title }}</td>
                <td>{{ $workout->course->course_title }}</td>
                <td>
                    @if($workout->workout_image)
                        <img src="{{ asset('storage/'.$workout->workout_image) }}" alt="Workout Image" width="50">
                    @endif
                </td>
                <td>{{ $workout->course_description }}</td>
                <td>
                <button type="button" class="btn btn-warning btn-sm" 
                        data-bs-toggle="modal" 
                        data-bs-target="#top-modal" 
                        onclick="editWorkout('{{ $workout->id }}', '{{ $workout->workout_title }}', '{{ $workout->workout_image }}', '{{ $workout->course_description }}')">
                    Edit
                </button>
                <form action="{{ route('workouts.destroy', $workout->id) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                </form>
            </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="text-center">No workouts found for this course.</td>
            </tr>
            @endforelse
        </tbody>
                    </table>
                                </div> <!-- end table-responsive-->
                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->

               
                </div>
</div>

<div id="top-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-top">
        <form id="workout-form" action="{{ route('workouts.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="workout_course" value="{{ $id }}">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="topModalLabel">Add Workout For: {{ $course->title }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Workout Title -->
                            <div class="mb-3">
                                <label for="workout_title" class="form-label">Workout Title</label>
                                <input type="text" id="workout_title" name="workout_title" class="form-control" placeholder="Enter Workout Title">
                            </div>

                            <!-- Workout Image -->
                            <div class="mb-3">
                                <label for="workout_image" class="form-label">Workout Image</label>
                                <input type="file" id="workout_image" name="workout_image" class="form-control">
                                <div id="current-image-container" class="mt-2" style="display: none;">
                                    <img id="current-image" src="" alt="Current Workout Image" width="100" class="img-thumbnail">
                                </div>
                            </div>

                            <!-- Course Description -->
                            <div class="mb-3">
                                <label for="course_description" class="form-label">Workout Description</label>
                                <textarea id="course_description" name="course_description" class="form-control" placeholder="Enter Course Description" rows="4"></textarea>
                            </div>
                        </div> <!-- end col -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </form>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    function editWorkout(id, title, image, description) {
        // Update the form action for editing
        const form = document.getElementById('workout-form');
        form.action = `/fitness_laravel/public/coffee/workouts/update/${id}`;
        form.method = 'POST';
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'PUT';
        form.appendChild(methodInput);

        // Populate the modal fields
        document.getElementById('workout_title').value = title;
        document.getElementById('course_description').value = description;

        // Show the current image if it exists
        const currentImageContainer = document.getElementById('current-image-container');
        const currentImage = document.getElementById('current-image');
        if (image) {
            currentImage.src = `/fitness_laravel/public/storage/${image}`;
            currentImageContainer.style.display = 'block';
        } else {
            currentImageContainer.style.display = 'none';
        }

        // Update the modal title
        document.getElementById('topModalLabel').innerText = 'Edit Workout';
    }

    // Reset modal for adding a new workout
    document.getElementById('top-modal').addEventListener('hidden.bs.modal', function () {
        const form = document.getElementById('workout-form');
        form.action = "{{ route('workouts.store') }}";
        form.method = 'POST';
        form.reset();
        document.getElementById('topModalLabel').innerText = 'Add Workout For: {{ $course->title }}';

        // Hide the current image container
        document.getElementById('current-image-container').style.display = 'none';
    });
</script>
@endsection