@extends('layouts.app')

@section('content')
<div style="padding: 30px 20px; max-width: 700px; margin: 0 auto;">
    <a href="{{ route('products.index') }}" style="display: inline-flex; align-items: center; gap: 6px; color: #1aa860; text-decoration: none; font-weight: 600; margin-bottom: 20px;">
        ← Voltar
    </a>

    <h1 style="color: white; font-size: 2rem; font-weight: 800; margin-bottom: 30px;">✏️ Editar Produto</h1>

    <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data" style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 25px; display: grid; grid-template-columns: 1fr; gap: 18px;">
        @csrf
        @method('PUT')

        <!-- Nome -->
        <div>
            <label for="name" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">📝 Nome do Produto *</label>
            <input type="text" id="name" name="name" value="{{ old('name', $product->name) }}" required style="width: 100%; padding: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; font-size: 0.95rem;">
            @error('name')
                <span style="color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Descrição -->
        <div>
            <label for="description" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">📄 Descrição</label>
            <textarea id="description" name="description" rows="4" style="width: 100%; padding: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; font-size: 0.95rem; font-family: inherit;">{{ old('description', $product->description) }}</textarea>
            @error('description')
                <span style="color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Preço e Stock -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            <div>
                <label for="price" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">💰 Preço (Kz) *</label>
                <input type="number" id="price" name="price" step="0.01" value="{{ old('price', $product->price) }}" required style="width: 100%; padding: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; font-size: 0.95rem;">
                @error('price')
                    <span style="color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; display: block;">{{ $message }}</span>
                @enderror
            </div>

            <div>
                <label for="stock" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">📦 Estoque *</label>
                <input type="number" id="stock" name="stock" value="{{ old('stock', $product->stock) }}" required style="width: 100%; padding: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; font-size: 0.95rem;">
                @error('stock')
                    <span style="color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; display: block;">{{ $message }}</span>
                @enderror
            </div>
        </div>

        <!-- Categoria -->
        <div>
            <label for="category" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">🏷️ Categoria</label>
            <input type="text" id="category" name="category" value="{{ old('category', $product->category) }}" style="width: 100%; padding: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; font-size: 0.95rem;">
            @error('category')
                <span style="color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Imagem Atual -->
        @if($product->image)
            <div style="padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <p style="color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 10px; font-size: 0.9rem;">📸 Imagem Atual:</p>
                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" style="width: 100%; max-width: 200px; height: 150px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 8px; border: 1px solid rgba(255,255,255,0.1);">
            </div>
        @endif

        <!-- Imagem Nova -->
        <div>
            <label for="image" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">🖼️ Atualizar Imagem</label>
            <div style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.3s;" onclick="document.getElementById('image').click()">
                <input type="file" id="image" name="image" accept="image/*" style="display: none;" onchange="document.querySelector('.file-name').textContent = this.files[0]?.name || 'Nenhuma nova imagem selecionada'">
                <p style="font-size: 1.8rem; margin-bottom: 8px;">📸</p>
                <p style="color: rgba(255,255,255,0.8); font-weight: 600; margin-bottom: 4px;">Clique ou arraste para atualizar</p>
                <p style="color: rgba(255,255,255,0.6); font-size: 0.85rem; margin: 0; margin-bottom: 8px;" class="file-name">Nenhuma nova imagem selecionada</p>
                <p style="color: rgba(255,255,255,0.5); font-size: 0.8rem; margin: 0;">Formatos: JPEG, PNG, JPG, GIF (Máx: 2MB)</p>
            </div>
            @error('image')
                <span style="color: #ff6b6b; font-size: 0.85rem; margin-top: 4px; display: block;">{{ $message }}</span>
            @enderror
        </div>

        <!-- Botões -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.08);">
            <button type="submit" style="padding: 12px; background: linear-gradient(135deg, #1aa860, #16d97a); color: white; border: none; border-radius: 8px; font-weight: 800; cursor: pointer; font-size: 0.95rem;">
                ✅ Atualizar Produto
            </button>
            <a href="{{ route('products.index') }}" style="padding: 12px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); text-decoration: none; border-radius: 8px; font-weight: 800; text-align: center; font-size: 0.95rem;">
                ❌ Cancelar
            </a>
        </div>
    </form>
</div>
@endsection