@extends('layouts.admin.master')

@section('title')
    View Gallery Video - {{ $galleryVideo->title ?? 'Video' }}
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="card-header custom-card-header p-0 border-0">
                            <h4 class="">View Gallery Video:</h4>
                            <div class="card-tools">
                                <a href="{{ route('admin.videos.index') }}" class="btn btn-info">
                                    <i class="fas fa-backward"></i> Back
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="gallery">
                                    <div class="gallery-item">
                                        @if($galleryVideo->file_path)
                                            <!-- Local video file -->
                                            <video controls class="w-full max-h-[400px] rounded-md shadow-md">
                                                <source src="{{ Storage::url($galleryVideo->file_path) }}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        @elseif($galleryVideo->youtube_link)
                                            @php
                                                preg_match('/(?:v=|\.be\/)([a-zA-Z0-9_-]+)/', $galleryVideo->youtube_link, $matches);
                                                $videoId = $matches[1] ?? null;
                                                $thumbnailUrl = $videoId ? "https://img.youtube.com/vi/{$videoId}/mqdefault.jpg" : null;
                                                $videoUrl = $videoId ? "https://www.youtube.com/watch?v={$videoId}" : null;
                                            @endphp

                                            @if($videoId)
                                                <a href="{{ $videoUrl }}" target="_blank"
                                                   class="group relative inline-block w-full max-w-[400px] mx-auto rounded-md overflow-hidden shadow-md">
                                                    <!-- Thumbnail -->
                                                    <img src="{{ $thumbnailUrl }}" alt="YouTube Thumbnail"
                                                         class="w-full h-auto">

                                                    <!-- Centered play button -->
                                                    <div style="position: absolute; top: 30%;left: 50%; transform: translate(-50%, -50%);">
                                                        <i class="fab fa-youtube text-red-600 text-8xl opacity-80 group-hover:opacity-100 transition-opacity"></i>

                                                    </div>
                                                </a>
                                            @else
                                                <p>No video available</p>
                                            @endif
                                        @else
                                            <p>No video available</p>
                                        @endif


                                        <div class="gallery-info">
                                            <p><strong>Title:</strong> {{ $galleryVideo->title ?? 'N/A' }}</p>
                                            <p><strong>Description:</strong> {{ $galleryVideo->description ?? 'N/A' }}</p>
                                            <p><strong>Order:</strong> {{ $galleryVideo->order }}</p>
                                            <p><strong>Status:</strong>
                                                <span class="{{ $galleryVideo->is_active ? 'text-success' : 'text-danger' }}">
                                                    {{ $galleryVideo->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                            </p>
                                            <p><strong>Created At:</strong> {{ $galleryVideo->created_at->format('Y-m-d H:i:s') }}</p>
                                            <p><strong>Updated At:</strong> {{ $galleryVideo->updated_at->format('Y-m-d H:i:s') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .gallery {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .gallery-item {
            max-width: 600px;
            width: 100%;
            box-sizing: border-box;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
        }
        .gallery-item video {
            width: 100%;
            height: auto;
            max-height: 400px; /* Cap height for consistency */
            object-fit: contain; /* Ensure full video is visible */
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .gallery-info {
            text-align: left;
        }
        .gallery-info p {
            margin: 8px 0;
            font-size: 16px;
        }
    </style>
@endpush