<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-burnt leading-tight">
            {{ __('Dumbo Filmabendplaner') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 container">
            <div class="">
                <a href="/film/{{$feature->id}}">
                <div class="p-6 sm:rounded-lg h-96 relative" style="
                    background: linear-gradient(to bottom right, #000000, #000000be, #00000000),
                     url('{{ $image->getUrl($ftmdb->getBackdropImage(), 'original') }}') center center/cover;">

                     <img src="{{ $image->getUrl($ftmdb->getPosterImage(), 'w342') }}" alt="{{ $ftmdb->getTitle() }} Poster" class="rounded-lg mx-auto mb-6 sm:float-right sm:mx-0 sm:ml-6 shadow-md shadow-burnt h-80 hidden sm:block">

                     <span class="text-crayola">{{ $ftype === 'next' ? 'Nächster Film' : 'Zuletzt gesehen' }}</span>
                    <h3 class="text-burnt drop-shadow-[0_4px_3px_#684f43] text-4xl">{{ $feature->name }}</h3>
                    <div class="text-crayola mt-4">
                        {{$ftmdb->getTagline()}}
                    </div>
                    <div class="flex flex-wrap space-x-1 text-crayola mt-4">
                        @foreach ($ftmdb->getGenres() as $genre)
                            <div class="bg-coal rounded-lg p-1">{{ $genre->getName() }}</div>
                        @endforeach
                    </div>
                    <div class="text-crayola max-w-md text-justify mt-4 hidden md:block">
                        {{ substr($ftmdb->getOverview(), 0, 200) }}...
                    </div>
                    <div class="text-yelmax">{{ $ftype == 'next' ? 'Klick für Details' : 'Jetzt bewerten!'}}</div>
                    <div class="absolute bottom-2 flex text-crayola">
                        <img src="/avatar/{{$feature->suggester->getAvatar() }}" class="max-h-7 rounded-lg mr-2"> {{ $feature->suggester->name }}
                        @if ($ftype === 'last')
                            &middot; Gesehen am {{ \Carbon\Carbon::parse($feature->seen)->format('d.m.Y') }}
                        @endif
                    </div>
                </div>
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                <div class="">
                    <div class="sm:rounded-lg bg-coal text-crayola text-lg p-4">
                        Beliebte Vorschläge
                        <a class="text-sm text-yelmax" href="/vorschlaege">Mehr</a>
                    </div>

                    <div class="grid grid-cols-1 gap-2 mt-2 " x-data="{active: 1}">
                        @foreach ($popular as $film)
                        <a href="/film/{{ $film->id }}"  :class="active == {{ $loop->iteration }} ? 'block' : 'hidden'" x-transition>
                        <div class="rounded-lg p-2 h-40 bg-black ">
                            <img src="{{ $image->getUrl($film->poster, 'w92') }}" alt="{{ $film->name }}" class="rounded-lg float-left mr-2 shadow-md shadow-burnt">
                            <div class="text-burnt text-xl">{{ $film->name }}</div>
                            <div class="text-crayola flex text-xl">
                                @php
                                    $stimme = is_null(auth()->user()) ? null : $film->votes()->where('user', auth()->user()->id)->first();
                                @endphp
                                @if (!is_null($stimme) && $stimme->vote == 0)
                                <svg title="Deine Stimme: Nicht dafür" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-700 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
                                    <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
                                </svg> &middot;
                                @elseif (!is_null($stimme) && $stimme->vote == 1)
                                <svg title="Deine Stimme: Dafür" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-900 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg> &middot;
                                @elseif(auth()->user() !== null)
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-field sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                </svg> &middot;
                                @endif
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-burnt sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
                                </svg>
                            {{ $film->activeVotes()->where('vote', 1)->count() }}<span class="text-field">/{{ $film->activeVotes()->count() }}</span>
                            </div>
                            <div class="text-xs text-field sm:hidden"> {{ \Carbon\Carbon::parse($film->suggested)->format('d.m.Y') }} &middot; {{ $film->suggester->name }}</div>
                            <div class="text-field hidden sm:flex my-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                  </svg>
                                  {{ \Carbon\Carbon::parse($film->suggested)->format('d.m.Y') }}
                            </div>
                            <div class="text-field hidden sm:flex my-2"><img src="/avatar/{{$film->suggester->getAvatar() }}" class="max-h-7 rounded-lg mr-2"> {{ $film->suggester->name }}</div>
                        </div></a>
                        @endforeach
                        <div class="flex justify-center p-2">
                            @foreach ($popular as $film)
                                <img @click="active = {{$loop->iteration}}" :class="active == {{$loop->iteration}} && 'shadow-md shadow-burnt'" src="{{ $image->getUrl($film->poster, 'w92') }}" alt="{{ $film->name }}" class="rounded-lg float-left mr-2 cursor-pointer h-20">
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="">
                    <div class="sm:rounded-lg bg-coal text-crayola text-lg p-4">Neue Vorschläge <a class="text-sm text-yelmax" href="/vorschlaege/neu">Mehr</a></div>

                    <div class="grid grid-cols-1 gap-2 mt-2 " x-data="{active: 1}">
                        @foreach ($new as $film)
                        <a href="/film/{{ $film->id }}"  :class="active == {{ $loop->iteration }} ? 'block' : 'hidden'" x-transition>
                        <div class="rounded-lg p-2 h-40 bg-black ">
                            <img src="{{ $image->getUrl($film->poster, 'w92') }}" alt="{{ $film->name }}" class="rounded-lg float-left mr-2 shadow-md shadow-burnt">
                            <div class="text-burnt text-xl">{{ $film->name }}</div>
                            <div class="text-crayola flex text-xl">
                                @php
                                    $stimme = is_null(auth()->user()) ? null : $film->votes()->where('user', auth()->user()->id)->first();
                                @endphp
                                @if (!is_null($stimme) && $stimme->vote == 0)
                                <svg title="Deine Stimme: Nicht dafür" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-700 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
                                    <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
                                </svg> &middot;
                                @elseif (!is_null($stimme) && $stimme->vote == 1)
                                <svg title="Deine Stimme: Dafür" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-900 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg> &middot;
                                @elseif(auth()->user() !== null)
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-field sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                </svg> &middot;
                                @endif
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-burnt sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
                                </svg>
                            {{ $film->activeVotes()->where('vote', 1)->count() }}<span class="text-field">/{{ $film->activeVotes()->count() }}</span>
                            </div>
                            <div class="text-field flex my-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                  </svg>
                                  {{ \Carbon\Carbon::parse($film->suggested)->format('d.m.Y') }}
                            </div>
                            <div class="text-field flex my-2"><img src="/avatar/{{$film->suggester->getAvatar() }}" class="max-h-7 rounded-lg mr-2"> {{ $film->suggester->name }}</div>
                        </div></a>
                        @endforeach
                        <div class="flex justify-center p-2">
                            @foreach ($new as $film)
                                <img @click="active = {{$loop->iteration}}" :class="active == {{$loop->iteration}} && 'shadow-md shadow-burnt'" src="{{ $image->getUrl($film->poster, 'w92') }}" alt="{{ $film->name }}" class="rounded-lg float-left mr-2 cursor-pointer h-20">
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="">
                    <div class="sm:rounded-lg bg-coal text-crayola text-lg p-4">Gesehene Filme <a class="text-sm text-yelmax" href="/gesehen">Archiv</a> &middot; <a class="text-sm text-yelmax" href="/abgelehnt">Abgelehnt</a></div>


                    <div class="grid grid-cols-1 gap-2 mt-2 " x-data="{active: 1}">
                        @foreach ($seen as $film)
                        <a href="/film/{{ $film->id }}"  :class="active == {{ $loop->iteration }} ? 'block' : 'hidden'" x-transition>
                        <div class="rounded-lg p-2 h-40 bg-black ">
                            <img src="{{ $image->getUrl($film->poster, 'w92') }}" alt="{{ $film->name }}" class="rounded-lg float-left mr-2 shadow-md shadow-burnt">
                            <div class="text-burnt text-xl">{{ $film->name }}</div>
                            <div class="flex sm:text-3xl text-crayola">
                                @php
                                    $stimme = is_null(auth()->user()) ? null : $film->votes()->where('user', auth()->user()->id)->first();
                                @endphp
                                @if (!is_null($stimme) && $stimme->vote == 0)
                                <svg title="Deine Stimme: Nicht dafür" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-700 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
                                    <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
                                </svg> &middot;
                                @elseif (!is_null($stimme) && $stimme->vote == 1)
                                <svg title="Deine Stimme: Dafür" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-900 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg> &middot;
                                @endif
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
                                    <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
                                  </svg>
                                {{ $film->comments()->count() }}
                                @if($film->getBewertung() > 0)
                                    &middot;
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-burnt sm:h-8 sm:w-8" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                    {{ number_format($film->getBewertung(), 1, '.', '') }}
                                @endif
                            </div>
                            <div class="text-field flex my-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                  </svg>
                                  {{ \Carbon\Carbon::parse($film->seen)->format('d.m.Y') }}
                            </div>
                            <div class="text-field flex my-2"><img src="/avatar/{{$film->suggester->getAvatar() }}" class="max-h-7 rounded-lg mr-2"> {{ $film->suggester->name }}</div>
                        </div></a>
                        @endforeach
                        <div class="flex justify-center p-2">
                            @foreach ($seen as $film)
                                <img @click="active = {{$loop->iteration}}" :class="active == {{$loop->iteration}} && 'shadow-md shadow-burnt'" src="{{ $image->getUrl($film->poster, 'w92') }}" alt="{{ $film->name }}" class="rounded-lg float-left mr-2 cursor-pointer h-20">
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="">
                    <div class="sm:rounded-lg bg-coal text-crayola text-lg p-4">News</div>

                    @foreach($news as $n)
                        <div class="mt-2" x-data="{active: {{ $loop->first ? 'true': 'false' }}}">
                            <div @click="active = !active" x-transition class="text-yelmax bg-field sm:rounded-lg p-2 cursor-pointer">
                                {{$n->headline}} <span class="text-crayola text-xs">{{{ $n->created_at === $n->updated_at ? \Carbon\Carbon::parse($n->created_at)->format('d.m.Y H:i') : \Carbon\Carbon::parse($n->updated_at)->format('d.m.Y H:i') . ' (bearbeitet)' }}}</span>
                                <div class="float-right flex text-crayola"><img src="/avatar/{{$n->author->getAvatar() }}" class="max-h-7 rounded-lg mr-2"> {{ $n->author->name }}</div>
                            </div>
                        <div class="p-2 text-crayola text-justify" x-show="active" x-transition>{!! nl2br($n->body) !!}</div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</x-app-layout>