@extends('layouts.app')

@section('title', 'Просмотр данных')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <div class="flex justify-between items-center">
            <h4 class="text-2xl font-bold text-gray-800">Все отправленные данные</h4>
            <div class="flex space-x-2">
                <a href="{{ route('form.show') }}" 
                   class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
                    Добавить новую
                </a>
                <a href="{{ route('api.form-data.statistics') }}" 
                   target="_blank"
                   class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
                    API Статистика
                </a>
            </div>
        </div>
        
        <!-- Фильтры -->
        <div class="mt-4 bg-white rounded-lg shadow p-4">
            <form method="GET" action="{{ route('data.show') }}" class="flex flex-wrap gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Пол</label>
                    <select name="gender" class="px-3 py-2 border border-gray-300 rounded">
                        <option value="">Все</option>
                        <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>Мужской</option>
                        <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>Женский</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Категория</label>
                    <select name="category_id" class="px-3 py-2 border border-gray-300 rounded">
                        <option value="">Все категории</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                <div class="flex items-end">
                    <label class="inline-flex items-center mt-2">
                        <input type="checkbox" 
                               name="today" 
                               value="1" 
                               {{ request('today') ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600">
                        <span class="ml-2 text-gray-700">За сегодня</span>
                    </label>
                </div>
                
                <div class="flex items-end space-x-2">
                    <button type="submit" 
                            class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition">
                        Фильтровать
                    </button>
                    <a href="{{ route('data.show') }}" 
                       class="px-4 py-2 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition">
                        Сбросить
                    </a>
                </div>
            </form>
        </div>
    </div>

    @if($data->isEmpty())
        <div class="bg-white rounded-lg shadow-md p-8 text-center">
            <p class="text-gray-600 text-lg mb-4">Данные отсутствуют.</p>
            <a href="{{ route('form.show') }}" 
               class="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
                Отправьте форму
            </a> чтобы добавить данные.
        </div>
    @else
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Имя</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Телефон</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Пол</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Категория</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сообщение</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Дата</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($data as $item)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <small class="text-gray-500">{{ substr($item->uuid, 0, 8) }}...</small>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('form-data.show', $item->id) }}" 
                                   class="text-blue-600 hover:text-blue-800 font-medium">
                                    {{ $item->name }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $item->email }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{{ $item->phone }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs rounded-full {{ $item->gender ? 'bg-blue-100 text-blue-800' : 'bg-pink-100 text-pink-800' }}">
                                    {{ $item->gender ? 'Male' : 'Female' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($item->category)
                                    <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded">
                                        {{ $item->category->name }}
                                    </span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="max-w-xs truncate">
                                    {{ Str::limit($item->message, 50) }}
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $item->submitted_at->timezone('Asia/Irkutsk')->format('d.m.Y H:i') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <div class="flex space-x-2">
                                    <a href="{{ route('form-data.show', $item->id) }}" 
                                       class="text-blue-600 hover:text-blue-800" title="Просмотр">
                                        👁️
                                    </a>
                                    <a href="{{ route('form-data.edit', $item->id) }}" 
                                       class="text-yellow-600 hover:text-yellow-800" title="Редактировать">
                                        ✏️
                                    </a>
                                    <form action="{{ route('form-data.destroy', $item->id) }}" 
                                          method="POST" 
                                          class="inline"
                                          onsubmit="return confirm('Удалить эту запись?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" 
                                                class="text-red-600 hover:text-red-800" 
                                                title="Удалить">
                                            🗑️
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $data->onEachSide(1)->links('pagination::simple-bootstrap-5') }}
            </div>
        </div>

        
        <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-lg shadow p-4">
                <div class="text-sm text-gray-500">Всего записей</div>
                <div class="text-2xl font-bold text-gray-800">{{ $data->total() }}</div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="text-sm text-gray-500">Мужчины</div>
                <div class="text-2xl font-bold text-blue-600">
                    {{ \App\Models\FormData::male()->count() }}
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="text-sm text-gray-500">Женщины</div>
                <div class="text-2xl font-bold text-pink-600">
                    {{ \App\Models\FormData::female()->count() }}
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="text-sm text-gray-500">Сегодня</div>
                <div class="text-2xl font-bold text-green-600">
                    {{ \App\Models\FormData::today()->count() }}
                </div>
            </div>
        </div>
    @endif
    
    <div class="mt-8 bg-gray-50 rounded-lg p-6">
        <h5 class="text-lg font-semibold text-gray-800 mb-4">API Endpoints</h5>
        <div class="space-y-2">
            <div class="flex items-center">
                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded mr-2">GET</span>
                <code class="text-sm">/api/v1/form-data</code>
                <span class="ml-2 text-gray-600">— Список данных</span>
            </div>
            <div class="flex items-center">
                <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded mr-2">POST</span>
                <code class="text-sm">/api/v1/form-data</code>
                <span class="ml-2 text-gray-600">— Создание записи</span>
            </div>
            <div class="flex items-center">
                <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-1 rounded mr-2">GET</span>
                <code class="text-sm">/api/v1/form-data/statistics</code>
                <span class="ml-2 text-gray-600">— Статистика</span>
            </div>
        </div>
    </div>
</div>
@endsection