@extends('admin.layouts.app')

@section('title', 'Quản lý liên hệ')
@section('page-title', 'Quản lý liên hệ')

@section('content')
<div class="mb-6">
    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center space-y-4 lg:space-y-0">
        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
            <span class="text-sm text-gray-600">Tổng: {{ $contacts->total() }} liên hệ</span>
        </div>
        
        <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
            <form method="GET" class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                <select name="status" class="border rounded px-3 py-2 text-sm">
                    <option value="">Tất cả trạng thái</option>
                    <option value="new" {{ request('status') == 'new' ? 'selected' : '' }}>Mới</option>
                    <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>Đã đọc</option>
                    <option value="replied" {{ request('status') == 'replied' ? 'selected' : '' }}>Đã trả lời</option>
                </select>
                
                <div class="flex space-x-2">
                    <input type="text" name="search" placeholder="Tìm kiếm liên hệ..." value="{{ request('search') }}" class="border rounded px-3 py-2 text-sm flex-1">
                    <button type="submit" class="bg-gray-500 hover:bg-gray-700 text-white px-4 py-2 rounded">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Desktop Table View -->
<div class="hidden lg:block bg-white rounded-lg shadow overflow-hidden">
    <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">Liên hệ</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Chủ đề</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tin nhắn</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trạng thái</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ngày</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hành động</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($contacts as $contact)
            <tr class="{{ $contact->status === 'new' ? 'bg-blue-50' : '' }}">
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900">{{ $contact->name }}</div>
                    <div class="text-sm text-gray-500">{{ $contact->email }}</div>
                    @if($contact->phone)
                        <div class="text-sm text-gray-500">{{ $contact->phone }}</div>
                    @endif
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    {{ $contact->subject }}
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">
                    {{ Str::limit($contact->message, 50) }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                        {{ $contact->status === 'new' ? 'bg-blue-100 text-blue-800' : 
                           ($contact->status === 'read' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                        @if($contact->status === 'new')
                            Mới
                        @elseif($contact->status === 'read')
                            Đã đọc
                        @else
                            Đã trả lời
                        @endif
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ $contact->created_at->format('M d, Y H:i') }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                        <a href="{{ route('admin.contacts.show', $contact) }}" class="text-indigo-600 hover:text-indigo-900">Xem</a>
                        @if($contact->status === 'new')
                            <form method="POST" action="{{ route('admin.contacts.mark-as-read', $contact) }}" class="inline">
                                @csrf
                                <button type="submit" class="text-yellow-600 hover:text-yellow-900">Đánh dấu đã đọc</button>
                            </form>
                        @endif
                        <form method="POST" action="{{ route('admin.contacts.destroy', $contact) }}" class="inline" onsubmit="return confirm('Bạn có chắc chắn muốn xóa?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-900">Xóa</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="px-6 py-4 text-center text-gray-500">Không tìm thấy liên hệ nào.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Mobile Card View -->
<div class="lg:hidden space-y-4">
    @forelse($contacts as $contact)
    <div class="bg-white rounded-lg shadow p-4 {{ $contact->status === 'new' ? 'border-l-4 border-blue-500' : '' }}">
        <div class="flex items-start justify-between">
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-lg font-medium text-gray-900 truncate">{{ $contact->name }}</h3>
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                        {{ $contact->status === 'new' ? 'bg-blue-100 text-blue-800' : 
                           ($contact->status === 'read' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                        @if($contact->status === 'new')
                            Mới
                        @elseif($contact->status === 'read')
                            Đã đọc
                        @else
                            Đã trả lời
                        @endif
                    </span>
                </div>
                
                <div class="space-y-1 text-sm text-gray-500">
                    <div class="flex items-center">
                        <i class="fas fa-envelope mr-2"></i>
                        {{ $contact->email }}
                    </div>
                    @if($contact->phone)
                        <div class="flex items-center">
                            <i class="fas fa-phone mr-2"></i>
                            {{ $contact->phone }}
                        </div>
                    @endif
                    <div class="flex items-center">
                        <i class="fas fa-clock mr-2"></i>
                        {{ $contact->created_at->format('M d, Y H:i') }}
                    </div>
                </div>
                
                <div class="mt-3">
                    <h4 class="text-sm font-medium text-gray-900 mb-1">{{ $contact->subject }}</h4>
                    <p class="text-sm text-gray-600">{{ Str::limit($contact->message, 100) }}</p>
                </div>
                
                <div class="mt-4 flex flex-wrap gap-2">
                    <a href="{{ route('admin.contacts.show', $contact) }}" class="text-indigo-600 hover:text-indigo-900 text-sm">Xem</a>
                    @if($contact->status === 'new')
                        <form method="POST" action="{{ route('admin.contacts.mark-as-read', $contact) }}" class="inline">
                            @csrf
                            <button type="submit" class="text-yellow-600 hover:text-yellow-900 text-sm">Đánh dấu đã đọc</button>
                        </form>
                    @endif
                    <form method="POST" action="{{ route('admin.contacts.destroy', $contact) }}" class="inline" onsubmit="return confirm('Bạn có chắc chắn muốn xóa?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900 text-sm">Xóa</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="bg-white rounded-lg shadow p-8 text-center">
        <p class="text-gray-500">Không tìm thấy liên hệ nào.</p>
    </div>
    @endforelse
</div>

<div class="mt-6">
    {{ $contacts->links() }}
</div>
@endsection