@extends('admin.layouts.app')

@section('title', 'Ứng dụng di động')
@section('page-title', 'Quản lý ứng dụng')

@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">
            <a href="{{ route('admin.mobile-apps.create') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-flex items-center justify-center">
                <i class="fas fa-plus mr-2"></i> Thêm ứng dụng mới
            </a>
        </div>
        
        <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-4">
            <a href="{{ route('admin.mobile-apps.index') }}"
            class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 inline-block">
            Reset
        </a>
            <form method="GET" class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                <select name="category" class="border rounded px-3 py-2 text-sm">
                    <option value="">Tất cả danh mục</option>
                    <option value="productivity" {{ request('category') == 'productivity' ? 'selected' : '' }}>Năng suất</option>
                    <option value="entertainment" {{ request('category') == 'entertainment' ? 'selected' : '' }}>Giải trí</option>
                    <option value="education" {{ request('category') == 'education' ? 'selected' : '' }}>Giáo dục</option>
                    <option value="business" {{ request('category') == 'business' ? 'selected' : '' }}>Kinh doanh</option>
                    <option value="lifestyle" {{ request('category') == 'lifestyle' ? 'selected' : '' }}>Lối sống</option>
                    <option value="utilities" {{ request('category') == 'utilities' ? 'selected' : '' }}>Tiện ích</option>
                </select>
                
                <select name="status" class="border rounded px-3 py-2 text-sm">
                    <option value="">Tất cả trạng thái</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Hoạt động</option>
                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Tạm dừng</option>
                    <option value="coming_soon" {{ request('status') == 'coming_soon' ? 'selected' : '' }}>Sắp ra mắt</option>
                    <option value="discontinued" {{ request('status') == 'discontinued' ? 'selected' : '' }}>Ngừng phát triển</option>
                </select>
                
                <div class="flex space-x-2">
                    <input type="text" name="search" placeholder="Tìm kiếm ứng dụng..." 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">Ứng dụng</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">Nổi bật</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Google Play</th>
                {{-- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">App Store</th> --}}
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mô tả</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($mobileApps as $app)
            <tr>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <img class="h-12 w-12 rounded-lg object-cover" src="{{ getImageUrl($app->icon, 'default-image.png', 'storage') }}" alt="{{ $app->name }}">
                        <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900">{{ $app->name }}</div>
                            <div class="text-sm text-gray-500">{{ $app->version }}</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                        {{ $app->status === 'active' ? 'bg-green-100 text-green-800' : 
                           ($app->status === 'inactive' ? 'bg-red-100 text-red-800' : 
                           ($app->status === 'coming_soon' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')) }}">
                        @if($app->status === 'active')
                            Hoạt động
                        @elseif($app->status === 'inactive')
                            Tạm dừng
                        @elseif($app->status === 'coming_soon')
                            Sắp ra mắt
                        @else
                            Ngừng phát triển
                        @endif
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <button onclick="toggleFeatured(this)" data-url="{{ route('admin.mobile-apps.toggle-featured', $app) }}"
                        class="text-sm font-medium {{ $app->is_featured ? 'text-yellow-600' : 'text-gray-400' }}">
                        <i class="fas fa-star"></i>
                    </button>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    @if($app->google_play_url)
                        <a href="{{ $app->google_play_url }}" target="_blank" class="text-blue-600 hover:text-blue-800">
                            <i class="fab fa-google-play"></i> Google Play
                        </a>
                    @else
                        <span class="text-gray-400">Chưa có</span>
                    @endif
                </td>
                {{-- <td class="px-6 py-4 whitespace-nowrap">
                    @if($app->app_store_url)
                        <a href="{{ $app->app_store_url }}" target="_blank" class="text-blue-600 hover:text-blue-800">
                            <i class="fab fa-apple"></i> App Store
                        </a>
                    @else
                        <span class="text-gray-400">Chưa có</span>
                    @endif
                </td> --}}
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900 max-w-xs truncate">
                        {{ $app->short_description ?: $app->description }}
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                        <a href="{{ route('admin.mobile-apps.show', $app) }}" class="text-indigo-600 hover:text-indigo-900">Xem</a>
                        <a href="{{ route('admin.mobile-apps.edit', $app) }}" class="text-yellow-600 hover:text-yellow-900">Sửa</a>
                        <form method="POST" action="{{ route('admin.mobile-apps.destroy', $app) }}" 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 ứng dụng nào.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Mobile Card View -->
<div class="lg:hidden space-y-4">
    @forelse($mobileApps as $app)
    <div class="bg-white rounded-lg shadow p-4">
        <div class="flex items-start space-x-4">
            <img class="h-16 w-16 rounded-lg object-cover flex-shrink-0" src="{{ getImageUrl($app->icon, 'default-image.png', 'storage') }}" alt="{{ $app->name }}">
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900 truncate">{{ $app->name }}</h3>
                    <button onclick="toggleFeatured(this)" data-url="{{ route('admin.mobile-apps.toggle-featured', $app) }}" class="text-sm font-medium {{ $app->is_featured ? 'text-yellow-600' : 'text-gray-400' }}">
                        <i class="fas fa-star"></i>
                    </button>
                </div>
                <p class="text-sm text-gray-500">{{ $app->version }}</p>
                
                <div class="mt-2 flex flex-wrap gap-2">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                        {{ ucfirst($app->category) }}
                    </span>
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                        {{ $app->status === 'active' ? 'bg-green-100 text-green-800' : 
                           ($app->status === 'inactive' ? 'bg-red-100 text-red-800' : 
                           ($app->status === 'coming_soon' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')) }}">
                        {{ ucfirst(str_replace('_', ' ', $app->status)) }}
                    </span>
                    @if($app->is_featured)
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                            ⭐ Nổi bật
                        </span>
                    @endif
                </div>
                
                <div class="mt-3 flex items-center justify-between">
                    <div class="flex items-center space-x-4 text-sm text-gray-500">
                        <div class="flex items-center">
                            <i class="fas fa-download mr-1"></i>
                            {{ number_format($app->download_count) }}
                        </div>
                        <div class="flex items-center">
                            <div class="flex text-yellow-400 mr-1">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star text-xs {{ $i <= $app->rating ? '' : 'text-gray-300' }}"></i>
                                @endfor
                            </div>
                            <span>{{ $app->rating }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="mt-3 flex space-x-2">
                    <a href="{{ route('admin.mobile-apps.show', $app) }}" class="text-indigo-600 hover:text-indigo-900 text-sm">View</a>
                    <a href="{{ route('admin.mobile-apps.edit', $app) }}" class="text-yellow-600 hover:text-yellow-900 text-sm">Edit</a>
                    <form method="POST" action="{{ route('admin.mobile-apps.destroy', $app) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900 text-sm">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="bg-white rounded-lg shadow p-8 text-center">
        <p class="text-gray-500">No mobile apps found.</p>
    </div>
    @endforelse
</div>

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

<script>
function toggleFeatured(el) {
    const url = el.getAttribute('data-url');
    if (!url) return;
    fetch(url, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data && data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('Error:', error));
}
</script>
@endsection