@extends('layouts.app', ['activePage' => 'clientes', 'menuParent' => 'catalogos', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<style>
    .cliente-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .cliente-pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .26rem .65rem;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        border-radius: 999px;
        border: 1px solid #e2e8f0;
        color: #475569;
        background: #f8fafc;
    }

    .cliente-metric {
        border-radius: 0.5rem;
        border: 1px solid #f1f5f9;
        background: #ffffff;
        padding: .7rem;
    }

    .metric-facturado {
        border-left: 4px solid #0ea5e9;
    }

    .metric-saldo {
        border-left: 4px solid #f59e0b;
    }

    .metric-ventas {
        border-left: 4px solid #0ea5a4;
    }

    .money-ok {
        color: #0f766e;
        font-weight: 700;
    }

    .money-warn {
        color: #b45309;
        font-weight: 700;
    }

    .cliente-table th {
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #607086;
        background: #f2f8ff;
    }

    .cliente-table td {
        color: #2b3a4f;
        font-size: 13px;
    }

    .cliente-table tbody tr {
        transition: background-color .2s ease;
    }

    .cliente-table tbody tr:hover {
        background: #f8fcff;
    }

    .cliente-table-wrap {
        max-height: 340px;
        overflow-y: auto;
        overflow-x: auto;
    }

    .cliente-table-wrap thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .chip-ok {
        color: #0f766e;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
    }

    .chip-warn {
        color: #a16207;
        background: #fffbeb;
        border: 1px solid #fde68a;
    }

    .chip-off {
        color: #b91c1c;
        background: #fff1f2;
        border: 1px solid #fecdd3;
    }

    .chip-move {
        display: inline-flex;
        align-items: center;
        padding: .2rem .55rem;
        border-radius: 999px;
        border: 1px solid #d5e3f5;
        background: #f8fbff;
        color: #365377;
        font-size: 11px;
        font-weight: 600;
    }

    .cliente-action-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid #d4e4f8;
        background: #ffffff;
        color: #25466b;
        font-size: 11px;
        font-weight: 700;
        padding: .33rem .55rem;
        transition: all .2s ease;
    }

    .cliente-action-link:hover {
        border-color: #94a3b8;
        background: #f8fafc;
        color: #334155;
        text-decoration: none;
    }
</style>

