@extends('dashboard.layouts.app')

@section('title', 'Crear Producto')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Crear Producto`}" class="mb-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
      <nav>
        <ol class="flex items-center gap-1.5">
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.index') }}">
              Dashboard
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.productos.index') }}">
              Productos
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <!-- Mensajes de error -->
  @if($errors->any())
    <div class="mb-6 rounded-lg border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="alert-circle" class="w-5 h-5 text-error-600 dark:text-error-400"></i>
        <p class="text-sm font-medium text-error-800 dark:text-error-200">Por favor, corrija los siguientes errores:</p>
      </div>
      <ul class="mt-2 list-disc list-inside text-sm text-error-700 dark:text-error-300">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="border-gray-100 dark:border-gray-800">
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Información del Producto</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">Complete la información básica del producto o servicio.</p>
      </div>

      <form action="{{ route('dashboard.productos.store') }}" method="POST" class="p-6">
        @csrf
        
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <!-- Columna Izquierda -->
          <div class="space-y-6">
            <!-- Información Básica -->
            <div class="space-y-4">
              <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Información Básica</h4>
              
              @if($empresasAcceso->count() > 1)
              <div class="col-span-1 sm:col-span-2">
                <label for="empresa_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Empresa <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select name="empresa_id" id="empresa_id" required
                          class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                    <option value="">Seleccione una empresa</option>
                    @foreach($empresasAcceso as $empresa)
                      <option value="{{ $empresa->id }}" {{ old('empresa_id') == $empresa->id ? 'selected' : '' }}>
                        {{ $empresa->nombre }}
                      </option>
                    @endforeach
                  </select>
                  <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                    <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                </div>
                @error('empresa_id')
                  <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
              </div>
              @else
              <input type="hidden" name="empresa_id" value="{{ $empresasAcceso->first()->id }}">
              @endif
              
              <div>
                <label for="codigo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Código <span class="text-red-500">*</span>
                </label>
                <input type="text" name="codigo" id="codigo" value="{{ old('codigo') }}" required
                       class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                       placeholder="Código interno del producto">
              </div>

              <div>
                <label for="nombre" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Nombre <span class="text-red-500">*</span>
                </label>
                <input type="text" name="nombre" id="nombre" value="{{ old('nombre') }}" required
                       class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                       placeholder="Nombre del producto o servicio">
              </div>

              <div>
                <label for="descripcion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Descripción
                </label>
                <textarea name="descripcion" id="descripcion" rows="3"
                          class="w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                          placeholder="Descripción detallada del producto o servicio">{{ old('descripcion') }}</textarea>
              </div>

              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="tipo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Tipo <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <select name="tipo" id="tipo" required
                            class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                      <option value="">Seleccionar tipo</option>
                      <option value="producto" {{ old('tipo') === 'producto' ? 'selected' : '' }}>Producto</option>
                      <option value="servicio" {{ old('tipo') === 'servicio' ? 'selected' : '' }}>Servicio</option>
                    </select>
                    <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                      <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </span>
                  </div>
                </div>

                <div>
                  <label for="categoria" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Categoría
                  </label>
                  <input type="text" name="categoria" id="categoria" value="{{ old('categoria') }}"
                         class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                         placeholder="Categoría"
                         list="categorias-list">
                  <datalist id="categorias-list">
                    @foreach($categorias as $categoria)
                      <option value="{{ $categoria }}">
                    @endforeach
                  </datalist>
                </div>
              </div>

              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="subcategoria" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Subcategoría
                  </label>
                  <input type="text" name="subcategoria" id="subcategoria" value="{{ old('subcategoria') }}"
                         class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                         placeholder="Subcategoría"
                         list="subcategorias-list">
                  <datalist id="subcategorias-list">
                    @foreach($subcategorias as $subcategoria)
                      <option value="{{ $subcategoria }}">
                    @endforeach
                  </datalist>
                </div>

                <div>
                  <label for="marca" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Marca
                  </label>
                  <input type="text" name="marca" id="marca" value="{{ old('marca') }}"
                         class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                         placeholder="Marca"
                         list="marcas-list">
                  <datalist id="marcas-list">
                    @foreach($marcas as $marca)
                      <option value="{{ $marca }}">
                    @endforeach
                  </datalist>
                </div>
              </div>

              <div>
                <label for="modelo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Modelo
                </label>
                <input type="text" name="modelo" id="modelo" value="{{ old('modelo') }}"
                       class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                       placeholder="Modelo">
              </div>
            </div>

            <!-- Códigos -->
            <div class="space-y-4">
              <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Códigos</h4>
              
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="codigo_sunat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Código SUNAT
                  </label>
                  <input type="text" name="codigo_sunat" id="codigo_sunat" value="{{ old('codigo_sunat') }}"
                         class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                         placeholder="Código SUNAT">
                </div>

                <div>
                  <label for="codigo_internacional" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Código Internacional
                  </label>
                  <input type="text" name="codigo_internacional" id="codigo_internacional" value="{{ old('codigo_internacional') }}"
                         class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                         placeholder="Código internacional">
                </div>
              </div>
            </div>
          </div>

          <!-- Columna Derecha -->
          <div class="space-y-6">
            <!-- Precios -->
            <div class="space-y-4">
              <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Precios</h4>
              
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="precio_unitario" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Precio Unitario <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <span class="absolute left-3 top-2 text-gray-500">S/</span>
                    <input type="number" name="precio_unitario" id="precio_unitario" value="{{ old('precio_unitario') }}" step="0.01" min="0" required
                           class="h-11 w-full appearance-none rounded-lg border bg-transparent pl-8 pr-3 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                           placeholder="0.00">
                  </div>
                </div>

                <div>
                  <label for="precio_venta" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Precio de Venta <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <span class="absolute left-3 top-2 text-gray-500">S/</span>
                    <input type="number" name="precio_venta" id="precio_venta" value="{{ old('precio_venta') }}" step="0.01" min="0" required
                           class="h-11 w-full appearance-none rounded-lg border bg-transparent pl-8 pr-3 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                           placeholder="0.00">
                  </div>
                </div>
              </div>

              <div>
                <label for="costo_unitario" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Costo Unitario
                </label>
                <div class="relative">
                  <span class="absolute left-3 top-2 text-gray-500">S/</span>
                  <input type="number" name="costo_unitario" id="costo_unitario" value="{{ old('costo_unitario') }}" step="0.01" min="0"
                         class="h-11 w-full appearance-none rounded-lg border bg-transparent pl-8 pr-3 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                         placeholder="0.00">
                </div>
              </div>

              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="descuento_porcentaje" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Descuento (%)
                  </label>
                  <div class="relative">
                    <input type="number" name="descuento_porcentaje" id="descuento_porcentaje" value="{{ old('descuento_porcentaje') }}" step="0.01" min="0" max="100"
                           class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-8 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                           placeholder="0.00">
                    <span class="absolute right-3 top-2 text-gray-500">%</span>
                  </div>
                </div>

                <div>
                  <label for="descuento_monto" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Descuento (S/)
                  </label>
                  <div class="relative">
                    <span class="absolute left-3 top-2 text-gray-500">S/</span>
                    <input type="number" name="descuento_monto" id="descuento_monto" value="{{ old('descuento_monto') }}" step="0.01" min="0"
                           class="h-11 w-full appearance-none rounded-lg border bg-transparent pl-8 pr-3 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                           placeholder="0.00">
                  </div>
                </div>
              </div>
            </div>

            <!-- Impuestos -->
            <div class="space-y-4">
              <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Impuestos</h4>
              
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="tipo_afectacion_igv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Tipo Afectación IGV <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <select name="tipo_afectacion_igv" id="tipo_afectacion_igv" required
                            class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                      <option value="">Seleccionar tipo</option>
                      <option value="10" {{ old('tipo_afectacion_igv') === '10' ? 'selected' : '' }}>10 - Gravado - Operación Onerosa</option>
                      <option value="20" {{ old('tipo_afectacion_igv') === '20' ? 'selected' : '' }}>20 - Exonerado - Operación Onerosa</option>
                      <option value="30" {{ old('tipo_afectacion_igv') === '30' ? 'selected' : '' }}>30 - Inafecto - Operación Onerosa</option>
                      <option value="40" {{ old('tipo_afectacion_igv') === '40' ? 'selected' : '' }}>40 - Exportación</option>
                    </select>
                    <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                      <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </span>
                  </div>
                </div>

                <div>
                  <label for="porcentaje_igv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Porcentaje IGV <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <input type="number" name="porcentaje_igv" id="porcentaje_igv" value="{{ old('porcentaje_igv', 18) }}" step="0.01" min="0" max="100" required
                           class="w-full rounded-lg border border-gray-300 px-3 py-2 pr-8 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                           placeholder="18.00">
                    <span class="absolute right-3 top-2 text-gray-500">%</span>
                  </div>
                </div>
              </div>

              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="tipo_sistema_isc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Tipo Sistema ISC
                  </label>
                  <div class="relative">
                    <select name="tipo_sistema_isc" id="tipo_sistema_isc"
                            class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                      <option value="">Sin ISC</option>
                      <option value="01" {{ old('tipo_sistema_isc') === '01' ? 'selected' : '' }}>01 - Sistema al Valor</option>
                      <option value="02" {{ old('tipo_sistema_isc') === '02' ? 'selected' : '' }}>02 - Aplicación Específica</option>
                      <option value="03" {{ old('tipo_sistema_isc') === '03' ? 'selected' : '' }}>03 - Sistema de Precios de Venta al Público</option>
                    </select>
                    <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                      <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </span>
                  </div>
                </div>

                <div>
                  <label for="porcentaje_isc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Porcentaje ISC
                  </label>
                  <div class="relative">
                    <input type="number" name="porcentaje_isc" id="porcentaje_isc" value="{{ old('porcentaje_isc') }}" step="0.01" min="0" max="100"
                           class="w-full rounded-lg border border-gray-300 px-3 py-2 pr-8 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                           placeholder="0.00">
                    <span class="absolute right-3 top-2 text-gray-500">%</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- Unidades de Medida -->
            <div class="space-y-4">
              <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Unidades de Medida</h4>
              
              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                  <label for="unidad_medida" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Unidad de Medida <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <select name="unidad_medida" id="unidad_medida" required
                            class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                      <option value="">Seleccionar unidad</option>
                      <option value="NIU" {{ old('unidad_medida') === 'NIU' ? 'selected' : '' }}>NIU - Unidad (Artículos)</option>
                      <option value="KGM" {{ old('unidad_medida') === 'KGM' ? 'selected' : '' }}>KGM - Kilogramo</option>
                      <option value="LTR" {{ old('unidad_medida') === 'LTR' ? 'selected' : '' }}>LTR - Litro</option>
                      <option value="MTR" {{ old('unidad_medida') === 'MTR' ? 'selected' : '' }}>MTR - Metro</option>
                      <option value="MTK" {{ old('unidad_medida') === 'MTK' ? 'selected' : '' }}>MTK - Metro cuadrado</option>
                      <option value="MTQ" {{ old('unidad_medida') === 'MTQ' ? 'selected' : '' }}>MTQ - Metro cúbico</option>
                      <option value="HUR" {{ old('unidad_medida') === 'HUR' ? 'selected' : '' }}>HUR - Hora</option>
                      <option value="DIA" {{ old('unidad_medida') === 'DIA' ? 'selected' : '' }}>DIA - Día</option>
                      <option value="MES" {{ old('unidad_medida') === 'MES' ? 'selected' : '' }}>MES - Mes</option>
                      <option value="AÑO" {{ old('unidad_medida') === 'AÑO' ? 'selected' : '' }}>AÑO - Año</option>
                    </select>
                    <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                      <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </span>
                  </div>
                </div>

                <div>
                  <label for="unidad_medida_comercial" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Unidad Comercial
                  </label>
                  <input type="text" name="unidad_medida_comercial" id="unidad_medida_comercial" value="{{ old('unidad_medida_comercial') }}"
                         class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                         placeholder="Unidad comercial">
                </div>
              </div>

              <div>
                <label for="factor_conversion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Factor de Conversión
                </label>
                <input type="number" name="factor_conversion" id="factor_conversion" value="{{ old('factor_conversion') }}" step="0.0001" min="0"
                       class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                       placeholder="1.0000">
              </div>
            </div>
          </div>
        </div>

        <!-- Stock (solo para productos) -->
        <div id="stock-section" class="mt-6 space-y-4" style="display: none;">
          <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Control de Stock</h4>
          
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div>
              <label for="stock_actual" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Stock Actual
              </label>
              <input type="number" name="stock_actual" id="stock_actual" value="{{ old('stock_actual') }}" step="0.0001" min="0"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                     placeholder="0.0000">
            </div>

            <div>
              <label for="stock_minimo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Stock Mínimo
              </label>
              <input type="number" name="stock_minimo" id="stock_minimo" value="{{ old('stock_minimo') }}" step="0.0001" min="0"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                     placeholder="0.0000">
            </div>

            <div>
              <label for="stock_maximo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                Stock Máximo
              </label>
              <input type="number" name="stock_maximo" id="stock_maximo" value="{{ old('stock_maximo') }}" step="0.0001" min="0"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                     placeholder="0.0000">
            </div>
          </div>

          <div>
            <label for="ubicacion_almacen" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Ubicación en Almacén
            </label>
            <input type="text" name="ubicacion_almacen" id="ubicacion_almacen" value="{{ old('ubicacion_almacen') }}"
                   class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="Ubicación en almacén">
          </div>
        </div>

        <!-- Opciones Adicionales -->
        <div class="mt-6 space-y-4">
          <h4 class="text-md font-medium text-gray-800 dark:text-white/90">Opciones Adicionales</h4>
          
          <div class="space-y-4">
            <div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
              <div class="flex items-center space-x-3">
                <i data-lucide="check-circle" class="h-5 w-5 text-gray-400"></i>
                <div>
                  <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Activo</label>
                  <p class="text-xs text-gray-500 dark:text-gray-400">El producto estará disponible para venta</p>
                </div>
              </div>
              <div x-data="{ switcherToggle: {{ old('activo', true) ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="activo" id="activo" value="1" {{ old('activo', true) ? 'checked' : '' }}
                           class="sr-only" @change="switcherToggle = !switcherToggle" />
                    <div class="block h-6 w-11 rounded-full"
                         :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"></div>
                    <div :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                         class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"></div>
                  </div>
                </label>
              </div>
            </div>

            <div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
              <div class="flex items-center space-x-3">
                <i data-lucide="hash" class="h-5 w-5 text-gray-400"></i>
                <div>
                  <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Requiere Serie</label>
                  <p class="text-xs text-gray-500 dark:text-gray-400">El producto necesita número de serie</p>
                </div>
              </div>
              <div x-data="{ switcherToggle: {{ old('requiere_serie') ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="requiere_serie" id="requiere_serie" value="1" {{ old('requiere_serie') ? 'checked' : '' }}
                           class="sr-only" @change="switcherToggle = !switcherToggle" />
                    <div class="block h-6 w-11 rounded-full"
                         :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"></div>
                    <div :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                         class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"></div>
                  </div>
                </label>
              </div>
            </div>

            <div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
              <div class="flex items-center space-x-3">
                <i data-lucide="package" class="h-5 w-5 text-gray-400"></i>
                <div>
                  <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Requiere Lote</label>
                  <p class="text-xs text-gray-500 dark:text-gray-400">El producto necesita número de lote</p>
                </div>
              </div>
              <div x-data="{ switcherToggle: {{ old('requiere_lote') ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="requiere_lote" id="requiere_lote" value="1" {{ old('requiere_lote') ? 'checked' : '' }}
                           class="sr-only" @change="switcherToggle = !switcherToggle" />
                    <div class="block h-6 w-11 rounded-full"
                         :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"></div>
                    <div :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                         class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"></div>
                  </div>
                </label>
              </div>
            </div>

            <div class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
              <div class="flex items-center space-x-3">
                <i data-lucide="calendar" class="h-5 w-5 text-gray-400"></i>
                <div>
                  <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Requiere Fecha Vencimiento</label>
                  <p class="text-xs text-gray-500 dark:text-gray-400">El producto tiene fecha de vencimiento</p>
                </div>
              </div>
              <div x-data="{ switcherToggle: {{ old('requiere_fecha_vencimiento') ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="requiere_fecha_vencimiento" id="requiere_fecha_vencimiento" value="1" {{ old('requiere_fecha_vencimiento') ? 'checked' : '' }}
                           class="sr-only" @change="switcherToggle = !switcherToggle" />
                    <div class="block h-6 w-11 rounded-full"
                         :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"></div>
                    <div :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                         class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"></div>
                  </div>
                </label>
              </div>
            </div>
          </div>

          <div>
            <label for="observaciones" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Observaciones
            </label>
            <textarea name="observaciones" id="observaciones" rows="3"
                      class="w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                      placeholder="Observaciones adicionales">{{ old('observaciones') }}</textarea>
          </div>
        </div>

        <!-- Botones -->
        <div class="mt-8 flex items-center justify-end gap-3">
          <a href="{{ route('dashboard.productos.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
            <i data-lucide="x" class="h-4 w-4"></i>
            Cancelar
          </a>
          <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
            <i data-lucide="save" class="h-4 w-4"></i>
            Crear Producto
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const tipoSelect = document.getElementById('tipo');
  const stockSection = document.getElementById('stock-section');
  
  function toggleStockSection() {
    if (tipoSelect.value === 'producto') {
      stockSection.style.display = 'block';
    } else {
      stockSection.style.display = 'none';
    }
  }
  
  tipoSelect.addEventListener('change', toggleStockSection);
  toggleStockSection(); // Ejecutar al cargar la página
});
</script>
@endsection