@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" 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 name="display_currency" 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 }}">{{ $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 (IDR) <span class="text-red-500">*</span></label>
                <input type="number" name="price" id="priceIdr" step="0.01" min="0" 
                       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" 
                       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" 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>

        <!-- 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">Create Product</button>
        </div>
    </form>
</div>

<script>
    // Data currency dari server
    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);
        
        // Update labels
        document.querySelectorAll('.currency-label').forEach(el => {
            el.textContent = code;
        });
        
        // Update rate display
        const rateDisplay = document.querySelector('.text-blue-600');
        if (rateDisplay) {
            rateDisplay.textContent = 'Rate: 1 IDR = ' + Number(getRate(code)).toFixed(6) + ' ' + code;
        }
        
        // Re-convert prices
        convertPrice();
        convertSalePrice();
    }

    function convertPrice() {
        const idr = parseFloat(document.getElementById('priceIdr').value) || 0;
        const rate = getRate(currentCurrency);
        const converted = idr * rate;
        const display = document.getElementById('priceDisplay');
        display.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');
        if (idr > 0) {
            display.value = formatCurrency(converted, currentCurrency);
        } else {
            display.value = '';
        }
    }

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