<div class="content">
    <div class="container-fluid mt-4">
            <div class="row">
                <div class="col-lg-8">
                    <div id="cliente-dashboard" class="space-y-4">
                        <div class="cliente-card p-4">
                            <div class="text-center py-10 text-slate-500">
                                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-400 mx-auto mb-4"></div>
                                <p class="text-sm">Construyendo tablero del cliente...</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="cliente-card p-3 mb-4">
                        <div class="flex items-center justify-between mb-3">
                            <button onclick="getDetalleCliente()" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-300 text-xs font-semibold text-slate-700 hover:border-slate-500">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                                Actualizar
                            </button>
                            <div class="flex items-center gap-2">
                                <a href="{{ url('catalogo/clientes') }}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-900 text-white text-xs font-semibold hover:bg-slate-700">Volver</a>
                            </div>
                        </div>
                        <div id="panel-estado-cliente" class="space-y-3 text-sm text-slate-600">
                            <div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">
                                Esperando estado del cliente...
                            </div>
                        </div>
                    </div>

                    <div class="cliente-card p-3 mb-4">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <h6 class="text-base font-semibold text-slate-900 m-0">Contacto del cliente</h6>
                            </div>
                        </div>
                        <div id="panel-radar-contacto" class="mt-2 space-y-3">
                            <div class="rounded-lg border border-dashed border-slate-200 py-4 text-center text-slate-400 text-xs">
                                Esperando datos de contacto...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        getDetalleCliente();
    });

    const clienteDetalleUrl = "{{ route('catalogo.get-detalle-cliente') }}";
    const detalleFacturaBaseUrl = "{{ url('consulta-cfdis/detalles-factura') }}";
    const clientesIndexUrl = "{{ url('catalogo/clientes') }}";
    var idClienteDetalles = Number("{{ $id }}");

    const formatCurrency = (value) => Number(value || 0).toLocaleString('es-MX', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });

    function safeText(value, fallback = 'N/A') {
        if (value === undefined || value === null || value === '') {
            return fallback;
        }
        return value;
    }

    function estatusBadge(estatus) {
        return Number(estatus) === 1
            ? '<span class="chip-move chip-ok">Activo</span>'
            : '<span class="chip-move chip-off">Inactivo</span>';
    }

    function saldoBadge(saldo) {
        return Number(saldo || 0) > 0
            ? '<span class="chip-move chip-warn">Pendiente</span>'
            : '<span class="chip-move chip-ok">Pagado</span>';
    }

    function getDetalleCliente() {
        validateExistCliente();

        $.ajax({
            url: clienteDetalleUrl,
            type: 'POST',
            data: {
                id: idClienteDetalles
            },
            success: function(response) {
                const data = response || {};
                renderizarCliente(data);
                renderizarPanelEstado(data);
                renderizarRadarContacto(data);
            },
            error: function(response) {
                const message = response?.responseJSON?.message || 'No se puede obtener la informacion.';
                Swal.fire({
                    icon: 'error',
                    title: 'Atencion',
                    html: '<div class="text-gray-700">No se puede obtener la informacion, debido a: <span class="font-semibold text-red-500">' + message + '</span></div>',
                    confirmButtonColor: '#0A415F',
                    confirmButtonText: 'Cerrar'
                });
            }
        });
    }

    function renderizarCliente(data) {
        if (!data.cliente) {
            $('#cliente-dashboard').html(`
                <div class="cliente-card text-center py-10 text-gray-500">
                    <p class="text-sm">No se encontro informacion para este cliente.</p>
                </div>
            `);
            return;
        }

        const cliente = data.cliente;
        const resumen = data.resumen || {};
        const facturas = Array.isArray(data.facturas) ? data.facturas : [];
        const ventas = Array.isArray(data.ventas) ? data.ventas : [];

        const facturasHtml = facturas.length ? facturas.map(factura => `
            <tr>
                <td class="px-4 py-3">${safeText(factura.fecha_emision, '-')}</td>
                <td class="px-4 py-3 break-all">${safeText(factura.uuid, '-')}</td>
                <td class="px-4 py-3">${safeText(factura.serie, '-')} ${safeText(factura.folio, '-')}</td>
                <td class="px-4 py-3">$${formatCurrency(factura.monto)}</td>
                <td class="px-4 py-3">$${formatCurrency(factura.saldo)}</td>
                <td class="px-4 py-3">${saldoBadge(factura.saldo)}</td>
                <td class="px-4 py-3">
                    <div class="flex flex-wrap gap-2">
                        ${factura.referencia_pdf ? `<a href="${factura.referencia_pdf}" target="_blank" class="cliente-action-link">PDF</a>` : ''}
                        ${factura.referencia_xml ? `<a href="${factura.referencia_xml}" target="_blank" class="cliente-action-link">XML</a>` : ''}
                    </div>
                </td>
            </tr>
        `).join('') : `
            <tr>
                <td colspan="7" class="px-4 py-4 text-center text-slate-500">Sin facturas registradas.</td>
            </tr>
        `;

        const ventasHtml = ventas.length ? ventas.map(venta => `
            <tr>
                <td class="px-4 py-3">${safeText(venta.fecha, '-')}</td>
                <td class="px-4 py-3">${safeText(venta.serie, '-')} ${safeText(venta.folio, '-')}</td>
                <td class="px-4 py-3">$${formatCurrency(venta.subtotal)}</td>
                <td class="px-4 py-3">$${formatCurrency(venta.impuestos)}</td>
                <td class="px-4 py-3">$${formatCurrency(venta.total)}</td>
                <td class="px-4 py-3">${Number(venta.estatus) === 1 ? '<span class="chip-move chip-ok">Activa</span>' : '<span class="chip-move chip-off">Inactiva</span>'}</td>
                <td class="px-4 py-3 break-all">${safeText(venta.factura ? venta.factura.uuid : '-', '-')}</td>
            </tr>
        `).join('') : `
            <tr>
                <td colspan="7" class="px-4 py-4 text-center text-slate-500">Sin ventas registradas.</td>
            </tr>
        `;

        const timeline = buildTimeline(facturas, ventas);

        const html = `
            <section class="cliente-card p-4">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <h2 class="text-2xl lg:text-3xl font-semibold text-slate-900 mt-3 mb-1 break-all">${safeText(cliente.razon_social)}</h2>
                        <p class="text-sm text-slate-600">RFC: ${safeText(cliente.rfc)}</p>
                    </div>
                </div>

                <div class="grid sm:grid-cols-3 gap-3 mt-4">
                    <div class="cliente-metric metric-facturado">
                        <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Total facturado</p>
                        <p class="text-xl font-semibold money-ok">$${formatCurrency(resumen.total_facturado)}</p>
                        <p class="text-xs text-slate-500">Acumulado CFDI</p>
                    </div>
                    <div class="cliente-metric metric-saldo">
                        <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Saldo pendiente</p>
                        <p class="text-xl font-semibold money-warn">$${formatCurrency(resumen.saldo_pendiente)}</p>
                        <p class="text-xs text-slate-500">Por cobrar</p>
                    </div>
                    <div class="cliente-metric metric-ventas">
                        <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Total ventas</p>
                        <p class="text-xl font-semibold money-ok">$${formatCurrency(resumen.total_ventas)}</p>
                        <p class="text-xs text-slate-500">Movimientos comerciales</p>
                    </div>
                </div>
            </section>

            <section class="cliente-card p-4">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <h6 class="text-base font-semibold text-slate-900 m-0">Linea de movimiento</h6>
                    <span class="text-xs text-slate-500">Ultimos 4 eventos</span>
                </div>
                ${timeline}
            </section>

            <section class="cliente-card p-4">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <h6 class="text-base font-semibold text-slate-900 m-0">Facturas del cliente</h6>
                    <span class="chip-move">${Number(resumen.facturas_count || 0)} registros</span>
                </div>
                <div class="cliente-table-wrap rounded-lg border border-slate-200">
                    <table class="cliente-table min-w-full">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left">Fecha</th>
                                <th class="px-4 py-3 text-left">UUID</th>
                                <th class="px-4 py-3 text-left">Serie/Folio</th>
                                <th class="px-4 py-3 text-left">Monto</th>
                                <th class="px-4 py-3 text-left">Saldo</th>
                                <th class="px-4 py-3 text-left">Estado</th>
                                <th class="px-4 py-3 text-left">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">${facturasHtml}</tbody>
                    </table>
                </div>
            </section>

            <section class="cliente-card p-4">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <h6 class="text-base font-semibold text-slate-900 m-0">Ventas del cliente</h6>
                    <span class="chip-move">${Number(resumen.ventas_count || 0)} registros</span>
                </div>
                <div class="cliente-table-wrap rounded-lg border border-slate-200">
                    <table class="cliente-table min-w-full">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left">Fecha</th>
                                <th class="px-4 py-3 text-left">Serie/Folio</th>
                                <th class="px-4 py-3 text-left">Subtotal</th>
                                <th class="px-4 py-3 text-left">Impuestos</th>
                                <th class="px-4 py-3 text-left">Total</th>
                                <th class="px-4 py-3 text-left">Estatus</th>
                                <th class="px-4 py-3 text-left">UUID factura</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">${ventasHtml}</tbody>
                    </table>
                </div>
            </section>
        `;

        $('#cliente-dashboard').html(html);
    }

    function buildTimeline(facturas, ventas) {
        const events = [];

        facturas.slice(0, 2).forEach(function(item) {
            events.push({
                tipo: 'CFDI',
                fecha: safeText(item.fecha_emision, '-'),
                titulo: 'Factura ' + safeText(item.serie, '-') + ' ' + safeText(item.folio, '-'),
                subtitulo: safeText(item.uuid, '-'),
                total: '$' + formatCurrency(item.monto),
                clase: Number(item.saldo || 0) > 0 ? 'chip-warn' : 'chip-ok'
            });
        });

        ventas.slice(0, 2).forEach(function(item) {
            events.push({
                tipo: 'VENTA',
                fecha: safeText(item.fecha, '-'),
                titulo: 'Venta ' + safeText(item.serie, '-') + ' ' + safeText(item.folio, '-'),
                subtitulo: safeText(item.factura ? item.factura.uuid : 'Sin CFDI', '-'),
                total: '$' + formatCurrency(item.total),
                clase: Number(item.estatus) === 1 ? 'chip-ok' : 'chip-off'
            });
        });

        if (!events.length) {
            return '<div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">No hay movimientos recientes.</div>';
        }

        return `
            <div class="grid md:grid-cols-2 gap-3">
                ${events.map(evt => `
                    <article class="cliente-metric">
                        <div class="flex items-center justify-between gap-2">
                            <span class="chip-move ${evt.clase}">${evt.tipo}</span>
                            <span class="text-xs text-slate-500">${evt.fecha}</span>
                        </div>
                        <p class="font-semibold text-slate-900 mt-2 mb-1">${evt.titulo}</p>
                        <p class="text-xs text-slate-500 break-all mb-2">${evt.subtitulo}</p>
                        <p class="text-sm font-semibold text-slate-900">${evt.total}</p>
                    </article>
                `).join('')}
            </div>
        `;
    }

    function renderizarPanelEstado(data) {
        if (!data.cliente) {
            $('#panel-estado-cliente').html('<div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">Sin datos para mostrar</div>');
            return;
        }

        const cliente = data.cliente;
        const resumen = data.resumen || {};

        const html = `
            <div class="cliente-metric">
                <div class="flex items-center justify-between mb-2">
                    <div>
                        <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400">Estado cliente</p>
                        <p class="text-sm font-semibold text-slate-900">${Number(cliente.estatus) === 1 ? 'Activo' : 'Inactivo'}</p>
                    </div>
                    ${estatusBadge(cliente.estatus)}
                </div>
                <p class="text-xs text-slate-500">RFC ${safeText(cliente.rfc, '-')}</p>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div class="cliente-metric">
                    <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400">Facturas</p>
                    <p class="text-lg font-semibold text-slate-900">${Number(resumen.facturas_count || 0)}</p>
                </div>
                <div class="cliente-metric">
                    <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400">Ventas</p>
                    <p class="text-lg font-semibold text-slate-900">${Number(resumen.ventas_count || 0)}</p>
                </div>
            </div>
            <div class="cliente-metric">
                <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Cuenta bancaria</p>
                <p class="text-sm font-semibold text-slate-900 break-all">${safeText(cliente.cuenta_bancaria, '-')}</p>
            </div>
        `;

        $('#panel-estado-cliente').html(html);
    }

    function renderizarRadarContacto(data) {
        const cliente = data.cliente || null;

        if (!cliente) {
            $('#panel-radar-contacto').html('<div class="rounded-lg border border-dashed border-slate-200 py-5 text-center text-slate-400 text-xs">Sin datos de contacto.</div>');
            return;
        }

        const html = `
            <div class="cliente-metric">
                <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Correo</p>
                <p class="text-sm font-semibold text-slate-900 break-all">${safeText(cliente.correo, '-')}</p>
            </div>
            <div class="cliente-metric">
                <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Telefono y contacto</p>
                <p class="text-sm text-slate-700">Tel: ${safeText(cliente.telefono, '-')}</p>
                <p class="text-sm text-slate-700">Contacto: ${safeText(cliente.contacto, '-')}</p>
            </div>
            <div class="cliente-metric">
                <p class="text-[11px] uppercase tracking-[0.2em] text-slate-400 mb-1">Ubicacion fiscal</p>
                <p class="text-sm text-slate-700 break-words">${safeText(cliente.direccion, '-')}</p>
                <p class="text-xs text-slate-500 mt-1">${safeText(cliente.municipio, '-')} / ${safeText(cliente.estado, '-')}</p>
                <p class="text-xs text-slate-500">${safeText(cliente.pais, '-')} - CP ${safeText(cliente.codigo_postal, '-')}</p>
            </div>
        `;

        $('#panel-radar-contacto').html(html);
    }

    function validateExistCliente() {
        if (!idClienteDetalles) {
            Swal.fire({
                icon: 'error',
                title: 'Atencion',
                html: '<div class="text-gray-700"><span class="font-semibold text-red-500">No es posible acceder a la informacion del cliente.</span></div>',
                confirmButtonColor: '#0A415F',
                confirmButtonText: 'Volver',
                showCancelButton: true,
                cancelButtonText: 'Cerrar',
                cancelButtonColor: '#6B7280'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = clientesIndexUrl;
                }
            });
        }
    }
</script>
@endpush