@extends('layout.master')

@section('content')
<div class="container py-3">
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('training.admin-video') }}">Training Materials</a></li>
            <li class="breadcrumb-item active" aria-current="page">Manage Content</li>
        </ol>
    </nav>

    <div class="row mb-1">
        <div class="col-md-12">
            <h2 class="display-4">Training Materials</h2>
            <p class="lead text-muted">Manage your training videos and documents collection.</p>
        </div>
    </div>

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs mb-4" id="trainingTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="videos-tab" data-bs-toggle="tab" data-bs-target="#videos-content" type="button" role="tab" aria-controls="videos-content" aria-selected="true">
                <i class="fas fa-video me-2"></i> Videos
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents-content" type="button" role="tab" aria-controls="documents-content" aria-selected="false">
                <i class="fas fa-file me-2"></i> Documents
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="trainingTabsContent">
        <!-- Videos Tab Content -->
        <div class="tab-pane fade show active" id="videos-content" role="tabpanel" aria-labelledby="videos-tab">
            @php
                $selectedVideo = null;
                $selectedVideoId = request('video');
                
                if ($videos->isNotEmpty()) {
                    $selectedVideo = $selectedVideoId 
                        ? $videos->firstWhere('youtube_link', 'like', '%' . $selectedVideoId . '%') 
                        : $videos->first();
                }
            @endphp

            @if ($selectedVideo && $selectedVideo->youtube_link)
                <!-- Featured Video -->
                <div class="row mb-4">
                    <div class="col-md-12 mx-auto">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5 class="card-title mb-0" id="video-title">{{ $selectedVideo->title ?? 'Untitled Video' }}</h5>
                                    <a href="{{ route('training.admin-video.create') }}" class="btn btn-primary btn-sm">
                                        <i class="fas fa-plus"></i> Add Video
                                    </a>
                                </div>
                                <p class="text-muted" id="video-description">{{ $selectedVideo->description ?? 'No description available' }}</p>
                                <div class="ratio ratio-16x9">
                                    <iframe id="video-frame" 
                                            src="https://www.youtube.com/embed/{{ getYoutubeVideoId($selectedVideo->youtube_link) }}" 
                                            allowfullscreen>
                                    </iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="alert alert-info">
                    No featured video available. 
                    <a href="{{ route('training.admin-video.create') }}" class="alert-link">Add your first video</a>.
                </div>
            @endif

            <!-- More Videos -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="mb-0">Video Collection</h4>
                                <input type="text" id="searchInput" class="form-control w-25" placeholder="Search videos...">
                            </div>

                            <div class="row" id="videoGrid">
                                @forelse ($videos as $video)
                                    @if (!$selectedVideo || $video->id !== $selectedVideo->id)
                                        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 video-card">
                                            <div class="card h-100 border-0 shadow-sm">
                                                <div class="card-img-top position-relative">
                                                    <a href="#" class="video-link stretched-link"
                                                       data-video-id="{{ $video->youtube_link ? getYoutubeVideoId($video->youtube_link) : '' }}"
                                                       data-video-title="{{ $video->title ?? 'Untitled Video' }}"
                                                       data-video-description="{{ $video->description ?? 'No description available' }}">
                                                        @if($video->youtube_link)
                                                            <img src="https://img.youtube.com/vi/{{ getYoutubeVideoId($video->youtube_link) }}/mqdefault.jpg" 
                                                                 class="w-100 rounded-top" alt="Video Thumbnail">
                                                        @else
                                                            <div class="bg-light d-flex align-items-center justify-content-center" style="height: 150px;">
                                                                <i class="fas fa-video-slash fa-3x text-muted"></i>
                                                            </div>
                                                        @endif
                                                    </a>
                                                </div>
                                                <div class="card-body p-3">
                                                    <div class="d-flex justify-content-between align-items-start">
                                                        <h6 class="card-title text-truncate mb-1">{{ $video->title ?? 'Untitled Video' }}</h6>
                                                        <div class="dropdown">
                                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="videoDropdown{{ $video->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                                                                <i class="fas fa-ellipsis-v"></i>
                                                            </button>
                                                            <ul class="dropdown-menu" aria-labelledby="videoDropdown{{ $video->id }}">
                                                                <li><a class="dropdown-item" href="{{ route('training.admin-video.edit', $video->id) }}"><i class="fas fa-edit me-2"></i>Edit</a></li>
                                                                <li><hr class="dropdown-divider"></li>
                                                                <li>
                                                                    <form id="delete-video-form-{{ $video->id }}" action="{{ route('training.admin-video.delete', $video->id) }}" method="POST">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="button" class="dropdown-item text-danger delete-video-btn" data-id="{{ $video->id }}">
                                                                            <i class="fas fa-trash me-2"></i>Delete
                                                                        </button>
                                                                    </form>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="card-text text-muted small text-truncate" style="max-width: 100%;">
                                                        {{ $video->description ?? 'No description available' }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @empty
                                    <div class="col-12">
                                        <div class="alert alert-warning">
                                            No videos available. 
                                            <a href="{{ route('training.admin-video.create') }}" class="alert-link">Add your first video</a>.
                                        </div>
                                    </div>
                                @endforelse
                            </div>

                            <p id="noResults" class="text-center text-muted mt-3" style="display: none;">No videos found matching your search.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Documents Tab Content -->
        <div class="tab-pane fade" id="documents-content" role="tabpanel" aria-labelledby="documents-tab">
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="mb-0">Document Collection</h4>
                                <div>
                                    
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>File Type</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="documentTableBody">
                              
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Video Player Functionality
        let videoLinks = document.querySelectorAll(".video-link");
        let videoFrame = document.getElementById("video-frame");
        let videoTitle = document.getElementById("video-title");
        let videoDescription = document.getElementById("video-description");

        videoLinks.forEach(link => {
            link.addEventListener("click", function(event) {
                event.preventDefault();
                let videoId = this.getAttribute("data-video-id");
                let title = this.getAttribute("data-video-title");
                let description = this.getAttribute("data-video-description");

                if (videoId) {
                    if (videoFrame) videoFrame.src = "https://www.youtube.com/embed/" + videoId;
                    if (videoTitle) videoTitle.textContent = title;
                    if (videoDescription) videoDescription.textContent = description;
                    
                    // Scroll to the video player
                    document.querySelector('#videos-content').scrollIntoView({
                        behavior: 'smooth'
                    });
                } else {
                    alert("This video is not available");
                }
            });
        });

        // Video Search Functionality
        let searchInput = document.getElementById("searchInput");
        let videoCards = document.querySelectorAll(".video-card");
        let noResults = document.getElementById("noResults");

        if (searchInput && videoCards && noResults) {
            searchInput.addEventListener("input", function() {
                let query = this.value.toLowerCase();
                let hasResults = false;

                videoCards.forEach(card => {
                    let title = card.querySelector(".card-title").textContent.toLowerCase();
                    let description = card.querySelector(".card-text").textContent.toLowerCase();

                    if (title.includes(query) || description.includes(query)) {
                        card.style.display = "block";
                        hasResults = true;
                    } else {
                        card.style.display = "none";
                    }
                });

                noResults.style.display = hasResults ? "none" : "block";
            });
        }

        // Document Search Functionality
        let documentSearch = document.getElementById("documentSearch");
        let documentTableBody = document.getElementById("documentTableBody");
        let documentRows = documentTableBody ? documentTableBody.querySelectorAll("tr") : [];

        if (documentSearch && documentRows.length > 0) {
            documentSearch.addEventListener("input", function() {
                let query = this.value.toLowerCase();
                let hasResults = false;

                documentRows.forEach(row => {
                    let title = row.querySelector("td:first-child").textContent.toLowerCase();
                    let description = row.querySelector("td:nth-child(2)").textContent.toLowerCase();
                    let fileType = row.querySelector("td:nth-child(3)").textContent.toLowerCase();

                    if (title.includes(query) || description.includes(query) || fileType.includes(query)) {
                        row.style.display = "";
                        hasResults = true;
                    } else {
                        row.style.display = "none";
                    }
                });

                // Show no results message if needed
                if (!hasResults) {
                    let noResultsRow = document.createElement("tr");
                    noResultsRow.innerHTML = `
                        <td colspan="4" class="text-center py-4 text-muted">
                            No documents found matching your search.
                        </td>
                    `;
                    documentTableBody.appendChild(noResultsRow);
                } else {
                    // Remove any existing no results message
                    let existingNoResults = documentTableBody.querySelector("tr[data-no-results]");
                    if (existingNoResults) {
                        existingNoResults.remove();
                    }
                }
            });
        }

        // Delete Confirmation Dialogs
        document.querySelectorAll('.delete-video-btn').forEach(button => {
            button.addEventListener('click', function() {
                let videoId = this.getAttribute('data-id');
                Swal.fire({
                    title: 'Delete Video?',
                    text: "This video will be permanently removed!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById(`delete-video-form-${videoId}`).submit();
                    }
                });
            });
        });

        document.querySelectorAll('.delete-document-btn').forEach(button => {
            button.addEventListener('click', function() {
                let documentId = this.getAttribute('data-id');
                Swal.fire({
                    title: 'Delete Document?',
                    text: "This document will be permanently removed!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById(`delete-document-form-${documentId}`).submit();
                    }
                });
            });
        });
    });
</script>
@endsection