@extends('layouts.app')

@section('title', 'Detail Kategori - ' . $kategori->nama)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-10 col-lg-12 mx-auto">
            <!-- Category Header -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <i class="{{ $kategori->icon ?? 'fas fa-folder' }} me-2" 
                           style="color: {{ $kategori->warna }}; font-size: 1.5rem;"></i>
                        <div>
                            <h4 class="mb-0">{{ $kategori->nama }}</h4>
                            <small class="text-muted">{{ $kategori->breadcrumb }}</small>
                        </div>
                    </div>
                    <div class="btn-group">
                        <a href="{{ route('kategoris.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                        <a href="{{ route('kategoris.edit', $kategori) }}" class="btn btn-outline-warning">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <form action="{{ route('kategoris.destroy', $kategori) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger" 
                                    onclick="return confirm('Yakin hapus kategori ini?')">
                                <i class="fas fa-trash"></i> Hapus
                            </button>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            @if($kategori->deskripsi)
                                <p class="text-muted">{{ $kategori->deskripsi }}</p>
                            @else
                                <p class="text-muted fst-italic">Tidak ada deskripsi</p>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex flex-wrap gap-2">
                                <span class="badge" style="background-color: {{ $kategori->warna }}">
                                    {{ ucfirst($kategori->jenis) }}
                                </span>
                                @if($kategori->aktif)
                                    <span class="badge bg-success">Aktif</span>
                                @else
                                    <span class="badge bg-secondary">Nonaktif</span>
                                @endif
                                @if($kategori->parent)
                                    <span class="badge bg-info">Sub-kategori</span>
                                @else
                                    <span class="badge bg-primary">Kategori Utama</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Category Info -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-info-circle"></i> Informasi Kategori</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Slug URL:</strong></td>
                                    <td><code>{{ $kategori->slug }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>Jenis:</strong></td>
                                    <td>{{ ucfirst($kategori->jenis) }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Warna:</strong></td>
                                    <td>
                                        <span class="badge" style="background-color: {{ $kategori->warna }}">
                                            {{ $kategori->warna }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Icon:</strong></td>
                                    <td>
                                        @if($kategori->icon)
                                            <i class="{{ $kategori->icon }}"></i> 
                                            <code>{{ $kategori->icon }}</code>
                                        @else
                                            <span class="text-muted">Tidak ada</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Urutan:</strong></td>
                                    <td>{{ $kategori->urutan }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        @if($kategori->aktif)
                                            <span class="badge bg-success">Aktif</span>
                                        @else
                                            <span class="badge bg-secondary">Nonaktif</span>
                                        @endif
                                    </td>
                                </tr>
                                @if($kategori->parent)
                                    <tr>
                                        <td><strong>Kategori Induk:</strong></td>
                                        <td>
                                            <a href="{{ route('kategoris.show', $kategori->parent) }}" 
                                               class="text-decoration-none">
                                                <i class="{{ $kategori->parent->icon ?? 'fas fa-folder' }}" 
                                                   style="color: {{ $kategori->parent->warna }}"></i>
                                                {{ $kategori->parent->nama }}
                                            </a>
                                        </td>
                                    </tr>
                                @endif
                                <tr>
                                    <td><strong>Dibuat:</strong></td>
                                    <td>{{ $kategori->created_at->format('d M Y H:i') }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Terakhir Update:</strong></td>
                                    <td>{{ $kategori->updated_at->format('d M Y H:i') }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Sub Categories -->
                <div class="col-md-8">
                    @if($kategori->children->count() > 0)
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0"><i class="fas fa-sitemap"></i> Sub-Kategori ({{ $kategori->children->count() }})</h5>
                                <a href="{{ route('kategoris.create') }}?parent_id={{ $kategori->id }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-plus"></i> Tambah Sub-Kategori
                                </a>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach($kategori->children as $child)
                                        <div class="col-md-6 mb-3">
                                            <div class="card border">
                                                <div class="card-body">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="d-flex align-items-center">
                                                            <i class="{{ $child->icon ?? 'fas fa-folder-open' }} me-2" 
                                                               style="color: {{ $child->warna }}"></i>
                                                            <div>
                                                                <strong>{{ $child->nama }}</strong>
                                                                <br>
                                                                <small class="text-muted">{{ $child->deskripsi ?? 'Tidak ada deskripsi' }}</small>
                                                            </div>
                                                        </div>
                                                        <div class="dropdown">
                                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                                                    type="button" data-bs-toggle="dropdown">
                                                                <i class="fas fa-ellipsis-v"></i>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li>
                                                                    <a class="dropdown-item" href="{{ route('kategoris.show', $child) }}">
                                                                        <i class="fas fa-eye"></i> Lihat Detail
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a class="dropdown-item" href="{{ route('kategoris.edit', $child) }}">
                                                                        <i class="fas fa-edit"></i> Edit
                                                                    </a>
                                                                </li>
                                                                <li><hr class="dropdown-divider"></li>
                                                                <li>
                                                                    <form action="{{ route('kategoris.destroy', $child) }}" method="POST" class="d-inline">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="dropdown-item text-danger"
                                                                                onclick="return confirm('Yakin hapus kategori ini?')">
                                                                            <i class="fas fa-trash"></i> Hapus
                                                                        </button>
                                                                    </form>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <span class="badge" style="background-color: {{ $child->warna }}; font-size: 10px;">
                                                            {{ ucfirst($child->jenis) }}
                                                        </span>
                                                        @if(!$child->aktif)
                                                            <span class="badge bg-secondary" style="font-size: 10px;">Nonaktif</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Content Statistics -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-chart-bar"></i> Statistik Konten</h5>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-4 mb-3">
                                    <div class="card bg-primary text-white">
                                        <div class="card-body">
                                            <i class="fas fa-file-alt fa-2x mb-2"></i>
                                            <h4>{{ $kategori->halamen->count() }}</h4>
                                            <small>Halaman</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="card bg-success text-white">
                                        <div class="card-body">
                                            <i class="fas fa-images fa-2x mb-2"></i>
                                            <h4>{{ $kategori->galeri->count() }}</h4>
                                            <small>Galeri</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <div class="card bg-info text-white">
                                        <div class="card-body">
                                            <i class="fas fa-sitemap fa-2x mb-2"></i>
                                            <h4>{{ $kategori->children->count() }}</h4>
                                            <small>Sub-Kategori</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if($kategori->halamen->count() > 0 || $kategori->galeri->count() > 0)
                                <div class="mt-4">
                                    <h6>Konten Terkait:</h6>
                                    
                                    @if($kategori->halamen->count() > 0)
                                        <div class="mb-3">
                                            <strong>Halaman:</strong>
                                            <ul class="list-unstyled ms-3">
                                                @foreach($kategori->halamen->take(5) as $halaman)
                                                    <li>
                                                        <i class="fas fa-file-alt text-primary"></i>
                                                        {{ $halaman->judul }}
                                                        @if($halaman->status == 'published')
                                                            <span class="badge bg-success">Published</span>
                                                        @else
                                                            <span class="badge bg-warning">Draft</span>
                                                        @endif
                                                    </li>
                                                @endforeach
                                                @if($kategori->halamen->count() > 5)
                                                    <li><small class="text-muted">... dan {{ $kategori->halamen->count() - 5 }} lainnya</small></li>
                                                @endif
                                            </ul>
                                        </div>
                                    @endif

                                    @if($kategori->galeri->count() > 0)
                                        <div class="mb-3">
                                            <strong>Galeri:</strong>
                                            <ul class="list-unstyled ms-3">
                                                @foreach($kategori->galeri->take(5) as $galeri)
                                                    <li>
                                                        <i class="fas fa-image text-success"></i>
                                                        {{ $galeri->judul }}
                                                    </li>
                                                @endforeach
                                                @if($kategori->galeri->count() > 5)
                                                    <li><small class="text-muted">... dan {{ $kategori->galeri->count() - 5 }} lainnya</small></li>
                                                @endif
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="text-center py-4">
                                    <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                    <p class="text-muted">Belum ada konten dalam kategori ini</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .table-borderless td {
        padding: 0.5rem 0;
        border: none;
    }
    
    .badge {
        font-size: 0.75rem;
    }
    
    .dropdown-menu {
        border: 1px solid #dee2e6;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .dropdown-item:hover {
        background-color: #f8f9fa;
    }
    
    .text-decoration-none:hover {
        text-decoration: underline !important;
    }
</style>
@endpush