@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;">✨ Novo Produto</h1>

    <form action="{{ route('products.store') }}" 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

        <!-- 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') }}" required placeholder="Ex: Camiseta WSCB" 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" placeholder="Descreva detalhes do produto..." 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') }}</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') }}" required placeholder="0.00" 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', 0) }}" required placeholder="0" 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') }}" placeholder="Ex: Vestuário" 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 -->
        <div>
            <label for="image" style="display: block; color: rgba(255,255,255,0.8); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem;">🖼️ Imagem do Produto</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 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 uma imagem</p>
                <p style="color: rgba(255,255,255,0.6); font-size: 0.85rem; margin: 0; margin-bottom: 8px;" class="file-name">Nenhuma 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;">
                ✅ Criar 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