@extends('admin.layout')
@section('title', 'Crear Producto - Admin IMOZA')
@section('header', 'Crear Producto')

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('admin.products') }}" class="text-sm text-imoza-blue-bright hover:text-imoza-blue-dark mb-4 inline-block">← Volver a productos</a>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Nombre *</label>
                <input type="text" name="name" value="{{ old('name') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
            </div>
            <div>
                <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Descripción</label>
                <textarea name="description" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none">{{ old('description') }}</textarea>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Precio *</label>
                    <input type="number" step="0.01" name="price" value="{{ old('price') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Unidad</label>
                    <input type="text" name="unit" value="{{ old('unit', 'pza') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Categoría *</label>
                    <select name="category_id" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
                        <option value="">Seleccionar...</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Marca</label>
                    <select name="brand_id" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none">
                        <option value="">Ninguna</option>
                        @foreach($brands as $brand)
                        <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Stock *</label>
                    <input type="number" name="stock" value="{{ old('stock', 0) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Stock Mínimo *</label>
                    <input type="number" name="min_stock" value="{{ old('min_stock', 5) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
                </div>
            </div>
            <div>
                <label class="block text-sm font-semibold text-imoza-blue-dark mb-1">Imagen</label>
                <input type="file" name="image" accept="image/*" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none">
            </div>
            <button type="submit" class="w-full bg-imoza-blue-dark hover:bg-imoza-blue-bright text-white font-bold py-3 rounded-xl transition-colors">Guardar Producto</button>
        </form>
    </div>
</div>
@endsection