@extends('layouts.ambassador')

@section('title', 'Mon lien affilié')

@section('content')
<div class="page-header">
    <h1 class="page-title">Mon lien affilié</h1>
    <p class="page-subtitle">Partagez votre lien pour recruter des prestataires</p>
</div>

<div class="stats-grid">
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #7c3aed, #5b21b6);"><i class="fas fa-mouse-pointer"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $totalClicks }}</div><div class="stat-label">Clics totaux</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #10b981, #059669);"><i class="fas fa-user-plus"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $totalRegistrations }}</div><div class="stat-label">Inscriptions</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);"><i class="fas fa-percent"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $conversionRate }}%</div><div class="stat-label">Taux conversion</div></div>
    </div>
</div>

@foreach($links as $link)
<div class="card-base mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h6 class="fw-bold mb-0">Lien : {{ $link->code }}</h6>
        <span class="badge bg-{{ $link->is_active ? 'success' : 'secondary' }}">{{ $link->is_active ? 'Actif' : 'Inactif' }}</span>
    </div>

    <div class="input-group mb-3">
        <input type="text" class="form-control" value="{{ $link->url }}" readonly id="link_{{ $link->id }}">
        <button class="btn btn-primary" onclick="navigator.clipboard.writeText(document.getElementById('link_{{ $link->id }}').value).then(() => { this.innerHTML='Copié !'; setTimeout(() => this.innerHTML='<i class=\'fas fa-copy\'></i> Copier', 2000); })">
            <i class="fas fa-copy"></i> Copier
        </button>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-3 text-center">
            <div class="fw-bold text-primary fs-4">{{ $link->clicks_count }}</div>
            <small class="text-muted">Clics</small>
        </div>
        <div class="col-md-3 text-center">
            <div class="fw-bold text-success fs-4">{{ $link->registrations_count }}</div>
            <small class="text-muted">Inscriptions</small>
        </div>
        <div class="col-md-3 text-center">
            <div class="fw-bold text-info fs-4">{{ $link->conversion_rate }}%</div>
            <small class="text-muted">Conversion</small>
        </div>
        <div class="col-md-3 text-center">
            <div class="fw-bold fs-4">{{ $link->slug ?: '-' }}</div>
            <small class="text-muted">Slug perso</small>
        </div>
    </div>

    <!-- Personnaliser le slug -->
    <form method="POST" action="{{ route('ambassador.referral.update-slug', $link) }}" class="d-flex gap-2 align-items-end">
        @csrf @method('PUT')
        <div class="flex-grow-1">
            <label class="form-label small">Slug personnalisé</label>
            <input type="text" name="slug" value="{{ $link->slug }}" class="form-control form-control-sm" placeholder="mon-slug-perso">
        </div>
        <button class="btn btn-sm btn-outline-primary">Sauver</button>
    </form>
</div>
@endforeach

<!-- Visites récentes -->
<div class="card-base">
    <h6 class="fw-bold mb-3">Visites récentes</h6>
    <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead><tr><th>Date</th><th>IP</th><th>Source UTM</th><th>Converti</th></tr></thead>
            <tbody>
            @forelse($recentVisits as $v)
                <tr>
                    <td>{{ $v->visited_at->format('d/m/Y H:i') }}</td>
                    <td><small>{{ $v->ip }}</small></td>
                    <td>{{ $v->utm_source ?: '-' }}</td>
                    <td>
                        @if($v->converted_at)
                            <span class="badge bg-success">Oui - {{ $v->converted_at->format('d/m') }}</span>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="4" class="text-center py-3 text-muted">Aucune visite enregistrée</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection