@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;">➕ Novo Produto</div>
        <div style="color: rgba(255,255,255,0.7); font-size: 0.95rem;">Preencha os campos abaixo para adicionar um novo produto.</div>
    </div>

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

        <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') }}" 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') }}</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') }}" 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') }}" 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>
            <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;">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;">
                ✓ Criar Produto
            </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