@extends('admin.layouts.app')
@section('page_title', 'Videos')

@section('content')
    <div x-data="videoPage()" class="mx-auto max-w-7xl">

        {{-- Header --}}
        <div class="mb-4 flex items-start justify-between">
            <div>
                <h2 class="text-2xl font-semibold text-gray-900">Video Management</h2>
                <p class="mt-1 text-sm text-gray-600">Create, search, update and manage your YouTube & custom videos.</p>
            </div>
            <button @click="openAdd()"
                class="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-500">
                <i class="ri-video-add-line text-base"></i> Add Video
            </button>
        </div>

        {{-- Alerts --}}
        @if (session('success'))
            <div
                class="mb-4 flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
                <i class="ri-check-line text-lg"></i> <span>{{ session('success') }}</span>
            </div>
        @endif
        @if ($errors->any())
            <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                <p class="font-medium">Please fix the following errors:</p>
                <ul class="mt-2 list-disc ps-5 space-y-1">
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Toolbar (like Category) --}}
        <div class="mb-4 rounded-xl border border-gray-200 bg-white/70 p-4 backdrop-blur">
            <form method="GET" class="grid items-center gap-3 md:grid-cols-12">
                <div class="md:col-span-7">
                    <div class="relative">
                        <input type="text" name="q" value="{{ request('q') }}"
                            placeholder="Search videos by title…"
                            class="w-full rounded-lg border-gray-300 py-2.5 pe-3 ps-10 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500">
                        <i class="ri-search-line pointer-events-none absolute left-3 top-2.5 text-gray-400"></i>
                    </div>
                </div>

                <div class="md:col-span-2">
                    <select name="per_page"
                        class="w-full rounded-lg border-gray-300 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
                        onchange="this.form.submit()">
                        @foreach ([10, 25, 50, 100] as $n)
                            <option value="{{ $n }}" @selected(request('per_page', 10) == $n)>{{ $n }} per page
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="md:col-span-3 flex items-center justify-end gap-2">
                    <button
                        class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
                        <i class="ri-equalizer-line text-base"></i> Search
                    </button>
                    <a href="{{ route('admin.videos.index') }}"
                        class="inline-flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium text-violet-700 hover:bg-violet-50">
                        <i class="ri-refresh-line text-base"></i> Reset
                    </a>
                </div>
            </form>
        </div>

        {{-- Table --}}
        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
            <div class="border-b border-gray-200 bg-gray-50 px-4 py-3 text-sm font-semibold text-gray-700">
                Videos List
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm">
                    <thead class="bg-gray-50 text-xs uppercase tracking-wide text-gray-500">
                        <tr>
                            <th class="px-4 py-3 w-16">#</th>
                            <th class="px-4 py-3">Title</th>
                            <th class="px-4 py-3">Type</th>
                            <th class="px-4 py-3">Category</th>
                            <th class="px-4 py-3">Description</th>
                            <th class="px-4 py-3">Preview</th>
                            <th class="px-4 py-3 text-right w-56">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse ($videos as $idx => $video)
                            <tr class="hover:bg-gray-50/60">
                                <td class="px-4 py-3 text-gray-700 font-medium">
                                    {{ ($videos->currentPage() - 1) * $videos->perPage() + $idx + 1 }}
                                </td>

                                <td class="px-4 py-3">
                                    <div class="font-semibold text-gray-900">{{ $video->title }}</div>
                                    @if ($video->type === 'youtube' && $video->url)
                                        <a href="{{ $video->url }}" target="_blank"
                                            class="text-xs text-indigo-600 hover:underline">Open link</a>
                                    @endif
                                </td>

                                <td class="px-4 py-3">
                                    <span
                                        class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium
                                    {{ $video->type === 'youtube' ? 'bg-red-100 text-red-700' : 'bg-sky-100 text-sky-700' }}">
                                        <i
                                            class="{{ $video->type === 'youtube' ? 'ri-youtube-fill' : 'ri-upload-cloud-2-line' }}"></i>
                                        {{ ucfirst($video->type) }}
                                    </span>
                                </td>

                                <td class="px-4 py-3">
                                    <span
                                        class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700">
                                        {{ $video->category->name ?? '—' }}
                                    </span>
                                </td>

                                <td class="px-4 py-3 max-w-xs">
                                    {{ $video->description ? \Illuminate\Support\Str::limit($video->description, 110) : '—' }}
                                </td>

                                <td class="px-4 py-3">
                                    @if ($video->type === 'youtube')
                                        <button
                                            @click="openPreview({ 
            type: 'youtube', 
            youtube_url: '{{ $video->youtube_url }}' 
        })"
                                            class="text-indigo-600 hover:underline text-sm">Watch</button>
                                    @elseif ($video->type === 'custom' && $video->video_file)
                                        <button
                                            @click="openPreview({
            type: 'custom', 
            video_file: '{{ $video->video_file }}' 
        })"
                                            class="text-indigo-600 hover:underline text-sm">Watch</button>
                                    @else
                                        <span class="text-gray-500 text-sm">No Preview Available</span>
                                    @endif
                                </td>




                                <!-- Preview Modal -->
                                <div x-show="showPreview" x-cloak
                                    class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4">
                                    <div @click.away="showPreview = false"
                                        class="w-full max-w-lg rounded-xl bg-white shadow-lg">
                                        <div class="flex items-center justify-between rounded-t-xl bg-violet-600 px-5 py-3">
                                            <h3 class="text-base font-semibold text-white">Video Preview</h3>
                                            <button @click="showPreview = false" class="text-white/80 hover:text-white">
                                                <i class="ri-close-line text-lg"></i>
                                            </button>
                                        </div>


                                        <div class="p-5">
                                            <!-- YouTube video preview -->
                                            <template x-if="videoType === 'youtube'">
                                                <div class="w-full h-72">
                                                    <iframe :src="videoUrl" frameborder="0"
                                                        class="w-full h-full"></iframe>
                                                </div>
                                            </template>

                                            <!-- Custom video preview -->
                                            <template x-if="videoType === 'custom'">
                                                <div class="w-full h-72">
                                                    <video class="w-full h-full rounded-lg" controls>
                                                        <source :src="videoUrl" type="video/mp4">
                                                    </video>
                                                </div>
                                            </template>


                                        </div>



                                    </div>
                                </div>





                                <td class="px-4 py-3">
                                    <div class="flex items-center justify-end gap-2">
                                        <button
                                            @click="openEdit({
                                                id: {{ $video->id }},
                                                title: @js($video->title),
                                                type: @js($video->type),
                                                url: @js($video->url),
                                                description: @js($video->description),
                                                category_id: {{ $video->category_id ?? 'null' }}
                                            })"
                                            class="inline-flex items-center gap-1.5 rounded-md border border-violet-200 bg-violet-50 px-3 py-2 text-xs font-medium text-violet-700 hover:bg-violet-100">
                                            <i class="ri-edit-2-line text-sm"></i> Edit
                                        </button>

                                        <form action="{{ route('admin.videos.destroy', $video->id) }}" method="POST"
                                            onsubmit="return confirm('Delete this video?');" class="inline">
                                            @csrf @method('DELETE')
                                            <button
                                                class="inline-flex items-center gap-1.5 rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-medium text-rose-700 hover:bg-rose-100">
                                                <i class="ri-delete-bin-line text-sm"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-10 text-center text-sm text-gray-500">
                                    <i class="ri-video-off-line text-4xl text-gray-300 mb-2"></i><br> No videos found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            @if ($videos->hasPages())
                <div class="border-t border-gray-200 bg-white px-4 py-3">
                    <div class="flex items-center justify-between">
                        <p class="text-sm text-gray-600">
                            Showing {{ $videos->firstItem() }}–{{ $videos->lastItem() }} of {{ $videos->total() }}
                        </p>
                        <div class="text-sm">{{ $videos->withQueryString()->links() }}</div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Add Modal --}}
        <div x-show="showAdd" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4">
            <div @click.away="showAdd=false" class="w-full max-w-md rounded-xl bg-white shadow-lg">
                <div class="flex items-center justify-between rounded-t-xl bg-violet-600 px-5 py-3">
                    <h3 class="text-base font-semibold text-white">Add New Video</h3>
                    <button @click="showAdd=false" class="text-white/80 hover:text-white"><i
                            class="ri-close-line text-lg"></i></button>
                </div>

                <form action="{{ route('admin.videos.store') }}" method="POST" enctype="multipart/form-data"
                    class="p-5 space-y-4">
                    @csrf
                    <!-- Video Title -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Video Title</label>
                        <input type="text" name="title" required
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
                            placeholder="Enter video title">
                    </div>

                    <!-- Video Type Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Video Type</label>
                        <select name="type" x-model="type"
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500">
                            <option value="youtube">YouTube URL</option>
                            <option value="custom">Custom Upload</option>
                        </select>
                    </div>

                    <!-- YouTube URL Field (visible if 'youtube' is selected) -->
                    <template x-if="type === 'youtube'">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">YouTube URL</label>
                            <input type="url" name="youtube_url" placeholder="https://youtube.com/watch?v=..."
                                class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500">
                        </div>
                    </template>

                    <!-- Category Field -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Category</label>
                        <select name="category_id"
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
                            required>
                            <option value="">Select category…</option>
                            @foreach ($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Description Field -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea name="description" rows="3" placeholder="Short description about this video"
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500"></textarea>
                    </div>

                    <!-- File Upload Field (visible if 'custom' is selected) -->
                    <template x-if="type === 'custom'">
                        <div x-data="{ fileName: '' }">
                            <label for="fileAdd"
                                class="flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-violet-300 bg-violet-50/50 p-5 transition hover:bg-violet-50">
                                <div class="text-center">
                                    <i class="ri-upload-cloud-2-line text-3xl text-violet-500"></i>
                                    <p class="mt-2 text-sm font-medium text-violet-700">Click to upload</p>
                                    <p class="text-xs text-violet-500">MP4, MOV, AVI · up to 50MB</p>
                                </div>
                            </label>
                            <input id="fileAdd" name="video_file" type="file" accept="video/*" class="sr-only"
                                @change="fileName = $event.target.files[0]?.name || ''">
                            <template x-if="fileName">
                                <p class="mt-2 text-sm text-gray-700">
                                    Selected: <span class="font-medium text-gray-900" x-text="fileName"></span>
                                </p>
                            </template>
                        </div>
                    </template>

                    <!-- Submit and Cancel Buttons -->
                    <div class="flex justify-end gap-2">
                        <button type="button" @click="showAdd=false"
                            class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
                        <button type="submit"
                            class="rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-violet-500">Save
                        </button>
                    </div>
                </form>


            </div>
        </div>

        {{-- Edit Modal --}}
        <div x-show="showEdit" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4">
            <div @click.away="showEdit=false" class="w-full max-w-md rounded-xl bg-white shadow-lg">
                <div class="flex items-center justify-between rounded-t-xl bg-sky-600 px-5 py-3">
                    <h3 class="text-base font-semibold text-white">Edit Video</h3>
                    <button @click="showEdit=false" class="text-white/80 hover:text-white"><i
                            class="ri-close-line text-lg"></i></button>
                </div>

                <form :action="editAction" method="POST" enctype="multipart/form-data" class="p-5 space-y-4">
                    @csrf @method('PUT')

                    <!-- Video Title -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Video Title</label>
                        <input type="text" name="title" x-model="editTitle" required
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
                    </div>

                    <!-- Video Type Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Video Type</label>
                        <select name="type" x-model="editType"
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
                            <option value="youtube">YouTube URL</option>
                            <option value="custom">Custom Upload</option>
                        </select>
                    </div>

                    {{-- Category --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Category</label>
                        <select name="category_id" x-model="editCategory"
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500"
                            required>
                            <option value="">Select category…</option>
                            @foreach ($categories as $cat)
                                <option value="{{ $cat->id }}" :selected="editCategory == {{ $cat->id }}">
                                    {{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Description --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea name="description" rows="3" x-model="editDescription"
                            placeholder="Short description about this video"
                            class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500"></textarea>
                    </div>

                    <template x-if="editType === 'youtube'">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">YouTube URL</label>
                            <input type="url" name="youtube_url" x-model="editUrl"
                                class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
                        </div>
                    </template>

                    <template x-if="editType === 'custom'">
                        <div x-data="{ fileName: '' }">
                            <label for="fileEdit"
                                class="flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-sky-300 bg-sky-50/50 p-5 transition hover:bg-sky-50">
                                <div class="text-center">
                                    <i class="ri-upload-cloud-2-line text-3xl text-sky-600"></i>
                                    <p class="mt-2 text-sm font-medium text-sky-700">Click to upload (optional)</p>
                                    <p class="text-xs text-sky-600">MP4, MOV, AVI · up to 50MB</p>
                                </div>
                            </label>
                            <input id="fileEdit" name="video_file" type="file" accept="video/*" class="sr-only"
                                @change="fileName = $event.target.files[0]?.name || ''">
                            <template x-if="fileName">
                                <p class="mt-2 text-sm text-gray-700">
                                    Selected: <span class="font-medium text-gray-900" x-text="fileName"></span>
                                </p>
                            </template>
                        </div>
                    </template>

                    <div class="flex justify-end gap-2">
                        <button type="button" @click="showEdit=false"
                            class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">Cancel</button>
                        <button
                            class="inline-flex items-center gap-2 rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-sky-500">
                            <i class="ri-check-line text-sm"></i> Update
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>





@endsection

@push('scripts')
    <script>
        function videoPage() {
            return {
                showAdd: false,
                showEdit: false,
                showPreview: false, // Control preview modal visibility
                videoType: '', // Video type (youtube or custom)
                videoUrl: '', // Store the video URL or file path
                type: 'youtube', // Default video type to youtube
                editTitle: '',
                editType: 'youtube', // Default type set to youtube
                editUrl: '',
                editDescription: '',
                editCategory: '',
                editAction: '',

                // Open the add video modal
                openAdd() {
                    this.showAdd = true;
                    this.type = 'youtube'; // Reset to youtube by default
                },

                // Open the edit video modal and populate the fields with current video data
                openEdit(video) {
                    this.editTitle = video.title;
                    this.editType = video.type;
                    this.editUrl = video.url || '';
                    this.editDescription = video.description || '';
                    this.editCategory = video.category_id || '';
                    this.editAction = "{{ route('admin.videos.update', ':id') }}".replace(':id', video.id);
                    this.showEdit = true; // Show the edit modal
                },
                openPreview(video) {
                    console.log("Opening preview modal for video:", video);

                    this.videoType = video.type;

                    if (video.type === 'youtube') {
                        const videoId = video.youtube_url.split('v=')[1].split('&')[0];
                        this.videoUrl = `https://www.youtube.com/embed/${videoId}`;
                    } else if (video.type === 'custom') {
                        // Here, you are passing the correct URL format for custom videos
                        this.videoUrl = `http://127.0.0.1:8000/storage/${video.video_file}`;
                    }

                    console.log("Video URL for preview:", this.videoUrl); // Debugging the video URL
                    this.showPreview = true;
                }



            };
        }
    </script>
@endpush