@extends('admin.layouts.app')

@section('title', 'Chi tiết ứng dụng')
@section('page-title', 'Chi tiết ứng dụng di động')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('admin.mobile-apps.index') }}" 
           class="inline-flex items-center px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
            </svg>
            Quay lại danh sách
        </a>
    </div>

    <!-- App Details -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    @if($mobileApp->icon)
                        <img class="h-16 w-16 rounded-lg object-cover mr-4" 
                             src="{{ asset('storage/' . $mobileApp->icon) }}" 
                             alt="{{ $mobileApp->name }}">
                    @endif
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ $mobileApp->name }}</h1>
                        <p class="text-sm text-gray-600">Phiên bản: {{ $mobileApp->version }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <span class="px-3 py-1 text-sm font-semibold rounded-full
                        {{ $mobileApp->status === 'active' ? 'bg-green-100 text-green-800' : 
                           ($mobileApp->status === 'inactive' ? 'bg-red-100 text-red-800' : 
                           ($mobileApp->status === 'coming_soon' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')) }}">
                        @if($mobileApp->status === 'active')
                            Hoạt động
                        @elseif($mobileApp->status === 'inactive')
                            Tạm dừng
                        @elseif($mobileApp->status === 'coming_soon')
                            Sắp ra mắt
                        @else
                            Ngừng phát triển
                        @endif
                    </span>
                    @if($mobileApp->is_featured)
                        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-purple-100 text-purple-800">
                            ⭐ Nổi bật
                        </span>
                    @endif
                    <span class="text-sm text-gray-500">
                        {{ $mobileApp->created_at->format('d/m/Y H:i') }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="px-6 py-6">
            <!-- App Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-3">Thông tin ứng dụng</h3>
                    <div class="space-y-2">
                        <div class="flex items-center">
                            <span class="font-medium text-gray-700 w-24">Danh mục:</span>
                            <span class="text-gray-900">
                                @if($mobileApp->category === 'productivity')
                                    Năng suất
                                @elseif($mobileApp->category === 'entertainment')
                                    Giải trí
                                @elseif($mobileApp->category === 'education')
                                    Giáo dục
                                @elseif($mobileApp->category === 'business')
                                    Kinh doanh
                                @elseif($mobileApp->category === 'lifestyle')
                                    Lối sống
                                @else
                                    Tiện ích
                                @endif
                            </span>
                        </div>
                        <div class="flex items-center">
                            <span class="font-medium text-gray-700 w-24">Kích thước:</span>
                            <span class="text-gray-900">{{ $mobileApp->app_size ?: 'Chưa cập nhật' }}</span>
                        </div>
                        <div class="flex items-center">
                            <span class="font-medium text-gray-700 w-24">Tải về:</span>
                            <span class="text-gray-900">{{ number_format($mobileApp->download_count) }} lượt</span>
                        </div>
                        <div class="flex items-center">
                            <span class="font-medium text-gray-700 w-24">Đánh giá:</span>
                            <div class="flex items-center">
                                <div class="flex text-yellow-400 mr-2">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fas fa-star {{ $i <= $mobileApp->rating ? '' : 'text-gray-300' }}"></i>
                                    @endfor
                                </div>
                                <span class="text-gray-900">{{ $mobileApp->rating }}/5 ({{ $mobileApp->review_count }} đánh giá)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-3">Liên kết tải về</h3>
                    <div class="space-y-3">
                        @if($mobileApp->google_play_url)
                        <div class="flex items-center">
                            <i class="fab fa-google-play text-green-600 mr-3"></i>
                            <a href="{{ $mobileApp->google_play_url }}" target="_blank" 
                               class="text-blue-600 hover:text-blue-800 underline">
                                Google Play Store
                            </a>
                        </div>
                        @endif
                        {{-- @if($mobileApp->app_store_url)
                        <div class="flex items-center">
                            <i class="fab fa-apple text-gray-600 mr-3"></i>
                            <a href="{{ $mobileApp->app_store_url }}" target="_blank" 
                               class="text-blue-600 hover:text-blue-800 underline">
                                Apple App Store
                            </a>
                        </div>
                        @endif --}}
                        @if(!$mobileApp->google_play_url && !$mobileApp->app_store_url)
                        <p class="text-gray-500">Chưa có liên kết tải về</p>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Description -->
            @if($mobileApp->short_description)
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Mô tả</h3>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-700">{{ $mobileApp->short_description }}</p>
                </div>
            </div>
            @endif

            <!-- Featured Image -->
            @if($mobileApp->featured_image)
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Ảnh nổi bật</h3>
                <img src="{{ asset('storage/' . $mobileApp->featured_image) }}" 
                     alt="{{ $mobileApp->name }}" 
                     class="max-w-md rounded-lg shadow">
            </div>
            @endif
        </div>

        <!-- Actions -->
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
            <div class="flex justify-between items-center">
                <div class="flex space-x-3">
                    <a href="{{ route('admin.mobile-apps.edit', $mobileApp) }}" 
                       class="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        Chỉnh sửa
                    </a>
                </div>
                
                <div class="flex space-x-3">
                    <form method="POST" action="{{ route('admin.mobile-apps.destroy', $mobileApp) }}" 
                        class="inline" onsubmit="return confirm('Bạn có chắc chắn muốn xóa ứng dụng này?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                            Xóa ứng dụng
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection