@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title, 'number' => $staff_subject->number])
    <div class="container mt-4">
        <div class="row">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header text-end">
                            <a href="{{ route('lms_subject_lessons.index') }}" class="btn btn-secondary">Back</a>
                        </div>
                        <div class="card-body">
                            <!-- Video and Document Sources -->
                            <div class="row">
                                <!-- Video Sources Card -->
                                <div class="col-lg-6">
                                    <div class="card shadow-lg">
                                        <div class="card-header">
                                            <div class="row w-100">
                                                <div class="col-8">
                                                    <h4>Video Sources</h4>
                                                </div>
                                                @if ($user_type == 3)
                                                    <div class="col-4 text-end">
                                                        <button type="button" class="btn btn-primary btn-sm"
                                                            data-bs-toggle="modal" data-bs-target="#exampleModal">
                                                            <i class="fa-solid fa-plus"></i>&nbsp; Video
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <ul class="list-unstyled">
                                                @foreach ($videos as $lesson_video)
                                                    <li style="margin-bottom: 20px;">
                                                        <!-- Card wrapper for each video -->
                                                        <div class="card shadow-lg">
                                                            <div class="card-header">
                                                                <strong>Part {{ $lesson_video->part_number }}</strong>
                                                            </div>
                                                            <div class="card-body">
                                                                <div class="d-flex align-items-start">
                                                                    <div class="me-3" style="width: 20%; text-align: left;">
                                                                        <a href="#" class="tag">
                                                                            <span
                                                                                style="font-weight: bold; font-size: 16px;">{{ $lesson_video->part_number }}</span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="block_content" style="width: 80%;">
                                                                        <div class="d-flex align-items-center">
                                                                            <h2 class="title mb-0"
                                                                                style="font-size: 18px; font-weight: bold;">
                                                                                <a href="#"
                                                                                    class="text-decoration-none">{{ $lesson_video->video_title }}</a>
                                                                            </h2>
                                                                            @if ($user_type == 3 || $user_type == 1)
                                                                                <a href="#" class="btn btn-link p-0 ms-3 mt-3"
                                                                                    data-bs-toggle="modal"
                                                                                    data-bs-target="#exampleModalEdit"
                                                                                    data-video_sid="{{ $lesson_video->lesson_videos_sid }}"
                                                                                    data-part_number="{{ $lesson_video->part_number }}"
                                                                                    data-video_title="{{ $lesson_video->video_title }}"
                                                                                    data-video_description="{{ $lesson_video->description }}"
                                                                                    data-video_url="{{ $lesson_video->video_embed_url }}"
                                                                                    data-video_path="{{ isset($lesson_video->video_path) ? asset('storage/' . $lesson_video->video_path) : null }}">
                                                                                    <i class="fa-solid fa-pen-to-square"
                                                                                        style="color: #2dce89;"></i>
                                                                                </a>
                                                                                <form
                                                                                    action="{{ route('lms_subject_lessons_video_delete') }}"
                                                                                    method="POST" class="delete-form ms-1 mt-3">
                                                                                    @csrf
                                                                                    @method('DELETE')
                                                                                    <input type="hidden" name="lesson_video_sid"
                                                                                        value="{{ $lesson_video->lesson_videos_sid }}">
                                                                                    <button type="button"
                                                                                        class="btn btn-link p-0 btn-delete">
                                                                                        <i class="fa-solid fa-trash"
                                                                                            style="color: #f5365c;"></i>
                                                                                    </button>
                                                                                </form>
                                                                            @endif
                                                                        </div>
                                                                        <div class="byline"
                                                                            style="font-size: 14px; color: #888;">
                                                                            <span>{{ $lesson_video->created_at->format('Y-m-d') }}</span>
                                                                            by
                                                                            <a>{{ $staff_subject->staff->firstname }}</a>
                                                                        </div>
                                                                        <p class="excerpt max-three-line-p">
                                                                            {{ $lesson_video->description }}
                                                                        </p>
                                                                        @if ($lesson_video->video_path !== null)
                                                                            <button type="button" class="btn btn-default"
                                                                                data-bs-toggle="modal" data-bs-target="#video"
                                                                                data-thevideo="{{ asset('storage/' . $lesson_video->video_path) }}">
                                                                                Watch
                                                                            </button>
                                                                        @endif
                                                                        @if ($lesson_video->video_embed_url !== null)
                                                                            <button type="button" class="btn btn-default"
                                                                                data-bs-toggle="modal" data-bs-target="#urlVideo"
                                                                                data-url_video="{{ $lesson_video->video_embed_url }}">
                                                                                URL Watch
                                                                            </button>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of card wrapper -->
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                    </div>
                                </div>

                                <!-- Document Sources Card -->
                                <div class="col-lg-6">
                                    <div class="card shadow-lg">
                                        <div class="card-header">
                                            <div class="row w-100">
                                                <div class="col-8">
                                                    <h4>Document Sources</h4>
                                                </div>
                                                @if ($user_type == 3)
                                                    <div class="col-4 text-end">
                                                        <button type="button" class="btn btn-primary btn-sm"
                                                            data-bs-toggle="modal" data-bs-target="#exampleModalDocument">
                                                            <i class="fa-solid fa-plus"></i> &nbsp; Document </button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <ul class="list-unstyled">
                                                @foreach ($files as $lesson_file)
                                                    <li style="margin-bottom: 20px;">
                                                        <!-- Card wrapper for each file -->
                                                        <div class="card shadow-lg">
                                                            <div class="card-header">
                                                                <strong>Part {{ $lesson_file->part_number }}</strong>
                                                            </div>
                                                            <div class="card-body">
                                                                <div class="d-flex align-items-start">
                                                                    <div class="me-3" style="width: 20%; text-align: left;">
                                                                        <a href="#" class="tag">
                                                                            <span
                                                                                style="font-weight: bold; font-size: 16px;">{{ $lesson_file->part_number }}</span>
                                                                        </a>
                                                                    </div>
                                                                    <div class="block_content" style="width: 80%;">
                                                                        <div class="d-flex align-items-center">
                                                                            <h2 class="title mb-0"
                                                                                style="font-size: 18px; font-weight: bold;">
                                                                                <a href="#"
                                                                                    class="text-decoration-none">{{ $lesson_file->file_title }}</a>
                                                                            </h2>
                                                                            @if ($user_type == 3 || $user_type == 1)
                                                                                <a href="#" class="ms-3" data-bs-toggle="modal"
                                                                                    data-bs-target="#exampleModalDocEdit"
                                                                                    data-file_sid="{{ $lesson_file->lesson_files_sid }}"
                                                                                    data-part_number="{{ $lesson_file->part_number }}"
                                                                                    data-document_title="{{ $lesson_file->file_title }}"
                                                                                    data-document_description="{{ $lesson_file->description }}"
                                                                                    data-document_path="{{ isset($lesson_file->file_path) ? asset('storage/' . $lesson_file->file_path) : null }}"
                                                                                    data-document_url="{{ $lesson_file->file_url }}">
                                                                                    <i class="fa-solid fa-pen-to-square"
                                                                                        style="color: #2dce89;"></i>
                                                                                </a>
                                                                                <form
                                                                                    action="{{ route('lms_subject_lessons_document_delete') }}"
                                                                                    method="POST" class=" delete-form ms-1 mt-3">
                                                                                    @csrf
                                                                                    @method('DELETE')
                                                                                    <input type="hidden" name="lesson_files_sid"
                                                                                        value="{{ $lesson_file->lesson_files_sid }}">
                                                                                    <button type="button"
                                                                                        class="btn btn-link p-0 btn-delete">
                                                                                        <i class="fa-solid fa-trash"
                                                                                            style="color: #f5365c"></i>
                                                                                    </button>
                                                                                </form>
                                                                            @endif
                                                                        </div>
                                                                        <div class="byline"
                                                                            style="font-size: 14px; color: #888;">
                                                                            <span>{{ $lesson_file->created_at->format('Y-m-d') }}</span>
                                                                            by
                                                                            <a>{{ $staff_subject->staff->firstname }}</a>
                                                                        </div>
                                                                        <p class="excerpt max-three-line-p">
                                                                            {{ $lesson_file->description }}
                                                                        </p>
                                                                        <!-- Read and Download buttons for documents -->
                                                                        @if ($lesson_file->file_path !== null)
                                                                            <a href="{{ asset('storage/' . $lesson_file->file_path) }}"
                                                                                class="btn btn-default"
                                                                                target="_blank">Read</a>&nbsp;
                                                                            <a href="{{ asset('storage/' . $lesson_file->file_path) }}"
                                                                                class="btn btn-info"
                                                                                download="{{ $lesson_file->file_title }}">Download</a>
                                                                        @endif
                                                                        @if ($lesson_file->file_url !== null)
                                                                            <a href="{{ $lesson_file->file_url }}"
                                                                                class="btn btn-default" target="_blank">URL
                                                                                Read</a>&nbsp;
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of card wrapper -->
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal HTML -->
        <div class="modal fade" id="video" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="videoModalLabel">Video</h4>
                    </div>
                    <div class="modal-body">
                        <video width="100%" controls>
                            <source src="" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for URL Video (External Link like YouTube/Vimeo) -->
        <div class="modal fade" id="urlVideo" tabindex="-1" role="dialog" aria-labelledby="urlVideoModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="urlVideoModalLabel">Video</h4>
                    </div>
                    <div class="modal-body">
                        <!-- YouTube iframe for playing video -->
                        <iframe id="urlVideoIframe" width="100%" height="315" frameborder="0"
                            allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
        <!--create video Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{ route('lms_subject_lessons_video') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $staff_subject->staff_subject_lessons_sid }}">
                    <input type="hidden" name="cms_staff_sid" value="{{ $staff_subject->cms_staff_sid }}">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Add Video File</h1>
                            <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-6 mb-3">
                                    <label> Part Number</label>
                                    <input type="text" class="form-control" name="part_number">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label> Video Title</label>
                                    <input type="text" class="form-control" name="video_title">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label>Video upload</label>
                                    <input type="file" class="form-control mt-2" name="video_file" id="videoUploadInput"
                                        accept="video/*">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>URL</label>
                                    <input type="text" class="form-control mt-2" name="video_url" id="videoUrlInput"
                                        placeholder="Enter Video URL">
                                </div>

                                <div class="col-lg-6 mb-3">
                                    <label>Description</label>
                                    <textarea name="video_description" id="video_description" rows="1"
                                        class="form-control"></textarea>
                                </div>
                            </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>
                </form>

            </div>
        </div>
        <!--edit video Modal -->
        <div class="modal fade" id="exampleModalEdit" tabindex="-1" aria-labelledby="exampleModalEditLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{ route('lms_subject_lessons_video_update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $staff_subject->staff_subject_lessons_sid }}">
                    <input type="hidden" name="cms_staff_sid" value="{{ $staff_subject->cms_staff_sid }}">
                    <input type="hidden" name="lesson_videos_sid" id="lessonVideoSid">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalEditLabel">Edit Video</h1>
                            <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-6 mb-3">
                                    <label>Part Number</label>
                                    <input type="text" class="form-control" name="part_number">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>Video Title</label>
                                    <input type="text" class="form-control" name="video_title">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>Description</label>
                                    <textarea name="video_description" id="video_description" rows="1"
                                        class="form-control"></textarea>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>URL</label>
                                    <input type="text" class="form-control mt-2" name="video_url" id="videoUrl"
                                        placeholder="Enter document URL">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>Video Upload</label>
                                    <input type="file" class="form-control mt-2" name="video_file" id="videoUploadInput"
                                        accept="video/*">
                                    <!-- Area to display the file name -->
                                    <div id="fileDisplayArea" class="mt-2"></div>
                                </div>
                            </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>
                </form>
            </div>
        </div>

        <!--create document Modal -->
        <div class="modal fade" id="exampleModalDocument" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{ route('lms_subject_lessons_document') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $staff_subject->staff_subject_lessons_sid }}">
                    <input type="hidden" name="cms_staff_sid" value="{{ $staff_subject->cms_staff_sid }}">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Add Document</h1>
                            <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-6 mb-3">
                                    <label> Part Number</label>
                                    <input type="text" class="form-control" name="part_number">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label> Document Title</label>
                                    <input type="text" class="form-control" name="document_title">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label>Document upload</label>
                                    <input type="file" class="form-control mt-2" name="document_file" id="videoUploadInput"
                                        accept="pdf/*,word/*,doc/*,excel/*">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>URL</label>
                                    <input type="text" class="form-control mt-2" name="document_url" id="document_url"
                                        placeholder="Enter Document URL">
                                </div>

                                <div class="col-lg-6 mb-3">
                                    <label>Description</label>
                                    <textarea name="document_description" id="document_description" rows="1"
                                        class="form-control"></textarea>
                                </div>
                            </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>
                </form>

            </div>
        </div>
        <!--edit document Modal -->
        <div class="modal fade" id="exampleModalDocEdit" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{ route('lms_subject_lessons_document_update') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="lesson_sid" value="{{ $staff_subject->staff_subject_lessons_sid }}">
                    <input type="hidden" name="cms_staff_sid" value="{{ $staff_subject->cms_staff_sid }}">
                    <input type="hidden" name="lesson_files_sid" id="lessonDocumentSid">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel"> Edit Document</h1>
                            <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-6 mb-3">
                                    <label> Part Number</label>
                                    <input type="text" class="form-control" name="part_number">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label> Document Title</label>
                                    <input type="text" class="form-control" name="document_title">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label>URL</label>
                                    <input type="text" class="form-control mt-2" name="document_edit_url"
                                        id="document_edit_url" placeholder="Enter Document URL">
                                </div>

                                <div class="col-lg-6 mb-3">
                                    <label>Description</label>
                                    <textarea name="document_description" id="document_description" rows="1"
                                        class="form-control"></textarea>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label>Document upload</label>
                                    <input type="file" class="form-control mt-2" name="document_file" id="videoUploadInput"
                                        accept="pdf/*,word/*,doc/*,excel/*">
                                </div>
                            </div>

                            <!-- Preview Section (only shown if file_path is available) -->
                            <div id="documentPreviewSection" class="row" style="display: none;">
                                <div class="col-lg-12">
                                    <label>Current Document</label>
                                    <div>
                                        <a href="#" id="documentPreviewLink" target="_blank">
                                            <i class="fa-solid fa-file"></i> View Document
                                        </a>
                                    </div>
                                </div>
                            </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>
                </form>
            </div>
        </div>
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this Details?<br>
                        Please note, if you proceed with the deletion. This action cannot be undone.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                    </div>
                </div>
            </div>
        </div>
@endsection
    @push('scripts')
        <script>
            document.querySelectorAll('.btn-delete').forEach(button => {
                button.addEventListener('click', function (event) {
                    event.preventDefault();
                    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                    deleteModal.show();
                    const form = button.closest('.delete-form');
                    document.getElementById('confirmDelete').addEventListener('click', function () {
                        form.submit(); // Submit the correct form
                    });
                });
            });
        </script>
        <script>
            $(document).ready(function () {
                $('#video').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget); // Button that triggered the modal
                    var videoUrl = button.data('thevideo');
                    var modal = $(this);
                    modal.find('video').attr('src', videoUrl);
                });

                $('#videoModal').on('hide.bs.modal', function (event) {
                    var modal = $(this);
                    modal.find('video').attr('src', ''); // Stop the video when the modal is closed
                });
            });
        </script>
        <script>
            $(document).ready(function () {
                // Function to handle the YouTube URL video modal
                $('#urlVideo').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget); // Button that triggered the modal
                    var videoUrl = button.data('url_video'); // Get YouTube URL
                    var modal = $(this);

                    // Extract the video ID from the URL
                    var videoId;
                    if (videoUrl.indexOf("youtu.be") !== -1) {
                        // Handle short YouTube URLs
                        videoId = videoUrl.split('/')[3]; // Extract video ID for youtu.be
                    } else if (videoUrl.indexOf("youtube.com") !== -1) {
                        // Handle regular YouTube URLs
                        videoId = videoUrl.split('v=')[1].split('&')[0]; // Extract video ID for youtube.com
                    }

                    var videoSrc = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"; // Use embed URL

                    // Set the iframe source to the video URL with autoplay
                    modal.find('#urlVideoIframe').attr('src', videoSrc);
                });

                // Stop the video when modal is closed
                $('#urlVideo').on('hide.bs.modal', function (event) {
                    var modal = $(this);
                    modal.find('#urlVideoIframe').attr('src', ''); // Remove video source to stop it
                });
            });
        </script>
        {{-- video --}}
        <script>
            $(document).ready(function () {
                // When clicking on the edit button
                $('[data-bs-target="#exampleModalEdit"]').on('click', function () {
                    // Get the data attributes from the clicked button
                    const videoSid = $(this).data('video_sid');
                    const partNumber = $(this).data('part_number');
                    const videoTitle = $(this).data('video_title');
                    const videoDescription = $(this).data('video_description');
                    const videoPath = $(this).data('video_path');
                    const videoUrl = $(this).data('video_url');
                    console.log(videoPath);

                    // Populate the modal fields with the data 
                    $('#lessonVideoSid').val(videoSid);
                    $('#videoUrl').val(videoUrl);
                    $('#exampleModalEdit input[name="part_number"]').val(partNumber);
                    $('#exampleModalEdit input[name="video_title"]').val(videoTitle);
                    $('#exampleModalEdit textarea[name="video_description"]').val(videoDescription);

                    // Display the file name and set up the video player
                    const fileDisplayArea = $('#fileDisplayArea');
                    const videoPlayer = $('#hiddenVideoPlayer');
                    const videoSource = videoPlayer.find('source');
                    if (videoPath == '') {
                        fileDisplayArea.html(`<a href="#" id="videoFileLink"></a>`);
                        videoSource.attr('src', videoPath);
                    } else {
                        fileDisplayArea.html(`<a href="#" id="videoFileLink">${videoTitle}</a>`);
                        videoSource.attr('src', videoPath);
                    }


                    // videoPlayer[0].load(); // Load the video

                    // Show the video player when the link is clicked
                    $('#videoFileLink').on('click', function (e) {
                        e.preventDefault();
                        videoPlayer.show();
                    });
                });
            });
        </script>


        {{-- document --}}
        <script>
            $('#exampleModalDocEdit').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal

                // Extract data attributes from the button
                var partNumber = button.data('part_number');
                var documentTitle = button.data('document_title');
                var documentDescription = button.data('document_description');
                var documentUrl = button.data('document_url');
                var documentPath = button.data('document_path'); // File path
                var lessonFileSid = button.data('file_sid'); // Lesson file SID 

                // Get the modal
                var modal = $(this);

                // Populate the modal fields with extracted data
                modal.find('input[name="part_number"]').val(partNumber);
                modal.find('input[name="document_title"]').val(documentTitle);
                modal.find('textarea[name="document_description"]').val(documentDescription);
                modal.find('input[name="document_edit_url"]').val(documentUrl);
                modal.find('input[name="lesson_files_sid"]').val(lessonFileSid);

                // Handle document preview
                var documentPreviewSection = modal.find('#documentPreviewSection');
                var documentPreviewLink = modal.find('#documentPreviewLink');

                if (documentPath) {
                    // Show the preview section and set the file path
                    documentPreviewSection.show();
                    documentPreviewLink.attr('href', documentPath).text('View Document');
                } else {
                    // Hide the preview section if no file path is available
                    documentPreviewSection.hide();
                }
            });
        </script>
        
    @endpush