@extends('layouts.admin')

@section('title', 'Contents')

@section('content')
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="text-2xl font-bold sm:text-3xl">Contents</h1>
        <a href="{{ route('admin.contents.create') }}" title="Create Content" class="inline-flex items-center justify-center gap-2 rounded-xl bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-700">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 5v14m-7-7h14"/>
            </svg>
            Add Content
        </a>
    </div>

    <div class="space-y-3 md:hidden">
        @forelse ($ringtones as $ringtone)
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <h2 class="font-semibold">{{ $ringtone->title }}</h2>
                        <p class="text-xs text-slate-500">{{ $ringtone->content_type_label }}</p>
                        <p class="text-xs text-slate-500">{{ $ringtone->category?->name ?? '-' }}</p>
                        <p class="text-xs text-slate-500">Uploaded by: {{ $ringtone->uploader?->name ?? 'Admin' }}</p>
                        <p class="text-xs {{ $ringtone->approval_status === 'approved' ? 'text-emerald-600' : ($ringtone->approval_status === 'rejected' ? 'text-rose-600' : 'text-amber-600') }}">
                            Approval: {{ $ringtone->approval_status_label }}
                        </p>
                        <p class="mt-1 text-xs text-slate-500">Downloads: {{ number_format($ringtone->downloads) }}</p>
                    </div>
                    <span class="rounded px-2 py-1 text-xs {{ $ringtone->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                        {{ $ringtone->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
                <div class="mt-2">
                    <a href="{{ $ringtone->file_url }}" download title="Download File" class="truncate text-xs text-cyan-700 hover:underline">
                        File: {{ $ringtone->file_path }}
                    </a>
                    @if ($ringtone->isAudioType() && $ringtone->has_iphone_file)
                        <a href="{{ $ringtone->iphone_file_url }}" download title="Download iPhone File" class="mt-1 block truncate text-xs text-violet-700 hover:underline">
                            M4R: {{ $ringtone->iphone_file_path }}
                        </a>
                    @else
                        <p class="mt-1 text-xs text-slate-400">M4R: Not generated</p>
                    @endif
                </div>
                @if ($ringtone->isAudioType())
                    <div class="mt-2">
                        <audio controls preload="none" class="w-full">
                            <source src="{{ $ringtone->file_url }}">
                        </audio>
                    </div>
                @elseif ($ringtone->isImageType())
                    <img src="{{ $ringtone->file_url }}" alt="{{ $ringtone->title }}" class="mt-2 h-32 w-full rounded-lg object-cover border border-slate-200">
                @elseif ($ringtone->isVideoType())
                    <video src="{{ $ringtone->file_url }}" controls preload="metadata" class="mt-2 h-32 w-full rounded-lg object-cover border border-slate-200"></video>
                @endif
                <div class="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
                    @if ($ringtone->approval_status !== 'approved')
                        <form action="{{ route('admin.contents.approve', $ringtone) }}" method="post">
                            @csrf
                            @method('PATCH')
                            <button class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-emerald-200 bg-emerald-50 px-2 py-1.5 text-emerald-700">
                                <span>Approve</span>
                            </button>
                        </form>
                    @endif
                    @if ($ringtone->approval_status !== 'rejected')
                        <form action="{{ route('admin.contents.reject', $ringtone) }}" method="post">
                            @csrf
                            @method('PATCH')
                            <input type="hidden" name="approval_note" value="Please review and update your submission.">
                            <button class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-rose-200 bg-rose-50 px-2 py-1.5 text-rose-700">
                                <span>Reject</span>
                            </button>
                        </form>
                    @endif
                    <form action="{{ route('admin.contents.toggle-active', $ringtone) }}" method="post">
                        @csrf
                        @method('PATCH')
                        <button title="{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }} {{ $ringtone->title }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 {{ $ringtone->is_active ? 'text-amber-600' : 'text-green-600' }}">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                @if ($ringtone->is_active)
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 2v10m0 10h.01M4.93 4.93a10 10 0 1014.14 0"/>
                                @else
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                @endif
                            </svg>
                            <span>{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }}</span>
                        </button>
                    </form>
                    <a href="{{ route('admin.contents.edit', $ringtone) }}" title="Edit {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1.5 text-sky-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M16.86 3.49a2.1 2.1 0 113 3L8 18.36 4 19l.64-4L16.86 3.49z"/>
                        </svg>
                        <span>Edit</span>
                    </a>
                </div>
                <form class="mt-2" action="{{ route('admin.contents.destroy', $ringtone) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this content?');">
                    @csrf
                    @method('DELETE')
                    <button title="Delete {{ $ringtone->title }}" class="inline-flex w-full items-center justify-center gap-1 rounded-lg border border-red-200 bg-red-50 px-2 py-1.5 text-red-700">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 6h18M8 6V4h8v2m-9 0l1 14h8l1-14"/>
                        </svg>
                        <span>Delete</span>
                    </button>
                </form>
            </article>
        @empty
            <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">No content found.</div>
        @endforelse
    </div>

    <div class="hidden rounded-2xl border border-slate-200 bg-white shadow-sm md:block">
        <table class="w-full text-sm">
            <thead class="bg-slate-50">
                <tr>
                    <th class="w-20 p-3 text-left">ID</th>
                    <th class="p-3 text-left">Details</th>
                    <th class="w-72 p-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($ringtones as $ringtone)
                    <tr class="border-t border-slate-100">
                        <td class="p-3 align-top font-semibold text-slate-700">#{{ $ringtone->id }}</td>
                        <td class="p-3 align-top">
                            <div class="space-y-2">
                                <div>
                                    <p class="font-semibold">{{ $ringtone->title }}</p>
                                    <p class="text-xs text-slate-500">{{ $ringtone->content_type_label }} | {{ $ringtone->category?->name ?? '-' }} | Uploaded by {{ $ringtone->uploader?->name ?? 'Admin' }}</p>
                                </div>

                                <div class="flex flex-wrap gap-2 text-xs">
                                    <span class="rounded px-2 py-1 {{ $ringtone->approval_status === 'approved' ? 'bg-emerald-100 text-emerald-700' : ($ringtone->approval_status === 'rejected' ? 'bg-rose-100 text-rose-700' : 'bg-amber-100 text-amber-700') }}">Approval: {{ $ringtone->approval_status_label }}</span>
                                    <span class="rounded px-2 py-1 {{ $ringtone->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">{{ $ringtone->is_active ? 'Active' : 'Inactive' }}</span>
                                    <span class="rounded bg-slate-100 px-2 py-1 text-slate-700">Downloads: {{ number_format($ringtone->downloads) }}</span>
                                </div>

                                <div>
                                    <a href="{{ $ringtone->file_url }}" download title="Download {{ $ringtone->title }}" class="block truncate text-cyan-700 hover:underline">File: {{ $ringtone->file_path }}</a>
                                    @if ($ringtone->isAudioType() && $ringtone->has_iphone_file)
                                        <a href="{{ $ringtone->iphone_file_url }}" download title="Download iPhone {{ $ringtone->title }}" class="mt-1 block truncate text-violet-700 hover:underline">M4R: {{ $ringtone->iphone_file_path }}</a>
                                    @else
                                        <span class="mt-1 block text-xs text-slate-400">M4R: Not generated</span>
                                    @endif
                                </div>

                                @if ($ringtone->isAudioType())
                                    <audio controls preload="none" class="w-full max-w-md">
                                        <source src="{{ $ringtone->file_url }}">
                                    </audio>
                                @elseif ($ringtone->isImageType())
                                    <img src="{{ $ringtone->file_url }}" alt="{{ $ringtone->title }}" class="h-24 w-40 rounded-lg border border-slate-200 object-cover">
                                @elseif ($ringtone->isVideoType())
                                    <video src="{{ $ringtone->file_url }}" controls preload="metadata" class="h-24 w-40 rounded-lg border border-slate-200 object-cover"></video>
                                @else
                                    <span class="text-xs text-slate-500">No preview</span>
                                @endif
                            </div>
                        </td>
                        <td class="p-3 align-top">
                            <div class="flex flex-wrap justify-end gap-2 text-xs">
                                @if ($ringtone->approval_status !== 'approved')
                                    <form action="{{ route('admin.contents.approve', $ringtone) }}" method="post">
                                        @csrf
                                        @method('PATCH')
                                        <button class="inline-flex items-center justify-center rounded-lg border border-emerald-200 px-2 py-1 text-emerald-700">Approve</button>
                                    </form>
                                @endif
                                @if ($ringtone->approval_status !== 'rejected')
                                    <form action="{{ route('admin.contents.reject', $ringtone) }}" method="post">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="approval_note" value="Please review and update your submission.">
                                        <button class="inline-flex items-center justify-center rounded-lg border border-rose-200 px-2 py-1 text-rose-700">Reject</button>
                                    </form>
                                @endif
                                <form action="{{ route('admin.contents.toggle-active', $ringtone) }}" method="post">
                                    @csrf
                                    @method('PATCH')
                                    <button title="{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }} {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1 {{ $ringtone->is_active ? 'text-amber-600' : 'text-green-600' }}">
                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            @if ($ringtone->is_active)
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 2v10m0 10h.01M4.93 4.93a10 10 0 1014.14 0"/>
                                            @else
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            @endif
                                        </svg>
                                        <span>{{ $ringtone->is_active ? 'Deactivate' : 'Activate' }}</span>
                                    </button>
                                </form>
                                <a href="{{ route('admin.contents.edit', $ringtone) }}" title="Edit {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-2 py-1 text-sky-600">
                                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M16.86 3.49a2.1 2.1 0 113 3L8 18.36 4 19l.64-4L16.86 3.49z"/>
                                    </svg>
                                    <span>Edit</span>
                                </a>
                                <form action="{{ route('admin.contents.destroy', $ringtone) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this content?');">
                                    @csrf
                                    @method('DELETE')
                                    <button title="Delete {{ $ringtone->title }}" class="inline-flex items-center justify-center gap-1 rounded-lg border border-red-200 px-2 py-1 text-red-600">
                                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 6h18M8 6V4h8v2m-9 0l1 14h8l1-14"/>
                                        </svg>
                                        <span>Delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="p-3 text-slate-600">No content found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @include('admin.partials.pagination', ['paginator' => $ringtones])
@endsection