@extends('layouts.app')

@section('title', 'Google Ads – Ad Manager')

@section('content')
<div class="ads-mgr">
    @include('ads.partials.nav', ['adsPlatform' => 'google', 'adsSection' => null])
    <header class="ads-mgr__header">
        <div>
            <h1>Google Ads</h1>
            <p class="ads-mgr__sub">Same idea as Meta: campaigns on, pause, stats, AI. Not connected yet.</p>
        </div>
    </header>
    <p class="ads-mgr__empty">Google Ads is next. Use Meta → Campaigns for Facebook and Instagram for now.</p>
    <aside class="ads-mgr__note">
        <h2>Merchant supplemental feed</h2>
        <p>Read-only CSV for Google Merchant scheduled fetch. Does not change Shopify or the primary product feed. Columns: <code>id, color, gender, age_group</code>. Item IDs use <code>shopify_ZZ_{product_id}_{variant_id}</code>. Color comes from the variant. Age group is adult. Gender copies the parent product <code>custom.gender</code> (Male / Female / Unisex) onto every variant. Tags are used only if that product metafield is empty.</p>
        <p><a href="{{ $merchantFeedUrl }}" target="_blank" rel="noopener">{{ $merchantFeedUrl }}</a></p>
        <p class="ads-mgr__meta">
            @if(!empty($merchantFeedExists))
                Last generated {{ $merchantFeedGeneratedAt }}. Command: <code>php artisan merchant:generate-supplemental-feed</code>
            @else
                File not generated yet. Run <code>php artisan merchant:generate-supplemental-feed</code> on the server.
            @endif
        </p>
    </aside>
</div>
@push('styles')
<style>
.ads-mgr { max-width: 1100px; }
.ads-mgr__header { margin-bottom: 1rem; }
.ads-mgr h1 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; color: #111; }
.ads-mgr__sub { margin: 0; font-size: 0.92rem; color: #4b5563; line-height: 1.5; }
.ads-mgr__empty { color: #64748b; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.1rem 1.2rem; }
.ads-mgr__note { margin-top: 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem 1.15rem; }
.ads-mgr__note h2 { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: #111; }
.ads-mgr__note p { margin: 0 0 0.55rem; font-size: 0.86rem; color: #4b5563; line-height: 1.5; }
.ads-mgr__note p:last-child { margin-bottom: 0; }
.ads-mgr__note a { word-break: break-all; }
.ads-mgr__note code { font-size: 0.8rem; }
.ads-mgr__meta { color: #64748b; }
</style>
@endpush
@endsection