@extends('layouts.app')

@section('content')
<div style="padding: 30px 20px 60px; max-width: 1200px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
        <div>
            <div style="color: white; font-size: 2rem; font-weight: 800;">📦 Gestão de Produtos</div>
            <div style="color: rgba(255,255,255,0.7); font-size: 0.95rem;">Adicione, edite ou remova produtos da loja.</div>
        </div>
        <a href="{{ route('admin.products.create') }}" style="padding: 12px 20px; background: linear-gradient(135deg, #1aa860, #16d97a); color: white; text-decoration: none; border-radius: 8px; font-weight: 800;">
            ➕ Novo Produto
        </a>
    </div>

    @if(session('success'))
        <div style="padding: 14px 18px; background: rgba(26, 168, 96, 0.15); border: 1px solid #1aa860; border-radius: 8px; color: #16d97a; margin-bottom: 20px;">
            ✓ {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div style="padding: 14px 18px; background: rgba(220, 53, 69, 0.15); border: 1px solid #dc3545; border-radius: 8px; color: #ff6b7a; margin-bottom: 20px;">
            ✗ {{ session('error') }}
        </div>
    @endif

    <div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden;">
        @if($products->count() > 0)
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; min-width: 900px;">
                    <thead>
                        <tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">ID</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Imagem</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Nome</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Preço</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Estoque</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                            <tr style="border-bottom: 1px solid rgba(255,255,255,0.06);">
                                <td style="padding: 14px 18px; color: rgba(255,255,255,0.85);">{{ $product->id }}</td>
                                <td style="padding: 14px 18px;">
                                    @if($product->image)
                                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 6px;">
                                    @else
                                        <div style="width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5);">📦</div>
                                    @endif
                                </td>
                                <td style="padding: 14px 18px; color: white; font-weight: 600;">{{ $product->name }}</td>
                                <td style="padding: 14px 18px; color: #F5B800; font-weight: 700;">{{ number_format($product->price, 2, ',', '.') }} Akz</td>
                                <td style="padding: 14px 18px; color: rgba(255,255,255,0.85);">{{ $product->stock }}</td>
                                <td style="padding: 14px 18px;">
                                    <div style="display: flex; gap: 8px;">
                                        <a href="{{ route('admin.products.edit', $product) }}" style="padding: 6px 12px; background: #0d6efd; color: white; text-decoration: none; border-radius: 6px; font-size: 0.85rem;">Editar</a>
                                        <form method="POST" action="{{ route('admin.products.destroy', $product) }}" onsubmit="return confirm('Tem certeza que deseja deletar este produto?')" style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" style="padding: 6px 12px; background: #dc3545; color: white; border: 0; border-radius: 6px; font-size: 0.85rem; cursor: pointer;">Deletar</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div style="padding: 20px;">
                {{ $products->links() }}
            </div>
        @else
            <div style="padding: 40px; text-align: center; color: rgba(255,255,255,0.6);">
                <div style="font-size: 3rem; margin-bottom: 10px;">📦</div>
                <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 6px;">Ainda não há produtos</div>
                <div style="font-size: 0.9rem;">Clique em "Novo Produto" para adicionar o primeiro produto à loja.</div>
            </div>
        @endif
    </div>
</div>
@endsection