@extends('layouts.admin')

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

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

<div class="bg-white rounded-lg shadow p-6 max-w-2xl">
    <form action="/admin/products/{{ $product->id }}/update" 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 }}" {{ $product->game_id == $game->id ? 'selected' : '' }}>
                    {{ $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" value="{{ $product->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">{{ $product->description }}</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" value="{{ $product->price }}" 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" value="{{ $product->sale_price }}" 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" min="0" value="{{ $product->stock }}" 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" {{ $product->delivery_type == 'auto' ? 'selected' : '' }}>Auto (Instant Delivery)</option>
                    <option value="manual" {{ $product->delivery_type == 'manual' ? 'selected' : '' }}>Manual (Admin Process)</option>
                </select>
            </div>
        </div>

        <div class="mb-4">
            <label class="block mb-2 text-sm font-medium">Current Main Image</label>
            @if($product->image)
                <div class="mb-2">
                    <img src="{{ asset($product->image) }}" class="w-32 h-32 object-cover rounded border">
                </div>
            @else
                <p class="text-sm text-gray-500 mb-2">No image</p>
            @endif
            <label class="block mb-2 text-sm font-medium">Upload New 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">Leave empty to keep current image. 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" value="{{ $product->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" {{ $product->status == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ $product->status == 'inactive' ? 'selected' : '' }}>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">Update Product</button>
        </div>
    </form>

    <!-- Gallery Section -->
    <div class="mt-8 pt-6 border-t">
        <h2 class="text-lg font-semibold mb-4">Product Gallery</h2>
        
        <form action="/admin/products/{{ $product->id }}/gallery/upload" method="POST" enctype="multipart/form-data" class="mb-4">
            @csrf
            <div class="flex space-x-2">
                <input type="file" name="image" accept="image/*" class="flex-1 px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">Add Image</button>
            </div>
            <p class="text-xs text-gray-500 mt-1">Max 2MB per image (JPG, PNG, GIF)</p>
        </form>

        @if($product->gallery->count() > 0)
            <div class="grid grid-cols-4 gap-2">
                @foreach($product->gallery as $image)
                <div class="relative group">
                    <img src="{{ asset($image->image) }}" class="w-full h-24 object-cover rounded border">
                    <form action="/admin/products/gallery/{{ $image->id }}/delete" method="POST" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="bg-red-600 text-white text-xs px-2 py-1 rounded hover:bg-red-700" onclick="return confirm('Delete this image?')">×</button>
                    </form>
                </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-4">No gallery images yet.</p>
        @endif
    </div>
</div>
@endsection