@extends('public.layout.app')

@php
    // Helper: build embed URL for YouTube/Vimeo
    $embedUrl = function($video){
        $provider = strtolower($video->provider ?? '');
        $url = $video->url ?? '';

        if($provider === 'youtube'){
            // supports youtu.be/ID or youtube.com/watch?v=ID or /embed/ID
            preg_match('~(youtu\.be/|v=|/embed/)([A-Za-z0-9_-]{6,})~', $url, $m);
            $id = $m[2] ?? null;
            return $id ? "https://www.youtube.com/embed/{$id}" : null;
        }

        if($provider === 'vimeo'){
            preg_match('~vimeo\.com/(?:video/)?([0-9]+)~', $url, $m);
            $id = $m[1] ?? null;
            return $id ? "https://player.vimeo.com/video/{$id}" : null;
        }

        return null; // local will be handled by <video> tag
    };

    $embed = $embedUrl($video);
@endphp

@section('body')
<section class="section" style="padding-top:110px;">
    <div class="container">

        {{-- Breadcrumb --}}
        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
            <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm">
                <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
            </a>
            <a href="{{ route('front.videos.index') }}" class="btn btn-outline-light btn-sm">
                <i class="fa-solid fa-video me-1"></i> {{ __('front.videos') }}
            </a>
            <span class="badge bg-dark">{{ __('front.details') }}</span>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm" style="border-radius:18px; overflow:hidden;">
                    <div style="aspect-ratio:16/9; background:#0b1220;">
                        @if($video->provider === 'local' && $video->file_path)
                            <video controls style="width:100%;height:100%;object-fit:cover;">
                                <source src="{{ asset('storage/'.$video->file_path) }}" type="video/mp4">
                            </video>
                        @elseif($embed)
                            <iframe
                                src="{{ $embed }}"
                                title="{{ $video->title }}"
                                style="width:100%;height:100%;border:0;"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        @else
                            <div class="h-100 d-flex align-items-center justify-content-center text-white-50">
                                {{ __('front.video_source_not_available') }}
                            </div>
                        @endif
                    </div>

                    <div class="card-body">
                        <h3 class="fw-bold mb-2">{{ $video->title }}</h3>

                        <div class="text-muted small mb-3">
                            <span class="me-3">
                                <i class="fa-solid fa-circle-play me-1"></i> {{ strtoupper($video->provider ?? 'VIDEO') }}
                            </span>

                            <span class="me-3">
                                <i class="fa-regular fa-calendar me-1"></i> {{ optional($video->created_at)->format('M d, Y') }}
                            </span>


                        </div>

                        @if($video->description)
                            <div class="text-muted" style="line-height:1.9;">
                                {!! nl2br(e($video->description)) !!}
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm" style="border-radius:18px;">
                    <div class="card-body">
                        <div class="fw-semibold mb-2">
                            <i class="fa-solid fa-layer-group me-1"></i> {{ __('front.related_videos') }}
                        </div>


                        <div class="mt-3">
                            <a href="{{ route('front.videos.index') }}" class="btn btn-outline-primary btn-sm w-100">
                                <i class="fa-solid fa-arrow-left me-1"></i> {{ __('front.back_to_all_videos') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection