@extends('layouts.self-paced-dashboard')

@section('title', $subtopic->title . ' — ' . $topic->title)
@section('page-title', $subtopic->title)
@section('page-subtitle', $course->title . ' › ' . $topic->title)

@section('hero-actions')
    @can('edit self-paced courses')
    <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.media.index', [$course, $topic, $subtopic]) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
        <i class="fas fa-photo-video"></i> Upload Media
    </a>
    <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.edit', [$course, $topic, $subtopic]) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-pencil"></i> Edit
    </a>
    @endcan
    <a href="{{ route('self-paced.dashboard.courses.topics.show', [$course, $topic]) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div class="space-y-5">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-400 flex-wrap">
        <a href="{{ route('self-paced.dashboard.index') }}" class="hover:text-indigo-600 transition">Dashboard</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.index') }}" class="hover:text-indigo-600 transition">Courses</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.show', $course) }}" class="hover:text-indigo-600 transition">{{ Str::limit($course->title, 30) }}</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.topics.index', $course) }}" class="hover:text-indigo-600 transition">Topics</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.topics.show', [$course, $topic]) }}" class="hover:text-indigo-600 transition">{{ Str::limit($topic->title, 30) }}</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <span class="text-gray-600 font-medium">{{ Str::limit($subtopic->title, 30) }}</span>
    </nav>

    {{-- SubTopic Detail Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
            <div>
                <h2 class="text-lg font-bold text-gray-800">{{ $subtopic->title }}</h2>
                <div class="flex items-center gap-2 mt-1.5">
                    @if($subtopic->is_published)
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                            <i class="fas fa-eye text-xs"></i> Published
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-500">
                            <i class="fas fa-eye-slash text-xs"></i> Hidden
                        </span>
                    @endif
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-50 text-amber-700">
                        <i class="fas fa-sort text-xs"></i> Order: {{ $subtopic->sort_order }}
                    </span>
                </div>
            </div>
            <div class="flex items-center gap-2">
                @can('edit self-paced courses')
                <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.edit', [$course, $topic, $subtopic]) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-50 hover:bg-amber-100 text-amber-700 text-xs font-semibold rounded-lg transition">
                    <i class="fas fa-pencil"></i> Edit
                </a>
                @endcan
            </div>
        </div>

        {{-- Rich Content Preview --}}
        @if($subtopic->content)
        <div class="prose prose-sm max-w-none text-gray-700 border-t border-gray-100 pt-4">
            {!! $subtopic->content !!}
        </div>
        @else
        <div class="border-t border-gray-100 pt-4">
            <p class="text-gray-400 text-sm italic">No content added yet.</p>
        </div>
        @endif

        <div class="mt-4 pt-4 border-t border-gray-100 flex flex-wrap gap-4 text-xs text-gray-400">
            <span><i class="fas fa-photo-video mr-1"></i> {{ $subtopic->media->count() }} media file(s)</span>
            <span><i class="fas fa-calendar mr-1"></i> Created {{ $subtopic->created_at?->format('d M Y') }}</span>
            <span><i class="fas fa-clock mr-1"></i> Updated {{ $subtopic->updated_at?->diffForHumans() }}</span>
        </div>
    </div>

    {{-- Media Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-photo-video text-purple-500"></i>
                Attached Media
                <span class="ml-1 px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">
                    {{ $subtopic->media->count() }}
                </span>
            </h2>
            @can('edit self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.media.index', [$course, $topic, $subtopic]) }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-lg transition">
                <i class="fas fa-upload"></i> Upload Media
            </a>
            @endcan
        </div>

        @if($subtopic->media->isEmpty())
        <div class="px-5 py-12 text-center">
            <i class="fas fa-photo-video text-4xl text-gray-200 mb-3 block"></i>
            <p class="text-gray-400 text-sm">No media files attached yet.</p>
            @can('edit self-paced courses')
            <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.media.index', [$course, $topic, $subtopic]) }}"
               class="inline-flex items-center gap-1.5 mt-3 text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                <i class="fas fa-upload"></i> Upload First Media
            </a>
            @endcan
        </div>
        @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr>
                        <th class="bg-indigo-50 text-indigo-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-10">#</th>
                        <th class="bg-purple-50 text-purple-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Title</th>
                        <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Type</th>
                        <th class="bg-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">File Size</th>
                        <th class="bg-amber-50 text-amber-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Sort Order</th>
                        <th class="bg-gray-50 text-gray-600 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($subtopic->media as $i => $media)
                    @php
                        $typeColors = [
                            'video'        => 'bg-blue-100 text-blue-700',
                            'image'        => 'bg-green-100 text-green-700',
                            'pdf'          => 'bg-red-100 text-red-700',
                            'presentation' => 'bg-orange-100 text-orange-700',
                            'excel'        => 'bg-emerald-100 text-emerald-700',
                        ];
                        $typeIcons = [
                            'video'        => 'fa-video',
                            'image'        => 'fa-image',
                            'pdf'          => 'fa-file-pdf',
                            'presentation' => 'fa-file-powerpoint',
                            'excel'        => 'fa-file-excel',
                        ];
                    @endphp
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-indigo-50/60 transition-colors border-b border-gray-100 last:border-0">
                        <td class="px-4 py-3 text-gray-400 text-xs font-medium">{{ $i + 1 }}</td>
                        <td class="px-4 py-3">
                            <p class="font-semibold text-gray-800 text-sm">{{ $media->title }}</p>
                            <p class="text-gray-400 text-xs mt-0.5">{{ $media->file_name }}</p>
                        </td>
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium {{ $typeColors[$media->type] ?? 'bg-gray-100 text-gray-600' }}">
                                <i class="fas {{ $typeIcons[$media->type] ?? 'fa-file' }} text-xs"></i>
                                {{ ucfirst($media->type) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-600">
                            {{ $media->file_size ? number_format($media->file_size / 1024 / 1024, 2) . ' MB' : '—' }}
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">
                                {{ $media->sort_order }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            @can('delete self-paced courses')
                            <form action="{{ route('self-paced.dashboard.courses.topics.subtopics.media.destroy', [$course, $topic, $subtopic, $media]) }}"
                                  method="POST"
                                  onsubmit="return confirm('Delete this media file?')">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </form>
                            @endcan
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>

</div>
@endsection
