@extends('layouts.admin')
@section('title', 'Customer: '.$customer->name)

@section('content')

<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem">

    <span style="color:var(--muted-foreground)">/</span>
    <span style="font-size:0.825rem;color:var(--muted-foreground)">{{ $customer->name }}</span>
</div>

<div style="display:grid;grid-template-columns:1fr 300px;gap:1.25rem;align-items:start">

    {{-- Main --}}
    <div style="display:flex;flex-direction:column;gap:1.25rem">

        {{-- Profile card --}}
        <div class="card" style="padding:1.5rem">
            <div style="display:flex;align-items:center;gap:1.125rem;margin-bottom:1.5rem">
                <div style="width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,rgba(99,102,241,0.15),rgba(124,58,237,0.1));border:2px solid rgba(99,102,241,0.2);display:flex;align-items:center;justify-content:center;font-size:1.375rem;font-weight:800;color:#6366f1;flex-shrink:0">
                    {{ strtoupper(substr($customer->name,0,1)) }}
                </div>
                <div style="flex:1">
                    <div style="font-size:1.125rem;font-weight:800;color:var(--foreground)">{{ $customer->name }}</div>
                    <div style="font-size:0.825rem;color:var(--muted-foreground);margin-top:2px">{{ $customer->email }}</div>
                    @if($customer->company)
                    <div style="font-size:0.78rem;color:var(--muted-foreground);margin-top:2px">{{ $customer->company }}</div>
                    @endif
                </div>
                <span class="badge {{ $customer->is_active ? 'b-green' : 'b-red' }}" style="font-size:0.8rem;padding:0.3rem 0.75rem">
                    {{ $customer->is_active ? 'Active' : 'Suspended' }}
                </span>
            </div>

            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1rem;border-radius:0.75rem;background:var(--muted);border:1px solid var(--border)">
                @foreach([
                    ['label'=>'Licenses', 'value'=>$customer->licenses->count(),                         'color'=>'#6366f1'],
                    ['label'=>'Orders',   'value'=>$customer->orders->count(),                            'color'=>'#3b82f6'],
                    ['label'=>'Downloads','value'=>$customer->downloads->count(),                         'color'=>'#10b981'],
                    ['label'=>'Last Login','value'=>$customer->last_login_at?->diffForHumans() ?? 'Never','color'=>'var(--muted-foreground)'],
                ] as $stat)
                <div style="text-align:center">
                    <div style="font-size:1.25rem;font-weight:800;color:{{ $stat['color'] }}">{{ $stat['value'] }}</div>
                    <div style="font-size:0.68rem;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px">{{ $stat['label'] }}</div>
                </div>
                @endforeach
            </div>

            @if($customer->last_login_ip)
            <div style="margin-top:1rem;padding:0.625rem 1rem;border-radius:0.65rem;background:var(--muted);border:1px solid var(--border);font-size:0.78rem;color:var(--muted-foreground)">
                Last login from <code style="font-family:monospace;color:var(--muted-foreground)">{{ $customer->last_login_ip }}</code>
            </div>
            @endif
        </div>

        {{-- Licenses --}}
        <div class="card">
            <div class="card-header">
                <div>
                    <div class="card-title">Licenses</div>
                    <div class="card-sub">{{ $customer->licenses->count() }} total</div>
                </div>
                <a href="{{ route('admin.licenses.create') }}" class="btn btn-primary" style="padding:0.4rem 0.875rem;font-size:0.78rem">+ Issue License</a>
            </div>
            @forelse($customer->licenses as $license)
            <div class="trow" style="display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1.375rem">
                <div style="flex:1;min-width:0">
                    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
                        <code style="font-family:monospace;font-size:0.75rem;color:#6366f1;background:var(--muted);padding:0.15rem 0.4rem;border-radius:0.3rem">{{ substr($license->license_key,0,22) }}...</code>
                        <span class="badge {{ match($license->status){'active'=>'b-green','suspended'=>'b-yellow','revoked'=>'b-red',default=>'b-gray'} }}">{{ ucfirst($license->status) }}</span>
                    </div>
                    <div style="font-size:0.78rem;color:var(--muted-foreground)">
                        {{ $license->product->name ??'-' }} · {{ $license->getDisplayType() }}
                    </div>
                </div>
                <div style="text-align:right;flex-shrink:0">
                    <div style="font-size:0.78rem;color:var(--muted-foreground)">{{ $license->activations_count }}/{{ $license->max_activations }} activations</div>
                    <div style="font-size:0.72rem;color:var(--muted-foreground);margin-top:2px">{{ $license->expires_at?->format('M d, Y') ?? 'Lifetime' }}</div>
                </div>
                <a href="{{ route('admin.licenses.show',$license) }}" class="btn btn-secondary" style="padding:0.35rem 0.625rem;font-size:0.72rem;flex-shrink:0">View <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
            </div>
            @empty
            <div style="padding:2.5rem;text-align:center;color:var(--muted-foreground);font-size:0.825rem">No licenses yet.</div>
            @endforelse
        </div>

        {{-- Orders --}}
        <div class="card">
            <div class="card-header">
                <div class="card-title">Orders</div>
            </div>
            @forelse($customer->orders as $order)
            <div class="trow" style="display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1.375rem">
                <div style="flex:1">
                    <div style="font-size:0.8375rem;font-weight:700;color:var(--foreground)">{{ $order->order_number }}</div>
                    <div style="font-size:0.72rem;color:var(--muted-foreground);margin-top:2px">{{ $order->created_at->format('M d, Y') }}</div>
                </div>
                <span class="badge {{ $order->status==='paid'?'b-green':($order->status==='pending'?'b-yellow':'b-red') }}">{{ ucfirst($order->status) }}</span>
                <div style="font-size:0.9rem;font-weight:800;color:var(--foreground);min-width:60px;text-align:right">{{ $currencySymbol }}{{ number_format($order->total,2) }}</div>
                <a href="{{ route('admin.orders.show',$order) }}" class="btn btn-secondary" style="padding:0.35rem 0.625rem;font-size:0.72rem;flex-shrink:0">View <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
            </div>
            @empty
            <div style="padding:2.5rem;text-align:center;color:var(--muted-foreground);font-size:0.825rem">No orders yet.</div>
            @endforelse
        </div>

    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:1rem">

        {{-- Actions --}}
        <div class="card" style="padding:1.25rem">
            <div style="font-size:0.875rem;font-weight:700;color:var(--foreground);margin-bottom:0.875rem">Account Actions</div>
            <div style="display:flex;flex-direction:column;gap:0.5rem">
                @if($customer->is_active)
                <form method="POST" action="{{ route('admin.customers.suspend',$customer) }}">
                    @csrf
                    <button class="btn btn-secondary" style="width:100%;justify-content:center;color:#854d0e">
                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Suspend Account
                    </button>
                </form>
                @else
                <form method="POST" action="{{ route('admin.customers.activate',$customer) }}">
                    @csrf
                    <button class="btn btn-secondary" style="width:100%;justify-content:center;color:#166534">
                        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Activate Account
                    </button>
                </form>
                @endif

                <a href="{{ route('admin.licenses.create') }}?user_id={{ $customer->id }}" class="btn btn-primary" style="justify-content:center">
                    <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                    Issue New License
                </a>
            </div>
        </div>

        {{-- Details --}}
        <div class="card" style="padding:1.25rem">
            <div style="font-size:0.875rem;font-weight:700;color:var(--foreground);margin-bottom:0.875rem">Account Details</div>
            <div style="display:flex;flex-direction:column;gap:0.625rem">
                @foreach([
                    ['label'=>'Customer ID', 'value'=>'#'.$customer->id],
                    ['label'=>'Country',     'value'=>$customer->country ??'-'],
                    ['label'=>'Phone',       'value'=>$customer->phone ??'-'],
                    ['label'=>'Joined',      'value'=>$customer->created_at->format('M d, Y')],
                    ['label'=>'Verified',    'value'=>$customer->email_verified_at ? $customer->email_verified_at->format('M d, Y') : 'Not verified'],
                ] as $row)
                <div style="display:flex;justify-content:space-between;font-size:0.78rem;padding-bottom:0.625rem;border-bottom:1px solid var(--border)">
                    <span style="color:var(--muted-foreground)">{{ $row['label'] }}</span>
                    <span style="color:var(--muted-foreground);font-weight:600">{{ $row['value'] }}</span>
                </div>
                @endforeach
            </div>
        </div>

    </div>
</div>

@endsection
