@extends('layouts.master')

@section('title', 'Business Analytics Suite')

@section('css')
<style>
    .nav-tabs .nav-link { 
        border: none; 
        color: #6c757d; 
        font-weight: 600; 
        padding: 1rem 1.5rem;
        background: transparent;
    }
    .nav-tabs .nav-link.active { 
        color: #3f51b5; 
        border-bottom: 3px solid #3f51b5; 
        background: rgba(63, 81, 181, 0.05); 
    }
    .stat-card { border-radius: 12px; transition: 0.3s; }
    .stat-card:hover { transform: translateY(-3px); }
    .chart-box { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.03); margin-bottom: 20px; }
    .table-clean th { border-top: none; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; color: #999; }
    .badge-soft { padding: 5px 10px; border-radius: 6px; font-weight: 500; }
    .badge-soft-success { background: #e6ffed; color: #28a745; }
    .badge-soft-danger { background: #feebe9; color: #dc3545; }
    .badge-soft-warning { background: #fff8e6; color: #ffc107; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="page-header mb-4">
        <div class="row align-items-end">
            <div class="col-lg-8">
                <div class="page-header-title">
                    <i class="fas fa-chart-pie bg-primary p-2 rounded-circle text-white me-2"></i>
                    <div class="d-inline">
                        <h4 class="fw-bold d-inline">Markitti Analytics Suite</h4>
                        <p class="text-muted mb-0 mt-1">Holistic insights into your marketplace performance</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 text-end">
                <span class="text-muted small"><i class="fas fa-history me-1"></i> Last Refreshed: {{ now()->diffForHumans() }}</span>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <ul class="nav nav-tabs mb-4 border-bottom" id="analyticsTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#pulse" role="tab"><i class="fas fa-heartbeat me-2"></i> Executive Pulse</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#partners" role="tab"><i class="fas fa-store me-2"></i> Partner Insights</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#customers" role="tab"><i class="fas fa-users me-2"></i> Customer Intelligence</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#risk" role="tab"><i class="fas fa-shield-alt me-2"></i> Risk & Ops</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#voice" role="tab"><i class="fas fa-comment-alt me-2"></i> Voice of Customer</a>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="analyticsContent">
        
        <!-- Tab 1: Executive Pulse -->
        <div class="tab-pane fade show active" id="pulse" role="tabpanel">
            <div class="row">
                <div class="col-md-3">
                    <div class="card stat-card shadow-sm mb-4">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Monthly Revenue <i class="fas fa-info-circle ms-1 text-muted" title="Total revenue generated from subscriptions and fees this month"></i></h6>
                            <h2 class="fw-bold mb-1">{{ number_format($pulse['revenue']['total'], 2) }} L.E</h2>
                            <p class="mb-0 small">
                                <span class="{{ $pulse['revenue']['growth'] >= 0 ? 'text-success' : 'text-danger' }}">
                                    <i class="fas fa-arrow-{{ $pulse['revenue']['growth'] >= 0 ? 'up' : 'down' }} me-1"></i> {{ abs($pulse['revenue']['growth']) }}%
                                </span> vs last month
                            </p>
                            <small class="text-muted d-block mt-2">Revenue from new subscriptions & renewals.</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card shadow-sm mb-4 bg-primary text-white border-0">
                        <div class="card-body">
                            <h6 class="opacity-75 mb-2">Ecosystem GMV <i class="fas fa-info-circle ms-1 text-white opacity-50" title="Gross Merchandise Value: Total value of all transactions scanned"></i></h6>
                            <h2 class="fw-bold mb-1">{{ number_format($pulse['gmv'], 2) }} L.E</h2>
                            <p class="mb-0 small opacity-75">Total sales through ecosystem</p>
                            <small class="opacity-50 d-block mt-2">Aggregate value of all partner transactions.</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card shadow-sm mb-4">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Customer Savings <i class="fas fa-info-circle ms-1 text-muted" title="Total amount saved by customers using Markitti discounts"></i></h6>
                            <h2 class="fw-bold mb-1 text-success">{{ number_format($pulse['savings'], 2) }} L.E</h2>
                            <p class="mb-0 small text-muted">Direct financial benefit provided</p>
                            <small class="text-muted d-block mt-2">Total discounts applied across all partners.</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stat-card shadow-sm mb-4">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">Active Subscription Rate <i class="fas fa-info-circle ms-1 text-muted" title="Percentage of active cards vs total cards issued"></i></h6>
                            <h2 class="fw-bold mb-1">{{ $pulse['subscription_rate'] }}%</h2>
                            <p class="mb-0 small text-muted">{{ $pulse['active_subscribers'] }} currently active</p>
                            <small class="text-muted d-block mt-2">Users with valid, paid packages.</small>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Add a Revenue Trend chart if data allows, otherwise show summary -->
        </div>

        <!-- Tab 2: Partner Insights -->
        <div class="tab-pane fade" id="partners" role="tabpanel">
            <div class="row">
                <div class="col-lg-7">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-1">Top 5 Anchor Tenants (Approved)</h5>
                        <p class="text-muted small mb-4">Highest performing brands by transaction volume. These partners drive the most traffic.</p>
                        <div class="table-responsive">
                            <table class="table table-clean align-middle">
                                <thead>
                                    <tr>
                                        <th>Brand</th>
                                        <th>Redemptions</th>
                                        <th>Growth</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($partner['top_merchants'] as $m)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img src="{{ $m->brand?->logo_url }}" class="rounded me-3" style="width:40px;height:40px;">
                                                <span class="fw-bold">{{ $m->brand?->brand_name_en ?? 'Unknown Brand' }}</span>
                                            </div>
                                        </td>
                                        <td>{{ number_format($m->transaction_count) }}</td>
                                        <td><span class="badge-soft badge-soft-success">Stable</span></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-1">Category Market Share</h5>
                        <p class="text-muted small mb-4">Distribution of transactions across business categories.</p>
                        <div id="categoryChart"></div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-1">Branch Performance Heatmap (By Area)</h5>
                        <p class="text-muted small mb-4">Geographic concentration of redemptions. Use this to identify high-traffic zones.</p>
                        <div id="areaHeatmapChart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 3: Customer Intelligence -->
        <div class="tab-pane fade" id="customers" role="tabpanel">
            <div class="row">
                <div class="col-lg-8">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-4">Demographic Spending Power (Avg Value)</h5>
                        <div id="spendingPowerChart"></div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-4">Geographic Penetration</h5>
                        <div id="geoPenChart"></div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-4"><i class="fas fa-user-times text-danger me-2"></i> Churn Risk Watchlist (High Priority)</h5>
                        <div class="table-responsive">
                            <table class="table table-clean">
                                <thead>
                                    <tr>
                                        <th>Customer</th>
                                        <th>Ends In</th>
                                        <th>Last Active</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($customer['churn_risk'] as $riskUser)
                                    <tr>
                                        <td>{{ $riskUser->card?->personalData?->first_name ?? 'Customer' }} ({{ $riskUser->card?->mobile_number ?? 'Unknown' }})</td>
                                        <td><span class="text-danger fw-bold">{{ now()->diffInDays($riskUser->subscription_ends_at) }} Days</span></td>
                                        <td>No usage (14d)</td>
                                        <td><button class="btn btn-sm btn-outline-primary py-0">Send Notification</button></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 4: Risk & Operations -->
        <div class="tab-pane fade" id="risk" role="tabpanel">
            <div class="row">
                <div class="col-md-4">
                    <div class="chart-box h-100 text-center d-flex flex-column justify-content-center">
                        <h5 class="fw-bold mb-3">Rejection Rate</h5>
                        <h1 class="display-3 fw-bold text-{{ $risk['rejection_rate'] > 10 ? 'danger' : 'success' }}">{{ $risk['rejection_rate'] }}%</h1>
                        <p class="text-muted">Percentage of failed transactions</p>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-4"><i class="fas fa-exclamation-triangle text-warning me-2"></i> Discount Leakage (>50% Discount)</h5>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Brand</th>
                                        <th>User</th>
                                        <th>Discount</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($risk['discount_leakage'] as $item)
                                    <tr>
                                        <td>{{ $item->brand?->brand_name_en ?? 'Unknown Brand' }}</td>
                                        <td>{{ $item->card?->mobile_number ?? 'Unknown' }}</td>
                                        <td><span class="text-danger fw-bold">{{ $item->discount_percentage }}%</span></td>
                                        <td>{{ $item->transaction_value }} L.E</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 5: Voice of Customer -->
        <div class="tab-pane fade" id="voice" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="chart-box text-center py-5">
                        <h6 class="text-muted uppercase mb-3">Marketplace Rating (NPS)</h6>
                        <h1 class="display-1 fw-bold text-primary">{{ $voice['avg_score'] }}</h1>
                        <div class="fs-4 text-warning mb-3">
                            @for($i=1;$i<=5;$i++)
                                <i class="fa{{ $i <= $voice['avg_score'] ? 's' : 'r' }} fa-star"></i>
                            @endfor
                        </div>
                        <p class="mb-0">Recommendation Rate: <strong>{{ $voice['recommend_rate'] }}%</strong></p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="chart-box">
                        <h5 class="fw-bold mb-4">Critical Complaints (Last 10)</h5>
                        <div class="list-group list-group-flush">
                            @forelse($voice['complaints'] as $c)
                            <div class="list-group-item px-0 py-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="badge bg-danger">Issue</span>
                                    <small class="text-muted">{{ $c->rated_at ?? now()->subHours(rand(1,24)) }}</small>
                                </div>
                                <p class="mb-0 fst-italic">"{{ $c->complaint }}"</p>
                            </div>
                            @empty
                            <div class="text-center py-5 text-muted">No complaints recorded</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    
    // Partner: Category Share
    const catData = @json($partner['category_share']);
    new ApexCharts(document.querySelector("#categoryChart"), {
        chart: { type: 'pie', height: 350 },
        series: catData.map(i => i.value),
        labels: catData.map(i => i.label),
        colors: ['#3f51b5', '#4caf50', '#ff9800', '#f44336', '#9c27b0'],
        legend: { position: 'bottom' }
    }).render();

    // Partner: Area Heatmap
    const areaData = @json($partner['area_heatmap']);
    new ApexCharts(document.querySelector("#areaHeatmapChart"), {
        chart: { type: 'bar', height: 350 },
        series: [{ name: 'Redemptions', data: areaData.map(i => i.total) }],
        xaxis: { categories: areaData.map(i => i.area) },
        colors: ['#3f51b5']
    }).render();

    // Customer: Geo Pen
    const geoData = @json($customer['geo_penetration']);
    new ApexCharts(document.querySelector("#geoPenChart"), {
        chart: { type: 'donut', height: 300 },
        series: geoData.map(i => i.user_count),
        labels: geoData.map(i => i.area),
        legend: { show: false }
    }).render();

    // Customer: Spending Power
    const spendData = @json($customer['spending_power']);
    new ApexCharts(document.querySelector("#spendingPowerChart"), {
        chart: { type: 'bar', height: 350 },
        series: spendData.series,
        xaxis: { categories: spendData.age_groups },
        colors: ['#3f51b5', '#e91e63'],
        yaxis: { title: { text: 'Avg Transaction (L.E)' } }
    }).render();

});
</script>
@endsection