@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" id="productForm">
        @csrf
        
        <!-- Currency Selector -->
        <div class="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
            <div class="flex items-center justify-between flex-wrap gap-2">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-blue-800">💱 Currency:</span>
                    <select id="displayCurrency" 
                            onchange="changeCurrency(this.value)"
                            class="px-3 py-1.5 border border-blue-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        @foreach($currencies as $code => $curr)
                        <option value="{{ $code }}" {{ $selectedCurrency == $code ? 'selected' : '' }}>
                            {{ $code }} ({{ $curr['symbol'] }})
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="text-xs text-blue-600">
                    Rate: 1 IDR = {{ number_format($currencies[$selectedCurrency]['rate'] ?? 1, 6) }} {{ $selectedCurrency }}
                </div>
            </div>
            <input type="hidden" id="selectedCurrency" value="{{ $selectedCurrency }}">
        </div>

        <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 (IDR) <span class="text-red-500">*</span></label>
                <input type="number" name="price" id="priceIdr" 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" 
                       oninput="convertPrice()" required>
                <p class="text-xs text-gray-500 mt-1">Harga dalam Rupiah (IDR)</p>
            </div>

            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Price ({{ $selectedCurrency }})</label>
                <input type="text" id="priceDisplay" class="w-full px-3 py-2 border rounded bg-gray-100 text-gray-700 cursor-not-allowed" readonly>
                <p class="text-xs text-gray-500 mt-1">Auto convert to {{ $selectedCurrency }}</p>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Sale Price (IDR)</label>
                <input type="number" name="sale_price" id="salePriceIdr" 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" 
                       oninput="convertSalePrice()">
                <p class="text-xs text-gray-500 mt-1">Leave empty if no discount</p>
            </div>

            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium">Sale Price ({{ $selectedCurrency }})</label>
                <input type="text" id="salePriceDisplay" class="w-full px-3 py-2 border rounded bg-gray-100 text-gray-700 cursor-not-allowed" readonly>
                <p class="text-xs text-gray-500 mt-1">Auto convert to {{ $selectedCurrency }}</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>

        <!-- Hidden fields -->
        <input type="hidden" id="currencyRate" value="{{ $currencies[$selectedCurrency]['rate'] ?? 1 }}">
        <input type="hidden" id="currencyCode" value="{{ $selectedCurrency }}">

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

<script>
    const currencies = @json($currencies);
    let currentCurrency = document.getElementById('selectedCurrency').value;

    function getRate(code) {
        return currencies[code]?.rate || 1;
    }

    function getSymbol(code) {
        return currencies[code]?.symbol || 'Rp';
    }

    function formatCurrency(amount, code) {
        const symbol = getSymbol(code);
        const decimals = code === 'IDR' ? 0 : 2;
        return symbol + ' ' + Number(amount).toLocaleString('en-US', {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
        });
    }

    function changeCurrency(code) {
        currentCurrency = code;
        document.getElementById('selectedCurrency').value = code;
        document.getElementById('currencyCode').value = code;
        document.getElementById('currencyRate').value = getRate(code);
        
        const rateDisplay = document.querySelector('.text-blue-600');
        if (rateDisplay) {
            rateDisplay.textContent = 'Rate: 1 IDR = ' + Number(getRate(code)).toFixed(6) + ' ' + code;
        }
        
        convertPrice();
        convertSalePrice();
    }

    function convertPrice() {
        const idr = parseFloat(document.getElementById('priceIdr').value) || 0;
        const rate = getRate(currentCurrency);
        const converted = idr * rate;
        document.getElementById('priceDisplay').value = formatCurrency(converted, currentCurrency);
    }

    function convertSalePrice() {
        const idr = parseFloat(document.getElementById('salePriceIdr').value) || 0;
        const rate = getRate(currentCurrency);
        const converted = idr * rate;
        const display = document.getElementById('salePriceDisplay');
        display.value = idr > 0 ? formatCurrency(converted, currentCurrency) : '';
    }

    document.addEventListener('DOMContentLoaded', function() {
        convertPrice();
        convertSalePrice();
    });
</script>
@endsection