@extends('layouts.app')

@section('title', 'Yönetim Paneli')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Yönetim Paneli</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300 dark:text-gray-500">
                Sistem yönetimi ve kontrol panelleri
            </p>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Ürün & Finansal -->
        <a href="{{ route('management-panel.product-financial') }}" class="group bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                    <i class="fas fa-dollar-sign text-green-600 dark:text-green-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">
                        Ürün & Finansal
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Ürün ve finansal yönetim
                    </p>
                </div>
                <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors"></i>
            </div>
        </a>

        <!-- QA & Performans -->
        <a href="{{ route('management-panel.qa-performance') }}" class="group bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                    <i class="fas fa-heartbeat text-blue-600 dark:text-blue-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                        QA & Performans
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Kalite kontrolü ve performans analizi
                    </p>
                </div>
                <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"></i>
            </div>
        </a>

        <!-- Altyapı & Bakım -->
        <a href="{{ route('management-panel.infrastructure-maintenance') }}" class="group bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
                    <i class="fas fa-tools text-orange-600 dark:text-orange-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">
                        Altyapı & Bakım
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Sistem altyapısı ve bakım işlemleri
                    </p>
                </div>
                <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors"></i>
            </div>
        </a>

        <!-- Raporlama & Loglar -->
        <a href="{{ route('management-panel.reporting-logs') }}" class="group bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-4">
                <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                    <i class="fas fa-file-alt text-purple-600 dark:text-purple-400 text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
                        Raporlama & Loglar
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Sistem logları ve raporlar
                    </p>
                </div>
                <i class="fas fa-chevron-right text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors"></i>
            </div>
        </a>
    </div>
</div>
@endsection