@extends('backEnd.layouts.master')
@section('title', 'Ad Management')

@push('styles')
@include('backEnd.reports.partials.report-styles')
<style>
.ad-tabs .nav-link { font-weight: 600; font-size: 13px; color: #6b7280; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 16px; }
.ad-tabs .nav-link.active { color: #2563eb; border-bottom-color: #2563eb; background: transparent; }
.ad-stat { border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ad-stat .label { font-size: 12px; color: #6b7280; }
.ad-stat .value { font-size: 1.35rem; font-weight: 800; }
.ad-platform-card { border: 1px solid #e5e7eb; border-radius: 12px; }
.ad-match-ring { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; border: 6px solid #dbeafe; color: #1d4ed8; }
.ad-event-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f3f4f6; }
.ad-event-pill.is-on { background: #dcfce7; color: #166534; }
</style>
@endpush

@section('content')
@php
    $fb = $config['facebook'];
    $google = $config['google'];
    $summary = $dashboard['summary'];
    $charts = $dashboard['charts']['daily'];
    $match = $dashboard['match_quality'];
    $queryBase = request()->only(['from_date','to_date']);
@endphp

<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0"><i class="fas fa-bullhorn me-2 text-primary"></i>Ad Management</h4>
            <small class="text-muted">Multi-platform pixels, CAPI, campaign analytics & UTM attribution</small>
        </div>
        <form method="GET" class="d-flex gap-2 align-items-end flex-wrap">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <div>
                <label class="form-label small mb-1">From</label>
                <input type="date" name="from_date" class="form-control form-control-sm" value="{{ $from }}">
            </div>
            <div>
                <label class="form-label small mb-1">To</label>
                <input type="date" name="to_date" class="form-control form-control-sm" value="{{ $to }}">
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Apply</button>
        </form>
    </div>

    <ul class="nav ad-tabs border-bottom mb-3">
        <li class="nav-item"><a class="nav-link {{ $tab === 'dashboard' ? 'active' : '' }}" href="{{ route('admin.social.ads', array_merge($queryBase, ['tab' => 'dashboard'])) }}"><i class="fas fa-chart-line me-1"></i> Campaign Dashboard</a></li>
        <li class="nav-item"><a class="nav-link {{ $tab === 'integrations' ? 'active' : '' }}" href="{{ route('admin.social.ads', array_merge($queryBase, ['tab' => 'integrations'])) }}"><i class="fas fa-plug me-1"></i> Integrations</a></li>
        <li class="nav-item"><a class="nav-link {{ $tab === 'audience' ? 'active' : '' }}" href="{{ route('admin.social.ads', array_merge($queryBase, ['tab' => 'audience'])) }}"><i class="fas fa-users me-1"></i> Audience</a></li>
        <li class="nav-item"><a class="nav-link {{ $tab === 'utm' ? 'active' : '' }}" href="{{ route('admin.social.ads', array_merge($queryBase, ['tab' => 'utm'])) }}"><i class="fas fa-link me-1"></i> UTM & Attribution</a></li>
    </ul>

    @if($tab === 'dashboard')
    {{-- Campaign Dashboard --}}
    <div class="row g-3 mb-3">
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">Revenue</div><div class="value text-success">৳{{ number_format($summary['revenue'], 0) }}</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">Ad Spend @if($summary['spend_source']==='manual')<small>(manual)</small>@endif</div><div class="value text-danger">৳{{ number_format($summary['spend'], 0) }}</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">ROAS</div><div class="value text-primary">{{ $summary['spend'] > 0 ? number_format($summary['roas'], 2).'x' : '—' }}</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">Conversion Rate</div><div class="value">{{ number_format($summary['conversion_rate'], 1) }}%</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">CTR</div><div class="value">{{ number_format($summary['ctr'], 2) }}%</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">CPC</div><div class="value">৳{{ number_format($summary['cpc'], 2) }}</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">CPM</div><div class="value">৳{{ number_format($summary['cpm'], 2) }}</div></div></div></div>
        <div class="col-6 col-md-3"><div class="card ad-stat h-100"><div class="card-body"><div class="label">Cost / Purchase</div><div class="value">৳{{ number_format($summary['cost_per_purchase'], 0) }}</div></div></div></div>
    </div>

    @if(empty($dashboard['meta_insights']['connected']))
    <div class="alert alert-info py-2 small">
        Meta Ad Account + Marketing Token দিলে spend/CTR/CPC/CPM auto-fetch হবে। না থাকলে Integrations tab-এ manual spend দিন।
    </div>
    @endif

    <div class="row g-3 mb-3">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white fw-semibold">Spend vs Revenue</div>
                <div class="card-body"><canvas id="adSpendRevenueChart" height="100"></canvas></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white fw-semibold">Event Match Quality</div>
                <div class="card-body text-center">
                    <div class="ad-match-ring mx-auto mb-2">{{ $match['score'] }}</div>
                    <div class="fw-bold">{{ $match['label'] }}</div>
                    <div class="small text-muted mb-2">Meta CAPI matching estimate</div>
                    @foreach($match['events'] as $ev => $on)
                    <span class="ad-event-pill {{ $on ? 'is-on' : '' }} me-1 mb-1">
                        <i class="fas fa-{{ $on ? 'check-circle' : 'circle' }}"></i> {{ ucfirst($ev) }}
                    </span>
                    @endforeach
                    <ul class="text-start small text-muted mt-3 mb-0 ps-3">
                        @foreach(array_slice($match['tips'], 0, 3) as $tip)<li>{{ $tip }}</li>@endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white fw-semibold">Manual Ad Spend (date range estimate)</div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.social.ads.update') }}">
                @csrf
                <input type="hidden" name="section" value="spend">
                <input type="hidden" name="return_tab" value="dashboard">
                <input type="hidden" name="from_date" value="{{ $from }}">
                <input type="hidden" name="to_date" value="{{ $to }}">
                <div class="row g-2">
                    @foreach($config['manual_spend'] as $platform => $amount)
                    <div class="col-6 col-md-3">
                        <label class="form-label small fw-semibold text-capitalize">{{ $platform }} (BDT)</label>
                        <input type="number" name="spend_{{ $platform }}" class="form-control form-control-sm" value="{{ $amount }}" min="0" step="1">
                    </div>
                    @endforeach
                </div>
                <button type="submit" class="btn btn-success btn-sm mt-3"><i class="fas fa-save me-1"></i> Save Spend</button>
            </form>
        </div>
    </div>

    @elseif($tab === 'integrations')
    {{-- Multi-Platform Integrations --}}
    <div class="alert alert-info py-2 small mb-3">
        <i class="fas fa-info-circle me-1"></i>
        Pixel, CAPI, GA4, GTM — <strong>এখানেই এক জায়গায়</strong> configure ও test করুন।
        Integrations &amp; Services-এ courier, payment, SMTP থাকবে।
    </div>
    <ul class="nav nav-pills mb-3" id="platformTabs">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#plat-facebook">Facebook / Meta</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#plat-google">Google Ads</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#plat-tiktok">TikTok</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#plat-pinterest">Pinterest</button></li>
    </ul>

    <div class="tab-content">
        {{-- Facebook --}}
        <div class="tab-pane fade show active" id="plat-facebook">
            <form method="POST" action="{{ route('admin.social.ads.update') }}" class="card ad-platform-card shadow-sm">
                @csrf
                <input type="hidden" name="section" value="facebook">
                <input type="hidden" name="return_tab" value="integrations">
                <div class="card-body">
                    <h6 class="fw-bold text-primary"><i class="fab fa-facebook me-2"></i>Facebook Pixel + Conversion API (CAPI)</h6>

                    <div class="alert alert-warning py-3 px-3 small mb-3">
                        <div class="fw-bold mb-2"><i class="fas fa-route me-1"></i> দুইভাবে setup — একটাই বেছে নিন (browser pixel-এর জন্য)</div>
                        <div class="mb-2">
                            <span class="badge bg-primary me-1">Option A — GTM দিয়ে FB Pixel (recommended)</span><br>
                            <span class="text-muted">
                                <strong>Google Ads tab</strong>-এ GTM ID দিন → GTM container-এ FB Pixel tags বানান।<br>
                                <strong>এখানে Pixel ID খালি রাখুন</strong> — নাহলে browser-এ event দুইবার fire হবে (GTM + direct pixel)।<br>
                                <strong>CAPI-র জন্য</strong> নিচে Pixel ID + CAPI Token + Enable CAPI চালু রাখুন (server-side, GTM দিয়ে হয় না)।
                            </span>
                        </div>
                        <div>
                            <span class="badge bg-secondary me-1">Option B — Direct Pixel (GTM ছাড়া)</span><br>
                            <span class="text-muted">
                                <strong>Pixel ID</strong> এখানে দিন → site direct <code>fbq()</code> fire করবে। GTM-এ আবার FB Pixel tag বন্ধ রাখুন।<br>
                                CAPI ON করলে browser + server দুটোই match quality ভালো হয়।
                            </span>
                        </div>
                    </div>

                    <div class="border rounded p-3 mb-3 small bg-light">
                        <div class="fw-bold text-primary mb-2"><i class="fas fa-server me-1"></i> Conversion API (CAPI) — সম্পূর্ণ ব্যাখ্যা</div>
                        <p class="mb-2 mb-0">
                            <strong>CAPI কী?</strong> Browser pixel ছাড়াও server থেকে Meta-তে event পাঠায় (AddToCart, Purchase, ViewContent ইত্যাদি)।
                            Ad blocker / iOS privacy-তে browser pixel miss হলেও CAPI event ধরে রাখে — <strong>Event Match Quality</strong> বাড়ে।
                        </p>
                        <ul class="mb-2 ps-3">
                            <li><strong>Pixel ID</strong> — Meta Events Manager-এর pixel (CAPI-তেও same ID লাগে)</li>
                            <li><strong>CAPI Access Token</strong> — Events Manager → Settings → Conversions API → Generate access token</li>
                            <li><strong>Enable CAPI</strong> — ON করলে order/cart/checkout server থেকে Meta-তে যাবে</li>
                            <li><strong>Test Event Code</strong> — Events Manager → Test Events tab-এ code copy করে দিন; test mode-এ event verify করবেন। Live-এ খালি রাখতে পারেন।</li>
                        </ul>
                        <p class="mb-0 text-muted">
                            <strong>Setup steps:</strong> Meta Business → Events Manager → Data Sources → আপনার Pixel →
                            Settings → Conversions API → Generate token → এখানে paste → Enable CAPI ON → Save →
                            <strong>Test CAPI</strong> button → Meta Test Events tab-এ দেখুন।
                        </p>
                    </div>

                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Pixel ID</label>
                            <input type="text" name="facebook_pixel_id" class="form-control" value="{{ $fb['pixel_id'] }}" placeholder="1234567890123456">
                            <small class="text-muted d-block mt-1">
                                Meta Events Manager → Data Sources → Pixel → Pixel ID (১৫ digit)।<br>
                                <strong>GTM দিয়ে browser pixel track করলে খালি রাখুন</strong> (double count এড়াতে)।<br>
                                <strong>CAPI চালু করলে</strong> same Pixel ID এখানে দিতে হবে (server-side-এর জন্য)।
                            </small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Ad Account ID</label>
                            <input type="text" name="fb_ad_account" class="form-control" value="{{ $fb['ad_account'] }}" placeholder="act_123456789">
                            <small class="text-muted d-block mt-1">
                                Meta Ads Manager → Ad Account settings → Account ID (<code>act_123456789</code> format)।<br>
                                Campaign Dashboard spend/insights ও Audience sync-এর জন্য — pixel tracking-এর জন্য নয়।
                            </small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">CAPI Access Token</label>
                            <input type="password" name="fb_capi_access_token" id="fbCapiTokenAds" class="form-control" value="{{ $fb['capi_access_token'] }}">
                            <small class="text-muted d-block mt-1">
                                Events Manager → Pixel → Settings → <strong>Conversions API</strong> → Generate access token।<br>
                                Secret key — কাউকে share করবেন না। Enable CAPI ON না হলে কাজ করবে না।
                            </small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Marketing API Token <span class="text-muted fw-normal">(optional)</span></label>
                            <input type="password" name="marketing_token" class="form-control" value="{{ $fb['marketing_token'] }}">
                            <small class="text-muted d-block mt-1">
                                Meta Graph API token with <code>ads_read</code> permission — campaign spend, CTR, CPC auto-fetch।<br>
                                Pixel/CAPI tracking-এর জন্য লাগে না; শুধু Ad Management dashboard insights।
                            </small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Test Event Code</label>
                            <input type="text" name="fb_capi_test_event_code" class="form-control" value="{{ $fb['test_event_code'] }}" placeholder="TEST12345">
                            <small class="text-muted d-block mt-1">
                                Meta Events Manager → <strong>Test Events</strong> tab → “Test event code” copy করুন (যেমন <code>TEST12345</code>)।<br>
                                দিলে CAPI event শুধু Test tab-এ দেখাবে — live reporting-এ যাবে না। Setup verify করার পর <strong>খালি</strong> করে Save দিন।
                            </small>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" name="fb_capi_enabled" value="1" id="fbCapiEnabledAds" {{ $fb['capi_enabled'] ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold" for="fbCapiEnabledAds">Enable CAPI</label>
                            </div>
                            <small class="text-muted d-block mt-1">
                                ON = server থেকে Meta-তে event যাবে (Purchase, AddToCart, Checkout…)।<br>
                                Pixel ID + CAPI Token দেওয়ার পর ON করুন → Save → <strong>Test CAPI</strong> চাপুন।
                            </small>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Auto-sync Events (Browser Pixel + CAPI)</label>
                            <div class="table-responsive mb-2">
                                <table class="table table-sm table-bordered mb-0 small">
                                    <thead class="table-light"><tr><th>Event</th><th>কখন fire</th><th>CAPI</th></tr></thead>
                                    <tbody>
                                        <tr><td>PageView</td><td>প্রতিটি page load</td><td><span class="text-muted">Pixel auto</span></td></tr>
                                        <tr><td>ViewContent</td><td>Product/content page</td><td><input class="form-check-input" type="checkbox" name="event_viewcontent" value="1" id="evView" {{ $fb['events']['viewcontent'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>Search</td><td>Search করলে</td><td><input class="form-check-input" type="checkbox" name="event_search" value="1" id="evSearch" {{ $fb['events']['search'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>AddToCart</td><td>Cart-এ add</td><td><input class="form-check-input" type="checkbox" name="event_addtocart" value="1" id="evCart" {{ $fb['events']['addtocart'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>AddToWishlist</td><td>Wishlist-এ add</td><td><input class="form-check-input" type="checkbox" name="event_addtowishlist" value="1" id="evWish" {{ $fb['events']['addtowishlist'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>InitiateCheckout</td><td>Checkout page</td><td><input class="form-check-input" type="checkbox" name="event_initiatecheckout" value="1" id="evCheckout" {{ $fb['events']['initiatecheckout'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>AddPaymentInfo</td><td>Payment method select/submit</td><td><input class="form-check-input" type="checkbox" name="event_addpaymentinfo" value="1" id="evPay" {{ $fb['events']['addpaymentinfo'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>Purchase</td><td>Order complete</td><td><input class="form-check-input" type="checkbox" name="event_purchase" value="1" id="evPurchase" {{ $fb['events']['purchase'] ? 'checked' : '' }}></td></tr>
                                        <tr><td>Lead</td><td>Lead capture</td><td><input class="form-check-input" type="checkbox" name="event_lead" value="1" id="evLead" {{ $fb['events']['lead'] ? 'checked' : '' }}></td></tr>
                                    </tbody>
                                </table>
                            </div>
                            <small class="text-muted d-block mt-1">
                                নিচের checkbox = CAPI server-side ON/OFF (browser GTM pixel আলাদা)।<br>
                                GTM browser pixel: Google tab → GTM ID + container-এ FB tags। Site <code>dataLayer</code> auto push করে।
                            </small>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <button type="submit" class="btn btn-success"><i class="fas fa-save me-1"></i> Save Facebook</button>
                        <button type="button" class="btn btn-outline-primary ad-test-btn" data-provider="facebook_pixel"><i class="fas fa-plug me-1"></i> Test Pixel</button>
                        <button type="button" class="btn btn-outline-primary ad-test-btn" data-provider="facebook_capi"><i class="fas fa-vial me-1"></i> Test CAPI</button>
                        <span class="small align-self-center ad-test-status" id="adTestStatus-facebook"></span>
                    </div>
                </div>
            </form>

            <form method="POST" action="{{ route('admin.social.ads.update') }}" class="card ad-platform-card shadow-sm mt-3">
                @csrf
                <input type="hidden" name="section" value="facebook_domain">
                <input type="hidden" name="return_tab" value="integrations">
                <div class="card-body">
                    <h6 class="fw-bold text-primary mb-1"><i class="fas fa-check-circle me-2"></i>Facebook Domain Verification</h6>
                    <p class="small text-muted mb-3">Meta Business Manager → Brand Safety → Domains থেকে meta tag copy করুন। Save করলে store homepage <code>&lt;head&gt;</code>-এ auto যাবে।</p>
                    <label class="form-label fw-semibold">Verification Meta Tag / Code</label>
                    <textarea name="facebook_domain_verification" class="form-control font-monospace" rows="3" placeholder='<meta name="facebook-domain-verification" content="your-code-here" />'>{{ !empty($fb['domain_verification']) ? app(\App\Services\AdManagementService::class)->facebookDomainVerificationMetaTag($fb['domain_verification']) : '' }}</textarea>
                    <small class="text-muted d-block mt-1">Full meta tag অথবা শুধু verification code। Domain name (example.com) paste করবেন না।</small>
                    @if(!empty($fb['domain_verification']))
                    <div class="alert alert-light border small py-2 mt-2 mb-0">
                        <strong>Saved code:</strong> <code>{{ $fb['domain_verification'] }}</code>
                    </div>
                    @endif
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <button type="submit" class="btn btn-success"><i class="fas fa-save me-1"></i> Save Domain Verification</button>
                        <button type="button" class="btn btn-outline-primary ad-test-btn" data-provider="facebook_domain_verification"><i class="fas fa-vial me-1"></i> Test Meta Tag</button>
                        <span class="small align-self-center ad-test-status" id="adTestStatus-facebook-domain"></span>
                    </div>
                </div>
            </form>
        </div>

        {{-- Google --}}
        <div class="tab-pane fade" id="plat-google">
            <form method="POST" action="{{ route('admin.social.ads.update') }}" class="card ad-platform-card shadow-sm">
                @csrf
                <input type="hidden" name="section" value="google">
                <input type="hidden" name="return_tab" value="integrations">
                <div class="card-body">
                    <h6 class="fw-bold text-danger"><i class="fab fa-google me-2"></i>Google Ads + GTM</h6>

                    <div class="alert alert-warning py-2 px-3 small mb-3">
                        <strong><i class="fas fa-exclamation-triangle me-1"></i> গুরুত্বপূর্ণ:</strong>
                        <strong>GTM + GA4 দুটো একসাথে fill করবেন না</strong> — double count হতে পারে (এক visitor দুইবার count)।
                        নিচের দুটো option-এর <strong>যেকোনো একটা</strong> follow করুন।
                    </div>

                    <div class="border rounded p-3 mb-3 small bg-light">
                        <div class="fw-semibold mb-2"><i class="fas fa-route me-1 text-danger"></i> Setup — দুটো option (একটাই বেছে নিন)</div>
                        <div class="mb-2">
                            <span class="badge bg-danger me-1">Option 1</span>
                            <strong>শুধু GTM</strong> (recommended)<br>
                            <span class="text-muted">এখানে শুধু <strong>Google Tag Manager ID</strong> (GTM-XXXXXXX) দিন।
                            GA4 Measurement ID field <strong>খালি</strong> রাখুন।
                            GTM container-এ GA4 + Google Ads conversion tag নিজে setup + publish করুন।</span>
                        </div>
                        <div>
                            <span class="badge bg-secondary me-1">Option 2</span>
                            <strong>GTM ছাড়া direct GA4</strong><br>
                            <span class="text-muted">GTM field <strong>খালি</strong> রাখুন।
                            <strong>GA4 Measurement ID</strong> (G-XXXXXXXX) + প্রয়োজন হলে <strong>Conversion ID</strong> (AW-…) ও <strong>Conversion Label</strong> দিন।
                            Order complete হলে purchase/conversion auto fire হবে।</span>
                        </div>
                    </div>

                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <label class="form-label">GA4 Measurement ID</label>
                            <input type="text" name="google_analytics_id" class="form-control" value="{{ $google['analytics_id'] }}" placeholder="G-XXXXXXXXXX">
                            <small class="text-muted">Option 2-এ দিন। Option 1 (GTM only) হলে খালি রাখুন।</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Google Tag Manager ID</label>
                            <input type="text" name="google_tag_manager_id" class="form-control" value="{{ $google['gtm_id'] }}" placeholder="GTM-XXXXXXX">
                            <small class="text-muted">Option 1-এ দিন। Option 2 (direct GA4) হলে খালি রাখুন।</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Conversion ID</label>
                            <input type="text" name="google_ads_conversion_id" class="form-control" value="{{ $google['conversion_id'] }}" placeholder="AW-XXXXXXXXX">
                            <small class="text-muted">Google Ads conversion tracking (AW-…)</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Conversion Label</label>
                            <input type="text" name="google_ads_conversion_label" class="form-control" value="{{ $google['conversion_label'] }}">
                            <small class="text-muted">Conversion ID-এর সাথে label দিলে order success-এ count হবে</small>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <button type="submit" class="btn btn-danger"><i class="fas fa-save me-1"></i> Save Google</button>
                        <button type="button" class="btn btn-outline-danger ad-test-btn" data-provider="google_analytics"><i class="fas fa-plug me-1"></i> Test GA4</button>
                        <button type="button" class="btn btn-outline-warning ad-test-btn" data-provider="google_tag_manager"><i class="fas fa-plug me-1"></i> Test GTM</button>
                        <span class="small align-self-center ad-test-status" id="adTestStatus-google"></span>
                    </div>
                </div>
            </form>
        </div>

        {{-- TikTok --}}
        <div class="tab-pane fade" id="plat-tiktok">
            <form method="POST" action="{{ route('admin.social.ads.update') }}" class="card ad-platform-card shadow-sm">
                @csrf
                <input type="hidden" name="section" value="tiktok">
                <input type="hidden" name="return_tab" value="integrations">
                <div class="card-body">
                    <h6 class="fw-bold"><i class="fab fa-tiktok me-2"></i>TikTok Pixel</h6>
                    <div class="col-md-8 mt-2"><label class="form-label">Pixel ID</label><input type="text" name="tiktok_pixel_id" class="form-control" value="{{ $config['tiktok']['pixel_id'] }}"></div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <button type="submit" class="btn btn-dark"><i class="fas fa-save me-1"></i> Save TikTok</button>
                        <button type="button" class="btn btn-outline-dark ad-test-btn" data-provider="tiktok_pixel"><i class="fas fa-plug me-1"></i> Test Pixel</button>
                        <span class="small align-self-center ad-test-status" id="adTestStatus-tiktok"></span>
                    </div>
                </div>
            </form>
        </div>

        {{-- Pinterest --}}
        <div class="tab-pane fade" id="plat-pinterest">
            <form method="POST" action="{{ route('admin.social.ads.update') }}" class="card ad-platform-card shadow-sm">
                @csrf
                <input type="hidden" name="section" value="pinterest">
                <input type="hidden" name="return_tab" value="integrations">
                <div class="card-body">
                    <h6 class="fw-bold text-danger"><i class="fab fa-pinterest me-2"></i>Pinterest Tag</h6>
                    <div class="col-md-8 mt-2"><label class="form-label">Tag ID</label><input type="text" name="pinterest_tag_id" class="form-control" value="{{ $config['pinterest']['tag_id'] }}"></div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <button type="submit" class="btn btn-danger"><i class="fas fa-save me-1"></i> Save Pinterest</button>
                        <button type="button" class="btn btn-outline-danger ad-test-btn" data-provider="pinterest_tag"><i class="fas fa-plug me-1"></i> Test Tag</button>
                        <span class="small align-self-center ad-test-status" id="adTestStatus-pinterest"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @elseif($tab === 'audience')
    <div class="row g-3 mb-3">
        <div class="col-md-4"><div class="card ad-stat"><div class="card-body text-center"><div class="value text-success">{{ number_format($audience['purchasers']) }}</div><div class="label">Purchasers (unique phones)</div></div></div></div>
        <div class="col-md-4"><div class="card ad-stat"><div class="card-body text-center"><div class="value text-primary">{{ number_format($audience['recent_visitors']) }}</div><div class="label">Visitors (180 days)</div></div></div></div>
        <div class="col-md-4"><div class="card ad-stat"><div class="card-body text-center"><div class="value text-danger">{{ number_format($audience['exclusion_count']) }}</div><div class="label">Exclusion List</div></div></div></div>
    </div>

    <form method="POST" action="{{ route('admin.social.ads.update') }}" class="card border-0 shadow-sm mb-3">
        @csrf
        <input type="hidden" name="section" value="audience">
        <input type="hidden" name="return_tab" value="audience">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="sync_purchasers" value="1" {{ $config['audience']['sync_purchasers'] ? 'checked' : '' }}><label class="form-check-label">Auto-sync Purchasers</label></div></div>
                <div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="sync_visitors" value="1" {{ $config['audience']['sync_visitors'] ? 'checked' : '' }}><label class="form-check-label">Auto-sync Visitors (Leads)</label></div></div>
                <div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="exclude_purchasers" value="1" {{ $config['audience']['exclude_purchasers'] ? 'checked' : '' }}><label class="form-check-label">Exclusion: Already Purchased</label></div></div>
                <div class="col-md-4">
                    <label class="form-label small">Lookalike Ratio (%)</label>
                    <select name="lookalike_ratio" class="form-select form-select-sm">
                        @foreach([1,2,3,4,5,10] as $r)
                        <option value="{{ $r }}" {{ (int)$config['audience']['lookalike_ratio'] === $r ? 'selected' : '' }}>{{ $r }}%</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <button type="submit" class="btn btn-success btn-sm mt-3"><i class="fas fa-save me-1"></i> Save Audience Settings</button>
        </div>
    </form>

    <div class="row g-3">
        @foreach(['purchasers'=>'Purchasers','visitors'=>'Visitors / Leads','exclusion'=>'Exclusion List'] as $type => $label)
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <h6 class="fw-bold">{{ $label }}</h6>
                    <p class="small text-muted">Meta Custom Audience format (email, phone hashed on upload)</p>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('admin.social.ads.audience.export', ['type' => $type]) }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-download me-1"></i> Export CSV</a>
                        @if($audience['can_sync_meta'])
                        <button type="button" class="btn btn-primary btn-sm ad-sync-btn" data-type="{{ $type }}"><i class="fab fa-facebook me-1"></i> Sync to Meta</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    @if($audience['can_sync_meta'])
    <div class="mt-3">
        <button type="button" class="btn btn-outline-primary btn-sm" id="lookalikeBtn"><i class="fas fa-clone me-1"></i> Generate Lookalike Audience</button>
        <span class="small text-muted ms-2">Source audience ID auto-save হয় purchaser sync থেকে</span>
    </div>
    @else
    <div class="alert alert-warning mt-3 small">Meta Audience sync: Integrations → Facebook tab-এ Ad Account ID + Marketing Token দিন।</div>
    @endif

    @elseif($tab === 'utm')
    <div class="row g-3 mb-3">
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white fw-semibold"><i class="fas fa-link me-2"></i>Tracking URL Generator</div>
                <div class="card-body">
                    <label class="form-label small">Base URL</label>
                    <input type="text" class="form-control form-control-sm mb-2" id="utmBaseUrl" value="{{ url('/') }}">
                    <label class="form-label small">Campaign name</label>
                    <input type="text" class="form-control form-control-sm mb-2" id="utmCampaign" value="eid_sale">
                    <button type="button" class="btn btn-primary btn-sm" id="utmGenBtn">Generate URL</button>
                    <div class="input-group input-group-sm mt-2">
                        <input type="text" class="form-control" id="utmResult" readonly value="{{ $trackingUrl }}">
                        <button type="button" class="btn btn-outline-secondary" onclick="navigator.clipboard.writeText(document.getElementById('utmResult').value);this.textContent='Copied'">Copy</button>
                    </div>
                    <div class="small text-muted mt-2">Example: <code>?utm_source=facebook&utm_campaign=eid_sale</code> → order-এ auto save</div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white fw-semibold">Sales by Traffic Source</div>
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead class="table-light"><tr><th>Source</th><th class="text-end">Visits</th><th class="text-end">Orders</th><th class="text-end">Delivered</th><th class="text-end">Revenue</th></tr></thead>
                        <tbody>
                        @forelse($attribution['by_source'] as $row)
                        <tr>
                            <td><code>{{ Str::limit($row->source, 40) }}</code></td>
                            <td class="text-end">{{ number_format($attribution['visitor_by_source'][$row->source]->visits ?? 0) }}</td>
                            <td class="text-end">{{ number_format($row->orders) }}</td>
                            <td class="text-end">{{ number_format($row->delivered) }}</td>
                            <td class="text-end">৳{{ number_format($row->revenue, 0) }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-4">No attribution data yet</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white fw-semibold">Campaign Breakdown (utm_campaign)</div>
        <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead class="table-light"><tr><th>Campaign</th><th>Source</th><th class="text-end">Orders</th><th class="text-end">Delivered</th><th class="text-end">Revenue</th></tr></thead>
                <tbody>
                @forelse($attribution['by_campaign'] as $row)
                <tr>
                    <td>{{ $row->campaign }}</td>
                    <td><small>{{ Str::limit($row->source, 30) }}</small></td>
                    <td class="text-end">{{ number_format($row->orders) }}</td>
                    <td class="text-end">{{ number_format($row->delivered) }}</td>
                    <td class="text-end">৳{{ number_format($row->revenue, 0) }}</td>
                </tr>
                @empty
                <tr><td colspan="5" class="text-center text-muted py-4">UTM campaign data দেখতে ads URL-এ utm_campaign ব্যবহার করুন</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
@if($tab === 'dashboard')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('adSpendRevenueChart'), {
    type: 'line',
    data: {
        labels: @json($charts['labels']),
        datasets: [
            { label: 'Revenue (৳)', data: @json($charts['revenue']), borderColor: '#16a34a', backgroundColor: 'rgba(22,163,74,.1)', fill: true, tension: .3 },
            { label: 'Spend (৳)', data: @json($charts['spend']), borderColor: '#dc2626', backgroundColor: 'rgba(220,38,38,.08)', fill: true, tension: .3 }
        ]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true } } }
});
</script>
@endif

@if($tab === 'integrations')
<script>
const adIntegrationTestUrl = @json(route('admin.social.ads.test'));

function collectAdFormPayload(btn) {
    const form = btn.closest('form');
    const payload = { provider: btn.dataset.provider };
    if (!form) return payload;
    form.querySelectorAll('input, select, textarea').forEach(el => {
        if (!el.name || el.type === 'file') return;
        if (el.type === 'checkbox') {
            payload[el.name] = el.checked ? (el.value || '1') : '0';
        } else {
            payload[el.name] = el.value;
        }
    });
    return payload;
}

function adTestStatusEl(provider) {
    if (provider === 'facebook_domain_verification') return document.getElementById('adTestStatus-facebook-domain');
    if (provider.startsWith('google')) return document.getElementById('adTestStatus-google');
    if (provider === 'tiktok_pixel') return document.getElementById('adTestStatus-tiktok');
    if (provider === 'pinterest_tag') return document.getElementById('adTestStatus-pinterest');
    return document.getElementById('adTestStatus-facebook');
}

document.querySelectorAll('.ad-test-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const provider = btn.dataset.provider;
        const status = adTestStatusEl(provider);
        if (status) { status.textContent = 'Testing...'; status.className = 'small ad-test-status text-muted'; }
        btn.disabled = true;
        try {
            const res = await fetch(adIntegrationTestUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(collectAdFormPayload(btn)),
            });
            const data = await res.json();
            if (status) {
                status.textContent = data.message || (data.success ? 'OK' : 'Failed');
                status.className = 'small ad-test-status ' + (data.success ? 'text-success' : 'text-danger');
            }
            if (typeof toastr !== 'undefined') {
                data.success ? toastr.success(data.message) : toastr.error(data.message || 'Test failed');
            }
        } catch (e) {
            if (status) { status.textContent = 'Request failed'; status.className = 'small ad-test-status text-danger'; }
        }
        btn.disabled = false;
    });
});
</script>
@endif

@if($tab === 'audience')
<script>
document.querySelectorAll('.ad-sync-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        btn.disabled = true;
        const fd = new FormData();
        fd.append('_token', '{{ csrf_token() }}');
        fd.append('type', btn.dataset.type);
        const res = await fetch('{{ route('admin.social.ads.audience.sync') }}', { method: 'POST', body: fd });
        const data = await res.json();
        alert(data.message || (data.success ? 'Synced' : 'Failed'));
        btn.disabled = false;
    });
});
document.getElementById('lookalikeBtn')?.addEventListener('click', async () => {
    const fd = new FormData();
    fd.append('_token', '{{ csrf_token() }}');
    fd.append('ratio', '{{ $config['audience']['lookalike_ratio'] }}');
    const res = await fetch('{{ route('admin.social.ads.audience.lookalike') }}', { method: 'POST', body: fd });
    const data = await res.json();
    alert(data.message);
});
</script>
@endif

@if($tab === 'utm')
<script>
document.getElementById('utmGenBtn')?.addEventListener('click', () => {
    const base = document.getElementById('utmBaseUrl').value.replace(/\/$/, '');
    const campaign = encodeURIComponent(document.getElementById('utmCampaign').value || 'campaign');
    document.getElementById('utmResult').value = base + '?utm_source=facebook&utm_medium=cpc&utm_campaign=' + campaign + '&utm_content=@{{ad.name}}';
});
</script>
@endif
@endpush