@extends('layouts.admin')

@section('title', 'Videos')

@push('styles')
<style>
    .videos-shell {
        min-height: 100vh;
        background: #f1f5f9;
    }

    .videos-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: 18rem;
        overflow-y: auto;
        border-right: 1px solid rgba(2, 43, 16, 0.12);
        background: #022b10;
        color: #ffffff;
    }

    .videos-main {
        min-height: 100vh;
    }

    @media (max-width: 1279px) {
        .videos-sidebar {
            display: none;
        }
    }

    @media (min-width: 1280px) {
        .videos-main {
            margin-left: 18rem;
        }
    }
</style>
@endpush

@section('content')
@php
    $videos = $videos ?? [];
    $publishedCount = collect($videos)->where('status', 'Published')->count();
    $draftCount = collect($videos)->where('status', 'Draft')->count();
@endphp

<div class="videos-shell">
    <div class="admin-sidebar-backdrop" data-admin-backdrop></div>

    <aside class="videos-sidebar" data-admin-sidebar>
        <div class="border-b border-white/10 bg-primary-900 px-6 py-5">
            <a href="{{ url('/admin/dashboard') }}" class="flex items-center gap-3">
                <span class="flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-gold-300">
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2 2 7l10 5 10-5-10-5ZM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </span>
                <span>
                    <span class="block text-sm font-extrabold leading-tight">CROSBY FARM</span>
                    <span class="text-xs text-primary-200">Videos</span>
                </span>
            </a>
        </div>
        <button type="button" class="admin-menu-toggle admin-sidebar-close" aria-label="Close admin menu" aria-expanded="false" data-admin-menu-toggle>
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/>
            </svg>
        </button>

        <nav class="space-y-2 px-4 py-5">
            <a href="{{ url('/admin/dashboard') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>Dashboard</span></a>
            <a href="{{ url('/admin/users') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>User Approval</span></a>
            <a href="{{ url('/admin/approvals') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>Approvals</span></a>
            <a href="{{ url('/admin/withdrawals') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>Withdrawals</span></a>
            <a href="{{ url('/admin/videos') }}" class="flex items-center gap-3 rounded-lg bg-white/15 px-4 py-3 text-sm font-bold text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>Videos</span></a>
            <a href="{{ url('/admin/contacts') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>Contact Messages</span></a>
            <a href="{{ url('/admin/admins') }}" class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-bold text-primary-100 transition hover:bg-white/10 hover:text-white"><span class="h-2.5 w-2.5 rounded-full bg-gold-300"></span><span>Admins & Roles</span></a>
            <a href="{{ url('/admin/logout') }}" class="mt-4 flex items-center justify-center rounded-lg bg-gold-400 px-4 py-3 text-sm font-extrabold text-primary-900 transition hover:bg-gold-300">Logout</a>
        </nav>
    </aside>

    <main class="videos-main" data-admin-main>
        <header class="border-b border-slate-200 bg-white px-4 py-5 sm:px-6">
            <div class="flex items-start gap-3">
                <button type="button" class="admin-menu-toggle" aria-label="Open admin menu" aria-expanded="false" data-admin-menu-toggle>
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16"/>
                    </svg>
                </button>
                <div>
                    <p class="text-sm font-bold uppercase tracking-wide text-primary-600">Administration</p>
                    <h1 class="text-2xl font-extrabold text-slate-900 md:text-3xl">Upload Videos</h1>
                    <p class="mt-1 text-sm font-semibold text-slate-500">Upload and publish videos for the public Our Videos page.</p>
                </div>
            </div>
        </header>

        <section class="px-4 py-6 sm:px-6">
            @if (session('status'))
                <div class="mb-6 rounded-lg border border-primary-200 bg-primary-50 px-4 py-3 text-sm font-bold text-primary-700">
                    {{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-bold text-red-700">
                    Please check the video upload details and try again.
                </div>
            @endif

            <div class="grid gap-6 xl:grid-cols-[0.8fr_1.2fr]">
                <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <h2 class="text-xl font-extrabold text-primary-700">Add New Video</h2>
                    <form action="{{ url('/admin/videos') }}" method="POST" enctype="multipart/form-data" class="mt-5 space-y-5">
                        @csrf
                        <div>
                            <label for="title" class="mb-2 block text-sm font-bold text-slate-700">Video Title</label>
                            <input id="title" name="title" value="{{ old('title') }}" required class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">
                            @error('title')<p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="description" class="mb-2 block text-sm font-bold text-slate-700">Description</label>
                            <textarea id="description" name="description" rows="4" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">{{ old('description') }}</textarea>
                            @error('description')<p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="video" class="mb-2 block text-sm font-bold text-slate-700">Video File</label>
                            <input id="video" name="video" type="file" accept="video/mp4,video/webm,video/quicktime,video/ogg" required class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm">
                            <p class="mt-2 text-xs font-semibold text-slate-500">Accepted: MP4, WebM, MOV, OGG. Max 200MB.</p>
                            @error('video')<p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="status" class="mb-2 block text-sm font-bold text-slate-700">Publish Status</label>
                            <select id="status" name="status" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-bold text-slate-700">
                                <option value="Published" @selected(old('status', 'Published') === 'Published')>Published</option>
                                <option value="Draft" @selected(old('status') === 'Draft')>Draft</option>
                            </select>
                        </div>
                        <button class="w-full rounded-lg bg-primary-600 px-5 py-3 text-sm font-extrabold text-white transition hover:bg-primary-700">Upload Video</button>
                    </form>
                </section>

                <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <h2 class="text-xl font-extrabold text-primary-700">Uploaded Videos</h2>
                            <p class="mt-1 text-sm font-semibold text-slate-500">{{ $publishedCount }} published, {{ $draftCount }} draft.</p>
                        </div>
                        <a href="{{ url('/our-videos') }}" class="text-sm font-extrabold text-primary-600 hover:text-primary-700">Open public page</a>
                    </div>

                    <div class="mt-5 space-y-4">
                        @forelse ($videos as $video)
                            <article class="rounded-lg border border-slate-200 p-4">
                                <div class="grid gap-4 lg:grid-cols-[14rem_1fr]">
                                    <div class="overflow-hidden rounded-lg bg-black">
                                        <video class="h-36 w-full object-contain" controls preload="metadata">
                                            <source src="{{ $video['url'] }}" type="video/mp4">
                                        </video>
                                    </div>
                                    <div>
                                        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                                            <div>
                                                <h3 class="text-lg font-extrabold text-slate-900">{{ $video['title'] ?? 'Farm Video' }}</h3>
                                                <p class="mt-1 text-sm font-semibold leading-6 text-slate-500">{{ $video['description'] ?? '' }}</p>
                                                <p class="mt-2 text-xs font-bold uppercase text-slate-400">{{ $video['uploaded_at'] ?? '-' }} by {{ $video['uploaded_by'] ?? 'admin' }}</p>
                                            </div>
                                            <span class="w-fit rounded-full px-3 py-1 text-xs font-extrabold {{ ($video['status'] ?? 'Published') === 'Published' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-700' }}">{{ $video['status'] ?? 'Published' }}</span>
                                        </div>
                                        <form action="{{ url('/admin/videos/' . ($video['video_id'] ?? '') . '/status') }}" method="POST" class="mt-4 flex flex-col gap-2 sm:flex-row">
                                            @csrf
                                            <select name="status" class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs font-bold text-slate-700">
                                                <option value="Published" @selected(($video['status'] ?? 'Published') === 'Published')>Published</option>
                                                <option value="Draft" @selected(($video['status'] ?? 'Published') === 'Draft')>Draft</option>
                                            </select>
                                            <button class="rounded-lg bg-primary-600 px-4 py-2 text-xs font-extrabold text-white">Update Status</button>
                                        </form>
                                    </div>
                                </div>
                            </article>
                        @empty
                            <div class="rounded-lg bg-slate-50 p-6 text-center text-sm font-bold text-slate-500">No video has been uploaded yet.</div>
                        @endforelse
                    </div>
                </section>
            </div>
        </section>
    </main>
</div>
@endsection