@extends('dashboard.layouts.app')

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

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Gestión de Comprobantes`}" 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="file-text" 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">{{ $estadisticas['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-warning-100 dark:bg-warning-900/30">
          <i data-lucide="clock" 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">Pendientes</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $estadisticas['pendientes'] }}</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">Aceptados</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $estadisticas['aceptados'] }}</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="percent" 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">Tasa de Éxito</p>
          <p class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $estadisticas['tasa_exito'] }}%</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">
            Comprobantes ({{ $comprobantes->total() }})
          </h3>
        </div>
        <div class="flex items-center gap-2">
          <!-- Filtro de ordenamiento -->
          <form method="GET" action="{{ route('dashboard.comprobantes.index') }}" class="flex items-center gap-2">
            <div class="relative">
              <select name="orden_por" 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="fecha_emision" {{ request('orden_por', 'fecha_emision') == 'fecha_emision' ? 'selected' : '' }}>Fecha y Hora</option>
                <option value="numero_completo" {{ request('orden_por') == 'numero_completo' ? 'selected' : '' }}>Número</option>
                <option value="total_venta" {{ request('orden_por') == 'total_venta' ? 'selected' : '' }}>Monto</option>
                <option value="estado" {{ request('orden_por') == 'estado' ? 'selected' : '' }}>Estado</option>
                <option value="created_at" {{ request('orden_por') == 'created_at' ? 'selected' : '' }}>Fecha Creación</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 class="relative">
              <select name="orden" 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="desc" {{ request('orden', 'desc') == 'desc' ? 'selected' : '' }}>Descendente</option>
                <option value="asc" {{ request('orden') == 'asc' ? 'selected' : '' }}>Ascendente</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>
            <button type="submit" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white h-11 px-4 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="filter" class="h-4 w-4"></i>
              Ordenar
            </button>
          </form>
          <button onclick="actualizarEstadisticas()" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white h-11 px-4 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="refresh-cw" class="h-4 w-4"></i>
            Actualizar
          </button>
        </div>
      </div>
                  <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">
                Comprobante
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
                Cliente
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
                Monto
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
                Estado
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
                Fecha
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">
                Acciones
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200 dark:bg-white/[0.03] dark:divide-gray-800">
            @forelse($comprobantes as $comprobante)
              <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.06]">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex flex-col">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                      {{ $comprobante->numero_completo }}
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                      {{ $comprobante->tipoComprobante->descripcion ?? 'N/A' }}
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900 dark:text-white">
                    {{ $comprobante->cliente->razon_social ?? 'N/A' }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ $comprobante->cliente->numero_documento ?? 'N/A' }}
                  </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($comprobante->total_venta ?? 0, 2) }}
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs 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>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900 dark:text-white">
                    {{ $comprobante->fecha_emision ? $comprobante->fecha_emision->format('d/m/Y') : 'N/A' }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ $comprobante->hora_emision ? $comprobante->hora_emision->format('H:i') : '' }}
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                  <div class="flex items-center space-x-2">
                    <a href="{{ route('dashboard.comprobantes.show', $comprobante->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>
                    @if(in_array($comprobante->estado, ['pendiente', 'error_envio']) && Auth::user()->can('comprobantes.send'))
                      <button onclick="enviarComprobante('{{ $comprobante->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="Enviar a SUNAT">
                        <i data-lucide="send" class="w-4 h-4"></i>
                      </button>
                    @endif
                    @if($comprobante->estado === 'error_envio' && Auth::user()->can('comprobantes.send'))
                      <button onclick="reintentarComprobante('{{ $comprobante->public_id }}')" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-warning-300 bg-white text-warning-700 hover:bg-warning-50 dark:border-warning-600 dark:bg-gray-800 dark:text-warning-400 dark:hover:bg-warning-900/20" title="Reintentar envío">
                        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                      </button>
                    @endif
                  </div>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="6" class="px-6 py-12 text-center">
                  <div class="flex flex-col items-center">
                    <i data-lucide="file-text" class="h-12 w-12 text-gray-400 mb-4"></i>
                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400">No se encontraron comprobantes</p>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Intenta ajustar los filtros de búsqueda</p>
                  </div>
                </td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      @if($comprobantes->hasPages())
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-800">
          {{ $comprobantes->appends(request()->query())->links() }}
        </div>
      @endif
    </div>
  </div>
        </div>
    </div>
</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) {
    console.log('Reintentando comprobante:', publicId);
    if (confirm('¿Estás seguro de que quieres reintentar el envío de este comprobante?')) {
        const url = `{{ route('dashboard.comprobantes.reintentar', ':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('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: ' + error.message);
        });
    }
}
</script>
@endsection