@extends('layouts.admin')

@section('title', 'Search History')

@section('content')
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="text-2xl font-bold sm:text-3xl">Search History (File Based)</h1>
        <form action="{{ route('admin.search-history.index') }}" method="get" class="flex items-center gap-2">
            <select name="date" class="rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                <option value="">All Dates</option>
                @foreach ($availableDates as $date)
                    <option value="{{ $date }}" @selected($selectedDate === $date)>{{ $date }}</option>
                @endforeach
            </select>
            <button class="rounded-xl bg-cyan-600 px-3 py-2 text-sm font-medium text-white hover:bg-cyan-700">Filter</button>
        </form>
    </div>

    <div class="space-y-3 md:hidden">
        @forelse ($entries as $entry)
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-sm font-semibold text-slate-900">{{ $entry['query'] ?? '-' }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ $entry['timestamp'] ?? '-' }}</p>
                <p class="mt-1 text-xs text-slate-600">Results: {{ $entry['results_count'] ?? 0 }}</p>
                <p class="mt-1 text-xs text-slate-600">IP: {{ $entry['ip'] ?? '-' }}</p>
            </article>
        @empty
            <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">No search history found.</div>
        @endforelse
    </div>

    <div class="hidden overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm md:block">
        <table class="w-full text-sm">
            <thead class="bg-slate-50">
                <tr>
                    <th class="p-3 text-left">Time</th>
                    <th class="p-3 text-left">Query</th>
                    <th class="p-3 text-left">Results</th>
                    <th class="p-3 text-left">IP</th>
                    <th class="p-3 text-left">User Agent</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($entries as $entry)
                    <tr class="border-t border-slate-100">
                        <td class="p-3 whitespace-nowrap">{{ $entry['timestamp'] ?? '-' }}</td>
                        <td class="p-3 font-medium">{{ $entry['query'] ?? '-' }}</td>
                        <td class="p-3">{{ $entry['results_count'] ?? 0 }}</td>
                        <td class="p-3 whitespace-nowrap">{{ $entry['ip'] ?? '-' }}</td>
                        <td class="p-3 max-w-xs truncate">{{ $entry['user_agent'] ?? '-' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="p-3 text-slate-600">No search history found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @include('admin.partials.pagination', ['paginator' => $entries])
@endsection