@extends('dashboard.layouts.app')

@section('title', 'Detalles del Comprobante')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Detalles del Comprobante`}" 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.comprobantes.index') }}">
              Comprobantes
              <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">{{ $comprobante->public_id }}</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

  <!-- Header con acciones -->
  <div class="mb-6">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
          Comprobante: {{ $comprobante->numero_completo }}
        </h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">
          {{ $comprobante->tipoComprobante->descripcion ?? 'N/A' }}
        </p>
      </div>
      <div class="flex items-center gap-2">
        <a href="{{ route('dashboard.comprobantes.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 hover:border-gray-400 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:border-gray-500">
          <i data-lucide="arrow-left" class="h-4 w-4"></i>
          Volver
        </a>
        @if(in_array($comprobante->estado, ['pendiente', 'error_envio']) && Auth::user()->can('comprobantes.send'))
          <button onclick="enviarComprobante('{{ $comprobante->public_id }}')" 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 hover:border-primary-600 dark:border-primary-400 dark:bg-primary-400 dark:hover:bg-primary-500 dark:hover:border-primary-500">
            <i data-lucide="send" class="h-4 w-4"></i>
            Enviar a SUNAT
          </button>
        @endif
        @if($comprobante->estado === 'error_envio' && Auth::user()->can('comprobantes.send'))
          <button onclick="reintentarComprobante('{{ $comprobante->public_id }}')" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-warning-500 bg-warning-500 px-4 py-2 font-medium text-white hover:bg-warning-600 hover:border-warning-600 dark:border-warning-400 dark:bg-warning-400 dark:hover:bg-warning-500 dark:hover:border-warning-500">
            <i data-lucide="refresh-cw" class="h-4 w-4"></i>
            Reintentar
          </button>
        @endif
      </div>
    </div>
  </div>

  <!-- Estado del Comprobante -->
  <div class="mb-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-4">Estado del Comprobante</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado:</span>
        <div class="mt-2">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
            @if($comprobante->estado === 'aceptado') bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
            @elseif($comprobante->estado === 'rechazado') bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
            @elseif($comprobante->estado === 'enviando') bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400
            @elseif($comprobante->estado === 'error_envio') bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
            @else bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 @endif">
            {{ ucfirst($comprobante->estado) }}
          </span>
        </div>
      </div>
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Emisión:</span>
        <p class="mt-2 text-gray-900 dark:text-white">
          {{ $comprobante->fecha_emision ? $comprobante->fecha_emision->format('d/m/Y H:i') : 'N/A' }}
        </p>
      </div>
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Total:</span>
        <p class="mt-2 text-gray-900 dark:text-white font-bold text-lg">
          S/ {{ number_format($comprobante->total_venta ?? 0, 2) }}
        </p>
      </div>
    </div>
  </div>

  <!-- Sección de Descargas -->
  <div class="mb-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-4">Descargas</h3>
    <div class="flex flex-wrap gap-3">
      <!-- Descargar PDF -->
      <a href="{{ route('dashboard.comprobantes.download', $comprobante->public_id) }}" 
         class="inline-flex items-center gap-2 rounded-lg border border-green-500 bg-green-500 px-4 py-2 text-sm font-medium text-white hover:bg-green-600 hover:border-green-600 dark:border-green-400 dark:bg-green-400 dark:hover:bg-green-500 dark:hover:border-green-500 transition-colors duration-200">
        <i data-lucide="file-text" class="h-4 w-4"></i>
        Descargar PDF
      </a>

      <!-- Descargar XML (solo si existe XML firmado) -->
      @if($comprobante->xml_firmado)
        <a href="{{ route('dashboard.comprobantes.download-xml', $comprobante->public_id) }}" 
           class="inline-flex items-center gap-2 rounded-lg border border-blue-500 bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600 hover:border-blue-600 dark:border-blue-400 dark:bg-blue-400 dark:hover:bg-blue-500 dark:hover:border-blue-500 transition-colors duration-200">
          <i data-lucide="code" class="h-4 w-4"></i>
          Descargar XML
        </a>
      @endif

      <!-- Descargar CDR (solo si está aceptado y existe CDR) -->
      @if($comprobante->estado === 'aceptado' && $comprobante->cdr_xml)
        <a href="{{ route('dashboard.comprobantes.download-cdr', $comprobante->public_id) }}" 
           class="inline-flex items-center gap-2 rounded-lg border border-purple-500 bg-purple-500 px-4 py-2 text-sm font-medium text-white hover:bg-purple-600 hover:border-purple-600 dark:border-purple-400 dark:bg-purple-400 dark:hover:bg-purple-500 dark:hover:border-purple-500 transition-colors duration-200">
          <i data-lucide="check-circle" class="h-4 w-4"></i>
          Descargar CDR
        </a>
      @endif

      <!-- Mensaje si no hay descargas disponibles -->
      @if(!$comprobante->xml_firmado && $comprobante->estado !== 'aceptado')
        <div class="text-sm text-gray-500 dark:text-gray-400 italic">
          Las descargas estarán disponibles después del envío a SUNAT
        </div>
      @endif
    </div>
  </div>

  <!-- Información del Cliente -->
  <div class="mb-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-4">Información del Cliente</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Razón Social:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->cliente->razon_social ?? 'N/A' }}</p>
      </div>
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Número de Documento:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->cliente->numero_documento ?? 'N/A' }}</p>
      </div>
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Dirección:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->cliente->direccion ?? 'N/A' }}</p>
      </div>
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Email:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->cliente->email ?? 'N/A' }}</p>
      </div>
    </div>
  </div>

  <!-- Detalles del Comprobante -->
  <div class="mb-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-4">Detalles del Comprobante</h3>
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-800">
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Producto</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Cantidad</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Precio Unit.</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Subtotal</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-white/[0.03] dark:divide-gray-800">
          @forelse($comprobante->detalles as $detalle)
            <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.06]">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">{{ $detalle->descripcion ?? $detalle->producto->nombre ?? 'N/A' }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">{{ number_format($detalle->cantidad, 4) }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">S/ {{ number_format($detalle->precio_unitario, 4) }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900 dark:text-white">S/ {{ number_format($detalle->subtotal, 4) }}</div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="4" class="px-6 py-8 text-center">
                <div class="flex flex-col items-center">
                  <i data-lucide="package" class="h-8 w-8 text-gray-400 mb-2"></i>
                  <p class="text-sm text-gray-500 dark:text-gray-400">No hay detalles disponibles</p>
                </div>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
    
    <!-- Totales -->
    <div class="mt-6 flex justify-end">
      <div class="w-64">
        <div class="flex justify-between py-2">
          <span class="text-sm text-gray-500 dark:text-gray-400">Total Gravado:</span>
          <span class="text-sm text-gray-900 dark:text-white">S/ {{ number_format($comprobante->total_gravado ?? 0, 4) }}</span>
        </div>
        <div class="flex justify-between py-2">
          <span class="text-sm text-gray-500 dark:text-gray-400">Total Exonerado:</span>
          <span class="text-sm text-gray-900 dark:text-white">S/ {{ number_format($comprobante->total_exonerado ?? 0, 4) }}</span>
        </div>
        <div class="flex justify-between py-2">
          <span class="text-sm text-gray-500 dark:text-gray-400">Total Inafecto:</span>
          <span class="text-sm text-gray-900 dark:text-white">S/ {{ number_format($comprobante->total_inafecto ?? 0, 4) }}</span>
        </div>
        <div class="flex justify-between py-2">
          <span class="text-sm text-gray-500 dark:text-gray-400">IGV:</span>
          <span class="text-sm text-gray-900 dark:text-white">S/ {{ number_format($comprobante->total_igv ?? 0, 4) }}</span>
        </div>
        @if(($comprobante->total_descuento ?? 0) > 0)
        <div class="flex justify-between py-2">
          <span class="text-sm text-gray-500 dark:text-gray-400">Descuento:</span>
          <span class="text-sm text-gray-900 dark:text-white">-S/ {{ number_format($comprobante->total_descuento ?? 0, 4) }}</span>
        </div>
        @endif
        <div class="flex justify-between py-3 border-t border-gray-200 dark:border-gray-700">
          <span class="font-medium text-gray-900 dark:text-white">Total:</span>
          <span class="font-medium text-gray-900 dark:text-white text-lg">S/ {{ number_format($comprobante->total_venta ?? 0, 2) }}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Información de SUNAT -->
  @if($comprobante->estado !== 'pendiente')
  <div class="mb-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-4">Información de SUNAT</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      @if($comprobante->codigo_respuesta_sunat)
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Código de Respuesta:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->codigo_respuesta_sunat }}</p>
      </div>
      @endif
      @if($comprobante->estado_sunat)
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado SUNAT:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->estado_sunat }}</p>
      </div>
      @endif
      @if($comprobante->mensaje_respuesta_sunat)
      <div class="md:col-span-2">
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Mensaje de Respuesta:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->mensaje_respuesta_sunat }}</p>
      </div>
      @endif
      @if($comprobante->ticket_sunat)
      <div class="md:col-span-2">
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Ticket SUNAT:</span>
        <p class="mt-2 text-gray-900 dark:text-white font-mono text-sm">{{ $comprobante->ticket_sunat }}</p>
      </div>
      @endif
      @if($comprobante->fecha_respuesta_sunat)
      <div>
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Respuesta:</span>
        <p class="mt-2 text-gray-900 dark:text-white">{{ $comprobante->fecha_respuesta_sunat->format('d/m/Y H:i:s') }}</p>
      </div>
      @endif
    </div>
  </div>
  @endif

  <!-- Información de Error -->
  @if($comprobante->estado === 'error_envio' && $comprobante->error_envio)
  <div class="mb-6 rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-900/20">
    <h3 class="text-lg font-semibold text-red-800 dark:text-red-200 mb-4">Error de Envío</h3>
    <div>
      <span class="text-sm font-medium text-red-600 dark:text-red-300">Mensaje de Error:</span>
      <p class="mt-2 text-red-800 dark:text-red-200">{{ $comprobante->error_envio }}</p>
    </div>
    @if($comprobante->fecha_error)
    <div class="mt-4">
      <span class="text-sm font-medium text-red-600 dark:text-red-300">Fecha del Error:</span>
      <p class="mt-2 text-red-800 dark:text-red-200">{{ $comprobante->fecha_error->format('d/m/Y H:i:s') }}</p>
    </div>
    @endif
  </div>
  @endif

</div>

<script>
function enviarComprobante(publicId) {
    console.log('Enviando comprobante:', publicId);
    if (confirm('¿Estás seguro de que quieres enviar este comprobante a SUNAT?')) {
        const url = `{{ route('dashboard.comprobantes.enviar', ':publicId') }}`.replace(':publicId', publicId);
        console.log('URL:', url);
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                alert('Comprobante enviado exitosamente');
                location.reload();
            } else {
                alert(data.message || 'Error al enviar el comprobante');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al enviar el comprobante: ' + error.message);
        });
    }
}

function reintentarComprobante(publicId) {
    if (confirm('¿Estás seguro de que quieres reintentar el envío de este comprobante?')) {
        fetch(`{{ route('dashboard.comprobantes.reintentar', ':publicId') }}`.replace(':publicId', publicId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Reintento iniciado exitosamente');
                location.reload();
            } else {
                alert(data.message || 'Error al reintentar el envío');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al reintentar el envío');
        });
    }
}
</script>
@endsection