@extends('layouts.app')
@section('titulo', 'Cliente')

@section('contenido')
<div class="max-w-6xl mx-auto space-y-6">

    {{-- Encabezado --}}
    <div>
        <nav class="text-xs text-slate-400 mb-1">
            <a href="{{ route('clientes.index') }}" class="hover:text-brand-600">
                Clientes
            </a>
            <span class="mx-1">/</span>
            Historial
        </nav>

        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">

            <div>
                <h1 class="text-2xl font-bold text-slate-800">
                    {{ $cliente->nombre }}
                    @if($cliente->apellido_paterno || $cliente->apellido_materno)
                        {{ $cliente->apellido_paterno }}
                        {{ $cliente->apellido_materno }}
                    @endif
                </h1>

                <p class="text-sm text-slate-500 mt-1">
                    {{ $cliente->tipo_documento }}
                    {{ $cliente->numero_documento ?: '—' }}
                </p>
            </div>

            {{-- Estado --}}
            <div>
                @if((int) $cliente->activo === 1)
                    <span class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold">
                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                        Cliente activo
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-red-50 text-red-700 text-xs font-semibold">
                        <span class="w-2 h-2 rounded-full bg-red-500"></span>
                        Cliente inactivo
                    </span>
                @endif
            </div>

        </div>
    </div>


    {{-- Datos del cliente + puntos --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- Datos personales --}}
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">

            <h3 class="font-semibold text-slate-700 mb-4">
                Datos del cliente
            </h3>

            <div class="space-y-3 text-sm">

                <div>
                    <p class="text-xs text-slate-400">Nombres</p>
                    <p class="font-medium text-slate-700">
                        {{ $cliente->nombre ?: '—' }}
                    </p>
                </div>

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

                    <div>
                        <p class="text-xs text-slate-400">
                            Apellido paterno
                        </p>
                        <p class="font-medium text-slate-700">
                            {{ $cliente->apellido_paterno ?: '—' }}
                        </p>
                    </div>

                    <div>
                        <p class="text-xs text-slate-400">
                            Apellido materno
                        </p>
                        <p class="font-medium text-slate-700">
                            {{ $cliente->apellido_materno ?: '—' }}
                        </p>
                    </div>

                </div>

                <div>
                    <p class="text-xs text-slate-400">
                        Documento
                    </p>
                    <p class="font-medium text-slate-700">
                        {{ $cliente->tipo_documento ?: '—' }}
                        @if($cliente->numero_documento)
                            · {{ $cliente->numero_documento }}
                        @endif
                    </p>
                </div>

                <div>
                    <p class="text-xs text-slate-400">
                        Teléfono
                    </p>
                    <p class="font-medium text-slate-700">
                        {{ $cliente->telefono ?: '—' }}
                    </p>
                </div>

                <div>
                    <p class="text-xs text-slate-400">
                        Email
                    </p>
                    <p class="font-medium text-slate-700 break-all">
                        {{ $cliente->email ?: '—' }}
                    </p>
                </div>

                <div>
                    <p class="text-xs text-slate-400">
                        Dirección
                    </p>
                    <p class="font-medium text-slate-700">
                        {{ $cliente->direccion ?: '—' }}
                    </p>
                </div>

            </div>
        </div>


        {{-- Puntos --}}
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">

            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                Puntos acumulados
            </p>

            <p class="mt-2 text-4xl font-extrabold text-brand-600">
                {{ number_format((float) $cliente->puntos, 0) }}
            </p>

            <div class="mt-4">

                @if((int) $cliente->acumula_puntos === 1)

                    <div class="flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3">
                        <div class="w-9 h-9 rounded-full bg-emerald-100 flex items-center justify-center">
                            <span class="text-emerald-700 font-bold">✓</span>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-emerald-800">
                                Acumula puntos
                            </p>

                            <p class="text-xs text-emerald-600">
                                Las compras de este cliente generan puntos.
                            </p>
                        </div>
                    </div>

                @else

                    <div class="flex items-center gap-3 rounded-xl bg-slate-50 border border-slate-200 px-4 py-3">
                        <div class="w-9 h-9 rounded-full bg-slate-200 flex items-center justify-center">
                            <span class="text-slate-500 font-bold">×</span>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-slate-700">
                                No acumula puntos
                            </p>

                            <p class="text-xs text-slate-500">
                                Las compras de este cliente no generan puntos.
                            </p>
                        </div>
                    </div>

                @endif

            </div>

        </div>


        {{-- Resumen de compras --}}
        <div class="space-y-6">

            <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">

                <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                    Compras realizadas
                </p>

                <p class="mt-1 text-3xl font-extrabold text-slate-800">
                    {{ number_format($numCompras) }}
                </p>

            </div>

            <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">

                <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
                    Total gastado
                </p>

                <p class="mt-1 text-3xl font-extrabold text-brand-600">
                    S/
                    {{ number_format((float) $totalGastado, 2) }}
                </p>

            </div>

        </div>

    </div>


    {{-- Historial de compras --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">

        <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">

            <div>
                <h3 class="font-semibold text-slate-700">
                    Historial de compras
                </h3>

                <p class="text-xs text-slate-400 mt-1">
                    Comprobantes registrados para este cliente
                </p>
            </div>

        </div>


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

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

                <thead class="bg-slate-50 text-slate-500 text-left">

                    <tr>

                        <th class="px-5 py-3 font-semibold">
                            Comprobante
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Fecha
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Cajero
                        </th>

                        <th class="px-5 py-3 font-semibold">
                            Pago
                        </th>

                        <th class="px-5 py-3 font-semibold text-right">
                            Total
                        </th>

                        <th class="px-5 py-3 font-semibold text-center">
                            Estado
                        </th>

                        <th class="px-5 py-3 font-semibold text-right">
                            Ver
                        </th>

                    </tr>

                </thead>


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

                    @forelse ($ventas as $v)

                        <tr class="hover:bg-slate-50/60 {{ $v->estado === 'anulada' ? 'opacity-60' : '' }}">

                            <td class="px-5 py-3 font-mono text-slate-700">
                                {{ $v->numero_comprobante }}
                            </td>

                            <td class="px-5 py-3 text-slate-500">
                                {{ $v->created_at->format('d/m/Y H:i') }}
                            </td>

                            <td class="px-5 py-3 text-slate-500">
                                {{ $v->usuario?->name ?? '—' }}
                            </td>

                            <td class="px-5 py-3 text-slate-500">
                                {{ $v->metodo_pago ?: '—' }}
                            </td>

                            <td class="px-5 py-3 text-right font-semibold text-slate-700">
                                S/
                                {{ number_format((float) $v->total, 2) }}
                            </td>

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

                                @if ($v->estado === 'pagada')

                                    <span class="inline-flex px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold">
                                        Pagada
                                    </span>

                                @elseif ($v->estado === 'anulada')

                                    <span class="inline-flex px-2 py-0.5 rounded-full bg-red-50 text-red-600 text-xs font-semibold">
                                        Anulada
                                    </span>

                                @else

                                    <span class="inline-flex px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs font-semibold">
                                        {{ ucfirst($v->estado ?: 'Pendiente') }}
                                    </span>

                                @endif

                            </td>

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

                                <a
                                    href="{{ route('pos.ticket', $v) }}"
                                    target="_blank"
                                    class="inline-flex items-center px-3 py-1.5 rounded-lg bg-brand-50 text-brand-600 text-xs font-semibold hover:bg-brand-100"
                                >
                                    Comprobante
                                </a>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="7"
                                class="px-5 py-12 text-center text-slate-400"
                            >
                                Este cliente aún no tiene compras.

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


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

            <div class="px-5 py-3 border-t border-slate-100">
                {{ $ventas->links() }}
            </div>

        @endif

    </div>

</div>
@endsection