@extends('rod.layouts.rod')

@section('content')

    <!-- Start Page Title Area -->
    <div class="page-title-area style-four overflow-hidden">
        <video id="video" style="z-index: -2; position: absolute; transform: scale(2.5); top: 0; left: 0; width:100%; height:100%" no-controls autoplay muted loop src="{{ asset('assets/images/header_backgrounds/2.mp4') }}"></video>

        <div class="container">
            <div class="page-title-content text-start">
                <h2>Teljes műsorok</h2>
                <ul>
                    <li><a href="{{ url('/') }}">Kezdőlap</a></li>
                    <li>Teljes műsorok</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Title Area -->

    <!-- Start Movie Area -->
    <div class="movie-area pt-100 pb-70">
        <div class="container">
            <div class="shorting-menu">
                <button class="filter" data-filter="all">ÖSSZES</button>

                @foreach($types as $type => $movies)
                    <button class="filter" data-filter=".{{ \Illuminate\Support\Str::slug($type) }}">{{ $type }}</button>
                @endforeach

            </div>

            <div class="shorting">
                <div class="row">

                    @foreach($types as $type => $movies)
                        @foreach($movies as $movie)
                            <div class="col-lg-4 col-md-6 mix {{ \Illuminate\Support\Str::slug($type) }}">
                                <div class="single-post-item startup-color without-box-shadow">
                                    <div class="post-image">
                                        {{--                                <a href="{{ route('video.show', $movie->slug) }}" class="d-block">--}}
                                        <a href="{{ $movie->video->url }}" class="d-block" target="_blank">
                                            <img src="{{ $movie->video->image }}" alt="image">
                                        </a>
                                    </div>
                                    <div class="post-content">
                                        <ul class="meta">
                                            <li><i class="far fa-calendar-alt"></i> {{ $movie->created_at->format('Y. m. d.') }}</li>
                                            @if($movie->user)
                                                <li><i class="far fa-user-circle"></i> {{ $movie->user->name }}</li>
                                            @endif
                                        </ul>
                                        <h3><a href="{{ $movie->video->url }}" target="_blank">{{ $movie->name }}</a></h3>
                                        <div class="mb-3">
                                            {!! $movie->description !!}
                                        </div>
                                        <a href="{{ $movie->video->url }}" class="link-btn" target="_blank">Megtekintés <i class="fas fa-chevron-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <!-- End Movie Area -->

@endsection