@extends('layouts.dashboard')

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

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black">Salesmen / Van Salesmen</h1>
            <p class="text-slate-500">Manage salesmen, areas, profiles, van stock, and public catalog links.</p>
        </div>

        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.assign-van-inventory') }}" class="btn btn-secondary">
                📤 Assign Inventory
            </a>

            <a href="{{ route('salesmen.create') }}" class="btn btn-primary">
                + Add Salesman
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5">
        @foreach($salesmen as $user)
            @php
                $stats = $stockStats[$user->id] ?? ['products' => 0, 'qty' => 0, 'updated_at' => null];
                $publicUrl = $user->public_catalog_token
                    ? url('/salesman/'.$user->public_catalog_token.'/catalog')
                    : null;
            @endphp

            <div class="rounded-3xl bg-white border border-gray-200 shadow-sm overflow-hidden">

                <div class="p-5 border-b border-slate-100">
                    <div class="flex items-start gap-4">
                        <div class="avatar">
                            <div class="w-16 rounded-2xl bg-slate-100">
                                @if($user->profile_photo)
                                    <img src="{{ asset('storage/' . $user->profile_photo) }}">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-2xl font-black text-slate-700">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="min-w-0 flex-1">
                            <h2 class="text-xl font-black truncate">{{ $user->name }}</h2>
                            <p class="text-sm text-slate-500 truncate">{{ $user->email }}</p>

                            <div class="flex flex-wrap gap-2 mt-2">
                                <span class="badge badge-info">
                                    {{ $user->role ?? 'salesman' }}
                                </span>

                                @if($user->whatsapp)
                                    <span class="badge badge-success">
                                        WhatsApp
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if($user->areas->count())
                        <div class="flex flex-wrap gap-2 mt-4">
                            @foreach($user->areas as $area)
                                <span class="rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 px-3 py-1 text-xs font-black">
                                    📍 {{ $area->name }}
                                </span>
                            @endforeach
                        </div>
                    @else
                        <div class="mt-4 rounded-2xl bg-orange-50 border border-orange-100 text-orange-700 px-4 py-3 text-sm font-bold">
                            No area assigned
                        </div>
                    @endif
                </div>

                <div class="p-5">
                    <div class="grid grid-cols-2 gap-3">
                        <div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-4">
                            <div class="text-xs text-slate-500">Products</div>
                            <div class="text-2xl font-black text-indigo-600">{{ number_format($stats['products']) }}</div>
                        </div>

                        <div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4">
                            <div class="text-xs text-slate-500">Total Qty</div>
                            <div class="text-2xl font-black text-emerald-600">{{ number_format($stats['qty']) }}</div>
                        </div>
                    </div>

                    @if($stats['updated_at'])
                        <div class="text-xs text-slate-400 mt-3">
                            Updated {{ \Carbon\Carbon::parse($stats['updated_at'])->format('Y-m-d H:i') }}
                        </div>
                    @else
                        <div class="text-xs text-slate-400 mt-3">
                            No completed stock upload yet
                        </div>
                    @endif

                    <div class="grid grid-cols-2 gap-2 mt-5">
                        <a href="{{ route('salesmen.profile.edit', $user) }}" class="btn btn-primary btn-sm">
                            👤 Profile
                        </a>

                        @if($publicUrl)
                            <a href="{{ $publicUrl }}" target="_blank" class="btn btn-success btn-sm">
                                🚚 Catalog
                            </a>

                            <button class="btn btn-secondary btn-sm col-span-2"
                                    onclick="copySalesmanLink('{{ $publicUrl }}')">
                                🔗 Copy Public Catalog Link
                            </button>
                        @endif
                    </div>
                </div>

            </div>
        @endforeach
    </div>
</div>

<script>
function copySalesmanLink(url) {
    navigator.clipboard.writeText(url).then(() => {
        alert('Public catalog link copied!');
    }).catch(() => {
        prompt('Copy this link:', url);
    });
}
</script>
@endsection