@extends('layouts.marketing')

@section('title', 'Video Tutorials — Inventino Help Center')
@section('canonical', route('help.video-tutorials'))
@section('description', 'Watch step-by-step video tutorials covering every feature of Inventino — from setup and POS to reports and multi-branch management.')

@php
$catConfig = [
    'start'     => ['label' => 'Getting Started', 'badge' => 'bg-blue-500/80',   'gradient' => 'from-blue-900/40 to-slate-900/60'],
    'pos'       => ['label' => 'Point of Sale',   'badge' => 'bg-green-500/80',  'gradient' => 'from-cyan-900/40 to-slate-900/60'],
    'inventory' => ['label' => 'Inventory',       'badge' => 'bg-violet-500/80', 'gradient' => 'from-rose-900/40 to-slate-900/60'],
    'reports'   => ['label' => 'Reports',         'badge' => 'bg-cyan-500/80',   'gradient' => 'from-teal-900/40 to-slate-900/60'],
    'customers' => ['label' => 'Customers',       'badge' => 'bg-pink-500/80',   'gradient' => 'from-pink-900/40 to-slate-900/60'],
    'settings'  => ['label' => 'Settings',        'badge' => 'bg-amber-500/80',  'gradient' => 'from-orange-900/40 to-slate-900/60'],
];
@endphp

@section('content')

<!-- ─── HERO ─────────────────────────────────────────────────────────── -->
<section class="pt-32 pb-12 hero-bg">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="inline-flex items-center gap-2 badge-green text-xs font-semibold px-3 py-1.5 rounded-full mb-5">Help Center</div>
        <h1 class="text-4xl md:text-5xl font-black tracking-tight mb-4">Video Tutorials</h1>
        <p class="text-slate-400 text-lg max-w-2xl">Watch hands-on walkthroughs for every part of Inventino. New videos added each month.</p>
        <!-- Search -->
        <div class="mt-8 max-w-lg">
            <div class="relative">
                <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/></svg>
                <input type="text" id="vid-search" placeholder="Search tutorials…" class="w-full pl-11 pr-4 py-3 bg-slate-800/60 border border-slate-700 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 transition-colors">
            </div>
        </div>
    </div>
</section>

<!-- ─── FILTER TABS + VIDEO GRID ─────────────────────────────────────── -->
<section class="py-14">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="flex flex-wrap gap-2 mb-10" id="vid-filters">
            <button onclick="filterVids('all')"       class="vid-tab active  text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-white transition-all"    data-cat="all">All</button>
            <button onclick="filterVids('start')"     class="vid-tab        text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-slate-400 hover:text-white transition-all" data-cat="start">Getting Started</button>
            <button onclick="filterVids('pos')"       class="vid-tab        text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-slate-400 hover:text-white transition-all" data-cat="pos">Point of Sale</button>
            <button onclick="filterVids('inventory')" class="vid-tab        text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-slate-400 hover:text-white transition-all" data-cat="inventory">Inventory</button>
            <button onclick="filterVids('reports')"   class="vid-tab        text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-slate-400 hover:text-white transition-all" data-cat="reports">Reports</button>
            <button onclick="filterVids('customers')" class="vid-tab        text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-slate-400 hover:text-white transition-all" data-cat="customers">Customers</button>
            <button onclick="filterVids('settings')"  class="vid-tab        text-xs font-semibold px-3 py-1.5 rounded-full border border-slate-700 text-slate-400 hover:text-white transition-all" data-cat="settings">Settings</button>
        </div>

        @if($videos->isEmpty())
        <!-- Empty state -->
        <div class="py-20 text-center">
            <div class="w-16 h-16 rounded-2xl bg-slate-800 flex items-center justify-center mx-auto mb-5">
                <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.723v6.554a1 1 0 01-1.447.894L15 14M4 6h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"/>
                </svg>
            </div>
            <h3 class="text-white font-semibold text-lg mb-2">Video tutorials coming soon</h3>
            <p class="text-slate-400 text-sm max-w-md mx-auto">We're currently preparing hands-on walkthroughs for every feature. Check back soon or contact us if you need immediate help.</p>
            <a href="/contact" class="inline-flex items-center gap-2 mt-6 text-sm text-blue-400 hover:text-blue-300 transition-colors font-medium">
                Contact support
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
            </a>
        </div>
        @else
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5" id="vid-grid">
            @foreach($videos as $video)
            @php
                $cat      = $video->category ?? '';
                $cfg      = $catConfig[$cat] ?? ['label' => ucfirst($cat), 'badge' => 'bg-slate-500/80', 'gradient' => 'from-slate-800/40 to-slate-900/60'];
                $thumb    = $video->auto_thumbnail;
                $embedUrl = $video->embed_url;
            @endphp
            <div
                class="vid-card feature-card rounded-2xl overflow-hidden group cursor-pointer"
                data-cat="{{ $cat }}"
                data-title="{{ strtolower($video->title) }}"
                onclick="openVideoModal('{{ addslashes($embedUrl) }}', '{{ addslashes($video->title) }}')"
            >
                <div class="relative bg-slate-800 aspect-video flex items-center justify-center">
                    @if($thumb)
                    <img src="{{ $thumb }}" alt="{{ $video->title }}" class="absolute inset-0 w-full h-full object-cover"/>
                    @endif
                    <div class="absolute inset-0 bg-gradient-to-br {{ $cfg['gradient'] }} @if($thumb) opacity-60 @endif"></div>
                    <div class="relative w-14 h-14 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                        <svg class="w-6 h-6 text-white ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    </div>
                    @if($video->duration)
                    <div class="absolute bottom-2 right-2 text-xs text-white bg-black/60 px-1.5 py-0.5 rounded">{{ $video->duration }}</div>
                    @endif
                    @if($cat)
                    <div class="absolute top-2 left-2">
                        <span class="text-xs font-semibold {{ $cfg['badge'] }} text-white px-2 py-0.5 rounded-full">{{ $cfg['label'] }}</span>
                    </div>
                    @endif
                </div>
                <div class="p-4">
                    <h3 class="text-sm font-bold text-white mb-1 leading-snug">{{ $video->title }}</h3>
                    @if($video->description)
                    <p class="text-xs text-slate-400">{{ $video->description }}</p>
                    @endif
                </div>
            </div>
            @endforeach
        </div><!-- /vid-grid -->
        @endif

        <!-- Request a tutorial CTA -->
        <div class="mt-12 feature-card rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
            <div>
                <p class="text-white font-semibold mb-1">Can't find a tutorial?</p>
                <p class="text-sm text-slate-400">Request a topic and our team will prioritise it for the next release.</p>
            </div>
            <a href="/contact" class="flex-shrink-0 inline-flex items-center gap-2 btn-primary text-white text-sm font-semibold px-5 py-2.5 rounded-lg">
                Request a Tutorial
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
            </a>
        </div>

    </div>
