@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="col-lg-12">
                <div class="card">
                    <div class="card-header text-end">
                        <a href="javascript:void(0);" class="btn btn-light" onclick="goBack()">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">
                                    <div class="card-header">
                                        <div class="row w-100">
                                            <div class="col-8">
                                                <h4>Lesson {{ $staff_subject->number }} Video File List</h4>
                                            </div>
                                            <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>
                                        </div>
                                        <hr style="border: 1px solid #000; width: 100%; margin: 20px auto;">
                                    </div>
                                    <div class="card-body ">
                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="myTable3">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Part No</th>
                                                        <th>Title</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($videos as $lesson_video)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>{{ $lesson_video->part_number }}</td>
                                                            <td>{{ $lesson_video->video_title }}</td>
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <a href="#" class="btn  btn-link p-0"
                                                                        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"></i>
                                                                    </a>

                                                                    &nbsp;
                                                                    <form
                                                                        action="{{ route('lms_subject_lessons_video_delete') }}"
                                                                        method="POST">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <input type="hidden" name="lesson_video_sid"
                                                                            value="{{ $lesson_video->lesson_videos_sid }}">
                                                                        <button class="btn btn-link p-0">
                                                                            <i class="fa-solid fa-trash"></i>
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Document Sources Card -->
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="row w-100">
                                            <div class="col-8">
                                                <h4>Lesson {{ $staff_subject->number }} Document File List</h4>
                                            </div>
                                            <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>
                                        </div>
                                        <hr style="border: 1px solid #000; width: 100%; margin: 20px auto;">
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="myTable2">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Part No</th>
                                                        <th>Title</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($files as $lesson_file)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>{{ $lesson_file->part_number }}</td>
                                                            <td>{{ $lesson_file->file_title }}</td>
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <a href="#" class="btn  btn-link p-0"
                                                                        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"></i>
                                                                    </a>
                                                                    &nbsp;
                                                                    <form
                                                                        action="{{ route('lms_subject_lessons_document_delete') }}"
                                                                        method="POST">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <input type="hidden" name="lesson_files_sid"
                                                                            value="{{ $lesson_file->lesson_files_sid }}">
                                                                        <button class="btn  btn-link p-0">
                                                                            <i class="fa-solid fa-trash"></i>
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 Video 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 Video 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>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $('#myTable2').DataTable({});
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#myTable3').DataTable({});
        });
    </script>
    <script>
        function goBack() {
            window.history.back();
        }
    </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