@extends('admin.layout')

@section('title', 'Google Analytics')
@section('header', 'Paramètres')

@section('content')
<nav class="mb-6">
    <a href="{{ route('admin.dashboard') }}" class="text-slate-500 hover:text-slate-900 text-sm">← Tableau de bord</a>
</nav>

@if(session('success'))
    <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl">
        <p>{{ session('success') }}</p>
    </div>
@endif

<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden max-w-2xl">
    <div class="p-6 border-b border-slate-200">
        <h2 class="text-lg font-semibold text-slate-800">Google Analytics</h2>
        <p class="text-slate-500 text-sm mt-1">Connectez votre site à Google Analytics pour suivre les visites, les pages vues et le comportement des visiteurs.</p>
    </div>
    <form method="POST" action="{{ route('admin.settings.analytics.store') }}" class="p-6 space-y-6">
        @csrf
        <div>
            <label for="google_analytics_id" class="block text-sm font-medium text-slate-700 mb-1">ID de mesure (Measurement ID)</label>
            <input type="text" name="google_analytics_id" id="google_analytics_id" value="{{ old('google_analytics_id', $settings['google_analytics_id'] ?? '') }}" placeholder="G-XXXXXXXXXX" class="w-full px-4 py-2 border border-slate-200 rounded-xl font-mono">
            <p class="text-xs text-slate-500 mt-1">Format GA4 : <code class="bg-slate-100 px-1 rounded">G-XXXXXXXXXX</code>. Ancien format : <code class="bg-slate-100 px-1 rounded">UA-XXXXXXXXX-X</code></p>
            @error('google_analytics_id')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>
        <div class="p-4 bg-slate-50 rounded-xl text-sm text-slate-600">
            <p class="font-medium text-slate-700 mb-2">Comment obtenir votre ID ?</p>
            <ol class="list-decimal list-inside space-y-1">
                <li>Créez un compte sur <a href="https://analytics.google.com" target="_blank" rel="noopener" class="text-primary-600 hover:underline">analytics.google.com</a></li>
                <li>Créez une propriété pour votre site</li>
                <li>Dans Admin → Flux de données, récupérez l'ID de mesure (G-XXXXXXXXXX)</li>
                <li>Collez-le ci-dessus et enregistrez</li>
            </ol>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">Enregistrer</button>
            @if(!empty($settings['google_analytics_id'] ?? ''))
            <a href="https://analytics.google.com" target="_blank" rel="noopener" class="px-6 py-2.5 border border-slate-200 rounded-xl text-slate-700 hover:bg-slate-50 transition inline-flex items-center gap-2">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                Voir mes statistiques
            </a>
            @endif
        </div>
    </form>
</div>
@endsection
