@extends('dashboard.layouts.app')

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

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Ver 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 -->

  <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">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $producto->nombre }}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Código: {{ $producto->codigo }}</p>
          </div>
          <div class="flex items-center gap-3">
            <a href="{{ route('dashboard.productos.edit', $producto) }}" 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="edit" class="h-4 w-4"></i>
              Editar
            </a>
            <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="arrow-left" class="h-4 w-4"></i>
              Volver
            </a>
          </div>
        </div>
      </div>

      <div class="p-6">
        <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="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Información Básica</h4>
              
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Empresa:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->empresa->nombre }}</span>
                </div>
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">ID Público:</span>
                  <span class="text-sm font-mono text-gray-800 dark:text-white/90">{{ $producto->public_id }}</span>
                </div>
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Código:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->codigo }}</span>
                </div>
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Nombre:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->nombre }}</span>
                </div>
                
                @if($producto->descripcion)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Descripción:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90 max-w-xs text-right">{{ $producto->descripcion }}</span>
                </div>
                @endif
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Tipo:</span>
                  <span class="text-sm">
                    @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
                  </span>
                </div>
                
                @if($producto->categoria)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Categoría:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->categoria }}</span>
                </div>
                @endif
                
                @if($producto->subcategoria)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Subcategoría:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->subcategoria }}</span>
                </div>
                @endif
                
                @if($producto->marca)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Marca:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->marca }}</span>
                </div>
                @endif
                
                @if($producto->modelo)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Modelo:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->modelo }}</span>
                </div>
                @endif
              </div>
            </div>

            <!-- Códigos -->
            <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Códigos</h4>
              
              <div class="space-y-3">
                @if($producto->codigo_sunat)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Código SUNAT:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->codigo_sunat }}</span>
                </div>
                @endif
                
                @if($producto->codigo_internacional)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Código Internacional:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->codigo_internacional }}</span>
                </div>
                @endif
              </div>
            </div>

            <!-- Unidades de Medida -->
            <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Unidades de Medida</h4>
              
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Unidad de Medida:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->unidad_medida }}</span>
                </div>
                
                @if($producto->unidad_medida_comercial)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Unidad Comercial:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->unidad_medida_comercial }}</span>
                </div>
                @endif
                
                @if($producto->factor_conversion)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Factor de Conversión:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ number_format($producto->factor_conversion, 4) }}</span>
                </div>
                @endif
              </div>
            </div>
          </div>

          <!-- Columna Derecha -->
          <div class="space-y-6">
            <!-- Precios -->
            <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Precios</h4>
              
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Precio Unitario:</span>
                  <span class="text-sm font-semibold text-gray-800 dark:text-white/90">S/ {{ number_format($producto->precio_unitario, 2) }}</span>
                </div>
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Precio de Venta:</span>
                  <span class="text-sm font-semibold text-gray-800 dark:text-white/90">S/ {{ number_format($producto->precio_venta, 2) }}</span>
                </div>
                
                @if($producto->costo_unitario)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Costo Unitario:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">S/ {{ number_format($producto->costo_unitario, 2) }}</span>
                </div>
                @endif
                
                @if($producto->descuento_porcentaje > 0)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Descuento (%):</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ number_format($producto->descuento_porcentaje, 2) }}%</span>
                </div>
                @endif
                
                @if($producto->descuento_monto > 0)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Descuento (S/):</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">S/ {{ number_format($producto->descuento_monto, 2) }}</span>
                </div>
                @endif
                
                @if($producto->costo_unitario && $producto->costo_unitario > 0)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Margen de Ganancia:</span>
                  <span class="text-sm font-semibold text-green-600 dark:text-green-400">{{ number_format($producto->margen_ganancia, 2) }}%</span>
                </div>
                @endif
              </div>
            </div>

            <!-- Impuestos -->
            <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Impuestos</h4>
              
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Tipo Afectación IGV:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">
                    @switch($producto->tipo_afectacion_igv)
                      @case('10')
                        10 - Gravado
                        @break
                      @case('20')
                        20 - Exonerado
                        @break
                      @case('30')
                        30 - Inafecto
                        @break
                      @case('40')
                        40 - Exportación
                        @break
                      @default
                        {{ $producto->tipo_afectacion_igv }}
                    @endswitch
                  </span>
                </div>
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Porcentaje IGV:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ number_format($producto->porcentaje_igv, 2) }}%</span>
                </div>
                
                @if($producto->tipo_sistema_isc)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Tipo Sistema ISC:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">
                    @switch($producto->tipo_sistema_isc)
                      @case('01')
                        01 - Sistema al Valor
                        @break
                      @case('02')
                        02 - Aplicación Específica
                        @break
                      @case('03')
                        03 - Sistema de Precios de Venta al Público
                        @break
                      @default
                        {{ $producto->tipo_sistema_isc }}
                    @endswitch
                  </span>
                </div>
                @endif
                
                @if($producto->porcentaje_isc > 0)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Porcentaje ISC:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ number_format($producto->porcentaje_isc, 2) }}%</span>
                </div>
                @endif
              </div>
            </div>

            <!-- Stock (solo para productos) -->
            @if(!$producto->es_servicio)
            <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Control de Stock</h4>
              
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Stock Actual:</span>
                  <span class="text-sm font-semibold text-gray-800 dark:text-white/90">{{ number_format($producto->stock_actual, 2) }}</span>
                </div>
                
                @if($producto->stock_minimo)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Stock Mínimo:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ number_format($producto->stock_minimo, 2) }}</span>
                </div>
                @endif
                
                @if($producto->stock_maximo)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Stock Máximo:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ number_format($producto->stock_maximo, 2) }}</span>
                </div>
                @endif
                
                @if($producto->ubicacion_almacen)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Ubicación:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->ubicacion_almacen }}</span>
                </div>
                @endif
                
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado Stock:</span>
                  <span class="text-sm">
                    @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">
                        <i data-lucide="alert-triangle" class="w-3 h-3 mr-1"></i>
                        Stock Bajo
                      </span>
                    @elseif($producto->tiene_stock)
                      <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="check-circle" class="w-3 h-3 mr-1"></i>
                        Disponible
                      </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>
                        Sin Stock
                      </span>
                    @endif
                  </span>
                </div>
              </div>
            </div>
            @endif

            <!-- Estado y Opciones -->
            <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
              <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Estado y Opciones</h4>
              
              <div class="space-y-3">
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado:</span>
                  <span class="text-sm">
                    @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
                  </span>
                </div>
                
                @if($producto->requiere_serie)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Requiere Serie:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">Sí</span>
                </div>
                @endif
                
                @if($producto->requiere_lote)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Requiere Lote:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">Sí</span>
                </div>
                @endif
                
                @if($producto->requiere_fecha_vencimiento)
                <div class="flex justify-between">
                  <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Requiere Fecha Vencimiento:</span>
                  <span class="text-sm text-gray-800 dark:text-white/90">Sí</span>
                </div>
                @endif
              </div>
            </div>
          </div>
        </div>

        <!-- Observaciones -->
        @if($producto->observaciones)
        <div class="mt-6 rounded-lg border border-gray-200 p-4 dark:border-gray-700">
          <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Observaciones</h4>
          <p class="text-sm text-gray-800 dark:text-white/90">{{ $producto->observaciones }}</p>
        </div>
        @endif

        <!-- Información de Auditoría -->
        <div class="mt-6 rounded-lg border border-gray-200 p-4 dark:border-gray-700">
          <h4 class="mb-4 text-lg font-medium text-gray-800 dark:text-white/90">Información de Auditoría</h4>
          
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Creado por:</span>
                <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->creadoPor->name ?? 'N/A' }}</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de creación:</span>
                <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->created_at->format('d/m/Y H:i') }}</span>
              </div>
            </div>
            
            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Actualizado por:</span>
                <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->actualizadoPor->name ?? 'N/A' }}</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Última actualización:</span>
                <span class="text-sm text-gray-800 dark:text-white/90">{{ $producto->updated_at->format('d/m/Y H:i') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection