@extends('root')
@section('title', 'Reseller Dashboard')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Reseller Dashboard',
        'links' => [],
        'current' => 'Reseller Dashboard'
    ])

    {{-- Primary Stats Row --}}
    <div class="row">
       
        {{-- Total Clients --}}
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Total Clients</h6>
                        <i class="ti ti-users text-primary fs-5"></i>
                    </div>
                    <h3 id="r_total_clients" class="mb-0 text-primary">-</h3>
                    <small class="text-muted">Aktif: <span id="r_active_clients">-</span></small>
                </div>
            </div>
        </div>
        {{-- Total Messages --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Total Messages</h6>
                        <i class="ti ti-messages text-success fs-5"></i>
                    </div>
                    <h3 id="r_total_messages" class="mb-0">-</h3>
                    <small class="text-muted">Outbound: <span id="r_outbound_messages">-</span></small>
                </div>
            </div>
        </div>
        {{-- Messages Today --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Messages Today</h6>
                        <i class="ti ti-calendar-stats text-info fs-5"></i>
                    </div>
                    <h3 id="r_total_messages_today" class="mb-0">-</h3>
                    <small class="text-muted">Biaya: <span id="r_today_cost">Rp 0</span></small>
                </div>
            </div>
        </div>
        {{-- Total Commission --}}
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Total Komisi</h6>
                        <i class="ti ti-coin text-success fs-5"></i>
                    </div>
                    <h3 id="r_total_commission" class="mb-0 text-success">-</h3>
                    <small class="text-muted">@ Rp <span id="r_commission_rate">0</span>/pesan</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Secondary Stats Row --}}
    <div class="row">
        {{-- Total Cost --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Total Biaya Client</h6>
                        <i class="ti ti-report-money text-danger fs-5"></i>
                    </div>
                    <h4 id="r_total_cost" class="mb-0">Rp 0</h4>
                    <small class="text-muted">Akumulasi seluruh client</small>
                </div>
            </div>
        </div>
        {{-- This Month Cost --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Biaya Bulan Ini</h6>
                        <i class="ti ti-calendar text-warning fs-5"></i>
                    </div>
                    <h4 id="r_this_month_cost" class="mb-0">Rp 0</h4>
                    <small class="text-muted">Komisi: <span id="r_this_month_commission">Rp 0</span></small>
                </div>
            </div>
        </div>
        {{-- Inbound Messages --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Inbound Messages</h6>
                        <i class="ti ti-inbox text-info fs-5"></i>
                    </div>
                    <h4 id="r_inbound_messages" class="mb-0">0</h4>
                    <small class="text-muted">Pesan masuk</small>
                </div>
            </div>
        </div>
        {{-- Success Rate --}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0 text-muted">Outbound Sukses</h6>
                        <i class="ti ti-check text-success fs-5"></i>
                    </div>
                    <h4 id="r_success_count" class="mb-0 text-success">0</h4>
                    <small class="text-muted">Gagal: <span id="r_failed_count" class="text-danger">0</span></small>
                </div>
            </div>
        </div>
    </div>

    {{-- Category Stats Table --}}
    <div class="card card-body mt-2">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0">Statistik Pesan per Tipe (Seluruh Client)</h5>
            <span class="text-muted small">Biaya = pesan sukses (tidak termasuk failed)</span>
        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Tipe Pesan</th>
                        <th>Jumlah Pesan</th>
                        <th>Sukses</th>
                        <th>Total Biaya</th>
                        <th>Margin (Komisi)</th>
                    </tr>
                </thead>
                <tbody id="r_category_stats">
                    <!-- Diisi via JS -->
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function formatRupiah(num) {
    return 'Rp ' + parseFloat(num || 0).toLocaleString('id-ID');
}

$(function () {
    fetch('{{ route('reseller.dashboard.data') }}')
        .then(resp => resp.json())
        .then(data => {
            // Primary stats
            $('#r_total_clients').text((data.total_clients || 0).toLocaleString('id-ID'));
            $('#r_active_clients').text((data.active_clients || 0).toLocaleString('id-ID'));
            $('#r_total_messages').text((data.total_messages || 0).toLocaleString('id-ID'));
            $('#r_outbound_messages').text((data.outbound_messages || 0).toLocaleString('id-ID'));
            $('#r_total_messages_today').text((data.total_messages_today || 0).toLocaleString('id-ID'));
            $('#r_today_cost').text(formatRupiah(data.today_cost));
            $('#r_total_commission').text(formatRupiah(data.total_commission));
            let commissionRate = data.total_commission / data.total_messages;
            $('#r_commission_rate').text(parseFloat(commissionRate).toLocaleString('id-ID'));

            // Secondary stats
            $('#r_total_cost').text(formatRupiah(data.total_cost));
            $('#r_this_month_cost').text(formatRupiah(data.this_month_cost));
            $('#r_this_month_commission').text(formatRupiah(data.this_month_commission));
            $('#r_inbound_messages').text((data.inbound_messages || 0).toLocaleString('id-ID'));
            $('#r_success_count').text((data.success_count || 0).toLocaleString('id-ID'));
            $('#r_failed_count').text((data.failed_count || 0).toLocaleString('id-ID'));

            // Category stats table
            var labels = {
                marketing: 'Marketing',
                utility: 'Utility',
                otp: 'OTP',
                service: 'Service Message',
            };

            var $tbody = $('#r_category_stats');
            $tbody.empty();

            (Object.entries(data.categories || {})).forEach(function ([key, val]) {
                $tbody.append(`
                    <tr>
                        <td>${labels[key] || key}</td>
                        <td>${(val.total_messages || 0).toLocaleString('id-ID')}</td>
                        <td><span class="text-success">${(val.success_count || 0).toLocaleString('id-ID')}</span></td>
                        <td>${formatRupiah(val.total_cost || 0)}</td>
                        <td><strong class="text-success">${formatRupiah(val.margin || 0)}</strong></td>
                    </tr>
                `);
            });
        })
        .catch(() => {
            console.error('Gagal memuat data dashboard reseller');
        });
});
</script>
@endpush