@extends('site.layouts.' . $pageTemplate)

@section('title', $category->name . ' | Inverted Line' ?? 'Inverted Line')

@push('styles')
    <style>
        .pagination2 .page-item {
            margin: 0 5px;
            padding: 2px;
        }

        .pagination2 .page-item .page-link {
            padding: 5px 20px;
            border-radius: 5px;
            background-color: #c2c1c1;
            color: #000;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .pagination2 .page-item .page-link:hover {
            background-color: #205f00;
            color: #fff;
        }

        .pagination2 .page-item.active .page-link {
            background-color: #205f00;
            color: #fff;
            padding: 5px 20px;
        }

        .pagination2 .page-item.disabled .page-link {
            background-color: #205f00;
            color: #ffffff;
            cursor: not-allowed;
            padding: 5px 20px;
        }

        iframe {
            width: 100%;
            height: 300px;
        }

        .row:not(.col-no-space)>[class*="col"] {
            padding-bottom: 5px !important;
        }
    </style>
@endpush

@php
    function getYoutubeEmbedUrl($url)
    {
        $youtube_id = '';
        $shortUrlRegex = '/youtu.be\/([a-zA-Z0-9_-]+)\??/i';
        $longUrlRegex = '/youtube.com\/((?:embed)|(?:watch))((?:\?v\=)|(?:\/))([a-zA-Z0-9_-]+)/i';
    
        if (preg_match($longUrlRegex, $url, $matches)) {
            $youtube_id = $matches[count($matches) - 1];
        }
    
        if (preg_match($shortUrlRegex, $url, $matches)) {
            $youtube_id = $matches[count($matches) - 1];
        }
        return 'https://www.youtube.com/embed/' . $youtube_id;
    }
@endphp

@section('contents')
    <div id="content" class="page-content-wrap">
        <div class="container wide">
            <div class="row row-size-2">
                <!-- Main content -->
                <main id="main" class="col-12">
                    <div class="content-element8">
                        <div class="row">
                            @forelse($posts as $post)
                                <div class="col-sm-12 col-md-4" style="padding:10px">
                                    <iframe src="{{ getYoutubeEmbedUrl($post->contents) }}" title="YouTube video player"
                                        frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                        allowfullscreen></iframe>
                                    <h1 style="margin:0; padding:5px 0px; font-size:20px!important">
                                        {{ $post->title }}
                                    </h1>
                                </div>
                            @empty
                                <div class="col-12" style="padding:10px; text-align:center; ">
                                    <h5>No Videos Found</h5>
                                </div>
                            @endforelse
                        </div>
                        <div class="row m-0" style="margin:90px 0px 10px 30px;">
                            @if ($posts->hasPages())
                                <div class="pagination2">
                                    {!! $posts->onEachSide(2)->links() !!}
                                </div>
                            @endif
                        </div>

                    </div>
                </main>
                <!-- Sidebar -->
            </div>
        </div>
    </div>
    <!-- - - - - - - - - - - - - End Content - - - - - - - - - - - - - - - -->
@endsection