@extends('layouts.app')

@section('title', 'Detalle del Cliente')

@section('content')
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-white">Detalles del Cliente</h2>
            <p class="text-gray-400 text-sm mt-1">Información detallada del cliente</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('clientes.index') }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-[#23482f] hover:bg-[#326744] text-white font-medium transition-colors">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                <span>Volver</span>
            </a>
            <a href="{{ route('clientes.edit', $cliente) }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary hover:bg-primary-dark text-background-dark font-bold transition-all shadow-[0_0_15px_rgba(19,236,91,0.3)]">
                <span class="material-symbols-outlined text-[18px]">edit</span>
                <span>Editar</span>
            </a>
        </div>
    </div>

    <div class="bg-surface-dark border border-[#23482f] rounded-xl p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-4">
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Código</h3>
                    <p class="text-white font-medium">{{ $cliente->codigo }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Nombre del Cliente</h3>
                    <p class="text-white font-medium">{{ $cliente->cliente }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">DNI</h3>
                    <p class="text-white font-medium">{{ $cliente->dni ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Número de Teléfono</h3>
                    <p class="text-white font-medium">{{ $cliente->numero ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Correo Electrónico</h3>
                    <p class="text-white font-medium">{{ $cliente->correo ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Distrito</h3>
                    <p class="text-white font-medium">{{ $cliente->distrito ?? 'No registrado' }}</p>
                </div>
            </div>
            <div class="space-y-4">
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Dirección</h3>
                    <p class="text-white font-medium">{{ $cliente->direccion ?? 'No registrada' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Google Maps</h3>
                    <p class="text-white font-medium">{{ $cliente->google_maps ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Plan</h3>
                    <p class="text-white font-medium">{{ $cliente->plan ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Tipo de Plan</h3>
                    <p class="text-white font-medium">{{ $cliente->tipo_plan ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Tipo de Servicio</h3>
                    <p class="text-white font-medium">{{ $cliente->tipo_servicio ?? 'No registrado' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-400">Fecha de Instalación</h3>
                    <p class="text-white font-medium">{{ $cliente->fecha_instalacion ? \Carbon\Carbon::parse($cliente->fecha_instalacion)->format('d/m/Y') : 'No registrada' }}</p>
                </div>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6 pt-6 border-t border-[#23482f]">
            <div>
                <h3 class="text-sm font-medium text-gray-400">Técnico Asignado</h3>
                <p class="text-white font-medium">{{ $cliente->tecnico ?? 'No asignado' }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-400">Estado</h3>
                <p class="text-white font-medium">
                    @if($cliente->estado === 'Activo')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-green-500/10 text-green-400">Activo</span>
                    @elseif($cliente->estado === 'Corte')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-red-500/10 text-red-400">Corte</span>
                    @elseif($cliente->estado === 'Suspendido')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-yellow-500/10 text-yellow-400">Suspendido</span>
                    @elseif($cliente->estado === 'Baja')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">Baja</span>
                    @else
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">{{ $cliente->estado }}</span>
                    @endif
                </p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-400">Nombre de Vendedora</h3>
                <p class="text-white font-medium">{{ $cliente->nombre_vendedora ?? 'No registrado' }}</p>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 pt-6 border-t border-[#23482f]">
            <div>
                <h3 class="text-sm font-medium text-gray-400">Monto de Pago</h3>
                <p class="text-white font-medium">S/ {{ number_format($cliente->monto_pago ?? 0, 2) }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-400">Estado de Pago</h3>
                <p class="text-white font-medium">
                    @if($cliente->estado_pago === 'Pagado')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-green-500/10 text-green-400">Pagado</span>
                    @elseif($cliente->estado_pago === 'Pendiente')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-yellow-500/10 text-yellow-400">Pendiente</span>
                    @elseif($cliente->estado_pago === 'Vencido')
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-red-500/10 text-red-400">Vencido</span>
                    @else
                        <span class="px-2 py-1 text-xs font-bold rounded-full bg-gray-500/10 text-gray-400">{{ $cliente->estado_pago }}</span>
                    @endif
                </p>
            </div>
        </div>
    </div>
</div>
@endsection