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

@section('title', $topic->title . ' — ' . $course->title)
@section('page-title', $topic->title)
@section('page-subtitle', 'Topic details and sub-topics')

@section('hero-actions')
    @can('create self-paced courses')
    <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.create', [$course, $topic]) }}"
       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-plus"></i> Add SubTopic
    </a>
    @endcan
    @can('edit self-paced courses')
    <a href="{{ route('self-paced.dashboard.courses.topics.edit', [$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-pencil"></i> Edit Topic
    </a>
    @endcan
    <a href="{{ route('self-paced.dashboard.courses.topics.index', $course) }}"
       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 x-data="{ deleteSubtopicModal: { open: false, id: null, title: '' } }">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-400 mb-4">
        <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, 40) }}</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>
        <span class="text-gray-600 font-medium">{{ Str::limit($topic->title, 40) }}</span>
    </nav>

    <div class="space-y-5">

        {{-- Topic 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">
                <div class="flex-1">
                    <h2 class="text-lg font-bold text-gray-800">{{ $topic->title }}</h2>
                    @if($topic->description)
                        <p class="text-sm text-gray-500 mt-1 leading-relaxed">{{ $topic->description }}</p>
                    @endif
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    @if($topic->is_published)
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 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-1 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-1 rounded-full text-xs font-medium bg-amber-50 text-amber-700">
                        <i class="fas fa-sort text-xs"></i> Order: {{ $topic->sort_order }}
                    </span>
                </div>
            </div>

            <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-layer-group mr-1"></i> {{ $topic->subtopics->count() }} sub-topic(s)</span>
                <span><i class="fas fa-calendar mr-1"></i> Created {{ $topic->created_at?->format('d M Y') }}</span>
                <span><i class="fas fa-clock mr-1"></i> Updated {{ $topic->updated_at?->diffForHumans() }}</span>
            </div>
        </div>

        {{-- SubTopics 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-layer-group text-blue-500"></i>
                    Sub-Topics
                    <span class="ml-1 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full font-medium">
                        {{ $topic->subtopics->count() }}
                    </span>
                </h2>
                @can('create self-paced courses')
                <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.create', [$course, $topic]) }}"
                   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-plus"></i> Add SubTopic
                </a>
                @endcan
            </div>

            @if($topic->subtopics->isEmpty())
            <div class="px-5 py-12 text-center">
                <i class="fas fa-layer-group text-4xl text-gray-200 mb-3 block"></i>
                <p class="text-gray-400 text-sm">No sub-topics yet.</p>
                @can('create self-paced courses')
                <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.create', [$course, $topic]) }}"
                   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-plus"></i> Add First Sub-Topic
                </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-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Published</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-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Media</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($topic->subtopics as $i => $subtopic)
                        <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">{{ $subtopic->title }}</p>
                                @if($subtopic->content)
                                    <p class="text-gray-400 text-xs mt-0.5 line-clamp-1">{{ Str::limit(strip_tags($subtopic->content), 70) }}</p>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if($subtopic->is_published)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium 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 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
                                        <i class="fas fa-eye-slash text-xs"></i> Hidden
                                    </span>
                                @endif
                            </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">
                                    {{ $subtopic->sort_order }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center gap-1 text-xs font-medium text-blue-700">
                                    <i class="fas fa-photo-video text-blue-400"></i>
                                    {{ $subtopic->media->count() }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-1">
                                    @can('view self-paced courses')
                                    <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.show', [$course, $topic, $subtopic]) }}"
                                       title="View"
                                       class="w-7 h-7 flex items-center justify-center rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-600 transition">
                                        <i class="fas fa-eye text-xs"></i>
                                    </a>
                                    @endcan
                                    @can('edit self-paced courses')
                                    <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.edit', [$course, $topic, $subtopic]) }}"
                                       title="Edit"
                                       class="w-7 h-7 flex items-center justify-center rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-600 transition">
                                        <i class="fas fa-pencil text-xs"></i>
                                    </a>
                                    @endcan
                                    @can('delete self-paced courses')
                                    <button type="button"
                                            title="Delete"
                                            @click="deleteSubtopicModal = { open: true, id: {{ $subtopic->id }}, title: '{{ addslashes($subtopic->title) }}' }"
                                            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 id="delete-subtopic-form-{{ $subtopic->id }}"
                                          action="{{ route('self-paced.dashboard.courses.topics.subtopics.destroy', [$course, $topic, $subtopic]) }}"
                                          method="POST" class="hidden">
                                        @csrf @method('DELETE')
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>

        {{-- Downloads Section --}}
        @if($topic->downloads->isNotEmpty())
        <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-download text-amber-500"></i> Topic Downloads
                </h2>
                <a href="{{ route('self-paced.dashboard.courses.downloads', $course) }}"
                   class="text-xs text-indigo-600 hover:text-indigo-800 font-medium transition">
                    Manage Downloads <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="divide-y divide-gray-50">
                @foreach($topic->downloads as $download)
                <div class="flex items-center justify-between px-5 py-3">
                    <div class="flex items-center gap-3">
                        <span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-file-download text-amber-600 text-sm"></i>
                        </span>
                        <div>
                            <p class="text-sm font-medium text-gray-700">{{ $download->title }}</p>
                            <p class="text-xs text-gray-400">{{ $download->file_name }} · {{ number_format($download->file_size / 1024, 1) }} KB</p>
                        </div>
                    </div>
                    @can('edit self-paced courses')
                    <form action="{{ route('self-paced.dashboard.courses.downloads.destroy', [$course, $download]) }}"
                          method="POST"
                          onsubmit="return confirm('Delete this download?')">
                        @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
                </div>
                @endforeach
            </div>
        </div>
        @endif

    </div>

    {{-- Delete SubTopic Modal --}}
    <div x-show="deleteSubtopicModal.open"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/40" @click="deleteSubtopicModal.open = false"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden z-10">
            <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-t-2xl">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-trash"></i> Delete Sub-Topic
                </h3>
                <button type="button" @click="deleteSubtopicModal.open = false" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-500 mb-3">This will also delete all attached media.</p>
                <p class="text-sm text-gray-600 mb-5">
                    Are you sure you want to delete <strong x-text="deleteSubtopicModal.title"></strong>?
                </p>
                <div class="flex gap-3 justify-end">
                    <button @click="deleteSubtopicModal.open = false"
                            class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                        Cancel
                    </button>
                    <button @click="document.getElementById('delete-subtopic-form-' + deleteSubtopicModal.id).submit()"
                            class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition">
                        <i class="fas fa-trash mr-1.5"></i> Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
