@extends('dashboard.layouts.app')

@section('title', 'Gestión de Productos')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Gestión de Productos`}" 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 class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></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

  <!-- Estadísticas -->
  <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="flex items-center gap-3">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/30">
          <i data-lucide="package" class="h-5 w-5 text-primary-600 dark:text-primary-400"></i>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $stats['total'] }}</p>
        </div>
      </div>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="flex items-center gap-3">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-success-100 dark:bg-success-900/30">
          <i data-lucide="check-circle" class="h-5 w-5 text-success-600 dark:text-success-400"></i>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Activos</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $stats['activos'] }}</p>
        </div>
      </div>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="flex items-center gap-3">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-100 dark:bg-warning-900/30">
          <i data-lucide="box" class="h-5 w-5 text-warning-600 dark:text-warning-400"></i>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Productos</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $stats['productos'] }}</p>
        </div>
      </div>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="flex items-center gap-3">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-info-100 dark:bg-info-900/30">
          <i data-lucide="settings" class="h-5 w-5 text-info-600 dark:text-info-400"></i>
        </div>
        <div>
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Servicios</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $stats['servicios'] }}</p>
        </div>
      </div>
    </div>
  </div>

  <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="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">
            Productos ({{ $productos->total() }})
          </h3>
        </div>
        <div class="flex items-center gap-3">
          <a href="{{ route('dashboard.productos.create') }}" 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>
            Nuevo Producto
          </a>
        </div>
      </div>

      <!-- Filtros -->
      <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
        <form method="GET" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
          <div>
            <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Buscar</label>
            <input type="text" name="search" id="search" value="{{ request('search') }}" 
                   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, nombre...">
          </div>
          
          @if($empresasAcceso->count() > 1)
          <div>
            <label for="empresa" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Empresa</label>
            <div class="relative">
              <select name="empresa" id="empresa" 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="">Todas las empresas</option>
                @foreach($empresasAcceso as $empresa)
                  <option value="{{ $empresa->id }}" {{ request('empresa') == $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>
          </div>
          @endif
          
          <div>
            <label for="tipo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tipo</label>
            <div class="relative">
              <select name="tipo" id="tipo" 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="">Todos</option>
                <option value="producto" {{ request('tipo') === 'producto' ? 'selected' : '' }}>Productos</option>
                <option value="servicio" {{ request('tipo') === 'servicio' ? 'selected' : '' }}>Servicios</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>
            <div class="relative">
              <select name="categoria" id="categoria" 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="">Todas</option>
                @foreach($categorias as $categoria)
                  <option value="{{ $categoria }}" {{ request('categoria') === $categoria ? 'selected' : '' }}>{{ $categoria }}</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>
          </div>
          
          <div>
            <label for="estado" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Estado</label>
            <div class="relative">
              <select name="estado" id="estado" 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="">Todos</option>
                <option value="activo" {{ request('estado') === 'activo' ? 'selected' : '' }}>Activos</option>
                <option value="inactivo" {{ request('estado') === 'inactivo' ? 'selected' : '' }}>Inactivos</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 class="lg:col-span-5 flex gap-2">
            <button type="submit" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-primary-500 bg-primary-500 px-4 py-2 font-medium text-white hover:bg-primary-600">
              <i data-lucide="search" class="w-4 h-4"></i>
              Filtrar
            </button>
            <a href="{{ route('dashboard.productos.index') }}" 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 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700">
              <i data-lucide="refresh-cw" class="w-4 h-4"></i>
              Limpiar
            </a>
          </div>
        </form>
      </div>

      <div class="max-w-full overflow-x-auto custom-scrollbar dark:border-gray-800">
        <table class="w-full min-w-[1000px]">
          <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">Código</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">Nombre</p>
                </div>
              </th>
              @if($empresasAcceso->count() > 1)
              <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">Empresa</p>
                </div>
              </th>
              @endif
              <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">Tipo</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">Precio</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">Stock</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">Acciones</p>
                </div>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            @forelse($productos as $producto)
            <tr>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                    @if($producto->es_servicio)
                      <i data-lucide="settings" class="w-5 h-5 text-gray-600 dark:text-gray-400"></i>
                    @else
                      <i data-lucide="package" class="w-5 h-5 text-gray-600 dark:text-gray-400"></i>
                    @endif
                  </div>
                  <div>
                    <p class="font-medium text-gray-800 dark:text-white/90">{{ $producto->codigo }}</p>
                    @if($producto->codigo_sunat)
                      <p class="text-xs text-gray-500 dark:text-gray-400">SUNAT: {{ $producto->codigo_sunat }}</p>
                    @endif
                  </div>
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div>
                  <p class="font-medium text-gray-800 dark:text-white/90">{{ $producto->nombre }}</p>
                  @if($producto->descripcion)
                    <p class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs">{{ $producto->descripcion }}</p>
                  @endif
                  @if($producto->categoria)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                      {{ $producto->categoria }}
                    </span>
                  @endif
                </div>
              </td>
              @if($empresasAcceso->count() > 1)
              <td class="px-5 py-4 sm:px-6">
                <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                  {{ $producto->empresa->nombre }}
                </span>
              </td>
              @endif
              <td class="px-5 py-4 sm:px-6">
                @if($producto->es_servicio)
                  <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                    <i data-lucide="settings" class="w-3 h-3 mr-1"></i>
                    Servicio
                  </span>
                @else
                  <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400">
                    <i data-lucide="package" class="w-3 h-3 mr-1"></i>
                    Producto
                  </span>
                @endif
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div>
                  <p class="font-medium text-gray-800 dark:text-white/90">S/ {{ number_format($producto->precio_venta, 2) }}</p>
                  @if($producto->descuento_porcentaje > 0 || $producto->descuento_monto > 0)
                    <p class="text-sm text-gray-500 dark:text-gray-400 line-through">S/ {{ number_format($producto->precio_unitario, 2) }}</p>
                  @endif
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                @if($producto->es_servicio)
                  <span class="text-sm text-gray-500 dark:text-gray-400">N/A</span>
                @else
                  <div>
                    <p class="font-medium text-gray-800 dark:text-white/90">{{ number_format($producto->stock_actual, 2) }}</p>
                    @if($producto->stock_bajo)
                      <span class="inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400">
                        Stock Bajo
                      </span>
                    @endif
                  </div>
                @endif
              </td>
              <td class="px-5 py-4 sm:px-6">
                @if($producto->activo)
                  <span class="inline-flex items-center rounded-full bg-success-100 px-2 py-1 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 mr-1"></i>
                    Activo
                  </span>
                @else
                  <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                    <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i>
                    Inactivo
                  </span>
                @endif
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center gap-2">
                  <a href="{{ route('dashboard.productos.show', $producto->public_id) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" title="Ver detalles">
                    <i data-lucide="eye" class="w-4 h-4"></i>
                  </a>
                  <a href="{{ route('dashboard.productos.edit', $producto->public_id) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" title="Editar">
                    <i data-lucide="edit" class="w-4 h-4"></i>
                  </a>
                  <button onclick="toggleProductStatus('{{ $producto->public_id }}', {{ $producto->activo ? 'true' : 'false' }})" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" title="{{ $producto->activo ? 'Desactivar' : 'Activar' }}">
                    <i data-lucide="{{ $producto->activo ? 'pause' : 'play' }}" class="w-4 h-4"></i>
                  </button>
                  <form action="{{ route('dashboard.productos.destroy', $producto->public_id) }}" method="POST" class="inline" onsubmit="return confirm('¿Está seguro de que desea eliminar este producto?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-error-300 bg-white text-error-700 hover:bg-error-50 dark:border-error-600 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-900/20" title="Eliminar">
                      <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            @empty
            <tr>
                              <td colspan="7" class="px-5 py-8 sm:px-6 text-center">
                <div class="flex flex-col items-center gap-3">
                  <i data-lucide="package" class="h-12 w-12 text-gray-400"></i>
                  <div>
                    <p class="text-lg font-medium text-gray-900 dark:text-white">No hay productos</p>
                    <p class="text-gray-500 dark:text-gray-400">Comience creando su primer producto.</p>
                  </div>
                  <a href="{{ route('dashboard.productos.create') }}" 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">
                    <i data-lucide="plus" class="h-4 w-4"></i>
                    Crear Producto
                  </a>
                </div>
              </td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <!-- Paginación -->
      @if($productos->hasPages())
        <div class="border-t border-gray-200 dark:border-gray-800 px-6 py-4">
          {{ $productos->links() }}
        </div>
      @endif
    </div>
  </div>
</div>

<script>
function toggleProductStatus(productId, currentStatus) {
  if (!confirm(`¿Está seguro de que desea ${currentStatus ? 'desactivar' : 'activar'} este producto?`)) {
    return;
  }

  fetch(`/dashboard/productos/${productId}/toggle-status`, {
    method: 'PATCH',
    headers: {
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
      'Content-Type': 'application/json',
    },
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      location.reload();
    } else {
      alert('Error: ' + data.message);
    }
  })
  .catch(error => {
    console.error('Error:', error);
    alert('Error al cambiar el estado del producto');
  });
}
</script>
@endsection