@extends('layouts.app')

@section('titulo', 'Facturación Electrónica')

@section('contenido')

<div
    x-data="facturacionApp()"
    x-init="init()"
    class="p-4 md:p-6 bg-gray-50 min-h-screen"
>

{{-- =========================================================
     CABECERA MEJORADA
========================================================== --}}
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">

    <div>
        <div class="flex items-center gap-4">

            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-blue-700 text-white flex items-center justify-center shadow-lg shadow-blue-500/30">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-6 h-6"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 14l2 2 4-4m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>

            <div>
                <h1 class="text-2xl font-bold text-gray-800 tracking-tight">
                    Facturación Electrónica
                </h1>

                <p class="text-sm text-gray-500 flex items-center gap-2">
                    <span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span>
                    Gestión de comprobantes, notas de crédito y envío a SUNAT
                </p>
            </div>

        </div>
    </div>

    <div class="flex gap-2">

        <button
            type="button"
            @click="recargar()"
            class="px-4 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300 text-gray-700 font-medium flex items-center gap-2 transition-all duration-200 shadow-sm"
        >
            <svg xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5 text-gray-500"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">
                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 4v5h5M20 20v-5h-5M5.07 9A7.98 7.98 0 0112 5c4.42 0 8 3.58 8 8a7.98 7.98 0 01-2.07 5.36M18.93 15A7.98 7.98 0 0112 19c-4.42 0-8-3.58-8-8 0-.7.09-1.38.27-2"/>
            </svg>

            Actualizar
        </button>

        <a
            href="{{ route('facturacion.index') }}"
            class="px-4 py-2.5 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-medium flex items-center gap-2 transition-all duration-200 shadow-lg shadow-blue-500/30"
        >
            <svg xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">
                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 4v5h5M20 20v-5h-5M5.07 9A7.98 7.98 0 0112 5c4.42 0 8 3.58 8 8a7.98 7.98 0 01-2.07 5.36M18.93 15A7.98 7.98 0 0112 19c-4.42 0-8-3.58-8-8 0-.7.09-1.38.27-2"/>
            </svg>
            Ir al POS
        </a>

    </div>

</div>


