@extends('layout.layout')
@section('content')

    <div class="container-fluid py-5">
        <div class="row">
            <div class="col-lg-12">

                <div class="mb-3">
                    <hr>
                </div>
                <form method="GET" action="{{ route('AllSessions') }}" class="mb-4">
                    <div class="row g-3 align-items-center">
                        {{-- Filter by Type --}}
                        <div class="col-md-3">
                            <label for="type" class="form-label fw-bold">Filter by Type</label>
                            <select name="track_type_id" id="track_type_id" class="form-select">
                                <option value="">All Types</option>
                                @foreach ($types as $type)
                                    <option value="{{ $type->id }}" {{ request('track_type_id') == $type->id ? 'selected' : '' }}>
                                        {{ ucfirst($type->name) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        {{-- Filter by Level --}}
                        <div class="col-md-3">
                            <label for="level" class="form-label fw-bold">Filter by Level</label>
                            <select name="track_level_id" id="track_level_id" class="form-select">
                                <option value="">All Levels</option>
                                @foreach ($levels as $level)
                                    <option value="{{ $level->id }}" {{ request('track_level_id') == $level->id ? 'selected' : '' }}>
                                        {{ ucfirst($level->track_name) }} - {{ ucfirst($level->name) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        {{-- Filter by Time --}}
                        <div class="col-md-3">
                            <label for="time" class="form-label fw-bold">Filter by Time</label>
                            <input type="time" name="time" id="time" class="form-control"
                                value="{{ request('time') }}">
                        </div>

                        {{-- Filter by Date --}}
                        <div class="col-md-3">
                            <label for="date" class="form-label fw-bold">Filter by Date</label>
                            <input type="date" name="date" id="date" class="form-control"
                                value="{{ request('date') }}">
                        </div>

                        <div class="col-12 d-flex justify-content-end mt-3">
                            <button type="submit" class="btn btn-primary me-2">Apply Filters</button>
                            <a href="{{ route('AllSessions') }}" class="btn btn-secondary">Reset</a>
                        </div>
                    </div>
                </form>
                {{-- Today's Sessions --}}
                <div class="mb-5">
                    <div class="fw-bold text-danger mb-3">Today's Sessions</div>
                    @if(collect($todaySessions)->isEmpty())
                        <div class="alert alert-light text-muted italic shadow-sm">No sessions scheduled for today.</div>
                    @else
                        @include('dashboard.course.partials.session_accordion', [
                            'sessions' => collect($todaySessions),
                            'id_prefix' => 'today',
                            'showDate' => false,
                            'isUpcoming' => true,
                            'isToday' => true
                        ])
                    @endif
                </div>

                {{-- Upcoming Sessions --}}
                <div class="mb-5">
                    <div class="fw-bold text-primary mb-3">Upcoming Sessions</div>
                    @if(collect($upcomingSessions)->isEmpty())
                        <div class="alert alert-light text-muted italic shadow-sm">No upcoming sessions found.</div>
                    @else
                        @include('dashboard.course.partials.session_accordion', [
                            'sessions' => collect($upcomingSessions),
                            'id_prefix' => 'upcoming',
                            'showDate' => true,
                            'isUpcoming' => true,
                            'isToday' => false
                        ])
                    @endif
                </div>

                {{-- Previous Sessions --}}
                <div class="mb-5">
                    <div class="fw-bold text-secondary mb-3">Previous Sessions</div>
                    @if(collect($previousSessions)->isEmpty())
                        <div class="alert alert-light text-muted italic shadow-sm">No previous sessions found.</div>
                    @else
                        @include('dashboard.course.partials.session_accordion', [
                            'sessions' => collect($previousSessions),
                            'id_prefix' => 'previous',
                            'showDate' => true,
                            'isUpcoming' => false,
                            'isToday' => false
                        ])
                    @endif
                </div>

            </div>
        </div>
    </div>


                <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <form action="{{ route('feedback.store') }}" method="POST">
                                @csrf
                                <div class="modal-header">
                                    <div class="modal-title" id="feedbackModalLabel">Add Feedback</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">

                                    <input type="hidden" name="session_id" id="feedback_session_id">
                                    <!-- 1. Admin's Response -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Admin's Response</label>
                                        <div class="star-rating">
                                            <input type="radio" id="admin_response5" name="admin_response_rating" value="5" required /><label for="admin_response5" title="5 stars"></label>
                                            <input type="radio" id="admin_response4" name="admin_response_rating" value="4" /><label for="admin_response4" title="4 stars"></label>
                                            <input type="radio" id="admin_response3" name="admin_response_rating" value="3" /><label for="admin_response3" title="3 stars"></label>
                                            <input type="radio" id="admin_response2" name="admin_response_rating" value="2" /><label for="admin_response2" title="2 stars"></label>
                                            <input type="radio" id="admin_response1" name="admin_response_rating" value="1" /><label for="admin_response1" title="1 star"></label>
                                        </div>
                                        <textarea name="admin_response_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                                    </div>
                                    <!-- 2. Quality of the Session -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Quality of the Session</label>
                                          <div class="star-rating">
                                            <input type="radio" id="quality5" name="quality_rating" value="5" required /><label for="quality5" title="5 stars"></label>
                                            <input type="radio" id="quality4" name="quality_rating" value="4" /><label for="quality4" title="4 stars"></label>
                                            <input type="radio" id="quality3" name="quality_rating" value="3" /><label for="quality3" title="3 stars"></label>
                                            <input type="radio" id="quality2" name="quality_rating" value="2" /><label for="quality2" title="2 stars"></label>
                                            <input type="radio" id="quality1" name="quality_rating" value="1" /><label for="quality1" title="1 star"></label>
                                        </div>
                                        <textarea name="quality_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                                    </div>
                                    <!-- 3. Benefit of the Session -->
                                    <div class="">
                                        <label class="form-label fw-bold">Benefit of the Session</label>
                                        <div class="star-rating">
                                            <input type="radio" id="benefit5" name="benefit_rating" value="5" required /><label for="benefit5" title="5 stars"></label>
                                            <input type="radio" id="benefit4" name="benefit_rating" value="4" /><label for="benefit4" title="4 stars"></label>
                                            <input type="radio" id="benefit3" name="benefit_rating" value="3" /><label for="benefit3" title="3 stars"></label>
                                            <input type="radio" id="benefit2" name="benefit_rating" value="2" /><label for="benefit2" title="2 stars"></label>
                                            <input type="radio" id="benefit1" name="benefit_rating" value="1" /><label for="benefit1" title="1 star"></label>
                                        </div>

                                        <textarea name="benefit_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                                    </div>

                                    <!-- 4. Recommendation for Yourself -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Recommendation for Yourself</label>
                                        <textarea name="recommendation" placeholder="What can you do to improve your performance in future sessions"
                                            class="form-control" required></textarea>
                                    </div>

                                    <!-- 5. Error Correction -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Error Correction</label>
                                        <div class="star-rating">
                                            <input type="radio" id="error_correction5" name="error_correction_rating" value="5" required /><label for="error_correction5" title="5 stars"></label>
                                            <input type="radio" id="error_correction4" name="error_correction_rating" value="4" /><label for="error_correction4" title="4 stars"></label>
                                            <input type="radio" id="error_correction3" name="error_correction_rating" value="3" /><label for="error_correction3" title="3 stars"></label>
                                            <input type="radio" id="error_correction2" name="error_correction_rating" value="2" /><label for="error_correction2" title="2 stars"></label>
                                            <input type="radio" id="error_correction1" name="error_correction_rating" value="1" /><label for="error_correction1" title="1 star"></label>
                                        </div>
                                        <textarea name="error_correction_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                                    </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-success">Submit Feedback</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

    <style>
        .star-rating {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            font-size: 2.5rem;
        }
        .star-rating input { display: none; }
        .star-rating label {
            color: #ddd;
            cursor: pointer;
            transition: color 0.2s;
        }
        .star-rating label:before { content: "\2605"; }
        .star-rating input:checked ~ label { color: #ffca08; }
        .star-rating label:hover,
        .star-rating label:hover ~ label { color: #ffca08; }

        /* Secure Viewer Styles */
        .secure-container {
            position: relative;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Modal for viewing files */
        #secureFileModal .modal-body {
            position: relative;
            padding: 0;
            background: #000;
            min-height: 500px;
        }

        .viewer-watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-30deg);
            font-size: 2.5rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.1);
            z-index: 1000;
            pointer-events: none;
            text-transform: uppercase;
            white-space: nowrap;
            width: 100%;
            text-align: center;
        }

        #secureViewerFrame {
            width: 100%;
            height: 80vh;
            border: none;
            display: block;
        }
    </style>

    <!-- Secure File Viewer Modal -->
    <div class="modal fade" id="secureFileModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <div class="modal-title"><i class="fas fa-user-shield me-2"></i> Secure File Viewer</div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body secure-container" oncontextmenu="return false;">
                    <div class="pdf-viewer-container bg-dark text-center overflow-auto" style="height: 75vh;">
                        <canvas id="pdf-canvas" class="mx-auto mh-100"></canvas>
                        <div id="pdf-loader" class="text-white mt-5">
                            <i class="fas fa-circle-notch fa-spin fa-3x mb-3"></i>
                            <p>Loading Secure Document...</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light d-flex justify-content-between">
                    <div class="pdf-controls">
                        <div class="d-none">
                            <button id="prev-page" class="btn btn-sm btn-outline-dark"><i class="fas fa-chevron-left"></i> Previous</button>
                            <span class="mx-2 text-dark">Page: <span id="page-num">0</span> / <span id="page-count">0</span></span>
                            <button id="next-page" class="btn btn-sm btn-outline-dark">Next <i class="fas fa-chevron-right"></i></button>

                            <div class="btn-group ms-3">
                                <button id="zoom-out" class="btn btn-sm btn-outline-dark"><i class="fas fa-search-minus"></i></button>
                                <button id="zoom-in" class="btn btn-sm btn-outline-dark"><i class="fas fa-search-plus"></i></button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <span class="text-muted small d-none d-md-inline me-3"><i class="fas fa-info-circle me-1"></i> Downloading and printing are disabled.</span>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Viewer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- PDF.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js" integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.entry.min.js" integrity="sha512-NJEHr6hlBM4MkVxJu+7FBk+pn7r+KD8rh+50DPglV/8T8I9ETqHJH0bO7NRPHaPszzYTxBWQztDfL6iJV6CQTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        // PDF.js configuration
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';

        let pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 1.5,
            canvas = document.getElementById('pdf-canvas'),
            ctx = canvas.getContext('2d');

        /**
         * Get page info from document, resize canvas accordingly, and render page.
         * @param num Page number.
         */
        function renderPage(num) {
            pageRendering = true;
            // Using promise to fetch the page
            pdfDoc.getPage(num).then(function(page) {
                const viewport = page.getViewport({scale: scale});
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Render PDF page into canvas context
                const renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                const renderTask = page.render(renderContext);

                // Wait for rendering to finish
                renderTask.promise.then(function() {
                    // Draw Watermark on Canvas
                    ctx.save();
                    ctx.font = `${Math.round(canvas.width / 20)}px Arial`;
                    ctx.fillStyle = 'rgba(150, 150, 150, 0.15)';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    // Center Watermark
                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate(-45 * Math.PI / 180);

                    const line1 = "PROPERTY OF UPEDIA";
                    const line2 = "USER ID: {{ Auth::id() }}";
                    const line3 = "{{ now()->format('Y-m-d H:i') }}";

                    ctx.fillText(line1, 0, -canvas.width / 20);
                    ctx.fillText(line2, 0, 0);
                    ctx.fillText(line3, 0, canvas.width / 20);

                    ctx.restore();

                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // New page rendering is pending
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });

            // Update page counters
            document.getElementById('page-num').textContent = num;
        }

        /**
         * If another page rendering in progress, waits until the rendering is
         * finised. Otherwise, executes rendering immediately.
         */
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }

        /**
         * Displays previous page.
         */
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
        document.getElementById('prev-page').addEventListener('click', onPrevPage);

        /**
         * Displays next page.
         */
        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
        document.getElementById('next-page').addEventListener('click', onNextPage);

        /**
         * Zoom functionalities
         */
        document.getElementById('zoom-in').addEventListener('click', function(e) {
            e.preventDefault();
            scale += 0.25;
            if (pdfDoc) queueRenderPage(pageNum);
        });
        document.getElementById('zoom-out').addEventListener('click', function(e) {
            e.preventDefault();
            if (scale > 0.5) {
                scale -= 0.25;
                if (pdfDoc) queueRenderPage(pageNum);
            }
        });

        document.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            if (!button) return;

            if (button.hasAttribute('data-session-id')) {
                const sessionId = button.getAttribute('data-session-id');
                document.getElementById('feedback_session_id').value = sessionId;
            }

            // Handle Secure Viewer
            if (button.classList.contains('view-secure')) {
                const url = button.getAttribute('data-url');

                // Show loader, hide canvas
                document.getElementById('pdf-loader').classList.remove('d-none');
                canvas.style.display = 'none';

                // Load PDF
                pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
                    pdfDoc = pdfDoc_;
                    document.getElementById('page-count').textContent = pdfDoc.numPages;

                    // Hide loader, show canvas
                    document.getElementById('pdf-loader').classList.add('d-none');
                    canvas.style.display = 'block';

                    // Initial/first page rendering
                    pageNum = 1;
                    renderPage(pageNum);
                }).catch(function(error) {
                    console.error('Error loading PDF:', error);
                    document.getElementById('pdf-loader').innerHTML = '<i class="fas fa-exclamation-triangle text-danger fa-3x"></i><p class="mt-3">Failed to load secure document.</p>';
                });
            }
        });

        // Clear PDF when modal closes
        document.getElementById('secureFileModal').addEventListener('hidden.bs.modal', function () {
            pdfDoc = null;
            pageNum = 1;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            canvas.style.display = 'none';
        });

        // Global Security Restrictions
        document.addEventListener('contextmenu', function(e) {
            if (document.getElementById('secureFileModal').classList.contains('show')) {
                e.preventDefault();
            }
        });

        document.addEventListener('keydown', function(e) {
            if (document.getElementById('secureFileModal').classList.contains('show')) {
                // Block Ctrl+S, Ctrl+P, Ctrl+U, F12
                if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'p' || e.key === 'u' || e.key === 'S' || e.key === 'P' || e.key === 'U')) {
                    e.preventDefault();
                    return false;
                }
                if (e.key === 'F12') {
                    e.preventDefault();
                    return false;
                }
            }
        });
    </script>
@endsection