@extends('portal.layouts.master')
@section('title', $chapter->title . ' — Trade Academy')
@section('page-title', 'Trade Academy')

@section('extra-css')
.academy-page {
    height: calc(100vh - 56px - 3rem);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.academy-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    margin-bottom: .75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.academy-breadcrumb a { color: var(--accent); text-decoration: none; }
.academy-breadcrumb a:hover { text-decoration: underline; }

/* ── 3-column grid: lessons | video | summary ── */
.academy-layout {
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── LEFT: Lesson list ── */
.lessons-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lessons-panel-header {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: .8rem;
    flex-shrink: 0;
}
.lessons-panel-header .ch-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}
.lessons-panel-header .ch-nav select {
    flex: 1;
    font-size: .72rem;
    padding: .3rem .4rem;
    border-radius: 6px;
}
.lessons-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.lesson-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(43,49,57,.5);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none !important;
    color: inherit !important;
}
.lesson-item:hover { background: rgba(255,255,255,.03); }
.lesson-item.active {
    background: rgba(59,130,246,.1);
    border-right: 3px solid var(--accent);
}
.lesson-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 600;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.lesson-item.active .lesson-num {
    background: var(--accent);
    color: #fff;
}
.lesson-details { flex: 1; min-width: 0; }
.lesson-title {
    font-size: .74rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lesson-dur {
    font-size: .64rem;
    color: var(--text-muted);
    margin-top: .05rem;
}

/* ── CENTER: Video + title ── */
.academy-center {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.video-container {
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    flex-shrink: 0;
    aspect-ratio: 16/9;
}
.video-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: .5rem;
    background: rgba(0,0,0,.6);
    cursor: pointer;
    z-index: 2;
}
.video-placeholder i { font-size: 2.5rem; opacity: .6; }
.video-placeholder span { font-size: .85rem; }
.video-placeholder.hidden { display: none; }

.video-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
    opacity: .12;
}
.video-watermark-inner {
    position: absolute;
    inset: -50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    transform: rotate(-30deg);
}
.video-watermark-inner span {
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .05em;
    font-family: monospace;
}
.video-shield {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: default;
}

.video-info {
    padding-top: .6rem;
    flex-shrink: 0;
}
.video-info h2 {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: .2rem;
}
.video-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .7rem;
    color: var(--text-muted);
}
.video-meta i { margin-right: .2rem; }

