@extends('dashboard.layouts.app')

@section('title', 'Usuarios SUNAT - ' . $empresa->nombre . ' - TailAdmin')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Usuarios SUNAT - {{ $empresa->nombre }}`}">
    <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>
          <li class="text-sm text-gray-800 dark:text-white/90">{{ $empresa->nombre }}</li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <!-- Mensajes de confirmación -->
  @if(session('success'))
    <div class="mb-6 rounded-lg border border-success-200 bg-success-50 p-4 dark:border-success-800 dark:bg-success-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="check-circle" class="w-5 h-5 text-success-600 dark:text-success-400"></i>
        <p class="text-sm font-medium text-success-800 dark:text-success-200">{{ session('success') }}</p>
      </div>
    </div>
  @endif

  @if(session('error'))
    <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">{{ session('error') }}</p>
      </div>
    </div>
  @endif

  <!-- Información de la empresa -->
  <div class="mb-6 overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="flex items-center gap-4">
      @if($empresa->logo_url)
        <img src="{{ $empresa->logo_url }}" alt="{{ $empresa->nombre }}" class="w-16 h-16 rounded-lg object-cover">
      @else
        <div class="w-16 h-16 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-lg">{{ $empresa->getInitials() }}</span>
        </div>
      @endif
      <div class="flex-1">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $empresa->nombre }}</h3>
        <p class="text-gray-500 dark:text-gray-400">{{ $empresa->razon_social }}</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">RUC: {{ $empresa->ruc ?: 'No especificado' }}</p>
      </div>
      <div class="text-right">
        @if($empresa->activa)
          <span class="inline-flex items-center gap-1 rounded-full bg-success-100 px-3 py-1 text-sm font-medium text-success-800 dark:bg-success-900/30 dark:text-success-400">
            <i data-lucide="check-circle" class="w-4 h-4"></i>
            Activa
          </span>
        @else
          <span class="inline-flex items-center gap-1 rounded-full bg-error-100 px-3 py-1 text-sm font-medium text-error-800 dark:bg-error-900/30 dark:text-error-400">
            <i data-lucide="x-circle" class="w-4 h-4"></i>
            Inactiva
          </span>
        @endif
      </div>
    </div>
  </div>



  <div class="border-gray-100 dark:border-gray-800">
    <!-- ====== Table Start ====== -->
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      
      <div class="flex flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:justify-between border-b border-gray-200 dark:border-gray-800">
        <div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
            Usuarios SUNAT ({{ $empresa->usuariosSunat->count() }})
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
            Gestión de credenciales de acceso a servicios SUNAT
          </p>
        </div>

        <div class="flex items-center gap-3">
          <a href="{{ route('dashboard.usuarios-sunat.create-for-empresa', $empresa->public_id) }}" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 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">
            <i data-lucide="plus"></i>
            Crear Usuario SUNAT
          </a>
        </div>
      </div>

      <div class="max-w-full overflow-x-auto custom-scrollbar dark:border-gray-800">
        @if($empresa->usuariosSunat->isEmpty())
          <div class="p-8 text-center">
            <div class="mx-auto mb-4 w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
              <i data-lucide="user-x" class="w-8 h-8 text-gray-400"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-2">No hay usuarios SUNAT registrados</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-4">Esta empresa aún no tiene usuarios SUNAT configurados</p>
            <a href="{{ route('dashboard.usuarios-sunat.create-for-empresa', $empresa->public_id) }}" 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="plus"></i>
              Crear Primer Usuario
            </a>
          </div>
        @else
          <table class="w-full min-w-[1102px]">
            <!-- table header start -->
            <thead>
              <tr class="border-b border-gray-100 dark:border-gray-800">
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Usuario
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Usuario SUNAT
                    </p>
                  </div>
                </th>

                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Estado
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Límites
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Acciones
                    </p>
                  </div>
                </th>
              </tr>
            </thead>
            <!-- table header end -->

            <!-- table body start -->
            <tbody>
              @foreach($empresa->usuariosSunat as $usuario)
                <tr class="border-b border-gray-100 dark:border-gray-800">
                  <td class="px-5 py-3 sm:px-6">
                    <div>
                      <h6 class="text-sm font-medium text-gray-800 dark:text-white/90">
                        {{ $usuario->nombre_usuario }}
                        @if($usuario->es_principal)
                          <span class="ml-2 inline-flex items-center gap-1 rounded-full bg-brand-100 px-2 py-0.5 text-xs font-medium text-brand-800 dark:bg-brand-900/30 dark:text-brand-400">
                            <i data-lucide="star" class="w-3 h-3"></i>
                            Principal
                          </span>
                        @endif
                      </h6>
                      <p class="text-xs text-gray-500 dark:text-gray-400">
                        Creado: {{ $usuario->created_at->format('d/m/Y H:i') }}
                      </p>
                    </div>
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <p class="text-sm text-gray-800 dark:text-white/90">
                      {{ $usuario->usuario_sunat }}
                    </p>
                  </td>

                  <td class="px-5 py-3 sm:px-6">
                    @switch($usuario->estado)
                      @case('activo')
                        <span class="inline-flex items-center gap-1 rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-800 dark:bg-success-900/30 dark:text-success-400">
                          <i data-lucide="check-circle" class="w-3 h-3"></i>
                          Activo
                        </span>
                        @break
                      @case('inactivo')
                        <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-900/30 dark:text-gray-400">
                          <i data-lucide="pause-circle" class="w-3 h-3"></i>
                          Inactivo
                        </span>
                        @break
                      @case('bloqueado')
                        <span class="inline-flex items-center gap-1 rounded-full bg-error-100 px-2.5 py-0.5 text-xs font-medium text-error-800 dark:bg-error-900/30 dark:text-error-400">
                          <i data-lucide="x-circle" class="w-3 h-3"></i>
                          Bloqueado
                        </span>
                        @break
                    @endswitch
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="text-xs text-gray-500 dark:text-gray-400">
                      @if($usuario->limite_diario)
                        <div>Diario: {{ $usuario->limite_diario }}</div>
                      @endif
                      @if($usuario->limite_mensual)
                        <div>Mensual: {{ $usuario->limite_mensual }}</div>
                      @endif
                      @if(!$usuario->limite_diario && !$usuario->limite_mensual)
                        <div>Sin límites</div>
                      @endif
                    </div>
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="flex items-center gap-2">
                      <a href="{{ route('dashboard.usuarios-sunat.edit', $usuario->public_id) }}" class="inline-flex items-center gap-1 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-brand-600">
                        <i data-lucide="edit" class="w-3 h-3"></i>
                        Editar
                      </a>
                      
                      @if($usuario->estado === 'activo')
                        <form method="POST" action="{{ route('dashboard.usuarios-sunat.desactivar', $usuario->public_id) }}" class="inline">
                          @csrf
                          <button type="submit" class="inline-flex items-center gap-1 rounded-lg bg-warning-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-warning-600">
                            <i data-lucide="pause" class="w-3 h-3"></i>
                            Desactivar
                          </button>
                        </form>
                      @else
                        <form method="POST" action="{{ route('dashboard.usuarios-sunat.activar', $usuario->public_id) }}" class="inline">
                          @csrf
                          <button type="submit" class="inline-flex items-center gap-1 rounded-lg bg-success-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-success-600">
                            <i data-lucide="play" class="w-3 h-3"></i>
                            Activar
                          </button>
                        </form>
                      @endif

                      @if(!$usuario->es_principal)
                        <form method="POST" action="{{ route('dashboard.usuarios-sunat.marcar-principal', $usuario->public_id) }}" class="inline">
                          @csrf
                          <button type="submit" class="inline-flex items-center gap-1 rounded-lg bg-purple-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-purple-600">
                            <i data-lucide="star" class="w-3 h-3"></i>
                            Principal
                          </button>
                        </form>
                      @endif

                      <form method="POST" action="{{ route('dashboard.usuarios-sunat.destroy', $usuario->public_id) }}" class="inline" onsubmit="return confirm('¿Estás seguro de que quieres eliminar este usuario SUNAT?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="inline-flex items-center gap-1 rounded-lg bg-error-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-error-600">
                          <i data-lucide="trash-2" class="w-3 h-3"></i>
                          Eliminar
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
            <!-- table body end -->
          </table>
        @endif
      </div>
    </div>
    <!-- ====== Table End ====== -->
  </div>
</div>
@endsection