@extends('layouts.app')

@section('title', 'Influencers')
@section('page-title', 'Influencers')
@section('page-subtitle', 'Manage your influencer roster')

@section('topbar-actions')
<a href="{{ route('influencers.create') }}" class="btn btn-primary">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="14" height="14">
        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
    Add Influencer
</a>
@endsection

@push('styles')
<style>
    .influencers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
    }
    .inf-card {
        background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
        padding: 22px 20px;
        display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
        transition: box-shadow 0.2s, transform 0.15s;
    }
    .inf-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }

    .inf-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #e5e7eb; }
    .inf-avatar-placeholder {
        width: 60px; height: 60px; border-radius: 50%;
        background: linear-gradient(135deg, #34BDEB, #0070f3);
        display: flex; align-items: center; justify-content: center;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 22px; font-weight: 700; color: #fff;
    }
    .inf-name { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: #111827; }
    .inf-channel { font-size: 12px; color: #9ca3af; margin-top: -4px; }

    .inf-stats {
        display: flex; gap: 20px; padding: 12px 0;
        border-top: 1px solid #f3f4f6; width: 100%; justify-content: center;
    }
    .inf-stat { text-align: center; }
    .inf-stat-val { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #111827; }
    .inf-stat-lbl { font-size: 10.5px; color: #9ca3af; margin-top: 2px; }

    .inf-actions { display: flex; gap: 6px; }

    .empty-inf {
        grid-column: 1/-1; text-align: center; padding: 80px 20px;
        border: 1px dashed #d1d5db; border-radius: 10px; background: #ffffff;
    }
    .empty-inf svg { width: 44px; height: 44px; color: #9ca3af; margin-bottom: 14px; }
    .empty-inf h3 { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 8px; }
    .empty-inf p  { font-size: 13px; color: #6b7280; margin-bottom: 18px; max-width: 320px; margin-inline: auto; }
</style>
@endpush

@section('content')

<div class="influencers-grid">
    @forelse($influencers as $inf)
    <div class="inf-card">
        @if($inf->profile_image)
            <img src="{{ $inf->profile_image }}" alt="{{ $inf->influencer_name }}" class="inf-avatar">
        @else
            <div class="inf-avatar-placeholder">{{ strtoupper(substr($inf->influencer_name, 0, 1)) }}</div>
        @endif

        <div class="inf-name">{{ $inf->influencer_name }}</div>
        <div class="inf-channel">{{ $inf->channel_name ?: $inf->platform }}</div>

        <div class="inf-stats">
            <div class="inf-stat">
                <div class="inf-stat-val">{{ number_format($inf->followers_count) }}</div>
                <div class="inf-stat-lbl">Followers</div>
            </div>
            <div class="inf-stat">
                <div class="inf-stat-val" style="color:#34BDEB">{{ number_format($inf->posts_count ?? 0) }}</div>
                <div class="inf-stat-lbl">Videos</div>
            </div>
        </div>

        <div class="inf-actions">
            <a href="{{ route('influencers.edit', $inf) }}" class="btn btn-ghost btn-sm">Edit</a>
            <form method="POST" action="{{ route('influencers.destroy', $inf) }}"
                  onsubmit="return confirm('Remove influencer?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">Remove</button>
            </form>
        </div>
    </div>
    @empty
    <div class="empty-inf">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        <h3>No influencers added yet</h3>
        <p>Add influencers to assign them to campaigns and track their YouTube performance.</p>
        <a href="{{ route('influencers.create') }}" class="btn btn-primary">Add First Influencer</a>
    </div>
    @endforelse
</div>

@endsection