@extends('layouts.app')
@section('title', 'Facturación Electrónica')
@section('header', 'Facturación Electrónica - SRI')

@section('content')
@php $moneda = $empresaGlobal->moneda ?? '$'; @endphp

<!-- Estadísticas SRI -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5 mb-5">
    <div class="bg-white rounded-2xl shadow-md p-4 sm:p-5 border-l-4 border-slate-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-slate-500 font-semibold">TOTAL COMPROBANTES</p>
                <p class="text-2xl sm:text-3xl font-bold text-slate-800">{{ $stats['total'] }}</p>
            </div>
            <i class="fas fa-file-invoice text-3xl text-slate-300"></i>
        </div>
    </div>
    <div class="bg-white rounded-2xl shadow-md p-4 sm:p-5 border-l-4 border-green-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-green-600 font-semibold">AUTORIZADOS</p>
                <p class="text-2xl sm:text-3xl font-bold text-green-700">{{ $stats['autorizados'] }}</p>
            </div>
            <i class="fas fa-check-circle text-3xl text-green-300"></i>
        </div>
    </div>
    <div class="bg-white rounded-2xl shadow-md p-4 sm:p-5 border-l-4 border-yellow-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-yellow-600 font-semibold">EN PROCESO</p>
                <p class="text-2xl sm:text-3xl font-bold text-yellow-700">{{ $stats['pendientes'] }}</p>
            </div>
            <i class="fas fa-clock text-3xl text-yellow-300"></i>
        </div>
    </div>
    <div class="bg-white rounded-2xl shadow-md p-4 sm:p-5 border-l-4 border-red-500">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-red-600 font-semibold">DEVUELTOS / NO AUT.</p>
                <p class="text-2xl sm:text-3xl font-bold text-red-700">{{ $stats['rechazados'] }}</p>
            </div>
            <i class="fas fa-exclamation-triangle text-3xl text-red-300"></i>
        </div>
    </div>
</div>

<!-- Aviso si la facturación electrónica está desactivada -->
@if(!($empresaGlobal->facturacion_electronica_activa ?? false))
    <div class="mb-5 bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">
        <i class="fas fa-exclamation-triangle text-amber-500 text-xl mt-1"></i>
        <div class="flex-1">
            <p class="font-semibold text-amber-800">Facturación electrónica no activada</p>
            <p class="text-sm text-amber-700">Para emitir comprobantes electrónicos debes configurar el SRI y subir tu certificado de firma digital (.p12).</p>
        </div>
        <a href="{{ route('facturacion.configuracion') }}" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-lg font-semibold text-sm whitespace-nowrap">
            <i class="fas fa-cog mr-1"></i> Configurar
        </a>
    </div>
@endif

<!-- Filtros -->
<div class="bg-white rounded-2xl shadow-md p-5 mb-5">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">
        <input name="buscar" value="{{ request('buscar') }}" placeholder="N° comprobante / Clave acceso / Cliente"
               class="px-3 py-2.5 border border-slate-300 rounded-lg md:col-span-2">
        <select name="tipo" class="px-3 py-2.5 border border-slate-300 rounded-lg">
            <option value="">Todos los tipos</option>
            @foreach(\App\Models\ComprobanteElectronico::TIPOS as $k => $v)
                <option value="{{ $k }}" {{ request('tipo')==$k?'selected':'' }}>{{ $v }}</option>
            @endforeach
        </select>
        <select name="estado" class="px-3 py-2.5 border border-slate-300 rounded-lg">
            <option value="">Todos los estados</option>
            @foreach(['CREADO'=>'Creado','FIRMADO'=>'Firmado','RECIBIDA'=>'Recibida','AUTORIZADO'=>'Autorizado','DEVUELTA'=>'Devuelta','NO_AUTORIZADO'=>'No autorizado','EXCEPCION'=>'Excepción'] as $k => $v)
                <option value="{{ $k }}" {{ request('estado')==$k?'selected':'' }}>{{ $v }}</option>
            @endforeach
        </select>
        <button class="bg-emerald-600 text-white px-4 py-2.5 rounded-lg"><i class="fas fa-search mr-1"></i>Buscar</button>
    </form>
</div>

<!-- Tabla -->
<div class="bg-white rounded-2xl shadow-md overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                <tr>
                    <th class="text-left py-3 px-4">N° Comprobante</th>
                    <th class="text-left py-3 px-4">Tipo</th>
                    <th class="text-left py-3 px-4 hide-mobile">Cliente / Sujeto</th>
                    <th class="text-left py-3 px-4 hide-mobile">Fecha</th>
                    <th class="text-right py-3 px-4">Total</th>
                    <th class="text-center py-3 px-4">Estado SRI</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            @forelse($comprobantes as $c)
                <tr class="border-b border-slate-100 hover:bg-slate-50">
                    <td class="py-3 px-4 font-mono text-xs font-bold text-slate-700">{{ $c->numero_completo }}</td>
                    <td class="py-3 px-4">
                        @php
                        $tipoColor = ['01'=>'blue', '04'=>'orange', '05'=>'purple', '07'=>'teal'][$c->tipo_documento] ?? 'slate';
                        @endphp
                        <span class="px-2 py-1 bg-{{ $tipoColor }}-100 text-{{ $tipoColor }}-700 rounded text-xs font-semibold">
                            {{ $c->tipo_documento_nombre }}
                        </span>
                    </td>
                    <td class="py-3 px-4 hide-mobile">
                        <p class="text-sm">{{ $c->receptor_razon_social }}</p>
                        <p class="text-xs text-slate-400">{{ $c->receptor_tipo_label }}: {{ $c->receptor_identificacion }}</p>
                    </td>
                    <td class="py-3 px-4 text-xs hide-mobile">{{ $c->fecha_emision->format('d/m/Y') }}</td>
                    <td class="py-3 px-4 text-right font-bold text-emerald-600">{{ $moneda }}{{ number_format($c->importe_total, 2) }}</td>
                    <td class="py-3 px-4 text-center">
                        @php $color = $c->estado_color; @endphp
                        <span class="inline-flex items-center gap-1 px-2 py-1 bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full text-xs font-semibold">
                            {{ str_replace('_', ' ', $c->estado_sri) }}
                        </span>
                    </td>
                    <td class="py-3 px-4 text-right">
                        <a href="{{ route('facturacion.show', $c->id) }}" class="p-2 text-blue-600 hover:bg-blue-50 rounded" title="Ver">
                            <i class="fas fa-eye"></i>
                        </a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="text-center py-12 text-slate-400">
                    <i class="fas fa-file-invoice text-5xl mb-2"></i>
                    <p>Aún no hay comprobantes electrónicos emitidos</p>
                    <p class="text-sm mt-2">Para emitir una factura, realiza una venta de tipo FACTURA en el punto de venta.</p>
                </td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4">{{ $comprobantes->withQueryString()->links() }}</div>
</div>
@endsection