@extends('layouts.admin')

@section('title', 'Products')

@section('content')
<div class="flex flex-wrap justify-between items-center gap-4 mb-6">
    <h1 class="text-2xl font-bold">Products</h1>
    
    <div class="flex items-center gap-3">
        <!-- Currency Selector -->
        <form method="GET" action="/admin/products" class="flex items-center gap-2">
            <label class="text-sm font-medium text-gray-700">Currency:</label>
            <select name="currency" onchange="this.form.submit()" 
                    class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
                @foreach($currencies as $code => $curr)
                <option value="{{ $code }}" {{ $selectedCurrency == $code ? 'selected' : '' }}>
                    {{ $code }} ({{ $curr['symbol'] }})
                </option>
                @endforeach
            </select>
        </form>
        
        <a href="/admin/products/create" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 whitespace-nowrap">
            + Add Product
        </a>
    </div>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="table-responsive">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left">ID</th>
                <th class="px-6 py-3 text-left">Image</th>
                <th class="px-6 py-3 text-left">Name</th>
                <th class="px-6 py-3 text-left">Game</th>
                <th class="px-6 py-3 text-left">Price ({{ $selectedCurrency }})</th>
                <th class="px-6 py-3 text-left">Stock</th>
                <th class="px-6 py-3 text-left">Status</th>
                <th class="px-6 py-3 text-left">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $product)
            @php
                // Convert price to selected currency
                $rate = $currencies[$selectedCurrency]['rate'] ?? 1;
                $convertedPrice = $product->price * $rate;
                $convertedSalePrice = $product->sale_price ? $product->sale_price * $rate : null;
                $symbol = $currencies[$selectedCurrency]['symbol'] ?? 'Rp';
            @endphp
            <tr class="border-t hover:bg-gray-50">
                <td class="px-6 py-4">{{ $product->id }}</td>
                <td class="px-6 py-4">
                    @if($product->image)
                        <img src="{{ asset($product->image) }}" class="w-12 h-12 object-cover rounded" alt="{{ $product->name }}">
                    @else
                        <div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center text-gray-400 text-xs">No image</div>
                    @endif
                </td>
                <td class="px-6 py-4 font-medium">{{ $product->name }}</td>
                <td class="px-6 py-4">{{ $product->game->name ?? 'N/A' }}</td>
                <td class="px-6 py-4">
                    @if($convertedSalePrice)
                        <span class="text-gray-400 line-through text-sm">
                            {{ $symbol }} {{ number_format($convertedPrice, $selectedCurrency == 'IDR' ? 0 : 2) }}
                        </span>
                        <span class="text-green-600 font-medium ml-1">
                            {{ $symbol }} {{ number_format($convertedSalePrice, $selectedCurrency == 'IDR' ? 0 : 2) }}
                        </span>
                    @else
                        {{ $symbol }} {{ number_format($convertedPrice, $selectedCurrency == 'IDR' ? 0 : 2) }}
                    @endif
                </td>
                <td class="px-6 py-4">
                    @if($product->stock > 0)
                        <span class="text-green-600">{{ $product->stock }}</span>
                    @else
                        <span class="text-red-600">Out of stock</span>
                    @endif
                </td>
                <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs rounded-full {{ $product->status == 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $product->status }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <a href="/admin/products/{{ $product->id }}/edit" class="text-blue-600 hover:text-blue-800 mr-3">Edit</a>
                    <form action="/admin/products/{{ $product->id }}/delete" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this product?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-800">Delete</button>
                    </form>
                </td>
            </tr>
            @endforeach

            @if($products->isEmpty())
            <tr>
                <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                    No products found. Click "Add Product" to create one.
                </td>
            </tr>
            @endif
        </tbody>
    </table>
    </div>
    <div class="p-4 border-t">
        {{ $products->links() }}
    </div>
</div>
@endsection