@extends('dashboard.layouts.app')

@section('title', 'Crear Usuario SUNAT - TailAdmin')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Crear Usuario SUNAT`}">
    <div class="mb-6 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.usuarios-sunat.index') }}">
              Usuarios SUNAT
              <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>
          @if(isset($empresa))
            <li>
              <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.usuarios-sunat.empresa', $empresa->public_id) }}">
                {{ $empresa->nombre }}
                <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>
          @endif
          <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <div class="border-gray-100 dark:border-gray-800">
    <!-- ====== Form Start ====== -->
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
      
      <div class="mb-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
          Crear Nuevo Usuario SUNAT
        </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Configura las credenciales de acceso a servicios SUNAT
        </p>
      </div>

      <form method="POST" action="{{ route('dashboard.usuarios-sunat.store') }}" class="space-y-6">
        @csrf
        
        <!-- Selección de Empresa -->
        @if(!isset($empresa))
          <div class="space-y-6">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
              Seleccionar Empresa
            </h4>
            
            <div>
              <label for="empresa_id" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Empresa *
              </label>
              <div class="relative">
                <select id="empresa_id" 
                        name="empresa_id" 
                        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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('empresa_id') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="">Selecciona una empresa</option>
                  @foreach($empresas as $emp)
                    <option value="{{ $emp->id }}" {{ old('empresa_id') == $emp->id ? 'selected' : '' }}>
                      {{ $emp->nombre }} ({{ $emp->ruc ?: 'Sin RUC' }})
                    </option>
                  @endforeach
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4">
                  <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                  </svg>
                </div>
              </div>
              @error('empresa_id')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
          </div>
        @else
          <input type="hidden" name="empresa_id" value="{{ $empresa->id }}">
          
          <!-- Información de la empresa seleccionada -->
          <div class="mb-6 overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900/30">
            <div class="flex items-center gap-3">
              @if($empresa->logo_url)
                <img src="{{ $empresa->logo_url }}" alt="{{ $empresa->nombre }}" class="w-12 h-12 rounded-lg object-cover">
              @else
                <div class="w-12 h-12 rounded-lg bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
                  <span class="text-brand-600 dark:text-brand-400 font-semibold text-sm">{{ $empresa->getInitials() }}</span>
                </div>
              @endif
              <div>
                <h4 class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ $empresa->nombre }}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">RUC: {{ $empresa->ruc ?: 'No especificado' }}</p>
              </div>
            </div>
          </div>
        @endif

        <!-- Información del Usuario -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div class="space-y-6">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
              Información del Usuario
            </h4>
            
            <!-- Nombre del Usuario -->
            <div>
              <label for="nombre_usuario" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Nombre del Usuario *
              </label>
              <input type="text" 
                     id="nombre_usuario" 
                     name="nombre_usuario" 
                     value="{{ old('nombre_usuario') }}"
                     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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('nombre_usuario') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     placeholder="Ej: Juan Pérez">
              @error('nombre_usuario')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

                                <!-- Usuario SUNAT -->
                    <div>
                      <label for="usuario_sunat" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                        Usuario SUNAT *
                      </label>
                      <input type="text" 
                             id="usuario_sunat" 
                             name="usuario_sunat" 
                             value="{{ old('usuario_sunat') }}"
                             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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('usuario_sunat') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                             placeholder="usuario123">
                      @error('usuario_sunat')
                        <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
                      @enderror
                    </div>

            <!-- Clave SUNAT -->
            <div>
              <label for="clave_sunat" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Clave SUNAT *
              </label>
              <input type="password" 
                     id="clave_sunat" 
                     name="clave_sunat" 
                     required
                     minlength="6"
                     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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('clave_sunat') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     placeholder="Mínimo 6 caracteres">
              @error('clave_sunat')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <div class="space-y-6">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
              Configuración
            </h4>
            


            <!-- Estado -->
            <div>
              <label for="estado" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Estado *
              </label>
              <div class="relative">
                <select id="estado" 
                        name="estado" 
                        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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('estado') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="activo" {{ old('estado') == 'activo' ? 'selected' : '' }}>Activo</option>
                  <option value="inactivo" {{ old('estado') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                  <option value="bloqueado" {{ old('estado') == 'bloqueado' ? 'selected' : '' }}>Bloqueado</option>
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4">
                  <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                  </svg>
                </div>
              </div>
              @error('estado')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Es Principal -->
            <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="star" class="h-5 w-5 text-gray-400"></i>
                <div>
                  <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Usuario Principal</label>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Marcar como usuario principal por defecto</p>
                </div>
              </div>
              <div x-data="{ switcherToggle: {{ old('es_principal') ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" 
                           id="es_principal" 
                           name="es_principal" 
                           value="1"
                           {{ old('es_principal') ? '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>

        <!-- Límites y Permisos -->
        <div class="space-y-6">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
            Límites y Permisos
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Límite Diario -->
            <div>
              <label for="limite_diario" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Límite Diario
              </label>
              <input type="number" 
                     id="limite_diario" 
                     name="limite_diario" 
                     value="{{ old('limite_diario') }}"
                     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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('limite_diario') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     placeholder="Dejar vacío para sin límite">
              @error('limite_diario')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Límite Mensual -->
            <div>
              <label for="limite_mensual" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Límite Mensual
              </label>
              <input type="number" 
                     id="limite_mensual" 
                     name="limite_mensual" 
                     value="{{ old('limite_mensual') }}"
                     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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('limite_mensual') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     placeholder="Dejar vacío para sin límite">
              @error('limite_mensual')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Tipos de Comprobante Permitidos -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
              Tipos de Comprobante Permitidos
            </label>
            <div class="space-y-3">
              @php
                $tiposPermitidos = old('tipos_comprobante_permitidos', []);
                if (!is_array($tiposPermitidos)) {
                    $tiposPermitidos = [];
                }
              @endphp
              
              <!-- Factura -->
              <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="file-text" class="h-5 w-5 text-gray-400"></i>
                  <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Factura</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Permitir emisión de facturas</p>
                  </div>
                </div>
                <div x-data="{ switcherToggle: {{ in_array('factura', $tiposPermitidos) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input type="checkbox" 
                             id="factura" 
                             name="tipos_comprobante_permitidos[]" 
                             value="factura"
                             {{ in_array('factura', $tiposPermitidos) ? '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>
              
              <!-- Boleta -->
              <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="receipt" class="h-5 w-5 text-gray-400"></i>
                  <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Boleta</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Permitir emisión de boletas</p>
                  </div>
                </div>
                <div x-data="{ switcherToggle: {{ in_array('boleta', $tiposPermitidos) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input type="checkbox" 
                             id="boleta" 
                             name="tipos_comprobante_permitidos[]" 
                             value="boleta"
                             {{ in_array('boleta', $tiposPermitidos) ? '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>
              
              <!-- Nota de Crédito -->
              <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="plus-circle" class="h-5 w-5 text-gray-400"></i>
                  <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Nota de Crédito</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Permitir emisión de notas de crédito</p>
                  </div>
                </div>
                <div x-data="{ switcherToggle: {{ in_array('nota_credito', $tiposPermitidos) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input type="checkbox" 
                             id="nota_credito" 
                             name="tipos_comprobante_permitidos[]" 
                             value="nota_credito"
                             {{ in_array('nota_credito', $tiposPermitidos) ? '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>
              
              <!-- Nota de Débito -->
              <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="minus-circle" class="h-5 w-5 text-gray-400"></i>
                  <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Nota de Débito</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Permitir emisión de notas de débito</p>
                  </div>
                </div>
                <div x-data="{ switcherToggle: {{ in_array('nota_debito', $tiposPermitidos) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input type="checkbox" 
                             id="nota_debito" 
                             name="tipos_comprobante_permitidos[]" 
                             value="nota_debito"
                             {{ in_array('nota_debito', $tiposPermitidos) ? '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>
              
              <!-- Percepción -->
              <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="percent" class="h-5 w-5 text-gray-400"></i>
                  <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Percepción</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Permitir emisión de percepciones</p>
                  </div>
                </div>
                <div x-data="{ switcherToggle: {{ in_array('percepcion', $tiposPermitidos) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input type="checkbox" 
                             id="percepcion" 
                             name="tipos_comprobante_permitidos[]" 
                             value="percepcion"
                             {{ in_array('percepcion', $tiposPermitidos) ? '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>
              
              <!-- Retención -->
              <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="shield" class="h-5 w-5 text-gray-400"></i>
                  <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Retención</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Permitir emisión de retenciones</p>
                  </div>
                </div>
                <div x-data="{ switcherToggle: {{ in_array('retencion', $tiposPermitidos) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input type="checkbox" 
                             id="retencion" 
                             name="tipos_comprobante_permitidos[]" 
                             value="retencion"
                             {{ in_array('retencion', $tiposPermitidos) ? '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>
            @error('tipos_comprobante_permitidos')
              <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Observaciones -->
        <div>
          <label for="observaciones" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
            Observaciones
          </label>
          <textarea id="observaciones" 
                    name="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 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('observaciones') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                    placeholder="Información adicional sobre este usuario">{{ old('observaciones') }}</textarea>
          @error('observaciones')
            <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
          @enderror
        </div>

        <!-- Botones -->
        <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                      <a href="{{ isset($empresa) ? route('dashboard.usuarios-sunat.empresa', $empresa->public_id) : route('dashboard.usuarios-sunat.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 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
            Cancelar
          </a>
          <button type="submit" 
                  class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600">
            <i data-lucide="save" class="w-4 h-4"></i>
            Crear Usuario SUNAT
          </button>
        </div>
      </form>
    </div>
    <!-- ====== Form End ====== -->
  </div>
</div>
@endsection