{{-- ==================== DATOS GENERALES ==================== --}}
<div class="card shadow-sm mb-4 border-0 rounded-3">
    <div class="card-header bg-white py-3 border-bottom">
        <div class="d-flex align-items-center">
            <div class="icon-box bg-primary-subtle text-primary rounded-3 me-3">
                <i class="fas fa-info-circle"></i>
            </div>
            <div>
                <h6 class="m-0 fw-bold text-dark">Datos Generales</h6>
                <small class="text-muted">Información básica del artículo</small>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <label for="nombre" class="form-label fw-semibold">
                    Nombre del Artículo <span class="text-danger">*</span>
                </label>
                <input type="text"
                    class="form-control form-control-lg {{ $errors->has('nombre') ? 'is-invalid' : '' }}" name="nombre"
                    id="nombre" placeholder="Ej: Mi Producto" value="{{ old('nombre', $articulo->nombre ?? '') }}"
                    required>
                @error('nombre')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-3">
                <label for="cod_barras" class="form-label fw-semibold">Código de Barras</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-barcode"></i></span>
                    <input type="text" class="form-control" name="cod_barras"
                        value="{{ old('cod_barras', $articulo->cod_barras ?? '') }}">
                </div>
            </div>

            <div class="col-md-3">
                <label for="fecha_ven" class="form-label fw-semibold">Fecha de Vencimiento</label>
                <input type="date" class="form-control" name="fecha_ven" id="fecha_ven"
                    value="{{ old('fecha_ven', $articulo->fecha_ven ?? '') }}">
            </div>
        </div>
    </div>
</div>

{{-- ==================== PRECIOS + INVENTARIO ==================== --}}
<div class="row g-4 mb-4">

    {{-- PRECIOS --}}
    <div class="col-lg-6">
        <div class="card shadow-sm h-100 border-0 rounded-3">
            <div class="card-header bg-white py-3 border-bottom">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-success-subtle text-success rounded-3 me-3">
                        <i class="fas fa-money-bill-wave"></i>
                    </div>
                    <div>
                        <h6 class="m-0 fw-bold text-dark">Precios y Costos</h6>
                        <small class="text-muted">Define el margen de ganancia</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            Precio Costo <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-danger-subtle border-0 text-danger fw-bold">Q</span>
                            <input type="number" step="any" class="form-control" required name="p_costo"
                                value="{{ old('p_costo', $articulo->p_costo ?? '') }}">
                        </div>
                        <div class="form-text small">Costo de adquisición</div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            Precio Venta (Público) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-primary border-0 text-white fw-bold">Q</span>
                            <input type="number" step="any" class="form-control fw-bold" required name="p_venta"
                                value="{{ old('p_venta', $articulo->p_venta ?? '') }}">
                        </div>
                        <div class="form-text small">Precio al público general</div>
                    </div>
                </div>

                <hr class="my-3">

                <div class="row g-2">
                    <div class="col-md-6">
                        <label class="small text-muted fw-semibold form-label">Precio Blister</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Q</span>
                            <input type="number" step="any" class="form-control" name="precio1"
                                value="{{ old('precio1', $articulo->precio1 ?? '') }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="small text-muted fw-semibold form-label">Precio Caja</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Q</span>
                            <input type="number" step="any" class="form-control" name="precio2"
                                value="{{ old('precio2', $articulo->precio2 ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- INVENTARIO --}}
    <div class="col-lg-6">
        <div class="card shadow-sm h-100 border-0 rounded-3">
            <div class="card-header bg-white py-3 border-bottom">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-warning-subtle text-warning rounded-3 me-3">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <div>
                        <h6 class="m-0 fw-bold text-dark">Inventario</h6>
                        <small class="text-muted">Stock y niveles mínimos/máximos</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    <label class="form-label fw-semibold">Stock Actual</label>
                    <input type="number" step="any"
                        class="form-control form-control-lg fw-bold text-warning-emphasis border-warning"
                        name="stock" placeholder="0" value="{{ old('stock', $articulo->stock ?? '') }}">
                </div>

                <div class="row g-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-arrow-down text-danger me-1"></i> Mínimo
                        </label>
                        <input type="number" class="form-control" name="min_stock"
                            value="{{ old('min_stock', $articulo->min_stock ?? '') }}">
                        <div class="form-text small">Alerta de reabastecimiento</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-arrow-up text-success me-1"></i> Máximo
                        </label>
                        <input type="number" class="form-control" name="stock_maximo"
                            value="{{ old('stock_maximo', $articulo->stock_maximo ?? '') }}">
                        <div class="form-text small">Tope de almacenamiento</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ==================== CLASIFICACIÓN Y UBICACIÓN ==================== --}}