/* ── RIGHT: Summary panel ── */
.summary-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.summary-panel-header {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: .8rem;
    color: var(--accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.summary-panel-header i { font-size: .72rem; }
.summary-panel-body {
    padding: .85rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.summary-panel-body p {
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.7;
    margin: 0;
}
.summary-empty {
    color: var(--text-muted);
    font-size: .8rem;
    text-align: center;
    padding: 2rem 1rem;
}
.summary-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    opacity: .4;
}

/* ── Mobile ── */
@media (max-width: 1200px) {
    .academy-layout {
        grid-template-columns: 220px 1fr 240px;
    }
}
@media (max-width: 992px) {
    .academy-page { height: auto; }
    .academy-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .video-container { max-height: none; }
    .lessons-panel { max-height: 300px; order: 2; }
    .academy-center { order: 1; }
    .summary-panel { max-height: 300px; order: 3; }
}
@endsection

@section('content')
<div class="academy-page">
    <div class="academy-breadcrumb">
        <a href="{{ route('portal.academy') }}">Trade Academy</a>
        <i class="fas fa-chevron-right" style="font-size:.6rem"></i>
        <span>{{ $chapter->title }}</span>
    </div>

    <div class="academy-layout">
        {{-- LEFT: Lesson list --}}
        <div class="lessons-panel">
            <div class="lessons-panel-header">
                <i class="{{ $chapter->icon }} me-1" style="color:var(--accent)"></i>
                {{ $chapter->title }}
                <div class="ch-nav">
                    <select id="chapterNav" class="form-select form-select-sm" onchange="if(this.value) window.location=this.value">
                        @foreach($allChapters as $ch)
                            <option value="{{ route('portal.academy.chapter', $ch->slug) }}" {{ $ch->id === $chapter->id ? 'selected' : '' }}>
                                {{ $ch->title }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="lessons-list">
                @foreach($lessons as $idx => $lesson)
                    <div
                        class="lesson-item"
                        data-lesson-id="{{ $lesson->id }}"
                        data-lesson-title="{{ $lesson->title }}"
                        data-lesson-summary="{{ $lesson->summary }}"
                        data-lesson-dur="{{ $lesson->formatted_duration }}"
                        onclick="loadLesson(this)"
                    >
                        <div class="lesson-num">{{ $idx + 1 }}</div>
                        <div class="lesson-details">
                            <div class="lesson-title">{{ $lesson->title }}</div>
                            <div class="lesson-dur"><i class="fas fa-clock me-1"></i>{{ $lesson->formatted_duration }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- CENTER: Video player + title --}}
        <div class="academy-center">
            <div class="video-container" id="videoContainer">
                <video
                    id="academyPlayer"
                    controlsList="nodownload noplaybackrate"
                    disablePictureInPicture
                    oncontextmenu="return false;"
                    playsinline
                    preload="none"
                >
                    Your browser does not support the video tag.
                </video>

                <div class="video-shield" id="videoShield"></div>

                <div class="video-watermark">
                    <div class="video-watermark-inner">
                        @for($i = 0; $i < 60; $i++)
                            <span>{{ auth('client')->user()->email }}</span>
                        @endfor
                    </div>
                </div>

                <div class="video-placeholder" id="videoPlaceholder">
                    <i class="fas fa-play-circle"></i>
                    <span>Select a lesson to start</span>
                </div>
            </div>

            <div class="video-info" id="videoInfo" style="display:none">
                <h2 id="lessonTitle"></h2>
                <div class="video-meta">
                    <span><i class="fas fa-clock"></i> <span id="lessonDuration"></span></span>
                    <span><i class="fas fa-book"></i> {{ $chapter->title }}</span>
                </div>
            </div>
        </div>

        {{-- RIGHT: Summary --}}
        <div class="summary-panel">
            <div class="summary-panel-header">
                <i class="fas fa-align-left"></i> Lesson Summary
            </div>
            <div class="summary-panel-body">
                <div class="summary-empty" id="summaryEmpty">
                    <i class="fas fa-book-open"></i>
                    Select a lesson to see its summary
                </div>
                <p id="lessonSummary" style="display:none"></p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
<script>
(function(){
    var player       = document.getElementById('academyPlayer');
    var placeholder  = document.getElementById('videoPlaceholder');
    var shield       = document.getElementById('videoShield');
    var infoBlock    = document.getElementById('videoInfo');
    var titleEl      = document.getElementById('lessonTitle');
    var durEl        = document.getElementById('lessonDuration');
    var summaryEl    = document.getElementById('lessonSummary');
    var summaryEmpty = document.getElementById('summaryEmpty');
    var currentItem  = null;
    var tokenBase    = @json(route('portal.academy.token', ['lesson' => '__ID__']));
    var csrfToken    = document.querySelector('meta[name="csrf-token"]').content;

    window.loadLesson = function(el) {
        var lessonId = el.getAttribute('data-lesson-id');
        var title    = el.getAttribute('data-lesson-title');
        var summary  = el.getAttribute('data-lesson-summary');
        var dur      = el.getAttribute('data-lesson-dur');

        if (currentItem) currentItem.classList.remove('active');
        el.classList.add('active');
        currentItem = el;

        titleEl.textContent   = title;
        durEl.textContent     = dur;
        infoBlock.style.display = 'block';

        if (summary) {
            summaryEl.textContent = summary;
            summaryEl.style.display = 'block';
            summaryEmpty.style.display = 'none';
        } else {
            summaryEl.style.display = 'none';
            summaryEmpty.style.display = 'block';
        }

        player.pause();
        fetchVideo(lessonId);
    };

    function fetchVideo(lessonId) {
        placeholder.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Loading video…</span>';
        placeholder.classList.remove('hidden');

        var url = tokenBase.replace('__ID__', lessonId);

        fetch(url, {
            credentials: 'same-origin',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
        })
        .then(function(r) {
            if (!r.ok) throw new Error('Token request failed');
            return r.json();
        })
        .then(function(data) {
            player.src = data.url;
            player.controls = true;
            placeholder.classList.add('hidden');
            player.play().catch(function(){});
        })
        .catch(function() {
            placeholder.innerHTML = '<i class="fas fa-exclamation-triangle"></i><span>Unable to load video. Please try again.</span>';
        });
    }

    player.addEventListener('ended', function() {
        if (!currentItem) return;
        var next = currentItem.nextElementSibling;
        if (next && next.classList.contains('lesson-item')) {
            next.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
            loadLesson(next);
        }
    });

    shield.addEventListener('click', function() {
        if (player.paused) player.play(); else player.pause();
    });

    player.addEventListener('contextmenu', function(e) { e.preventDefault(); });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'PrintScreen') { e.preventDefault(); }
    });

    @if($lessons->count())
        var first = document.querySelector('.lesson-item');
        if (first) loadLesson(first);
    @endif
})();
</script>
@endsection