</section>

<!-- Video lightbox modal -->
<div id="vid-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4" onclick="closeVideoModal()">
    <div class="relative w-full max-w-3xl" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-3">
            <p id="vid-modal-title" class="text-white font-semibold text-sm truncate pr-4"></p>
            <button onclick="closeVideoModal()" class="flex-shrink-0 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="relative aspect-video bg-black rounded-xl overflow-hidden">
            <iframe id="vid-frame" src="" class="absolute inset-0 w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
    </div>
</div>

<!-- More help resources -->
<section class="py-10 border-t border-slate-800">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <h3 class="text-sm font-semibold text-slate-400 mb-4">More Help Resources</h3>
        <div class="grid sm:grid-cols-3 gap-3">
            <a href="/help/troubleshooting" class="feature-card rounded-xl p-4 text-sm text-slate-400 hover:text-white hover:border-blue-500/30 transition-all">Troubleshooting →</a>
            <a href="/help/faqs"            class="feature-card rounded-xl p-4 text-sm text-slate-400 hover:text-white hover:border-blue-500/30 transition-all">FAQs →</a>
            <a href="/help/user-guides"     class="feature-card rounded-xl p-4 text-sm text-slate-400 hover:text-white hover:border-blue-500/30 transition-all">User Guides →</a>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
    .vid-tab.active { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.4); color: #93c5fd; }
    .vid-card .aspect-video { aspect-ratio: 16/9; }
</style>
@endpush

@push('scripts')
<script>
    function filterVids(cat) {
        document.querySelectorAll('.vid-tab').forEach(t => {
            const isActive = t.dataset.cat === cat;
            t.classList.toggle('active', isActive);
            t.classList.toggle('text-white', isActive);
            t.classList.toggle('text-slate-400', !isActive);
        });
        document.querySelectorAll('.vid-card').forEach(c => {
            c.style.display = (cat === 'all' || c.dataset.cat === cat) ? '' : 'none';
        });
    }

    const searchEl = document.getElementById('vid-search');
    if (searchEl) {
        searchEl.addEventListener('input', function () {
            const q = this.value.toLowerCase();
            if (q) {
                document.querySelectorAll('.vid-tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.vid-card').forEach(c => {
                    c.style.display = c.dataset.title.toLowerCase().includes(q) || c.textContent.toLowerCase().includes(q) ? '' : 'none';
                });
            } else {
                filterVids('all');
            }
        });
    }

    function openVideoModal(embedUrl, title) {
        document.getElementById('vid-frame').src = embedUrl + '&autoplay=1';
        document.getElementById('vid-modal-title').textContent = title;
        document.getElementById('vid-modal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeVideoModal() {
        document.getElementById('vid-frame').src = '';
        document.getElementById('vid-modal').classList.add('hidden');
        document.body.style.overflow = '';
    }

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeVideoModal();
    });
</script>
@endpush