{{-- =========================================================
     RESUMEN MEJORADO CON ANIMACIONES
========================================================== --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">

    {{-- Pendientes --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 hover:shadow-md transition-all duration-300 hover:border-orange-200 group">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">
                    Pendientes de Envío
                </p>
                <p class="text-3xl font-bold text-orange-600 mt-1 group-hover:scale-105 transition-transform duration-300">
                    {{ $resumen['pendientes'] ?? 0 }}
                </p>
                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-orange-500 inline-block animate-pulse"></span>
                    Pendientes de envío a SUNAT
                </p>
            </div>
            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-100 to-orange-200 text-orange-600 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-7 h-7"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M12 8v4l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
        </div>
    </div>

    {{-- Aceptados --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 hover:shadow-md transition-all duration-300 hover:border-green-200 group">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">
                    Aceptados por SUNAT
                </p>
                <p class="text-3xl font-bold text-green-600 mt-1 group-hover:scale-105 transition-transform duration-300">
                    {{ $resumen['aceptados'] ?? 0 }}
                </p>
                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span>
                    Comprobantes aceptados
                </p>
            </div>
            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-100 to-green-200 text-green-600 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-7 h-7"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"/>
                </svg>
            </div>
        </div>
    </div>

    {{-- Errores --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 hover:shadow-md transition-all duration-300 hover:border-red-200 group">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">
                    Con Errores
                </p>
                <p class="text-3xl font-bold text-red-600 mt-1 group-hover:scale-105 transition-transform duration-300">
                    {{ $resumen['errores'] ?? 0 }}
                </p>
                <p class="text-xs text-gray-400 mt-1 flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span>
                    Requieren revisión
                </p>
            </div>
            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-red-100 to-red-200 text-red-600 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-7 h-7"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M12 9v3m0 4h.01M10.29 3.86l-7.82 14a2 2 0 001.75 2.64h15.56a2 2 0 001.75-2.64l-7.82-14a2 2 0 00-3.5 0z"/>
                </svg>
            </div>
        </div>
    </div>

</div>


{{-- =========================================================
     TABS MEJORADOS
========================================================== --}}
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm mb-6">

    <div class="border-b border-gray-100 px-6">

        <div class="flex flex-wrap items-center gap-1 -mb-px">

            {{-- TAB COMPROBANTES --}}
            <button
                type="button"
                @click="tabActiva = 'comprobantes'"
                :class="tabActiva === 'comprobantes'
                    ? 'border-blue-600 text-blue-600 bg-blue-50/50'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50'"
                class="px-5 py-3.5 border-b-2 font-semibold text-sm rounded-t-lg transition-all duration-200 flex items-center gap-2"
            >
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-5 h-5"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 14l2 2 4-4m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>

                Comprobantes

                <span class="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold">
                    {{ $ventas->total() }}
                </span>
            </button>

            {{-- TAB NOTAS DE CREDITO --}}
            <button
                type="button"
                @click="tabActiva = 'notas'"
                :class="tabActiva === 'notas'
                    ? 'border-red-600 text-red-600 bg-red-50/50'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50'"
                class="px-5 py-3.5 border-b-2 font-semibold text-sm rounded-t-lg transition-all duration-200 flex items-center gap-2"
            >
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-5 h-5"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M9 14l-2-2m0 0l-2-2m2 2l2-2m-2 2h7a4 4 0 004-4v-1m-6-5h6v6"/>
                </svg>

                Notas de Crédito

                <span class="px-2.5 py-0.5 rounded-full bg-red-100 text-red-700 text-xs font-bold">
                    {{ isset($notasCredito) ? $notasCredito->total() : 0 }}
                </span>
            </button>

        </div>

    </div>

</div>


{{-- =========================================================
     TAB COMPROBANTES
========================================================== --}}
<div
    x-show="tabActiva === 'comprobantes'"
    x-cloak
>

    {{-- =====================================================
         FILTROS MEJORADOS
    ====================================================== --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-6">

        <form
            method="GET"
            action="{{ route('facturacion.index') }}"
            class="grid grid-cols-1 md:grid-cols-4 gap-4"
        >

            {{-- Buscar --}}
            <div class="md:col-span-2">

                <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">
                    Buscar
                </label>

                <div class="relative">

                    <input
                        type="text"
                        name="buscar"
                        value="{{ $buscar }}"
                        placeholder="Comprobante, cliente o documento..."
                        class="w-full rounded-xl border border-gray-200 pl-10 pr-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                    >

                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="absolute left-3 top-3 w-5 h-5 text-gray-400"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="m21 21-4.35-4.35m1.35-5.65a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>

                </div>

            </div>

            {{-- Tipo --}}
            <div>

                <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">
                    Tipo
                </label>

                <select
                    name="tipo"
                    class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white"
                >
                    <option value="">
                        Todos
                    </option>
                    <option
                        value="FACTURA"
                        @selected(strtoupper($tipo) === 'FACTURA')
                    >
                        Facturas
                    </option>
                    <option
                        value="BOLETA"
                        @selected(strtoupper($tipo) === 'BOLETA')
                    >
                        Boletas
                    </option>
                </select>

            </div>

            {{-- Estado --}}
            <div>

                <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">
                    Estado SUNAT
                </label>

                <select
                    name="estado"
                    class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white"
                >
                    <option value="">
                        Todos
                    </option>
                    <option
                        value="PENDIENTE"
                        @selected(strtoupper($estado) === 'PENDIENTE')
                    >
                        Pendiente
                    </option>
                    <option
                        value="ACEPTADO"
                        @selected(strtoupper($estado) === 'ACEPTADO')
                    >
                        Aceptado
                    </option>
                    <option
                        value="ERROR"
                        @selected(strtoupper($estado) === 'ERROR')
                    >
                        Error
                    </option>
                </select>

            </div>

            <div class="md:col-span-4 flex justify-end gap-2 pt-1">

                <a
                    href="{{ route('facturacion.index') }}"
                    class="px-5 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-sm font-medium text-gray-700 transition-all duration-200"
                >
                    Limpiar
                </a>

                <button
                    type="submit"
                    class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white text-sm font-semibold transition-all duration-200 shadow-lg shadow-blue-500/30"
                >
                    Buscar
                </button>

            </div>

        </form>

    </div>


    {{-- =====================================================
         TABLA COMPROBANTES MEJORADA
    ====================================================== --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        <div class="px-6 py-4 border-b border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between gap-3">

            <div>
                <h2 class="font-bold text-gray-800 text-lg">
                    Listado de Comprobantes
                </h2>
                <p class="text-xs text-gray-500 mt-0.5">
                    Facturas y boletas generadas desde el POS
                </p>
            </div>

            <div class="flex items-center gap-3">

                <span class="text-sm text-gray-500 font-medium bg-gray-50 px-3 py-1 rounded-lg">
                    {{ $ventas->total() }} registros
                </span>

                {{-- Exportar --}}
                <button
                    type="button"
                    @click="exportarComprobantes()"
                    class="px-4 py-2 rounded-xl bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white text-sm font-semibold flex items-center gap-2 transition-all duration-200 shadow-lg shadow-green-500/30"
                    title="Exportar comprobantes a Excel"
                >
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="w-4 h-4"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/>
                    </svg>
                    Exportar Excel
                </button>

            </div>

        </div>


        <div class="overflow-x-auto">

            <table class="w-full text-sm" id="tablaComprobantes">

                <thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">

                    <tr>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Fecha
                        </th>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Comprobante
                        </th>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Cliente
                        </th>

                        <th class="text-right px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Total
                        </th>

                        <th class="text-center px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            SUNAT
                        </th>

                        <th class="text-center px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Acciones
                        </th>

                    </tr>

                </thead>


                <tbody class="divide-y divide-gray-100">

                    @forelse($ventas as $venta)

                        @php

                            $tipoVenta = strtoupper(
                                trim($venta->tipo_comprobante ?? '')
                            );

                            $estadoSunat = strtoupper(
                                trim($venta->sunat_estado ?? '')
                            );

                            $cliente = $venta->cliente;

                            $nombreCliente = $cliente
                                ? trim(
                                    ($cliente->nombre ?? '') .
                                    ' ' .
                                    ($cliente->apellido_paterno ?? '') .
                                    ' ' .
                                    ($cliente->apellido_materno ?? '')
                                )
                                : 'Cliente general';

                            if ($nombreCliente === '') {
                                $nombreCliente = 'Cliente general';
                            }

                            $numeroComprobante =
                                $venta->numero_comprobante ?? '-';

                            $hasNotaCredito = ((int) ($venta->notas_credito_count ?? 0)) > 0;

                            $docCliente = $cliente
                                ? ($cliente->numero_documento ?? '')
                                : '';

                        @endphp

                        <tr class="hover:bg-gray-50/80 transition-all duration-200">

                            {{-- Fecha --}}
                            <td class="px-6 py-4 whitespace-nowrap">

                                <div class="font-medium text-gray-800">
                                    {{ optional($venta->created_at)->format('d/m/Y') }}
                                </div>

                                <div class="text-xs text-gray-400 font-mono">
                                    {{ optional($venta->created_at)->format('H:i:s') }}
                                </div>

                            </td>

                            {{-- Comprobante --}}
                            <td class="px-6 py-4">

                                <div class="flex items-center gap-2">

                                    <span
                                        class="px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase
                                        {{ $tipoVenta === 'FACTURA'
                                            ? 'bg-blue-100 text-blue-700'
                                            : 'bg-purple-100 text-purple-700' }}"
                                    >
                                        {{ $tipoVenta ?: 'DOC' }}
                                    </span>

                                    <span class="font-bold text-gray-800 font-mono">
                                        {{ $numeroComprobante }}
                                    </span>

                                </div>

                                <div class="text-xs text-gray-400 mt-0.5">
                                    Venta #{{ $venta->id }}
                                </div>

                            </td>

                            {{-- Cliente --}}
                            <td class="px-6 py-4">

                                <div class="font-medium text-gray-800">
                                    {{ $nombreCliente }}
                                </div>

                                @if($docCliente)

                                    <div class="text-xs text-gray-400 font-mono">
                                        {{ $docCliente }}
                                    </div>

                                @endif

                            </td>

                            {{-- Total --}}
                            <td class="px-6 py-4 text-right whitespace-nowrap">

                                <span class="font-bold text-gray-800 text-base">
                                    S/ {{ number_format((float) $venta->total, 2) }}
                                </span>

                            </td>

                            {{-- Estado --}}
                            <td class="px-6 py-4 text-center">

                                @if(in_array($estadoSunat, ['ACEPTADO', 'ACEPTADA', 'OK']))

                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-green-100 text-green-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block animate-pulse"></span>
                                        ACEPTADO
                                    </span>

                                @elseif($estadoSunat === 'ERROR')

                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-red-100 text-red-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span>
                                        ERROR
                                    </span>

                                @elseif($estadoSunat === 'PENDIENTE' || $estadoSunat === '')

                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-orange-100 text-orange-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-orange-500 inline-block animate-pulse"></span>
                                        PENDIENTE
                                    </span>

                                @else

                                    <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 text-xs font-bold">
                                        {{ $estadoSunat }}
                                    </span>

                                @endif

                            </td>

                            {{-- Acciones --}}
                            <td class="px-6 py-4">

                                <div class="flex justify-center items-center gap-1.5">

                                    {{-- Ver --}}
                                    <button
                                        type="button"
                                        @click="verVenta({{ $venta->id }})"
                                        title="Ver detalle"
                                        class="w-9 h-9 rounded-xl border border-gray-200 hover:bg-gray-100 hover:border-gray-300 text-gray-600 flex items-center justify-center transition-all duration-200"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="w-5 h-5"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="2"
                                                  d="M2.25 12s3.75-6.75 9.75-6.75S21.75 18.75 12 18.75 2.25 12 2.25 12z"/>
                                            <circle cx="12"
                                                    cy="12"
                                                    r="2.5"/>
                                        </svg>
                                    </button>

                                    {{-- Enviar --}}
                                    @if(!in_array($estadoSunat, ['ACEPTADO', 'ACEPTADA', 'OK']))

                                        <button
                                            type="button"
                                            @click="enviarSunat({{ $venta->id }})"
                                            title="Enviar a SUNAT"
                                            class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-500/30"
                                        >
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 class="w-5 h-5"
                                                 fill="none"
                                                 viewBox="0 0 24 24"
                                                 stroke="currentColor">
                                                <path stroke-linecap="round"
                                                      stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M4 12l16-8-5 16-3-7-8-1z"/>
                                            </svg>
                                        </button>

                                    @endif

                                    {{-- Reenviar --}}
                                    @if($estadoSunat === 'ERROR')

                                        <button
                                            type="button"
                                            @click="reenviar({{ $venta->id }})"
                                            title="Reenviar"
                                            class="w-9 h-9 rounded-xl bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white flex items-center justify-center transition-all duration-200 shadow-lg shadow-orange-500/30"
                                        >
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 class="w-5 h-5"
                                                 fill="none"
                                                 viewBox="0 0 24 24"
                                                 stroke="currentColor">
                                                <path stroke-linecap="round"
                                                      stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M4 4v5h5M20 20v-5h-5M5 9a7 7 0 0112-2m2 8a7 7 0 01-12 2"/>
                                            </svg>
                                        </button>

                                    @endif

                                    {{-- Nota de crédito --}}
                                    @if(in_array($estadoSunat, ['ACEPTADO', 'ACEPTADA', 'OK']))

                                        @if(!$hasNotaCredito)
                                            <button
                                                type="button"
                                                @click="abrirNotaCredito(
                                                {{ $venta->id }},
                                                @js($numeroComprobante)
                                            )"
                                            title="Nota de Crédito"
                                            class="w-9 h-9 rounded-xl bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white flex items-center justify-center transition-all duration-200 shadow-lg shadow-red-500/30"
                                        >
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 class="w-5 h-5"
                                                 fill="none"
                                                 viewBox="0 0 24 24"
                                                 stroke="currentColor">
                                                <path stroke-linecap="round"
                                                      stroke-linejoin="round"
                                                      stroke-width="2"
                                                      d="M9 14l-2-2m0 0l-2-2m2 2l2-2m-2 2h7a4 4 0 004-4v-1m-6-5h6v6"/>
                                            </svg>
                                        </button>
                                        @else
                                            <span title="Este comprobante ya tiene una Nota de Crédito" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-400 flex items-center justify-center cursor-not-allowed">
                                                ✓
                                            </span>
                                        @endif

                                    @endif

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="6" class="px-6 py-16 text-center">

                                <div class="flex flex-col items-center">

                                    <div class="w-20 h-20 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">

                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="w-10 h-10 text-gray-400"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="2"
                                                  d="M9 14l2 2 4-4m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>

                                    </div>

                                    <h3 class="font-semibold text-gray-700 text-lg">
                                        No hay comprobantes
                                    </h3>

                                    <p class="text-sm text-gray-400 mt-1">
                                        No se encontraron facturas o boletas con los filtros seleccionados.
                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- Paginación --}}
        @if($ventas->hasPages())

            <div class="px-6 py-4 border-t border-gray-100">
                {{ $ventas->links() }}
            </div>

        @endif

    </div>

</div>


{{-- =========================================================
     TAB NOTAS DE CREDITO MEJORADO
========================================================== --}}
<div
    x-show="tabActiva === 'notas'"
    x-cloak
>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        <div class="px-6 py-4 border-b border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between gap-3">

            <div>
                <h2 class="font-bold text-gray-800 text-lg">
                    Notas de Crédito
                </h2>
                <p class="text-xs text-gray-500 mt-0.5">
                    Notas de crédito generadas sobre facturas y boletas aceptadas
                </p>
            </div>

            <div class="flex items-center gap-3">

                <span class="text-sm text-gray-500 font-medium bg-gray-50 px-3 py-1 rounded-lg">
                    {{ isset($notasCredito) ? $notasCredito->total() : 0 }} registros
                </span>

                <button
                    type="button"
                    @click="exportarNotasCredito()"
                    class="px-4 py-2 rounded-xl bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white text-sm font-semibold flex items-center gap-2 transition-all duration-200 shadow-lg shadow-green-500/30"
                    title="Exportar notas de crédito a Excel"
                >
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="w-4 h-4"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/>
                    </svg>
                    Exportar Excel
                </button>

            </div>

        </div>


        <div class="overflow-x-auto">

            <table class="w-full text-sm" id="tablaNotasCredito">

                <thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">

                    <tr>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Fecha
                        </th>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Nota de Crédito
                        </th>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Documento Original
                        </th>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Cliente
                        </th>

                        <th class="text-left px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Motivo
                        </th>

                        <th class="text-right px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Total
                        </th>

                        <th class="text-center px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            SUNAT
                        </th>

                        <th class="text-center px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Stock
                        </th>

                        <th class="text-center px-6 py-3.5 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                            Acciones
                        </th>

                    </tr>

                </thead>


                <tbody class="divide-y divide-gray-100">

                    @forelse(($notasCredito ?? []) as $nota)

                        @php

                            $estadoNC = strtoupper(
                                trim($nota->sunat_estado ?? $nota->estado ?? '')
                            );

                            $clienteNC = $nota->cliente;

                            $nombreClienteNC = $clienteNC
                                ? trim(
                                    ($clienteNC->nombre ?? '') .
                                    ' ' .
                                    ($clienteNC->apellido_paterno ?? '') .
                                    ' ' .
                                    ($clienteNC->apellido_materno ?? '')
                                )
                                : 'Cliente general';

                            if ($nombreClienteNC === '') {
                                $nombreClienteNC = 'Cliente general';
                            }

                            $ventaOriginal = $nota->venta;

                            $numeroOriginal = $ventaOriginal
                                ? ($ventaOriginal->numero_comprobante ?? '-')
                                : '-';

                            $numeroNC =
                                $nota->numero_comprobante ?? '-';

                            $docClienteNC = $clienteNC
                                ? ($clienteNC->numero_documento ?? '')
                                : '';

                        @endphp

                        <tr class="hover:bg-gray-50/80 transition-all duration-200">

                            {{-- Fecha --}}
                            <td class="px-6 py-4 whitespace-nowrap">

                                <div class="font-medium text-gray-800">
                                    {{ optional($nota->created_at)->format('d/m/Y') }}
                                </div>

                                <div class="text-xs text-gray-400 font-mono">
                                    {{ optional($nota->created_at)->format('H:i:s') }}
                                </div>

                            </td>

                            {{-- NC --}}
                            <td class="px-6 py-4">

                                <div class="flex items-center gap-2">

                                    <span class="px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase bg-red-100 text-red-700">
                                        NC
                                    </span>

                                    <span class="font-bold text-gray-800 font-mono">
                                        {{ $numeroNC }}
                                    </span>

                                </div>

                                <div class="text-xs text-gray-400 mt-0.5">
                                    NC #{{ $nota->id }}
                                </div>

                            </td>

                            {{-- Original --}}
                            <td class="px-6 py-4">

                                <div class="font-semibold text-gray-800">
                                    {{ $numeroOriginal }}
                                </div>

                                @if($ventaOriginal)

                                    <div class="text-xs text-gray-400">
                                        Venta #{{ $ventaOriginal->id }}
                                    </div>

                                @endif

                            </td>

                            {{-- Cliente --}}
                            <td class="px-6 py-4">

                                <div class="font-medium text-gray-800">
                                    {{ $nombreClienteNC }}
                                </div>

                                @if($docClienteNC)

                                    <div class="text-xs text-gray-400 font-mono">
                                        {{ $docClienteNC }}
                                    </div>

                                @endif

                            </td>

                            {{-- Motivo --}}
                            <td class="px-6 py-4">

                                <div class="font-medium text-gray-700">
                                    {{ $nota->motivo_codigo ?? '-' }}
                                </div>

                                <div class="text-xs text-gray-400 max-w-xs truncate">
                                    {{ $nota->motivo ?? '' }}
                                </div>

                            </td>

                            {{-- Total --}}
                            <td class="px-6 py-4 text-right whitespace-nowrap">

                                <span class="font-bold text-gray-800 text-base">
                                    S/ {{ number_format((float) $nota->total, 2) }}
                                </span>

                            </td>

                            {{-- Estado SUNAT --}}
                            <td class="px-6 py-4 text-center">

                                @if(in_array($estadoNC, ['ACEPTADO', 'ACEPTADA', 'OK']))

                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-green-100 text-green-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block animate-pulse"></span>
                                        ACEPTADO
                                    </span>

                                @elseif($estadoNC === 'ERROR')

                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-red-100 text-red-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span>
                                        ERROR
                                    </span>

                                @elseif($estadoNC === 'PENDIENTE' || $estadoNC === '')

                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-orange-100 text-orange-700 text-xs font-bold">
                                        <span class="w-1.5 h-1.5 rounded-full bg-orange-500 inline-block animate-pulse"></span>
                                        PENDIENTE
                                    </span>

                                @else

                                    <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 text-xs font-bold">
                                        {{ $estadoNC }}
                                    </span>

                                @endif

                            </td>

                            {{-- Stock --}}
                            <td class="px-6 py-4 text-center">

                                @if(!$nota->devolver_stock)
                                    <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-gray-100 text-gray-500 text-xs font-semibold">
                                        No
                                    </span>
                                @elseif($nota->stock_devuelto)
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-green-100 text-green-700 text-xs font-bold">
                                        ✓ Devuelto
                                    </span>
                                @elseif(in_array($estadoNC, ['ACEPTADO', 'ACEPTADA', 'OK']))
                                    <button
                                        type="button"
                                        @click.stop.prevent="confirmarDevolucionStock({{ $nota->id }})"
                                        title="Devolver productos al stock"
                                        class="px-3 py-1.5 rounded-xl bg-amber-100 text-amber-700 hover:bg-amber-200 text-xs font-bold transition-all duration-200"
                                    >
                                        ↩ Devolver
                                    </button>
                                @else
                                    <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-orange-100 text-orange-700 text-xs font-semibold">
                                        Esperando SUNAT
                                    </span>
                                @endif

                            </td>

                            {{-- Acciones --}}
                            <td class="px-6 py-4">

                                <div class="flex justify-center items-center gap-1.5">

                                    <button
                                        type="button"
                                        @click="verNotaCredito({{ $nota->id }})"
                                        title="Ver detalle"
                                        class="w-9 h-9 rounded-xl border border-gray-200 hover:bg-gray-100 hover:border-gray-300 text-gray-600 flex items-center justify-center transition-all duration-200"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="w-5 h-5"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="2"
                                                  d="M2.25 12s3.75-6.75 9.75-6.75S21.75 18.75 12 18.75 2.25 12 2.25 12z"/>
                                            <circle cx="12"
                                                    cy="12"
                                                    r="2.5"/>
                                        </svg>
                                    </button>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="9" class="px-6 py-16 text-center">

                                <div class="flex flex-col items-center">

                                    <div class="w-20 h-20 rounded-2xl bg-red-50 flex items-center justify-center mb-4">

                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="w-10 h-10 text-red-400"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round"
                                                  stroke-width="2"
                                                  d="M9 14l-2-2m0 0l-2-2m2 2l2-2m-2 2h7a4 4 0 004-4v-1m-6-5h6v6"/>
                                        </svg>

                                    </div>

                                    <h3 class="font-semibold text-gray-700 text-lg">
                                        No hay Notas de Crédito
                                    </h3>

                                    <p class="text-sm text-gray-400 mt-1">
                                        Las Notas de Crédito creadas aparecerán aquí.
                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- Paginación NC --}}
        @if(isset($notasCredito) && $notasCredito->hasPages())

            <div class="px-6 py-4 border-t border-gray-100">
                {{ $notasCredito->links() }}
            </div>

        @endif

    </div>

</div>


{{-- =========================================================
     MODAL DETALLE COMPROBANTE MEJORADO
========================================================== --}}
<div
    x-show="mostrarDetalle"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
>

    <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm"
        @click="cerrarDetalle()"
    ></div>

    <div
        class="relative bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden"
        @click.stop
    >

        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-gray-50 to-white">

            <div>

                <h2 class="text-lg font-bold text-gray-800">
                    Detalle del comprobante
                </h2>

                <p
                    x-show="ventaDetalle"
                    class="text-sm text-gray-500 font-medium"
                >
                    <span x-text="ventaDetalle?.numero_comprobante || ''"></span>
                </p>

            </div>

            <button
                type="button"
                @click="cerrarDetalle()"
                class="w-9 h-9 rounded-xl hover:bg-gray-100 text-gray-500 flex items-center justify-center transition-all duration-200"
            >
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

        </div>


        <div
            x-show="cargandoDetalle"
            class="p-12 text-center"
        >

            <div class="inline-flex items-center gap-3 text-gray-500">

                <svg class="animate-spin w-6 h-6 text-blue-600"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24">

                    <circle class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"></circle>

                    <path class="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>

                </svg>

                <span class="font-medium">Cargando detalle...</span>

            </div>

        </div>


        <div
            x-show="!cargandoDetalle && ventaDetalle"
            class="overflow-y-auto max-h-[calc(90vh-80px)]"
        >

            <div class="p-6">

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 border border-gray-100">

                        <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">
                            Comprobante
                        </p>

                        <p
                            class="font-bold text-gray-800 text-lg mt-1"
                            x-text="numeroVentaDetalle()"
                        ></p>

                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 border border-gray-100">

                        <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">
                            Tipo
                        </p>

                        <p
                            class="font-bold text-gray-800 text-lg mt-1"
                            x-text="ventaDetalle?.tipo_comprobante || '-'"
                        ></p>

                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 border border-gray-100">

                        <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">
                            Cliente
                        </p>

                        <p
                            class="font-bold text-gray-800 text-lg mt-1 truncate"
                            x-text="nombreClienteDetalle()"
                        ></p>

                    </div>

                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 border border-blue-200">

                        <p class="text-xs text-blue-600 font-medium uppercase tracking-wider">
                            Total
                        </p>

                        <p
                            class="font-bold text-blue-600 text-xl mt-1"
                            x-text="'S/ ' + money(ventaDetalle?.total)"
                        ></p>

                    </div>

                </div>


                <div class="mb-6">

                    <div class="flex items-center justify-between mb-2">

                        <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wider">
                            Estado SUNAT
                        </h3>

                        <span
                            class="px-3 py-1.5 rounded-full text-xs font-bold"
                            :class="claseEstado(ventaDetalle?.sunat_estado)"
                            x-text="ventaDetalle?.sunat_estado || 'PENDIENTE'"
                        ></span>

                    </div>

                    <div
                        x-show="ventaDetalle?.sunat_mensaje"
                        class="bg-gray-50 border border-gray-200 rounded-xl p-4 text-sm text-gray-600 whitespace-pre-wrap font-mono"
                        x-text="ventaDetalle?.sunat_mensaje"
                    ></div>

                </div>


                <div>

                    <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wider mb-3">
                        Productos
                    </h3>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">

                        <table class="w-full text-sm">

                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100">

                                <tr>

                                    <th class="text-left px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                        Producto
                                    </th>

                                    <th class="text-right px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                        Cant.
                                    </th>

                                    <th class="text-right px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                        P. Unit.
                                    </th>

                                    <th class="text-right px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                        Subtotal
                                    </th>

                                </tr>

                            </thead>

                            <tbody class="divide-y divide-gray-100">

                                <template
                                    x-for="detalle in (ventaDetalle?.detalles || [])"
                                    :key="detalle.id"
                                >

                                    <tr class="hover:bg-gray-50/80 transition-all duration-200">

                                        <td class="px-4 py-3">

                                            <div
                                                class="font-medium text-gray-800"
                                                x-text="detalle.descripcion || detalle.producto?.nombre || 'Producto'"
                                            ></div>

                                        </td>

                                        <td
                                            class="px-4 py-3 text-right font-medium"
                                            x-text="detalle.cantidad"
                                        ></td>

                                        <td
                                            class="px-4 py-3 text-right font-mono"
                                            x-text="'S/ ' + money(detalle.precio_unitario)"
                                        ></td>

                                        <td
                                            class="px-4 py-3 text-right font-bold text-gray-800"
                                            x-text="'S/ ' + money(detalle.subtotal)"
                                        ></td>

                                    </tr>

                                </template>

                            </tbody>

                        </table>

                    </div>

                </div>


                <div class="flex justify-end mt-6">

                    <div class="w-full md:w-80 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-5 border border-gray-200">

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                Importe bruto
                            </span>

                            <span
                                class="font-medium text-gray-800"
                                x-text="'S/ ' + money(importeBrutoVentaDetalle())"
                            ></span>

                        </div>

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-red-500">
                                Descuento
                            </span>

                            <span
                                class="font-medium text-red-600"
                                x-text="'- S/ ' + money(descuentoVentaDetalle())"
                            ></span>

                        </div>

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                Subtotal neto
                            </span>

                            <span
                                class="font-medium text-gray-800"
                                x-text="'S/ ' + money(subtotalNetoVentaDetalle())"
                            ></span>

                        </div>

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                IGV (18%)
                            </span>

                            <span
                                class="font-medium text-gray-800"
                                x-text="'S/ ' + money(ventaDetalle?.igv)"
                            ></span>

                        </div>

                        <div class="border-t border-gray-200 mt-2 pt-3 flex justify-between">

                            <span class="font-bold text-gray-800 text-base">
                                Total
                            </span>

                            <span
                                class="font-bold text-2xl text-blue-600"
                                x-text="'S/ ' + money(ventaDetalle?.total)"
                            ></span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     MODAL CREAR NOTA DE CREDITO MEJORADO
========================================================== --}}
<div
    x-show="mostrarNotaCredito"
    x-cloak
    class="fixed inset-0 z-[60] flex items-center justify-center p-4"
>

    <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm"
        @click="cerrarNotaCredito()"
    ></div>

    <div
        class="relative bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden"
        @click.stop
    >

        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-red-50 to-white">

            <div>

                <h2 class="text-lg font-bold text-gray-800">
                    Crear Nota de Crédito
                </h2>

                <p class="text-sm text-gray-500">
                    Documento original:
                    <span
                        class="font-semibold text-gray-700"
                        x-text="notaCreditoComprobante"
                    ></span>
                </p>

            </div>

            <button
                type="button"
                @click="cerrarNotaCredito()"
                class="w-9 h-9 rounded-xl hover:bg-gray-100 text-gray-500 flex items-center justify-center transition-all duration-200"
            >
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

        </div>


        <div class="overflow-y-auto max-h-[calc(90vh-80px)]">

            <div class="p-6">

                <div class="bg-gradient-to-r from-orange-50 to-orange-100/50 border border-orange-200 rounded-xl p-4 mb-5">

                    <div class="flex gap-3 items-start">

                        <div class="text-orange-600 text-2xl mt-0.5">
                            ⚠
                        </div>

                        <div>

                            <p class="font-semibold text-orange-800">
                                Documento original
                            </p>

                            <p class="text-sm text-orange-700 mt-1">
                                Selecciona los productos y cantidades que serán incluidos en la Nota de Crédito.
                            </p>

                        </div>

                    </div>

                </div>


                {{-- Loading --}}
                <div
                    x-show="cargandoNotaCredito"
                    class="py-10 text-center text-gray-500"
                >

                    <div class="inline-flex items-center gap-3">

                        <svg class="animate-spin w-6 h-6 text-red-600"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24">

                            <circle class="opacity-25"
                                    cx="12"
                                    cy="12"
                                    r="10"
                                    stroke="currentColor"
                                    stroke-width="4"></circle>

                            <path class="opacity-75"
                                  fill="currentColor"
                                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>

                        </svg>

                        <span class="font-medium">Cargando productos...</span>

                    </div>

                </div>


                {{-- Productos --}}
                <div
                    x-show="!cargandoNotaCredito && notaCreditoVenta"
                    class="mb-6"
                >

                    <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wider mb-3">
                        Productos a acreditar
                    </h3>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">

                        <div class="overflow-x-auto">

                            <table class="w-full text-sm">

                                <thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">

                                    <tr>

                                        <th class="text-center px-4 py-3 w-16">
                                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Incluir</span>
                                        </th>

                                        <th class="text-left px-4 py-3">
                                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Producto</span>
                                        </th>

                                        <th class="text-right px-4 py-3">
                                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Vendido</span>
                                        </th>

                                        <th class="text-right px-4 py-3">
                                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Cantidad NC</span>
                                        </th>

                                        <th class="text-right px-4 py-3">
                                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">P. Unit.</span>
                                        </th>

                                        <th class="text-right px-4 py-3">
                                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Importe</span>
                                        </th>

                                    </tr>

                                </thead>

                                <tbody class="divide-y divide-gray-100">

                                    <template
                                        x-for="detalle in notaCreditoDetalles"
                                        :key="detalle.id"
                                    >

                                        <tr
                                            class="hover:bg-gray-50/80 transition-all duration-200"
                                            :class="detalle.incluir ? 'bg-red-50/20' : ''"
                                        >

                                            <td class="px-4 py-3 text-center">

                                                <input
                                                    type="checkbox"
                                                    x-model="detalle.incluir"
                                                    @change="normalizarCantidadNC(detalle)"
                                                    class="w-4 h-4 rounded border-gray-300 text-red-600 focus:ring-red-500 focus:ring-2"
                                                >

                                            </td>

                                            <td class="px-4 py-3">

                                                <div
                                                    class="font-medium text-gray-800"
                                                    x-text="detalle.descripcion || detalle.producto?.nombre || 'Producto'"
                                                ></div>

                                            </td>

                                            <td
                                                class="px-4 py-3 text-right font-medium"
                                                x-text="detalle.cantidad"
                                            ></td>

                                            <td class="px-4 py-3 text-right">

                                                <input
                                                    type="number"
                                                    min="0"
                                                    :max="detalle.cantidad"
                                                    step="0.0001"
                                                    x-model.number="detalle.cantidad_nc"
                                                    @input="normalizarCantidadNC(detalle)"
                                                    :disabled="!detalle.incluir"
                                                    class="w-28 rounded-xl border border-gray-200 px-3 py-2 text-right text-sm disabled:bg-gray-100 disabled:text-gray-400 focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200"
                                                >

                                            </td>

                                            <td
                                                class="px-4 py-3 text-right font-mono"
                                                x-text="'S/ ' + money(detalle.precio_unitario)"
                                            ></td>

                                            <td
                                                class="px-4 py-3 text-right font-bold text-gray-800"
                                                x-text="'S/ ' + money(importeDetalleNC(detalle))"
                                            ></td>

                                        </tr>

                                    </template>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>


                {{-- Motivo + resumen --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">

                    <div>

                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                                Motivo SUNAT
                            </label>

                            <select
                                x-model="notaCreditoMotivo"
                                class="w-full rounded-xl border border-gray-200 px-3 py-2.5 focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200 bg-white"
                            >

                                <option value="">
                                    Seleccionar motivo
                                </option>

                                <option value="01">
                                    01 - Anulación por error en el RUC
                                </option>

                                <option value="02">
                                    02 - Anulación por error en la descripción
                                </option>

                                <option value="03">
                                    03 - Anulación por error en el monto
                                </option>

                                <option value="04">
                                    04 - Descuento global
                                </option>

                                <option value="05">
                                    05 - Descuento por ítem
                                </option>

                                <option value="06">
                                    06 - Devolución total
                                </option>

                                <option value="07">
                                    07 - Anulación de la operación
                                </option>

                                <option value="08">
                                    08 - Bonificación
                                </option>

                                <option value="09">
                                    09 - Disminución en el valor
                                </option>

                                <option value="10">
                                    10 - Otros conceptos
                                </option>

                            </select>

                        </div>


                    <div class="bg-gradient-to-br from-red-50 to-red-100/50 rounded-xl p-5 border border-red-200">

                        <div class="flex justify-between text-sm">

                            <span class="text-gray-600">
                                Importe bruto
                            </span>

                            <span
                                class="font-semibold text-gray-800"
                                x-text="'S/ ' + money(subtotalBrutoNC())"
                            ></span>

                        </div>

                        <div class="flex justify-between text-sm mt-2">

                            <span class="text-gray-600">
                                Descuento proporcional
                            </span>

                            <span
                                class="font-semibold text-blue-600"
                                x-text="'- S/ ' + money(descuentoProporcionalNC())"
                            ></span>

                        </div>

                        <div class="flex justify-between text-sm mt-2">

                            <span class="text-gray-600">
                                Subtotal NC
                            </span>

                            <span
                                class="font-semibold text-gray-800"
                                x-text="'S/ ' + money(totalSubtotalNC())"
                            ></span>

                        </div>

                        <div class="flex justify-between text-sm mt-2">

                            <span class="text-gray-600">
                                IGV (18%)
                            </span>

                            <span
                                class="font-semibold text-gray-800"
                                x-text="'S/ ' + money(totalIGVNC())"
                            ></span>

                        </div>

                        <div class="border-t border-red-200 mt-3 pt-3 flex justify-between">

                            <span class="font-bold text-gray-800">
                                Total NC
                            </span>

                            <span
                                class="font-bold text-2xl text-red-600"
                                x-text="'S/ ' + money(totalNC())"
                            ></span>

                        </div>

                    </div>

                </div>


                {{-- Observación --}}
                <div class="mb-5">

                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Observación
                    </label>

                    <textarea
                        x-model="notaCreditoDescripcion"
                        rows="3"
                        placeholder="Descripción o motivo adicional..."
                        class="w-full rounded-xl border border-gray-200 px-3 py-2.5 focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-200"
                    ></textarea>

                </div>


                {{-- Devolución de stock --}}
                <div class="mb-5 rounded-xl border border-amber-200 bg-amber-50 p-4">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" x-model="devolverStock" class="mt-1 w-4 h-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500">
                        <span>
                            <span class="block font-semibold text-amber-900">Devolver productos al stock</span>
                            <span class="block text-xs text-amber-700 mt-1">Si la Nota de Crédito es aceptada por SUNAT, se podrá ejecutar la devolución de las cantidades acreditadas al lote original.</span>
                        </span>
                    </label>
                </div>

                {{-- Botones --}}
                <div class="flex justify-end gap-3">

                    <button
                        type="button"
                        @click="cerrarNotaCredito()"
                        class="px-5 py-2.5 rounded-xl border border-gray-200 hover:bg-gray-50 font-medium transition-all duration-200"
                    >
                        Cancelar
                    </button>

                    <button
                        type="button"
                        @click="crearNotaCredito()"
                        :disabled="
                            guardandoNotaCredito ||
                            !notaCreditoMotivo ||
                            !hayDetalleNC()
                        "
                        class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 disabled:opacity-50 text-white font-semibold flex items-center gap-2 transition-all duration-200 shadow-lg shadow-red-500/30"
                    >

                        <span x-show="!guardandoNotaCredito">
                            Crear Nota de Crédito
                        </span>

                        <span
                            x-show="guardandoNotaCredito"
                            class="flex items-center gap-2"
                        >

                            <svg class="animate-spin w-4 h-4"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                                 viewBox="0 0 24 24">

                                <circle class="opacity-25"
                                        cx="12"
                                        cy="12"
                                        r="10"
                                        stroke="currentColor"
                                        stroke-width="4"></circle>

                                <path class="opacity-75"
                                      fill="currentColor"
                                      d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>

                            </svg>

                            Procesando...

                        </span>

                    </button>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     MODAL DETALLE NOTA DE CREDITO MEJORADO
========================================================== --}}
<div
    x-show="mostrarDetalleNotaCredito"
    x-cloak
    class="fixed inset-0 z-[70] flex items-center justify-center p-4"
>

    <div
        class="absolute inset-0 bg-black/60 backdrop-blur-sm"
        @click="cerrarDetalleNotaCredito()"
    ></div>

    <div
        class="relative bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden"
        @click.stop
    >

        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-red-50 to-white">

            <div>

                <h2 class="text-lg font-bold text-gray-800">
                    Detalle de Nota de Crédito
                </h2>

                <p
                    x-show="notaCreditoDetalle"
                    class="text-sm text-gray-500 font-medium"
                >
                    <span
                        x-text="notaCreditoDetalle?.numero_comprobante || 'Nota de Crédito pendiente'"
                    ></span>
                </p>

            </div>

            <button
                type="button"
                @click="cerrarDetalleNotaCredito()"
                class="w-9 h-9 rounded-xl hover:bg-gray-100 text-gray-500 flex items-center justify-center transition-all duration-200"
            >
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

        </div>


        <div
            x-show="cargandoDetalleNotaCredito"
            class="p-12 text-center"
        >

            <div class="inline-flex items-center gap-3 text-gray-500">

                <svg class="animate-spin w-6 h-6 text-red-600"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24">

                    <circle class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"></circle>

                    <path class="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>

                </svg>

                <span class="font-medium">Cargando detalle...</span>

            </div>

        </div>


        <div
            x-show="!cargandoDetalleNotaCredito && notaCreditoDetalle"
            class="overflow-y-auto max-h-[calc(90vh-80px)]"
        >

            <div class="p-6">

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 border border-gray-100">

                        <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">
                            Nota de Crédito
                        </p>

                        <p
                            class="font-bold text-gray-800 text-lg mt-1"
                            x-text="notaCreditoDetalle?.numero_comprobante || 'PENDIENTE'"
                        ></p>

                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 border border-gray-100">

                        <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">
                            Documento original
                        </p>

                        <p
                            class="font-bold text-gray-800 text-lg mt-1"
                            x-text="numeroVentaOriginalNC()"
                        ></p>

                    </div>

                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 border border-gray-100">

                        <p class="text-xs text-gray-500 font-medium uppercase tracking-wider">
                            Motivo
                        </p>

                        <p
                            class="font-bold text-gray-800 text-sm mt-1 truncate"
                            x-text="(notaCreditoDetalle?.motivo_codigo || '') + ' - ' + (notaCreditoDetalle?.motivo || '')"
                        ></p>

                    </div>

                    <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-xl p-4 border border-red-200">

                        <p class="text-xs text-red-600 font-medium uppercase tracking-wider">
                            Total
                        </p>

                        <p
                            class="font-bold text-red-600 text-xl mt-1"
                            x-text="'S/ ' + money(notaCreditoDetalle?.total)"
                        ></p>

                    </div>

                </div>


                {{-- SUNAT --}}
                <div class="mb-6">

                    <div class="flex items-center justify-between mb-2">

                        <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wider">
                            Estado SUNAT
                        </h3>

                        <span
                            class="px-3 py-1.5 rounded-full text-xs font-bold"
                            :class="claseEstado(notaCreditoDetalle?.sunat_estado)"
                            x-text="notaCreditoDetalle?.sunat_estado || 'PENDIENTE'"
                        ></span>

                    </div>

                    <div
                        x-show="notaCreditoDetalle?.sunat_mensaje"
                        class="bg-gray-50 border border-gray-200 rounded-xl p-4 text-sm text-gray-600 whitespace-pre-wrap font-mono"
                        x-text="notaCreditoDetalle?.sunat_mensaje"
                    ></div>

                </div>


                {{-- Productos --}}
                <div>

                    <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wider mb-3">
                        Productos
                    </h3>

                    <div class="border border-gray-200 rounded-xl overflow-hidden">

                        <div class="overflow-x-auto">

                            <table class="w-full text-sm">

                                <thead class="bg-gradient-to-r from-gray-50 to-gray-100">

                                    <tr>

                                        <th class="text-left px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                            Producto
                                        </th>

                                        <th class="text-right px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                            Cant.
                                        </th>

                                        <th class="text-right px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                            P. Unit.
                                        </th>

                                        <th class="text-right px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wider">
                                            Subtotal
                                        </th>

                                    </tr>

                                </thead>

                                <tbody class="divide-y divide-gray-100">

                                    <template
                                        x-for="detalle in (notaCreditoDetalle?.detalles || [])"
                                        :key="detalle.id"
                                    >

                                        <tr class="hover:bg-gray-50/80 transition-all duration-200">

                                            <td class="px-4 py-3">

                                                <div
                                                    class="font-medium text-gray-800"
                                                    x-text="detalle.descripcion || detalle.producto?.nombre || 'Producto'"
                                                ></div>

                                            </td>

                                            <td
                                                class="px-4 py-3 text-right font-medium"
                                                x-text="detalle.cantidad"
                                            ></td>

                                            <td
                                                class="px-4 py-3 text-right font-mono"
                                                x-text="'S/ ' + money(detalle.precio_unitario)"
                                            ></td>

                                            <td
                                                class="px-4 py-3 text-right font-bold text-gray-800"
                                                x-text="'S/ ' + money(detalle.subtotal)"
                                            ></td>

                                        </tr>

                                    </template>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>


                {{-- Totales --}}
                <div class="flex justify-end mt-6">

                    <div class="w-full md:w-80 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-5 border border-gray-200">

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                Importe bruto
                            </span>

                            <span
                                class="font-medium text-gray-800"
                                x-text="'S/ ' + money(importeBrutoNCDetalle())"
                            ></span>

                        </div>

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                Descuento
                            </span>

                            <span
                                class="font-medium text-blue-600"
                                x-text="'- S/ ' + money(descuentoNCDetalle())"
                            ></span>

                        </div>

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                Subtotal neto
                            </span>

                            <span
                                class="font-medium text-gray-800"
                                x-text="'S/ ' + money(subtotalNetoNCDetalle())"
                            ></span>

                        </div>

                        <div class="flex justify-between py-2 text-sm">

                            <span class="text-gray-500">
                                IGV (18%)
                            </span>

                            <span
                                class="font-medium text-gray-800"
                                x-text="'S/ ' + money(notaCreditoDetalle?.igv)"
                            ></span>

                        </div>

                        <div class="border-t border-gray-200 mt-2 pt-3 flex justify-between">

                            <span class="font-bold text-gray-800 text-base">
                                Total
                            </span>

                            <span
                                class="font-bold text-2xl text-red-600"
                                x-text="'S/ ' + money(notaCreditoDetalle?.total)"
                            ></span>

                        </div>

                    </div>

                </div>


                {{-- Descripción --}}
                <div
                    x-show="notaCreditoDetalle?.descripcion"
                    class="mt-6"
                >

                    <h3 class="font-bold text-gray-800 text-sm uppercase tracking-wider mb-2">
                        Observación
                    </h3>

                    <div
                        class="bg-gray-50 border border-gray-200 rounded-xl p-4 text-sm text-gray-600 whitespace-pre-wrap"
                        x-text="notaCreditoDetalle?.descripcion"
                    ></div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     TOAST MEJORADO
========================================================== --}}
<div
    x-show="toast.visible"
    x-cloak
    x-transition
    class="fixed bottom-5 right-5 z-[100] max-w-sm"
>

    <div
        class="rounded-2xl shadow-2xl px-5 py-4 border backdrop-blur-sm"
        :class="toast.tipo === 'success'
            ? 'bg-green-50/95 border-green-200 text-green-800'
            : 'bg-red-50/95 border-red-200 text-red-800'"
    >

        <div class="flex items-start gap-3">

            <div
                class="text-2xl"
                x-text="toast.tipo === 'success' ? '✅' : '❌'"
            ></div>

            <div
                class="text-sm font-medium"
                x-text="toast.mensaje"
            ></div>

        </div>

    </div>

</div>

</div>


{{-- =============================================================
     ALPINE JS - EXPORTACIÓN PROFESIONAL A EXCEL (SIN XML PROBLEMÁTICO)
============================================================= --}}

<script>

function facturacionApp() {

    return {

        /* =====================================================
           TABS
        ====================================================== */
        tabActiva: 'comprobantes',


        /* =====================================================
           DETALLE VENTA
        ====================================================== */
        mostrarDetalle: false,
        cargandoDetalle: false,
        ventaDetalle: null,


        /* =====================================================
           NOTA DE CREDITO
        ====================================================== */
        mostrarNotaCredito: false,
        cargandoNotaCredito: false,

        notaCreditoVentaId: null,
        notaCreditoComprobante: '',

        notaCreditoVenta: null,
        notaCreditoDetalles: [],

        notaCreditoMotivo: '',
        notaCreditoDescripcion: '',
        devolverStock: false,

        guardandoNotaCredito: false,


        /* =====================================================
           DETALLE NOTA DE CREDITO
        ====================================================== */
        mostrarDetalleNotaCredito: false,
        cargandoDetalleNotaCredito: false,
        notaCreditoDetalle: null,


        /* =====================================================
           TOAST
        ====================================================== */
        toast: {
            visible: false,
            tipo: 'success',
            mensaje: '',
        },


        /* =====================================================
           INIT
        ====================================================== */
        init() {

            window.addEventListener(
                'keydown',
                (event) => {

                    if (event.key !== 'Escape') {
                        return;
                    }

                    if (this.mostrarNotaCredito) {
                        this.cerrarNotaCredito();
                        return;
                    }

                    if (this.mostrarDetalleNotaCredito) {
                        this.cerrarDetalleNotaCredito();
                        return;
                    }

                    if (this.mostrarDetalle) {
                        this.cerrarDetalle();
                    }

                }
            );

        },


        /* =====================================================
           VER VENTA
        ====================================================== */
        async verVenta(id) {

            this.mostrarDetalle = true;
            this.cargandoDetalle = true;
            this.ventaDetalle = null;

            try {

                const response = await fetch(
                    "{{ url('/facturacion/venta') }}/" + id,
                    {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        }
                    }
                );

                const data = await response.json();

                if (!response.ok || !data.success) {

                    throw new Error(
                        data.message ||
                        'No se pudo obtener el detalle.'
                    );

                }

                this.ventaDetalle = data.venta;

            } catch (error) {

                this.mostrarToast(
                    error.message ||
                    'Error al cargar la venta.',
                    'error'
                );

                this.mostrarDetalle = false;

            } finally {

                this.cargandoDetalle = false;

            }

        },


        cerrarDetalle() {

            this.mostrarDetalle = false;
            this.ventaDetalle = null;

        },


        numeroVentaDetalle() {

            if (!this.ventaDetalle) {
                return '-';
            }

            return this.ventaDetalle.numero_comprobante || '-';

        },


        nombreClienteDetalle() {

            const cliente =
                this.ventaDetalle?.cliente;

            if (!cliente) {
                return 'Cliente general';
            }

            const nombre = [
                cliente.nombre,
                cliente.apellido_paterno,
                cliente.apellido_materno
            ]
                .filter(Boolean)
                .join(' ')
                .trim();

            return nombre || 'Cliente general';

        },


        /* =====================================================
           UTILIDADES
        ====================================================== */
        money(valor) {

            return Number(valor || 0).toLocaleString(
                'es-PE',
                {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
            );

        },


        claseEstado(estado) {

            const valor =
                String(estado || 'PENDIENTE')
                    .toUpperCase();

            if (
                ['ACEPTADO', 'ACEPTADA', 'OK']
                    .includes(valor)
            ) {

                return 'bg-green-100 text-green-700';

            }

            if (valor === 'ERROR') {

                return 'bg-red-100 text-red-700';

            }

            return 'bg-orange-100 text-orange-700';

        },


        /* =====================================================
           ENVIAR SUNAT
        ====================================================== */
        async enviarSunat(id) {

            if (
                !confirm(
                    '¿Deseas enviar este comprobante a SUNAT?'
                )
            ) {
                return;
            }

            try {

                const response = await fetch(
                    "{{ url('/facturacion/venta') }}/" +
                    id +
                    "/enviar",
                    {
                        method: 'POST',

                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN':
                                document
                                    .querySelector(
                                        'meta[name="csrf-token"]'
                                    )
                                    ?.getAttribute('content')
                        },

                        body: JSON.stringify({})
                    }
                );

                const data =
                    await response.json();

                if (
                    !response.ok ||
                    !data.success
                ) {

                    throw new Error(
                        data.message ||
                        data.error ||
                        'No se pudo enviar el comprobante.'
                    );

                }

                this.mostrarToast(
                    data.message ||
                    'Comprobante enviado correctamente.',
                    'success'
                );

                setTimeout(
                    () => window.location.reload(),
                    900
                );

            } catch (error) {

                this.mostrarToast(
                    error.message ||
                    'Error al enviar.',
                    'error'
                );

            }

        },


        /* =====================================================
           REENVIAR
        ====================================================== */
        async reenviar(id) {

            if (
                !confirm(
                    '¿Deseas reenviar este comprobante?'
                )
            ) {
                return;
            }

            try {

                const response = await fetch(
                    "{{ url('/facturacion/venta') }}/" +
                    id +
                    "/reenviar",
                    {
                        method: 'POST',

                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN':
                                document
                                    .querySelector(
                                        'meta[name="csrf-token"]'
                                    )
                                    ?.getAttribute('content')
                        },

                        body: JSON.stringify({})
                    }
                );

                const data =
                    await response.json();

                if (
                    !response.ok ||
                    !data.success
                ) {

                    throw new Error(
                        data.message ||
                        data.error ||
                        'No se pudo reenviar.'
                    );

                }

                this.mostrarToast(
                    data.message ||
                    'Comprobante reenviado correctamente.',
                    'success'
                );

                setTimeout(
                    () => window.location.reload(),
                    900
                );

            } catch (error) {

                this.mostrarToast(
                    error.message ||
                    'Error al reenviar.',
                    'error'
                );

            }

        },


        /* =====================================================
           ABRIR NOTA DE CREDITO
        ====================================================== */
        async abrirNotaCredito(
            ventaId,
            comprobante
        ) {

            this.notaCreditoVentaId =
                ventaId;

            this.notaCreditoComprobante =
                comprobante;

            this.notaCreditoMotivo =
                '07';

            this.notaCreditoDescripcion =
                '';

            this.devolverStock = true;

            this.notaCreditoVenta =
                null;

            this.notaCreditoDetalles =
                [];

            this.mostrarNotaCredito =
                true;

            this.cargandoNotaCredito =
                true;

            try {

                const response = await fetch(
                    "{{ url('/facturacion/venta') }}/" +
                    ventaId,
                    {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        }
                    }
                );

                const data =
                    await response.json();

                if (
                    !response.ok ||
                    !data.success
                ) {

                    throw new Error(
                        data.message ||
                        'No se pudo cargar la venta.'
                    );

                }

                this.notaCreditoVenta =
                    data.venta;

                this.notaCreditoDetalles =
                    (data.venta.detalles || []).map(
                        detalle => ({

                            ...detalle,

                            incluir: true,

                            cantidad_nc:
                                Number(
                                    detalle.cantidad || 0
                                )

                        })
                    );

            } catch (error) {

                this.mostrarToast(
                    error.message ||
                    'No se pudo cargar la venta.',
                    'error'
                );

                this.mostrarNotaCredito =
                    false;

            } finally {

                this.cargandoNotaCredito =
                    false;

            }

        },


        cerrarNotaCredito() {

            if (
                this.guardandoNotaCredito
            ) {
                return;
            }

            this.mostrarNotaCredito =
                false;

            this.notaCreditoVentaId =
                null;

            this.notaCreditoVenta =
                null;

            this.notaCreditoDetalles =
                [];

            this.devolverStock = false;

        },


        /* =====================================================
           NORMALIZAR CANTIDAD NC
        ====================================================== */
        normalizarCantidadNC(detalle) {

            const max =
                Number(
                    detalle.cantidad || 0
                );

            let cantidad =
                Number(
                    detalle.cantidad_nc || 0
                );

            if (!detalle.incluir) {

                detalle.cantidad_nc = 0;

                return;

            }

            if (cantidad < 0) {
                cantidad = 0;
            }

            if (cantidad > max) {
                cantidad = max;
            }

            detalle.cantidad_nc =
                cantidad;

        },


        /* =====================================================
           TOTALES DETALLE COMPROBANTE
        ====================================================== */
        importeBrutoVentaDetalle() {
            const detalles = this.ventaDetalle?.detalles;

            if (!Array.isArray(detalles)) {
                return 0;
            }

            return Number(
                detalles.reduce(
                    (total, detalle) => total + Number(detalle.subtotal || 0),
                    0
                ).toFixed(2)
            );
        },

        descuentoVentaDetalle() {
            const descuento = Number(this.ventaDetalle?.descuento || 0);

            return Number(Math.max(0, descuento).toFixed(2));
        },

        subtotalNetoVentaDetalle() {
            const bruto = this.importeBrutoVentaDetalle();
            const descuento = this.descuentoVentaDetalle();
            const subtotalRegistrado = Number(this.ventaDetalle?.subtotal || 0);

            // El subtotal guardado en la venta es la fuente principal.
            // Si no estuviera disponible, se calcula bruto - descuento.
            if (subtotalRegistrado > 0 || (bruto === 0 && descuento === 0)) {
                return Number(Math.max(0, subtotalRegistrado).toFixed(2));
            }

            return Number(Math.max(0, bruto - descuento).toFixed(2));
        },


        /* =====================================================
           TOTALES DETALLE NC
        ====================================================== */
        importeBrutoNCDetalle() {
            const detalles = this.notaCreditoDetalle?.detalles;

            if (Array.isArray(detalles) && detalles.length > 0) {
                return Number(
                    detalles.reduce(
                        (total, detalle) => total + Number(detalle.subtotal || 0),
                        0
                    ).toFixed(2)
                );
            }

            const descuento = Number(this.notaCreditoDetalle?.descuento || 0);
            const subtotal = Number(this.notaCreditoDetalle?.subtotal || 0);

            return Number((subtotal + descuento).toFixed(2));
        },

        descuentoNCDetalle() {
            const descuentoGuardado = Number(
                this.notaCreditoDetalle?.descuento || 0
            );

            if (descuentoGuardado > 0) {
                return Number(descuentoGuardado.toFixed(2));
            }

            const venta = this.notaCreditoDetalle?.venta;
            const detallesVenta = venta?.detalles;
            const detallesNC = this.notaCreditoDetalle?.detalles;

            if (!Array.isArray(detallesVenta) || !Array.isArray(detallesNC)) {
                return 0;
            }

            const brutoVenta = detallesVenta.reduce(
                (total, detalle) => total + Number(detalle.subtotal || 0),
                0
            );

            const brutoNC = detallesNC.reduce(
                (total, detalle) => total + Number(detalle.subtotal || 0),
                0
            );

            const descuentoVenta = Number(venta?.descuento || 0);

            if (brutoVenta <= 0 || brutoNC <= 0 || descuentoVenta <= 0) {
                return 0;
            }

            return Number(
                Math.min(
                    brutoNC,
                    descuentoVenta * (brutoNC / brutoVenta)
                ).toFixed(2)
            );
        },

        subtotalNetoNCDetalle() {
            return Number(
                Math.max(
                    0,
                    this.importeBrutoNCDetalle() - this.descuentoNCDetalle()
                ).toFixed(2)
            );
        },


        /* =====================================================
           IMPORTE DETALLE NC
        ====================================================== */
        importeDetalleNC(detalle) {

            if (!detalle.incluir) {
                return 0;
            }

            return (
                Number(detalle.cantidad_nc || 0) *
                Number(detalle.precio_unitario || 0)
            );

        },


        /* =====================================================
           SUBTOTAL BRUTO NC
        ====================================================== */
        subtotalBrutoNC() {
            return Number(
                this.notaCreditoDetalles
                    .filter(detalle => detalle.incluir)
                    .reduce((total, detalle) => total + this.importeDetalleNC(detalle), 0)
                    .toFixed(2)
            );
        },

        subtotalVentaBrutoNC() {
            if (!this.notaCreditoVenta || !Array.isArray(this.notaCreditoVenta.detalles)) return 0;
            return Number(this.notaCreditoVenta.detalles.reduce((total, detalle) => total + Number(detalle.subtotal || 0), 0).toFixed(2));
        },

        descuentoVentaNC() {
            return Number(Number(this.notaCreditoVenta?.descuento || 0).toFixed(2));
        },

        descuentoProporcionalNC() {
            const brutoNC = this.subtotalBrutoNC();
            const brutoVenta = this.subtotalVentaBrutoNC();
            const descuentoVenta = this.descuentoVentaNC();
            if (brutoNC <= 0 || brutoVenta <= 0 || descuentoVenta <= 0) return 0;
            return Number(Math.min(brutoNC, descuentoVenta * (brutoNC / brutoVenta)).toFixed(2));
        },

        totalSubtotalNC() {
            return Number(Math.max(0, this.subtotalBrutoNC() - this.descuentoProporcionalNC()).toFixed(2));
        },

        totalIGVNC() {
            const subtotalNC = this.totalSubtotalNC();
            const baseNetaVenta = Math.max(0, this.subtotalVentaBrutoNC() - this.descuentoVentaNC());
            const igvVenta = Number(this.notaCreditoVenta?.igv || 0);
            if (subtotalNC <= 0 || baseNetaVenta <= 0 || igvVenta <= 0) return 0;
            return Number((subtotalNC * (igvVenta / baseNetaVenta)).toFixed(2));
        },

        totalNC() {
            return Number((this.totalSubtotalNC() + this.totalIGVNC()).toFixed(2));
        },


        /* =====================================================
           HAY DETALLE
        ====================================================== */
        hayDetalleNC() {

            return this.notaCreditoDetalles.some(
                detalle =>
                    detalle.incluir &&
                    Number(
                        detalle.cantidad_nc || 0
                    ) > 0
            );

        },


        /* =====================================================
           CREAR NOTA DE CREDITO
        ====================================================== */
        async crearNotaCredito() {

            if (!this.notaCreditoVentaId) {
                return;
            }

            if (!this.notaCreditoMotivo) {

                this.mostrarToast(
                    'Selecciona un motivo.',
                    'error'
                );

                return;

            }

            if (!this.hayDetalleNC()) {

                this.mostrarToast(
                    'Selecciona al menos un producto y una cantidad.',
                    'error'
                );

                return;

            }


            const detalles =
                this.notaCreditoDetalles
                    .filter(
                        detalle =>
                            detalle.incluir &&
                            Number(
                                detalle.cantidad_nc || 0
                            ) > 0
                    )
                    .map(
                        detalle => ({

                            venta_detalle_id:
                                detalle.id,

                            cantidad:
                                Number(
                                    detalle.cantidad_nc
                                )

                        })
                    );


            if (!confirm(
                '¿Deseas crear esta Nota de Crédito por S/ ' +
                this.money(this.totalNC()) +
                '?'
            )) {

                return;

            }


            this.guardandoNotaCredito =
                true;


            try {

                let motivoTexto =
                    this.notaCreditoMotivo;

                const select =
                    document.querySelector(
                        'select[x-model="notaCreditoMotivo"]'
                    );

                if (select) {

                    const option =
                        select.options[
                            select.selectedIndex
                        ];

                    if (option) {

                        motivoTexto =
                            option.textContent.trim();

                    }

                }


                const response = await fetch(
                    "{{ url('/facturacion/venta') }}/" +
                    this.notaCreditoVentaId +
                    "/nota-credito",
                    {
                        method: 'POST',

                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',

                            'X-CSRF-TOKEN':
                                document
                                    .querySelector(
                                        'meta[name="csrf-token"]'
                                    )
                                    ?.getAttribute('content')
                        },

                        body: JSON.stringify({

                            motivo_codigo:
                                this.notaCreditoMotivo,

                            motivo:
                                motivoTexto,

                            descripcion:
                                this.notaCreditoDescripcion,

                            devolver_stock:
                                Boolean(this.devolverStock),

                            detalles:
                                detalles

                        })

                    }
                );


                const data =
                    await response.json();


                if (
                    !response.ok ||
                    !data.success
                ) {

                    throw new Error(
                        data.message ||
                        data.error ||
                        'No se pudo crear la Nota de Crédito.'
                    );

                }


                this.mostrarNotaCredito =
                    false;


                this.mostrarToast(
                    data.message ||
                    'Nota de Crédito creada correctamente.',
                    'success'
                );


                setTimeout(
                    () => window.location.reload(),
                    1000
                );


            } catch (error) {

                this.mostrarToast(
                    error.message ||
                    'Error al crear Nota de Crédito.',
                    'error'
                );

            } finally {

                this.guardandoNotaCredito =
                    false;

            }

        },


        /* =====================================================
           DEVOLVER STOCK
        ====================================================== */
        async confirmarDevolucionStock(id) {
            // Esta confirmación SOLO se ejecuta cuando el usuario pulsa el botón.
            const confirmar = window.confirm(
                '¿Deseas devolver al stock los productos de esta Nota de Crédito?\n\nEsta acción solo debe ejecutarse una vez.'
            );

            if (!confirmar) return;

            await this.ejecutarDevolucionStock(id);
        },


        async ejecutarDevolucionStock(id) {
            try {
                const response = await fetch(
                    "{{ url('/facturacion/nota-credito') }}/" + id + "/devolver-stock",
                    {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                        },
                        body: JSON.stringify({})
                    }
                );
                const data = await response.json();
                if (!response.ok || !data.success) throw new Error(data.message || 'No se pudo devolver el stock.');
                this.mostrarToast(data.message || 'Stock devuelto correctamente.', 'success');
                setTimeout(() => window.location.reload(), 700);
            } catch (error) {
                this.mostrarToast(error.message || 'Error al devolver el stock.', 'error');
            }
        },


        /* =====================================================
           VER NOTA DE CREDITO
        ====================================================== */
        async verNotaCredito(id) {

            this.mostrarDetalleNotaCredito =
                true;

            this.cargandoDetalleNotaCredito =
                true;

            this.notaCreditoDetalle =
                null;

            try {

                const response =
                    await fetch(
                        "{{ url('/facturacion/nota-credito') }}/" +
                        id,
                        {
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                            }
                        }
                    );


                const data =
                    await response.json();


                if (
                    !response.ok ||
                    !data.success
                ) {

                    throw new Error(
                        data.message ||
                        'No se pudo obtener el detalle de la Nota de Crédito.'
                    );

                }


                this.notaCreditoDetalle =
                    data.nota_credito;


            } catch (error) {

                this.mostrarToast(
                    error.message ||
                    'Error al cargar la Nota de Crédito.',
                    'error'
                );

                this.mostrarDetalleNotaCredito =
                    false;

            } finally {

                this.cargandoDetalleNotaCredito =
                    false;

            }

        },


        cerrarDetalleNotaCredito() {

            this.mostrarDetalleNotaCredito =
                false;

            this.notaCreditoDetalle =
                null;

        },


        numeroVentaOriginalNC() {

            if (
                !this.notaCreditoDetalle ||
                !this.notaCreditoDetalle.venta
            ) {
                return '-';
            }

            return (
                this.notaCreditoDetalle
                    .venta
                    .numero_comprobante || '-'
            );

        },


        /* =====================================================
           EXPORTAR COMPROBANTES - EXCEL PROFESIONAL
        ====================================================== */
        exportarComprobantes() {

            const tabla =
                document.getElementById(
                    'tablaComprobantes'
                );

            if (!tabla) {
                this.mostrarToast('No se encontró la tabla de comprobantes.', 'error');
                return;
            }

            this.exportarTablaExcelProfesional(
                tabla,
                'comprobantes'
            );

        },


        /* =====================================================
           EXPORTAR NOTAS CREDITO - EXCEL PROFESIONAL
        ====================================================== */
        exportarNotasCredito() {

            const tabla =
                document.getElementById(
                    'tablaNotasCredito'
                );

            if (!tabla) {
                this.mostrarToast('No se encontró la tabla de notas de crédito.', 'error');
                return;
            }

            this.exportarTablaExcelProfesional(
                tabla,
                'notas_credito'
            );

        },


        /* =====================================================
           EXPORTAR TABLA A EXCEL PROFESIONAL
           (SIN XML - SOLO HTML CON ESTILOS)
        ====================================================== */
        exportarTablaExcelProfesional(tabla, nombre) {

            try {

                const filas = Array.from(tabla.querySelectorAll('tr'));

                if (filas.length <= 1) {
                    this.mostrarToast('No hay datos para exportar.', 'error');
                    return;
                }

                this.mostrarToast('Generando archivo Excel...', 'success');

                // Obtener encabezados
                const encabezados = [];
                const primeraFila = filas[0];
                const celdasEncabezado = Array.from(primeraFila.querySelectorAll('th'));

                for (let i = 0; i < celdasEncabezado.length - 1; i++) {
                    encabezados.push(celdasEncabezado[i].innerText.trim());
                }

                // Identificar columnas numéricas
                const columnasNumericas = [];
                for (let i = 0; i < encabezados.length; i++) {
                    const header = encabezados[i].toLowerCase();
                    if (header.includes('total') || header.includes('monto') || header.includes('importe')) {
                        columnasNumericas.push(i);
                    }
                }

                // Construir HTML con estilos (sin XML problemático)
                let html = `
                <html>
                <head>
                    <meta charset="UTF-8">
                    <style>
                        table {
                            border-collapse: collapse;
                            width: 100%;
                            font-family: 'Segoe UI', Arial, sans-serif;
                            font-size: 11px;
                        }

                        th {
                            background-color: #1a56db;
                            color: #ffffff;
                            font-weight: bold;
                            text-align: left;
                            padding: 8px 12px;
                            border: 1px solid #1e3a8a;
                            white-space: nowrap;
                            font-size: 11px;
                        }

                        td {
                            padding: 7px 12px;
                            border: 1px solid #d1d5db;
                            font-size: 10px;
                        }

                        tr:nth-child(even) {
                            background-color: #f9fafb;
                        }

                        tr:nth-child(odd) {
                            background-color: #ffffff;
                        }

                        .text-right {
                            text-align: right;
                        }

                        .text-center {
                            text-align: center;
                        }

                        .monto {
                            text-align: right;
                            font-weight: 600;
                            font-size: 11px;
                        }

                        .estado-aceptado {
                            color: #16a34a;
                            font-weight: bold;
                            font-size: 10px;
                        }

                        .estado-pendiente {
                            color: #ea580c;
                            font-weight: bold;
                            font-size: 10px;
                        }

                        .estado-error {
                            color: #dc2626;
                            font-weight: bold;
                            font-size: 10px;
                        }

                        .fecha {
                            white-space: nowrap;
                            font-size: 10px;
                        }
    `;

                html += `
                    </style>
                </head>
                <body>
                    <table>
                        <thead>
                            <tr>
                `;

                // Encabezados
                for (const header of encabezados) {
                    html += `<th>${header}</th>`;
                }

                html += `
                            </tr>
                        </thead>
                        <tbody>
                `;

                // Procesar filas de datos
                for (let i = 1; i < filas.length; i++) {

                    const fila = filas[i];
                    const celdas = Array.from(fila.querySelectorAll('td'));

                    if (celdas.length === 0) continue;

                    // Excluir última columna (acciones)
                    const celdasDatos = celdas.slice(0, celdas.length - 1);

                    html += `<tr>`;

                    for (let j = 0; j < celdasDatos.length; j++) {

                        let texto = celdasDatos[j].innerText
                            .replace(/\n/g, ' ')
                            .replace(/\s+/g, ' ')
                            .trim();

                        let clase = '';

                        // Detectar montos
                        if (texto.includes('S/')) {
                            clase = 'monto';
                            // Extraer solo el número con formato
                            const match = texto.match(/S\/\s*([\d,.]+)/);
                            if (match) {
                                texto = 'S/ ' + match[1];
                            }
                        }

                        // Detectar estados
                        if (texto.includes('ACEPTADO')) {
                            clase = 'estado-aceptado';
                        } else if (texto.includes('PENDIENTE')) {
                            clase = 'estado-pendiente';
                        } else if (texto.includes('ERROR')) {
                            clase = 'estado-error';
                        }

                        // Detectar fechas
                        if (texto.match(/^\d{2}\/\d{2}\/\d{4}/)) {
                            clase += ' fecha';
                        }

                        // Alinear números a la derecha
                        if (columnasNumericas.includes(j)) {
                            clase += ' text-right';
                        }

                        // Limpiar caracteres especiales
                        texto = texto
                            .replace(/"/g, '')
                            .replace(/[\u0000-\u001F\u007F-\u009F]/g, '');

                        html += `<td class="${clase.trim()}">${texto}</td>`;

                    }

                    html += `</tr>`;

                }

                html += `
                        </tbody>
                    </table>
                </body>
                </html>
                `;

                // Crear y descargar archivo
                const blob = new Blob([html], {
                    type: 'application/vnd.ms-excel'
                });

                const fecha = new Date().toISOString().slice(0, 10);
                const nombreArchivo = `${nombre}_${fecha}.xls`;

                const url = URL.createObjectURL(blob);
                const enlace = document.createElement('a');
                enlace.href = url;
                enlace.download = nombreArchivo;
                document.body.appendChild(enlace);
                enlace.click();
                document.body.removeChild(enlace);
                URL.revokeObjectURL(url);

                this.mostrarToast(
                    `✅ Exportación completada: ${filas.length - 1} registros en ${nombreArchivo}`,
                    'success'
                );

            } catch (error) {

                console.error('Error al exportar:', error);

                this.mostrarToast(
                    '❌ Error al exportar los datos. ' + error.message,
                    'error'
                );

            }

        },


        /* =====================================================
           RECARGAR
        ====================================================== */
        recargar() {

            window.location.reload();

        },


        /* =====================================================
           TOAST
        ====================================================== */
        mostrarToast(
            mensaje,
            tipo = 'success'
        ) {

            this.toast.visible =
                true;

            this.toast.tipo =
                tipo;

            this.toast.mensaje =
                mensaje;


            clearTimeout(
                this._toastTimer
            );


            this._toastTimer =
                setTimeout(
                    () => {

                        this.toast.visible =
                            false;

                    },
                    3500
                );

        }

    };

}

</script>

@endsection