@extends('layouts.admin')

@section('title', 'Create Product')

@section('content')
<h1 class="text-2xl font-bold mb-6">Create Product</h1>

<div class="bg-white rounded-lg shadow p-6 max-w-2xl">
    <form action="/admin/products/store" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div class="mb-4">
            <label class="block mb-2 text-sm font-medium">Game <span class="text-red-500">*</span></label>
            <select name="game_id" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <option value="">Select Game</option>
                @foreach($games as $game)
                <option value="{{ $game->id }}">{{ $game->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-4">
            <label class="block mb-2 text-sm font-medium">Product Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        </div>

        <div class="mb-4">
            <label class="block mb-2 text-sm font-medium">Description</label>
            <textarea name="description" rows="5" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Price <span class="text-red-500">*</span></label>
                <input type="number" name="price" step="0.01" min="0" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>

            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Sale Price</label>
                <input type="number" name="sale_price" step="0.01" min="0" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="text-xs text-gray-500 mt-1">Leave empty if no discount</p>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Stock <span class="text-red-500">*</span></label>
                <input type="number" name="stock" value="0" min="0" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
            </div>

            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Delivery Type</label>
                <select name="delivery_type" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="auto">Auto (Instant Delivery)</option>
                    <option value="manual">Manual (Admin Process)</option>
                </select>
            </div>
        </div>

        <div class="mb-4">
            <label class="block mb-2 text-sm font-medium">Main Image</label>
            <input type="file" name="image" accept="image/*" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
            <p class="text-xs text-gray-500 mt-1">Recommended: 500x500px. Max 2MB (JPG, PNG, GIF)</p>
        </div>

        <div class="mb-4">
            <label class="block mb-2 text-sm font-medium">Tutorial Video URL</label>
            <input type="text" name="tutorial_video" placeholder="https://youtube.com/watch?v=..." class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div class="mb-6">
            <label class="block mb-2 text-sm font-medium">Status</label>
            <select name="status" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>

        <div class="flex space-x-2">
            <a href="/admin/products" class="px-4 py-2 border rounded hover:bg-gray-50">Cancel</a>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Create Product</button>
        </div>
    </form>
</div>
@endsection