@extends('root')
@section('title', 'Detail Pendapatan - ' . $reseller->name)

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Detail Pendapatan',
        'links' => [
            ['label' => 'Reports', 'url' => '#'],
            ['label' => 'Pendapatan', 'url' => route('admin.reports.revenue.index')]
        ],
        'current' => $reseller->name
    ])

    <!-- Reseller Info -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h4 class="mb-1"><i class="ti ti-building-store text-primary me-2"></i>{{ $reseller->name }}</h4>
                    <p class="text-muted mb-0">{{ $reseller->email }}</p>
                </div>
                <div class="col-md-4 text-end">
                    <a href="{{ route('admin.reports.revenue.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-arrow-left me-1"></i> Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Date Filter -->
    <div class="card mb-4">
        <div class="card-body">
            <form id="filterForm" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Dari Tanggal</label>
                    <input type="date" class="form-control" name="date_from" value="{{ now()->startOfMonth()->toDateString() }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" name="date_to" value="{{ now()->toDateString() }}">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="ti ti-filter me-1"></i> Filter
                    </button>
                </div>
            </form>
            <div class="mt-2">
                <small id="revenue-detail-response-time" class="text-muted d-none" title="Waktu respons">
                    <i class="ti ti-clock me-1"></i><span id="revenue-detail-response-time-value">-</span>
                </small>
            </div>
        </div>
    </div>

    <!-- Summary Totals -->
    <div class="row mb-4" id="summaryRow">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Activity</h6>
                    <h3 class="text-primary mb-0" id="totalMessages">-</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Biaya Meta</h6>
                    <h3 class="text-danger mb-0" id="totalMetaCost">-</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Margin</h6>
                    <h3 class="text-success mb-0" id="totalMargin">-</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Pendapatan</h6>
                    <h3 class="text-info mb-0" id="totalRevenue">-</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Breakdown by Package Type -->
    <div class="row" id="breakdownContainer">
        <!-- Dedicated Section -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100 border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="ti ti-phone me-2"></i>Dedicated</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm" id="dedicatedTable">
                            <thead>
                                <tr>
                                    <th>Category</th>
                                    <th class="text-end">Count</th>
                                    <th class="text-end">Meta</th>
                                    <th class="text-end">Margin</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot class="table-light fw-bold"></tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shared Section -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100 border-info">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0 text-white"><i class="ti ti-share me-2"></i>Shared</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm" id="sharedTable">
                            <thead>
                                <tr>
                                    <th>Category</th>
                                    <th class="text-end">Count</th>
                                    <th class="text-end">Meta</th>
                                    <th class="text-end">Margin</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot class="table-light fw-bold"></tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add-ons Section -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100 border-success">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0 text-white"><i class="ti ti-puzzle me-2"></i>Add-ons</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm" id="addonsTable">
                            <thead>
                                <tr>
                                    <th>Item</th>
                                    <th class="text-end">Count</th>
                                    <th class="text-end">Meta</th>
                                    <th class="text-end">Margin</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot class="table-light fw-bold"></tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    loadDetail();

    $('#filterForm').on('submit', function(e) {
        e.preventDefault();
        loadDetail();
    });

    function loadDetail() {
        const params = $('#filterForm').serialize();
        var t0 = performance.now();
        
        $.get('{{ route("admin.reports.revenue.detail", $reseller) }}', params, function(res) {
            var elapsed = ((performance.now() - t0) / 1000).toFixed(2);
            $('#revenue-detail-response-time-value').text('Data dimuat dalam ' + elapsed + ' detik');
            $('#revenue-detail-response-time').removeClass('d-none');
            if (res.success) {
                const data = res.data;
                
                // Summary
                $('#totalMessages').html(`
                    ${formatNumber(data.totals.total_messages)}
                    <br>
                    <small class="fs-6 text-muted">
                        <i class="ti ti-check text-success"></i> ${formatNumber(data.totals.success_count || 0)} | 
                        <i class="ti ti-x text-danger"></i> ${formatNumber(data.totals.failed_count || 0)}
                    </small>
                `);
                $('#totalMetaCost').text(formatCurrency(data.totals.total_meta_cost));
                $('#totalMargin').text(formatCurrency(data.totals.total_margin));
                $('#totalRevenue').text(formatCurrency(data.totals.total_revenue));

                // Dedicated table
                renderTable('dedicated', data.breakdown.dedicated);
                
                // Shared table
                renderTable('shared', data.breakdown.shared);

                // Add-ons table
                renderTable('addons', data.breakdown.addons);
            }
        });
    }

    function renderTable(type, rows) {
        const tbody = $(`#${type}Table tbody`);
        const tfoot = $(`#${type}Table tfoot`);
        
        if (!rows || rows.length === 0) {
            tbody.html('<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada data</td></tr>');
            tfoot.html('');
            return;
        }

        let html = '';
        let totals = { messages: 0, meta: 0, margin: 0 };

        rows.forEach(function(row) {
            const categoryBadge = getCategoryBadge(row.message_category, type);
            // Compact columns: Category | Count | Meta Price | Margin | Total Margin (Revenue)
            
            html += `<tr>
                <td title="${row.message_category}">${categoryBadge}</td>
                <td class="text-end">
                    <div>${formatNumber(row.total_messages)}</div>
                    <small class="text-muted">
                        <span class="text-success" title="Success">${formatNumber(row.success_count)}</span> / 
                        <span class="text-danger" title="Failed">${formatNumber(row.failed_count)}</span>
                    </small>
                </td>
                <td class="text-end text-muted small">${row.meta_price_per_msg > 0 ? formatNumber(row.meta_price_per_msg) : '-'}</td>
                <td class="text-end small">${formatNumber(row.margin_per_msg)}</td>
                <td class="text-end text-success fw-bold">${formatCurrency(row.total_margin)}</td>
            </tr>`;
            totals.messages += row.total_messages;
            totals.meta += row.total_meta_cost;
            totals.margin += row.total_margin;
        });

        tbody.html(html);
        tfoot.html(`<tr>
            <td>Total</td>
            <td class="text-end">${formatNumber(totals.messages)}</td>
            <td colspan="2"></td>
            <td class="text-end text-success">${formatCurrency(totals.margin)}</td>
        </tr>`);
    }

    function getCategoryBadge(cat, type) {
        if (type === 'addons') {
             // Beautify Add-on code
             const label = cat.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
             return `<span class="badge bg-secondary text-truncate" style="max-width: 100px;">${label}</span>`;
        }
        
        const badges = {
            'marketing': '<span class="badge bg-primary">Marketing</span>',
            'utility': '<span class="badge bg-success">Utility</span>',
            'authentication': '<span class="badge bg-warning text-dark">Auth</span>',
            'service': '<span class="badge bg-info">Service</span>'
        };
        return badges[cat] || `<span class="badge bg-light text-dark border">${cat || 'Unknown'}</span>`;
    }

    function formatNumber(n) { return new Intl.NumberFormat('id-ID').format(n || 0); }
    function formatCurrency(n) { return 'Rp ' + new Intl.NumberFormat('id-ID').format(Math.round(n || 0)); }
});
</script>
@endpush