@extends('layouts.app')

@section('title', 'Site Kategorileri')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Site Kategorileri</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Siteleri kategorilere göre organize edin
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('site-categories.create') }}" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600 dark:hover:bg-indigo-600 dark:bg-indigo-500">
                <i class="fas fa-plus"></i>
                Yeni Kategori
            </a>
        </div>
    </div>

    @if(session('success'))
    <div class="mt-4 rounded-md bg-green-50 dark:bg-green-900/30 p-4">
        <p class="text-sm font-medium text-green-800 dark:text-green-300">{{ session('success') }}</p>
    </div>
    @endif

    <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        @forelse($categories as $category)
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 rounded-full flex items-center justify-center" style="background-color: {{ $category->color }}20;">
                            <div class="h-6 w-6 rounded-full" style="background-color: {{ $category->color }};"></div>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $category->name }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $category->sites_count }} site</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('site-categories.edit', $category) }}" class="text-indigo-600 hover:text-indigo-900">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('site-categories.destroy', $category) }}" method="POST" onsubmit="return confirm('Bu kategoriyi silmek istediğinizden emin misiniz?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
                @if($category->description)
                <p class="mt-3 text-sm text-gray-600">{{ $category->description }}</p>
                @endif
                <div class="mt-4">
                    <a href="{{ route('site-categories.show', $category) }}" class="text-sm text-indigo-600 hover:text-indigo-800">
                        Detayları Gör <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
        @empty
        <div class="col-span-full text-center py-12">
            <i class="fas fa-folder-open text-4xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 dark:text-gray-400">Henüz kategori oluşturulmamış.</p>
            <a href="{{ route('site-categories.create') }}" class="mt-4 inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600 dark:hover:bg-indigo-600 dark:bg-indigo-500">
                <i class="fas fa-plus"></i>
                İlk Kategoriyi Oluştur
            </a>
        </div>
        @endforelse
    </div>
</div>
@endsection