@extends('layouts.app')

@section('title', 'Global Arama')
@section('page-title', 'Global Arama')

@section('content')
<div class="space-y-6">
    <!-- Search Form -->
    <div class="bg-white shadow rounded-lg p-6">
        <form action="{{ route('search.index') }}" method="GET" id="search-form">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <div class="relative">
                        <input 
                            type="text" 
                            name="q" 
                            id="search-input"
                            value="{{ $query }}"
                            placeholder="Arama yapın... (site, kullanıcı, rapor, vb.)"
                            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 pl-10 pr-4 py-3 text-lg"
                            autocomplete="off"
                        >
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <div id="search-suggestions" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg hidden">
                            <!-- Suggestions will be populated by JavaScript -->
                        </div>
                    </div>
                </div>
                <div class="md:w-48">
                    <select name="type" id="search-type" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-3">
                        <option value="">Tümü</option>
                        @foreach($searchableTypes as $searchType)
                        <option value="{{ $searchType }}" {{ $type === $searchType ? 'selected' : '' }}>
                            {{ $typeLabels[$searchType] ?? ucfirst($searchType) }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="submit" class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <i class="fas fa-search mr-2"></i>
                        Ara
                    </button>
                </div>
            </div>
        </form>

        <!-- Search History -->
        @if($history->count() > 0)
        <div class="mt-4 pt-4 border-t border-gray-200">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-medium text-gray-700">Son Aramalar</h3>
                <button type="button" id="clear-history" class="text-xs text-gray-500 hover:text-gray-700">
                    Temizle
                </button>
            </div>
            <div class="flex flex-wrap gap-2">
                @foreach($history as $item)
                <a href="{{ route('search.index', ['q' => $item->query, 'type' => $item->type]) }}" class="inline-flex items-center px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200">
                    <i class="fas fa-clock mr-1"></i>
                    {{ $item->query }}
                    @if($item->type)
                    <span class="ml-1 text-gray-500">({{ $typeLabels[$item->type] ?? $item->type }})</span>
                    @endif
                </a>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <!-- Results -->
    @if(!empty($query))
    <div class="space-y-6">
        @if(empty($results))
        <div class="bg-white shadow rounded-lg p-12 text-center">
            <i class="fas fa-search text-4xl text-gray-300 mb-4"></i>
            <p class="text-lg font-medium text-gray-900">Sonuç bulunamadı</p>
            <p class="text-sm text-gray-500 mt-2">"{{ $query }}" için arama sonucu bulunamadı.</p>
        </div>
        @else
        @foreach($results as $type => $result)
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">
                        {{ $typeLabels[$type] ?? ucfirst($type) }}
                        <span class="ml-2 text-sm font-normal text-gray-500">({{ $result['count'] }} sonuç)</span>
                    </h3>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    @foreach($result['items'] as $item)
                    <div class="border-b border-gray-100 pb-4 last:border-0 last:pb-0">
                        @if($type === 'sites')
                        <a href="{{ route('sites.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                    <p class="text-sm text-gray-500 mt-1">{{ $item->url }}</p>
                                    @if($item->description)
                                    <p class="text-sm text-gray-600 mt-2">{{ Str::limit($item->description, 100) }}</p>
                                    @endif
                                    <div class="flex items-center gap-2 mt-2">
                                        @foreach($item->categories as $category)
                                        <span class="px-2 py-1 text-xs rounded-full" style="background-color: {{ $category->color }}20; color: {{ $category->color }}">
                                            {{ $category->name }}
                                        </span>
                                        @endforeach
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @elseif($type === 'users')
                        <a href="{{ route('users.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-semibold">
                                        {{ strtoupper(substr($item->name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                        <p class="text-sm text-gray-500">{{ $item->email }}</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400"></i>
                            </div>
                        </a>
                        @elseif($type === 'reports')
                        <a href="{{ route('reports.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                    <p class="text-sm text-gray-500 mt-1">{{ $item->type }} - {{ $item->status_label }}</p>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @elseif($type === 'roles')
                        <a href="{{ route('roles.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $item->color }}"></div>
                                        <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                    </div>
                                    @if($item->description)
                                    <p class="text-sm text-gray-600 mt-1">{{ $item->description }}</p>
                                    @endif
                                    <p class="text-xs text-gray-500 mt-2">{{ $item->users_count }} kullanıcı, {{ $item->permissions_count }} izin</p>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @elseif($type === 'permissions')
                        <a href="{{ route('permissions.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                    <p class="text-sm text-gray-500 mt-1"><code>{{ $item->slug }}</code></p>
                                    @if($item->description)
                                    <p class="text-sm text-gray-600 mt-1">{{ $item->description }}</p>
                                    @endif
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @elseif($type === 'activity_logs')
                        <div class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="text-base font-medium text-gray-900">{{ $item->action_label }}</h4>
                                    <p class="text-sm text-gray-600 mt-1">{{ $item->description }}</p>
                                    <p class="text-xs text-gray-500 mt-2">
                                        {{ $item->user->name ?? 'Sistem' }} - {{ $item->created_at->format('d.m.Y H:i') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @elseif($type === 'backups')
                        <a href="{{ route('backups.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="text-base font-medium text-gray-900">{{ $item->file_name }}</h4>
                                    <p class="text-sm text-gray-500 mt-1">{{ $item->site->name ?? 'Genel' }} - {{ $item->type }}</p>
                                    @if($item->description)
                                    <p class="text-sm text-gray-600 mt-1">{{ $item->description }}</p>
                                    @endif
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @elseif($type === 'categories')
                        <a href="{{ route('site-categories.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $item->color }}"></div>
                                        <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                    </div>
                                    @if($item->description)
                                    <p class="text-sm text-gray-600 mt-1">{{ $item->description }}</p>
                                    @endif
                                    <p class="text-xs text-gray-500 mt-2">{{ $item->sites_count }} site</p>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @elseif($type === 'tags')
                        <a href="{{ route('site-tags.show', $item) }}" class="block hover:bg-gray-50 p-3 rounded-lg transition-colors">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $item->color }}"></div>
                                        <h4 class="text-base font-medium text-gray-900">{{ $item->name }}</h4>
                                    </div>
                                    @if($item->description)
                                    <p class="text-sm text-gray-600 mt-1">{{ $item->description }}</p>
                                    @endif
                                    <p class="text-xs text-gray-500 mt-2">{{ $item->sites_count }} site</p>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 ml-4"></i>
                            </div>
                        </a>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endforeach
        @endif
    </div>
    @else
    <div class="bg-white shadow rounded-lg p-12 text-center">
        <i class="fas fa-search text-4xl text-gray-300 mb-4"></i>
        <p class="text-lg font-medium text-gray-900">Arama yapın</p>
        <p class="text-sm text-gray-500 mt-2">Yukarıdaki arama kutusuna bir terim girin ve tüm sistemde arama yapın.</p>
    </div>
    @endif
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search-input');
    const searchForm = document.getElementById('search-form');
    const clearHistoryBtn = document.getElementById('clear-history');
    let searchTimeout;

    // Auto-submit on type change
    if (document.getElementById('search-type')) {
        document.getElementById('search-type').addEventListener('change', function() {
            if (searchInput.value.trim()) {
                searchForm.submit();
            }
        });
    }

    // Clear history
    if (clearHistoryBtn) {
        clearHistoryBtn.addEventListener('click', function() {
            if (confirm('Arama geçmişini temizlemek istediğinizden emin misiniz?')) {
                fetch('{{ route("search.clear-history") }}', {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                });
            }
        });
    }

    // Keyboard shortcut (Ctrl+K or Cmd+K)
    document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
            e.preventDefault();
            searchInput.focus();
        }
    });
});
</script>
@endpush
@endsection