@extends('layouts.app')

@section('content')
<div style="padding: 30px 20px 60px; max-width: 800px; margin: 0 auto;">
    <div style="margin-bottom: 30px;">
        <div style="color: white; font-size: 2rem; font-weight: 800;">✏️ Editar Produto</div>
        <div style="color: rgba(255,255,255,0.7); font-size: 0.95rem;">Atualize as informações do produto.</div>
    </div>

    <form method="POST" action="{{ route('admin.products.update', $product) }}" 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: 30px;">
        @csrf
        @method('PUT')

        <div style="margin-bottom: 20px;">
            <label for="name" style="display: block; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 8px;">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.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: white;">
            @error('name')
                <div style="color: #ff6b7a; font-size: 0.85rem; margin-top: 6px;">{{ $message }}</div>
            @enderror
        </div>

        <div style="margin-bottom: 20px;">
            <label for="description" style="display: block; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 8px;">Descrição</label>
            <textarea id="description" name="description" rows="4" style="width: 100%; padding: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: white; resize: vertical;">{{ old('description', $product->description) }}</textarea>
            @error('description')
                <div style="color: #ff6b7a; font-size: 0.85rem; margin-top: 6px;">{{ $message }}</div>
            @enderror
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
            <div>
                <label for="price" style="display: block; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 8px;">Preço (Akz) *</label>
                <input type="number" id="price" name="price" value="{{ old('price', $product->price) }}" step="0.01" min="0" required style="width: 100%; padding: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: white;">
                @error('price')
                    <div style="color: #ff6b7a; font-size: 0.85rem; margin-top: 6px;">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label for="stock" style="display: block; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 8px;">Estoque *</label>
                <input type="number" id="stock" name="stock" value="{{ old('stock', $product->stock) }}" min="0" required style="width: 100%; padding: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: white;">
                @error('stock')
                    <div style="color: #ff6b7a; font-size: 0.85rem; margin-top: 6px;">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div style="margin-bottom: 30px;">
            <label for="image" style="display: block; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 8px;">Imagem do Produto</label>
            
            @if($product->image)
                <div style="margin-bottom: 12px;">
                    <div style="color: rgba(255,255,255,0.7); font-size: 0.85rem; margin-bottom: 6px;">Imagem atual:</div>
                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
                </div>
            @endif

            <input type="file" id="image" name="image" accept="image/jpeg,image/jpg,image/png,image/webp" style="width: 100%; padding: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: rgba(255,255,255,0.85);">
            <div style="color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 6px;">
                Deixe vazio para manter a imagem atual. Formatos: JPG, PNG, WEBP (máx. 2MB)
            </div>
            @error('image')
                <div style="color: #ff6b7a; font-size: 0.85rem; margin-top: 6px;">{{ $message }}</div>
            @enderror
        </div>

        <div style="display: flex; gap: 10px;">
            <button type="submit" style="padding: 12px 24px; background: linear-gradient(135deg, #1aa860, #16d97a); color: white; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer;">
                ✓ Salvar Alterações
            </button>
            <a href="{{ route('admin.products.index') }}" style="padding: 12px 24px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); text-decoration: none; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center;">
                ← Voltar
            </a>
        </div>
    </form>
</div>
@endsection