112 lines
7.7 KiB
PHP
112 lines
7.7 KiB
PHP
<div>
|
|
<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
|
|
@if(count($playlists) > 0)
|
|
@foreach($playlists as $playlist)
|
|
@php
|
|
$count = $playlist->episodes->count();
|
|
@endphp
|
|
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white/60 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-950/60 sm:shrink-0 sm:grow sm:basis-0">
|
|
@if($count > 0)
|
|
<a href="{{ route('profile.playlist.show', $playlist->id) }}">
|
|
@else
|
|
<a href="#!">
|
|
@endif
|
|
@if($count > 0)
|
|
@php
|
|
$pe = \App\Models\PlaylistEpisode::where('playlist_id', $playlist->id)->orderBy('position', 'desc')->first();
|
|
@endphp
|
|
<img class="rounded-t-lg aspect-video" src="{{ $pe->episode->gallery->first()->thumbnail_url }}" alt="Hollywood Sign on The Hill" />
|
|
@else
|
|
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-20" alt="..." />
|
|
@endif
|
|
</a>
|
|
<div class="p-6" x-data="{ editing: false, name: '{{ $playlist->name }}', isPrivate: {{ $playlist->is_private ? 'true' : 'false' }} }">
|
|
<!-- Edit mode -->
|
|
<template x-if="editing">
|
|
<div>
|
|
<form method="POST" action="{{ route('profile.playlist.update', $playlist->id) }}" class="space-y-3">
|
|
@csrf
|
|
@method('PATCH')
|
|
<div>
|
|
<label class="mb-1 block text-xs font-medium text-neutral-600 dark:text-neutral-400">Name:</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
x-model="name"
|
|
maxlength="30"
|
|
required
|
|
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="mb-1 block text-xs font-medium text-neutral-600 dark:text-neutral-400">Visibility:</label>
|
|
<select
|
|
name="is_private"
|
|
x-model="isPrivate"
|
|
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
|
>
|
|
<option value="0">Public</option>
|
|
<option value="1">Private</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button type="submit" class="cursor-pointer rounded-lg bg-rose-600 px-4 py-2 text-xs font-semibold text-white transition hover:bg-rose-700">
|
|
Save
|
|
</button>
|
|
<button type="button" @click="editing = false; name = '{{ $playlist->name }}'; isPrivate = {{ $playlist->is_private ? 'true' : 'false' }}" class="cursor-pointer rounded-lg border border-neutral-300 px-4 py-2 text-xs font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Display mode -->
|
|
<template x-if="!editing">
|
|
<div>
|
|
<h5 class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
|
|
{{ $playlist->name }}
|
|
</h5>
|
|
<p class="mb-2 text-sm leading-tight text-neutral-800 dark:text-neutral-50">
|
|
{{ $count }} Episodes - {{ $playlist->is_private == 1 ? 'Private' : 'Public' }}
|
|
@if($count > 0)
|
|
<a href="{{ route('hentai.index', ['title' => $playlist->episodes->first()->episode->slug, 'playlist' => $playlist->id]) }}" class="cursor-pointer float-right text-white bg-rose-700 hover:bg-rose-800 focus:ring-4 focus:outline-none focus:ring-rose-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-rose-600 dark:hover:bg-rose-700 dark:focus:ring-rose-800">{{ __('playlist.play') }}</a>
|
|
@endif
|
|
</p>
|
|
<div class="flex items-center gap-3">
|
|
<a href="{{ route('profile.playlist.delete', $playlist->id) }}" class="inline-flex items-center cursor-pointer text-xs text-red-600" data-confirm-delete="true">Delete</a>
|
|
<button @click="editing = true" class="inline-flex items-center cursor-pointer text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Edit</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
<!-- Add Another Playlist -->
|
|
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white/60 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-950/60 sm:shrink-0 sm:grow sm:basis-0">
|
|
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-40" alt="..." />
|
|
<div class="p-6">
|
|
<p class="text-black dark:text-white">
|
|
Create another Playlist
|
|
</p>
|
|
<a data-te-toggle="modal" data-te-target="#modalCreatePlaylist" data-te-ripple-init data-te-ripple-color="light" class="inline-flex items-center cursor-pointer px-4 py-2 mt-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
|
Create
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<!-- No Playlist Found -->
|
|
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
|
|
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-20" alt="..." />
|
|
<div class="p-6">
|
|
<p class="text-black dark:text-white">
|
|
No Playlist found!
|
|
</p>
|
|
<a data-te-toggle="modal" data-te-target="#modalCreatePlaylist" data-te-ripple-init data-te-ripple-color="light" class="inline-flex items-center cursor-pointer px-4 py-2 mt-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
|
Create
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div> |