@extends('layouts.app')
@section('title', 'Performance Analytics — HIGHRA CRM')
@section('header', 'Performance Analytics')

@section('content')
<!-- HEADER ACTION ROW -->
<div class="row" style="margin-bottom: 24px; align-items: flex-start;">
    <div>
        <h1 style="margin: 0 0 6px 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: #ffffff;">
            Performance Analytics
        </h1>
        <p style="color: #8e9ab4; margin: 0; font-size: 14px;">
            Multi-platform acquisition and sales performance
        </p>
    </div>
    <div>
        <a href="{{ route('exports.leads') }}" class="btn btn-secondary" style="padding: 9px 16px; font-size: 13px; font-weight: 600; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
            Export
        </a>
    </div>
</div>

<!-- 5 TOP KPI CARDS ROW -->
<div class="dash-kpi-grid">
    <!-- Ad Spend -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Ad Spend</div>
        <div class="dash-kpi-number" style="color: #22c55e;">{{ format_inr($adSpend, 0) }}</div>
        <div class="dash-kpi-sub">
            @if($metaConnection)
                <a href="{{ route('meta.index') }}" style="color: #34d399; text-decoration: none;">Meta Connected</a>
            @else
                <a href="{{ route('meta.index') }}" style="color: #64748b; text-decoration: none;">Connect Meta</a>
            @endif
        </div>
    </div>

    <!-- Captured Leads -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Captured Leads</div>
        <div class="dash-kpi-number" style="color: #20d49a;">{{ $totalLeads }}</div>
        <div class="dash-kpi-sub">All platforms</div>
    </div>

    <!-- Blended CPL -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Blended CPL</div>
        <div class="dash-kpi-number" style="color: #38bdf8;">{{ format_inr($blendedCpl, 0) }}</div>
        <div class="dash-kpi-sub">Cost per lead</div>
    </div>

    <!-- Avg Response -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Avg Response</div>
        <div class="dash-kpi-number" style="color: #38bdf8;">{{ $avgResponse }}</div>
        <div class="dash-kpi-sub">Target &lt; 5 min</div>
    </div>

    <!-- Conversion -->
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Conversion</div>
        <div class="dash-kpi-number" style="color: #f43f5e;">{{ $conversionRate }}%</div>
        <div class="dash-kpi-sub">Won / leads</div>
    </div>
</div>

<!-- MAIN PANEL: PLATFORM ROI & CPL -->
<div class="dash-panel" style="min-height: 280px;">
    <div class="dash-panel-header">
        <h2 class="dash-panel-title">Platform ROI & CPL</h2>
        <p class="dash-panel-sub">Meta, Google, TikTok and LinkedIn</p>
    </div>

    @if(!$hasConnectedPlatforms && $adSpend == 0)
        <div style="padding: 70px 20px; text-align: center; color: #64748b; font-size: 14px;">
            No advertising platforms connected yet.
        </div>
    @else
        <div style="overflow-x: auto; margin-top: 14px;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 1px solid #1c2742;">
                        <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Platform</th>
                        <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Status</th>
                        <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Spend</th>
                        <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Leads</th>
                        <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">CPL</th>
                        <th style="padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Won Deals</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($platforms as $p)
                        <tr style="border-bottom: 1px solid #141f38;">
                            <td style="padding: 16px 14px; color: #fff; font-weight: 600; font-size: 14px;">
                                {{ $p['name'] }}
                            </td>
                            <td style="padding: 16px 14px;">
                                @if($p['connected'])
                                    <span style="background: #064e3b; color: #6ee7b7; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;">Connected</span>
                                @else
                                    <span style="background: #1e293b; color: #94a3b8; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;">Not Connected</span>
                                @endif
                            </td>
                            <td style="padding: 16px 14px; color: #cbd5e1;">
                                {{ format_inr($p['spend'], 0) }}
                            </td>
                            <td style="padding: 16px 14px; color: #cbd5e1; font-weight: 600;">
                                {{ $p['leads'] }}
                            </td>
                            <td style="padding: 16px 14px; color: #cbd5e1;">
                                {{ format_inr($p['cpl'], 0) }}
                            </td>
                            <td style="padding: 16px 14px; color: #34d399; font-weight: 600;">
                                {{ $p['won'] }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection