@extends('admin.layouts.app')

@section('title', 'Tạo ứng dụng mới')
@section('page-title', 'Tạo ứng dụng  mới')

@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>

    <form method="POST" action="{{ route('admin.mobile-apps.store') }}" enctype="multipart/form-data" class="bg-white rounded-lg shadow p-6">
        @csrf
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Thông tin cơ bản -->
            <div class="md:col-span-2">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Thông tin cơ bản</h3>
            </div>
            
            <div class="md:col-span-2">
                <label for="name" class="block text-sm font-medium text-gray-700">Tên ứng dụng *</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700">Danh mục *</label>
                <select name="category" id="category" required
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    <option value="">Chọn danh mục</option>
                    <option value="productivity" {{ old('category') == 'productivity' ? 'selected' : '' }}>Năng suất</option>
                    <option value="entertainment" {{ old('category') == 'entertainment' ? 'selected' : '' }}>Giải trí</option>
                    <option value="education" {{ old('category') == 'education' ? 'selected' : '' }}>Giáo dục</option>
                    <option value="business" {{ old('category') == 'business' ? 'selected' : '' }}>Kinh doanh</option>
                    <option value="lifestyle" {{ old('category') == 'lifestyle' ? 'selected' : '' }}>Lối sống</option>
                    <option value="utilities" {{ old('category') == 'utilities' ? 'selected' : '' }}>Tiện ích</option>
                </select>
                @error('category')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="status" class="block text-sm font-medium text-gray-700">Trạng thái *</label>
                <select name="status" id="status" required
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Hoạt động</option>
                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Tạm dừng</option>
                    <option value="coming_soon" {{ old('status') == 'coming_soon' ? 'selected' : '' }}>Sắp ra mắt</option>
                    <option value="discontinued" {{ old('status') == 'discontinued' ? 'selected' : '' }}>Ngừng phát triển</option>
                </select>
                @error('status')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <div class="flex items-center">
                    <input type="checkbox" name="is_featured" id="is_featured" value="1" 
                        {{ old('is_featured') ? 'checked' : '' }}
                        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                    <label for="is_featured" class="ml-2 block text-sm font-medium text-gray-700">
                        Ứng dụng nổi bật
                    </label>
                </div>
                <p class="mt-1 text-xs text-gray-500">Ứng dụng nổi bật sẽ được hiển thị ở vị trí đầu tiên</p>
                @error('is_featured')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label for="short_description" class="block text-sm font-medium text-gray-700">Mô tả ngắn</label>
                <textarea name="short_description" id="short_description" rows="3"
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">{{ old('short_description') }}</textarea>
                @error('short_description')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Liên kết tải về -->
            <div class="md:col-span-2">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Liên kết tải về</h3>
            </div>

            <div class="md:col-span-2">
                <label for="google_play_url" class="block text-sm font-medium text-gray-700">Google Play URL</label>
                <input type="url" name="google_play_url" id="google_play_url" value="{{ old('google_play_url') }}"
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2"
                    placeholder="https://play.google.com/store/apps/details?id=...">
                @error('google_play_url')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- <div>
                <label for="app_store_url" class="block text-sm font-medium text-gray-700">App Store URL</label>
                <input type="url" name="app_store_url" id="app_store_url" value="{{ old('app_store_url') }}"
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2"
                    placeholder="https://apps.apple.com/app/...">
                @error('app_store_url')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div> --}}

            <!-- Hình ảnh -->
            <div class="md:col-span-2">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Hình ảnh</h3>
            </div>

            <div>
                <label for="icon" class="block text-sm font-medium text-gray-700">Icon ứng dụng</label>
                <input type="file" name="icon" id="icon" accept="image/*"
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                @error('icon')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="featured_image" class="block text-sm font-medium text-gray-700">Ảnh nổi bật</label>
                <input type="file" name="featured_image" id="featured_image" accept="image/*"
                    class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2">
                @error('featured_image')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="mt-8 flex justify-end 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 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                Hủy bỏ
            </a>
            <button type="submit" 
                class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                Tạo ứng dụng
            </button>
        </div>
    </form>
</div>
@endsection