@extends('layout.layout')

@section('content')
@include('components.alert')

@php
    // Group teacher reports into categorized structure for hierarchy
    $categorized = [
        'initial' => $initialFeedbacks->groupBy('staff_schedule_id'),
        'mid'     => $midFeedbacks->groupBy('staff_schedule_id'),
        'final'   => $finalFeedbacks->groupBy('staff_schedule_id')
    ];
@endphp

<div class="container-fluid py-3">
    <div class="d-flex align-items-center gap-3 mb-5">
        <div class="page-icon">
            <iconify-icon icon="mdi:message-draw" width="32"></iconify-icon>
        </div>
        <div>
            <div class="fw-bold mb-0">My Feedbacks</div>
            <p class=" small mb-0">Track your progress and review teacher evaluations</p>
        </div>
    </div>

    {{-- ================= Primary Sections (Initial, Mid, Final) ================= --}}
    @foreach(['initial' => 'Initial Feedback', 'mid' => 'Mid Feedback', 'final' => 'Final Feedback'] as $typeKey => $title)
        <div class="mb-5">
            <div class="d-flex align-items-center gap-2 mb-3">
                <div class="status-dot-large {{ $typeKey }}"></div>
                <div class="mb-0 fw-bold ">{{ $title }}</div>
            </div>

            @php $bookings = $categorized[$typeKey]; @endphp

            @if($bookings->count() > 0)
                <div class="row">
                    <div class="col-12">
                        @foreach($bookings as $sid => $reports)
                            @php
                                $firstReport = $reports->first();
                                $schedule = $firstReport->staff_schedule;
                                $trackName = $schedule->track->name_en ?? $schedule->academyProduct->name_en;
                                $trackTypeName = $schedule->trackType->name ?? 'Course';
                                $levelName = $schedule->trackLevel->name_en ?? '-';
                                $uniqueBookingId = $typeKey . '-booking-' . $sid;
                            @endphp

                            {{-- Tier 1: Booking Card --}}
                            <div class="p-3 border-0 shadow-sm rounded mb-3 overflow-hidden" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $uniqueBookingId }}">
                                <div class="small mt-1 mb-1">
                                    {{ $trackName }} <span class="badge bg-primary">{{ $trackTypeName }}</span> <span class="mb-0 fw-bold ms-1">{{ $levelName }}</span>
                                </div>

                                <div class="collapse mt-3" id="collapse-{{ $uniqueBookingId }}">
                                    <div class="">
                                        {{-- Tier 2: Sessions --}}
                                        <div class="accordion accordion-flush rounded overflow-hidden border shadow-sm" id="accordion-{{ $uniqueBookingId }}">
                                            @foreach($reports as $report)
                                                @php
                                                    $session = $report->session;
                                                    $uniqueSessionId = $typeKey . '-report-' . $report->id;
                                                @endphp
                                                <div class="accordion-item border-bottom last-border-0">
                                                    <div class="accordion-header">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panel-{{ $uniqueSessionId }}">
                                                            <div class="d-flex align-items-center gap-3 w-100">
                                                                <div class="session-badge-alt">
                                                                    <span class="small">Session</span>
                                                                    <span class="fw-bold">{{ $session->session_number ?? '?' }}</span>
                                                                </div>
                                                                <div class="small ">
                                                                    {{ $session && $session->session_date ? \Carbon\Carbon::parse($session->session_date)->format('d M, Y') : 'Date N/A' }}
                                                                </div>
                                                            </div>
                                                        </button>
                                                    </div>
                                                    <div id="panel-{{ $uniqueSessionId }}" class="accordion-collapse collapse" data-bs-parent="#accordion-{{ $uniqueBookingId }}">
                                                        <div class="accordion-body p-3">
                                                            <div class="report-content-box p-3 rounded border shadow-sm">
                                                                <div class="d-flex justify-content-between align-items-start mb-3">
                                                                    <div class="fw-bold text-primary d-flex align-items-center gap-2">
                                                                        <iconify-icon icon="mdi:script-text-outline" width="20"></iconify-icon>
                                                                        {{ $title }} Details
                                                                    </div>
                                                                    <div class="d-flex">
                                                                        <a href="{{ URL::temporarySignedRoute('feedback.view', now()->addMinutes(60), ['id' => $report->id]) }}" class="btn btn-sm btn-primary d-flex align-items-center gap-2">
                                                                            <iconify-icon icon="mdi:eye-outline"></iconify-icon> View
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div class="row g-3">
                                                                    @if($report->need)
                                                                        <div class="col-md-6">
                                                                            <label class="extra-small  fw-bold text-uppercase">Student Needs</label>
                                                                            <p class="mb-0 small ">{{ $report->need }}</p>
                                                                        </div>
                                                                    @endif
                                                                    <div class="col-12">
                                                                        <label class="extra-small  fw-bold text-uppercase">Comment</label>
                                                                        <p class="mb-0 small ">{{ $report->comment ?? 'No written comment.' }}</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <div class="p-3 border-0 shadow-sm rounded py-3 text-center border-dashed">
                    <p class=" mb-0 small">No {{ $title }} history available.</p>
                </div>
            @endif
        </div>
    @endforeach

    <hr class="my-5">

    {{-- ================= My Session Feedback (Ratings) ================= --}}
    <div class="d-flex align-items-center gap-2 mb-3">
        <div class="status-dot-large session-rating"></div>
        <div class="mb-0 fw-bold ">My Session Feedback (Ratings)</div>
    </div>

    @php
        $groupedFeedback = $studentFeedback->groupBy([
            function ($fb) {
                return $fb->scheduledSession->staffScheduled->track?->name_en ?? $fb->scheduledSession->staffScheduled->academyProduct?->name_en;
            },
            function ($fb) {
                return $fb->scheduledSession->staffScheduled->track?->name_en ?? $fb->scheduledSession->staffScheduled->academyProduct?->name_en;
            },
            function ($fb) {
                return $fb->scheduledSession->staffScheduled->trackLevel?->name_en ?? '';
            },
        ]);
    @endphp

    @if ($studentFeedback->isEmpty())
        <div class="p-3 border-0 shadow-sm rounded py-3 text-center">
            <p class="mb-0 small">You haven't submitted any session ratings yet.</p>
        </div>
    @else
        <div class="accordion accordion-flush" id="categoryAccordion">
            @foreach ($groupedFeedback as $categoryName => $tracks)
                @php $catSlug = Str::slug($categoryName) . '_' . $loop->index; @endphp
                <div class="accordion-item border shadow-sm mb-3 rounded overflow-hidden">
                    <div class="accordion-header">
                        <button class="accordion-button fw-bold py-3" type="button" data-bs-toggle="collapse" data-bs-target="#cat_{{ $catSlug }}">
                            <div class="d-flex align-items-center gap-2">
                                <iconify-icon icon="mdi:folder-table-outline" class="text-primary" width="24"></iconify-icon>
                                {{ $categoryName }}
                            </div>
                        </button>
                    </div>
                    <div id="cat_{{ $catSlug }}" class="accordion-collapse collapse" data-bs-parent="#categoryAccordion">
                        <div class="accordion-body p-3">
                            <div class="accordion accordion-borderless" id="trackAccordion_{{ $catSlug }}">
                                @foreach ($tracks as $trackName => $levels)
                                    @php $trackSlug = Str::slug($trackName) . '_' . $loop->index; @endphp
                                    <div class="accordion-item border-0 mb-3 rounded overflow-hidden shadow-sm">
                                        <div class="accordion-header">
                                            <button class="accordion-button collapsed py-3 small fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#track_{{ $catSlug }}_{{ $trackSlug }}">
                                                <iconify-icon icon="mdi:layers-outline" class=" me-2"></iconify-icon>
                                                {{ $trackName }}
                                            </button>
                                        </div>
                                        <div id="track_{{ $catSlug }}_{{ $trackSlug }}" class="accordion-collapse collapse" data-bs-parent="#trackAccordion_{{ $catSlug }}">
                                            <div class="accordion-body p-3">
                                                @foreach ($levels as $levelName => $feedbacks)
                                                    <div class="level-group mb-3">
                                                        <div class="fw-bold border-bottom pb-2 text-primary small d-flex align-items-center gap-2 mb-3">
                                                            <iconify-icon icon="mdi:signal-variant" width="18"></iconify-icon>
                                                            {{ $levelName }}
                                                        </div>
                                                        <div class="row g-3">
                                                            @foreach ($feedbacks as $fb)
                                                                <div class="col-12">
                                                                    <div class="rating-entry p-3 border rounded shadow-none">
                                                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                                                            <div class="d-flex align-items-center gap-2">
                                                                                <span class="badge bg-primary rounded-pill px-2">S{{ $fb->scheduledSession->session_number }}</span>
                                                                                <span class="small ">{{ \Carbon\Carbon::parse($fb->scheduledSession->session_date)->format('d M, Y') }}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row g-2">
                                                                            @foreach([
                                                                                ['label' => 'Admin Response', 'rating' => $fb->admin_response_rating, 'icon' => 'mdi:account-tie'],
                                                                                ['label' => 'Quality', 'rating' => $fb->quality_rating, 'icon' => 'mdi:star-outline'],
                                                                                ['label' => 'Benefit', 'rating' => $fb->benefit_rating, 'icon' => 'mdi:lightning-bolt-outline'],
                                                                                ['label' => 'Error Correction', 'rating' => $fb->error_correction_rating, 'icon' => 'mdi:check-circle-outline'],
                                                                            ] as $item)
                                                                                <div class="col-sm-6 col-md-3">
                                                                                    <div class="p-2 border rounded-2 h-100">
                                                                                        <div class="extra-small  mb-1">{{ $item['label'] }}</div>
                                                                                        <div class="text-warning small d-flex gap-1">
                                                                                            @for ($i = 1; $i <= 5; $i++)
                                                                                                <iconify-icon icon="{{ $i <= $item['rating'] ? 'mdi:star' : 'mdi:star-outline' }}"></iconify-icon>
                                                                                            @endfor
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                            @if($fb->recommendation)
                                                                                <div class="col-12 mt-2">
                                                                                    <div class="recommendation-small p-3 rounded border">
                                                                                        <div class="fw-bold extra-small mb-1">Recommendation:</div>
                                                                                        <p class=" extra-small mb-0">{{ $fb->recommendation }}</p>
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<style>
    .status-dot-large {
        width: 12px; height: 12px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .status-dot-large.initial {
        background-color: #00c853;
        box-shadow: 0 0 10px rgba(0, 200, 83, 0.4);
    }
    .status-dot-large.mid {
        background-color: #ff9100;
        box-shadow: 0 0 10px rgba(255, 145, 0, 0.4);
    }
    .status-dot-large.final {
        background-color: #d50000;
        box-shadow: 0 0 10px rgba(213, 0, 0, 0.4);
    }
    .status-dot-large.session-rating {
        background-color: #0d6efd;
        box-shadow: 0 0 10px rgba(13, 110, 253, 0.4);
    }

    .booking-badge {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .booking-badge.initial {
        background-color: rgba(0, 200, 83, 0.1);
        color: #00c853;
    }
    .booking-badge.mid {
        background-color: rgba(255, 145, 0, 0.1);
        color: #ff9100;
    }
    .booking-badge.final {
        background-color: rgba(213, 0, 0, 0.1);
        color: #d50000;
    }

    .session-badge-alt {
        border: 1px solid #dee2e6;
        padding: 4px 12px;
        border-radius: 10px;
        text-align: center;
    }

    .extra-small {
        font-size: 0.7rem;
    }
    .border-dashed {
        border: 2px dashed #dee2e6 !important;
    }

    .accordion-button:not(.collapsed) {
        color: #0d6efd;
        box-shadow: none;
    }

    .last-border-0:last-child {
        border-bottom: 0 !important;
    }

    .rating-entry {
        transition: all 0.2s ease-in-out;
    }
    .rating-entry:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
        border-color: #0d6efd !important;
    }

    /* 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;
    }

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

    .pdf-viewer-container {
        scrollbar-width: thin;
        scrollbar-color: #444 #222;
    }

    .pdf-viewer-container::-webkit-scrollbar {
        width: 8px;
    }

    .pdf-viewer-container::-webkit-scrollbar-track {
        background: #222;
    }

    .pdf-viewer-container::-webkit-scrollbar-thumb {
        background: #444;
        border-radius: 4px;
    }
</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">
                <h5 class="modal-title"><i class="fas fa-user-shield me-2"></i> Secure Report Viewer</h5>
                <button type="button" class="btn-close " data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body secure-container" oncontextmenu="return false;">
                <div class="pdf-viewer-container text-center overflow-auto" style="height: 75vh;">
                    <canvas id="pdf-canvas" class="mx-auto mh-100"></canvas>
                    <div id="pdf-loader" class=" mt-5">
                        <i class="fas fa-circle-notch fa-spin fa-3x mb-3"></i>
                        <p>Loading Secure Report...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <div class="pdf-controls">
                    <div class="d-none">
                        <button id="prev-page" class="btn btn-sm"><i class="fas fa-chevron-left"></i> Previous</button>
                        <span class="mx-2">Page: <span id="page-num">0</span> / <span id="page-count">0</span></span>
                        <button id="next-page" class="btn btn-sm">Next <i class="fas fa-chevron-right"></i></button>

                        <div class="btn-group ms-3">
                            <button id="zoom-out" class="btn btn-sm "><i class="fas fa-search-minus"></i></button>
                            <button id="zoom-in" class="btn btn-sm "><i class="fas fa-search-plus"></i></button>
                        </div>
                    </div>
                </div>
                <div>
                    <span class="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"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.entry.min.js"></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');

    function renderPage(num) {
        pageRendering = true;
        pdfDoc.getPage(num).then(function(page) {
            const viewport = page.getViewport({scale: scale});
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            const renderTask = page.render(renderContext);

            renderTask.promise.then(function() {
                // Draw Watermark
                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';
                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) {
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });
        document.getElementById('page-num').textContent = num;
    }

    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

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

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

    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('click', function(event) {
        const button = event.target.closest('.view-secure-feedback');
        if (!button) return;

        const url = button.getAttribute('data-url');
        document.getElementById('pdf-loader').classList.remove('d-none');
        canvas.style.display = 'none';

        pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page-count').textContent = pdfDoc.numPages;
            document.getElementById('pdf-loader').classList.add('d-none');
            canvas.style.display = 'block';
            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 report.</p>';
        });
    });

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

    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')) {
            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