<div class="card shadow-sm mb-4 border-0 rounded-3">
    <div class="card-header bg-white py-3 border-bottom">
        <div class="d-flex align-items-center">
            <div class="icon-box bg-secondary-subtle text-secondary rounded-3 me-3">
                <i class="fas fa-tags"></i>
            </div>
            <div>
                <h6 class="m-0 fw-bold text-dark">Clasificación y Ubicación</h6>
                <small class="text-muted">Fabricante, medida y ubicación física</small>
            </div>
        </div>
    </div>
    <div class="card-body">

        {{-- Fila oculta (mantener tal cual por compatibilidad) --}}
        <div class="row g-3 d-none ">
            <div class="col-md-6">
                <select class="form-select" name="categoria_id" id="categoria_id">
                    <option value="" selected disabled>Seleccione una opción...</option>
                    @foreach ($categoria as $cat)
                        <option value="{{ $cat->id }}"
                            {{ old('categoria_id', $articulo->categoria_id ?? '') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->nombre }} / {{ $cat->tipo }}
                        </option>
                    @endforeach
                </select>
                <input type="text" value="1" name="categoria_id">
            </div>

            <div class="col-md-6">
                <select class="form-select" name="proveedor_id" id="proveedor_id">
                    <option value="" selected disabled>Seleccione Proveedor...</option>
                    @foreach ($proveedor as $pro)
                        <option value="{{ $pro->id }}"
                            {{ old('proveedor_id', $articulo->proveId ?? '') == $pro->id ? 'selected' : '' }}>
                            {{ $pro->nombre }} ({{ $pro->telefono1 }})
                        </option>
                    @endforeach
                </select>
                <input type="text" value="1" name="proveedor_id">
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-3 col-sm-6">
                <label class="form-label fw-semibold">
                    <i class="fas fa-industry text-muted me-1"></i> Casa Médica
                </label>
                <input type="text" class="form-control" name="fabricante"
                    value="{{ old('fabricante', $articulo->fabricante ?? '') }}">
            </div>
            <div class="col-md-3 col-sm-6">
                <label class="form-label fw-semibold">
                    <i class="fas fa-ruler text-muted me-1"></i> Medida
                </label>
                <input type="text" class="form-control" name="medida"
                    value="{{ old('medida', $articulo->medida ?? '') }}">
            </div>
            <div class="col-md-3 col-sm-6">
                <label class="form-label fw-semibold">
                    <i class="fas fa-layer-group text-muted me-1"></i> Estantería
                </label>
                <input type="text" class="form-control" name="unidad"
                    value="{{ old('unidad', $articulo->unidad ?? '') }}">
            </div>
            <div class="col-md-3 col-sm-6">
                <label class="form-label fw-semibold">
                    <i class="fas fa-map-marker-alt text-muted me-1"></i> Sub-estantería / Ubicación
                </label>
                <input type="text" class="form-control" name="ubicacion"
                    value="{{ old('ubicacion', $articulo->ubicacion ?? '') }}">
            </div>
        </div>
    </div>
</div>

{{-- ==================== IMÁGENES + DETALLES (oculto por clase) ==================== --}}
<div class="row g-4 mb-4 d-none">
    <div class="col-md-6">
        <div class="card shadow-sm h-100 border-0 rounded-3">
            <div class="card-header bg-white py-3 border-bottom">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-info-subtle text-info rounded-3 me-3">
                        <i class="fas fa-images"></i>
                    </div>
                    <h6 class="m-0 fw-bold text-dark">Imágenes</h6>
                </div>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="img" class="form-label fw-semibold">Imagen Principal</label>
                    <input class="form-control" type="file" name="img" id="img" accept="image/*">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">URL Imagen Secundaria</label>
                    <input type="text" class="form-control" name="img2" placeholder="http://..."
                        value="{{ old('img2', $articulo->img2 ?? '') }}">
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-sm h-100 border-0 rounded-3">
            <div class="card-header bg-white py-3 border-bottom">
                <div class="d-flex align-items-center">
                    <div class="icon-box bg-dark-subtle text-dark rounded-3 me-3">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h6 class="m-0 fw-bold text-dark">Detalles Adicionales</h6>
                </div>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Descripción General</label>
                    <textarea class="form-control" name="descripcion" rows="3" required>{{ old('descripcion', $articulo->descripcion ?? '') }}.</textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">
                        Notas Internas <small class="text-muted">(No visible al cliente)</small>
                    </label>
                    <textarea class="form-control bg-light" name="descripcion_interna" rows="3">{{ old('descripcion_interna', $articulo->descripcion_interna ?? '') }}.</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ==================== CAMPOS OCULTOS (no tocar) ==================== --}}
<div class="d-none">
    <input type="text" name="eti_equivalente"
        value="{{ old('eti_equivalente', $articulo->eti_equivalente ?? '') }}">
    <input type="text" name="eti_carro" value="{{ old('eti_carro', $articulo->eti_carro ?? '') }}">

    <table>
        <tbody>
            <tr>
                <td><input name="minimo1" value="{{ old('minimo1', $articulo->minimo1 ?? '') }}"></td>
                <td><input name="maximo1" value="{{ old('maximo1', $articulo->maximo1 ?? '') }}"></td>
                <td><input name="precio11" value="{{ old('precio1', $articulo->precio1 ?? '') }}"></td>
            </tr>
        </tbody>
    </table>
</div>

<style>
    /* Cajas de iconos de encabezado */
    .icon-box {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    /* Cards */
    .card {
        border-radius: 0.75rem;
        transition: box-shadow .2s ease;
    }

    .card:hover {
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08) !important;
    }

    /* Headers suaves */
    .bg-primary-subtle {
        background-color: #e0e7ff !important;
    }

    .bg-success-subtle {
        background-color: #d1fae5 !important;
    }

    .bg-warning-subtle {
        background-color: #fef3c7 !important;
    }

    .bg-secondary-subtle {
        background-color: #e2e8f0 !important;
    }

    .bg-info-subtle {
        background-color: #dbeafe !important;
    }

    .bg-dark-subtle {
        background-color: #e5e7eb !important;
    }

    /* Inputs con foco bonito */
    .form-control:focus,
    .form-select:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .15);
    }

    /* Labels más limpios */
    .form-label {
        margin-bottom: .35rem;
        font-size: .875rem;
        color: #374151;
    }
</style>