@extends('root')
@section('title', 'WhatsApp Billing')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'WhatsApp Billing',
        'links' => [['url' => route('client.dashboard'), 'label' => 'Dashboard']],
        'current' => 'Billing'
    ])

    <!-- Period Selector -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-end gap-2">
                <a href="?period=day" class="btn btn-{{ $period === 'day' ? 'primary' : 'outline-secondary' }}">Hari Ini</a>
                <a href="?period=week" class="btn btn-{{ $period === 'week' ? 'primary' : 'outline-secondary' }}">Minggu Ini</a>
                <a href="?period=month" class="btn btn-{{ $period === 'month' ? 'primary' : 'outline-secondary' }}">Bulan Ini</a>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Messages</h6>
                    <h2 class="mb-0">{{ number_format($summary['total_messages'] ?? 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Platform Fee</h6>
                    <h2 class="mb-0">Rp {{ number_format($summary['total_platform_fee'] ?? 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <h6 class="text-muted">Meta Cost (Info)</h6>
                    <h2 class="mb-0 text-muted">Rp {{ number_format($summary['total_meta_cost'] ?? 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <h6 class="text-muted">Total Biaya</h6>
                    <h2 class="mb-0 text-primary">Rp {{ number_format($summary['total_cost'] ?? 0) }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Package Info -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ti ti-info-circle me-2"></i>Informasi Package</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Package Type</span>
                        <span class="badge bg-{{ $integrationStatus['package_type'] === 'shared' ? 'blue' : ($integrationStatus['package_type'] === 'dedicated' ? 'green' : 'purple') }}">
                            {{ $integrationStatus['package_type_label'] }}
                        </span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Billing Model</span>
                        <span>
                            @switch($integrationStatus['package_type'])
                                @case('shared')
                                    <span class="badge bg-secondary">Per Paket / Saldo</span>
                                    @break
                                @case('dedicated')
                                    <span class="badge bg-success">Platform Billing</span>
                                    @break
                                @case('self_service')
                                    <span class="badge bg-info">Margin per Pesan</span>
                                    @break
                            @endswitch
                        </span>
                    </div>
                    @if($integrationStatus['package_type'] === 'self_service')
                    <div class="alert alert-info mt-3 mb-0">
                        <small>
                            <i class="ti ti-info-circle me-1"></i>
                            Untuk Self Service, Meta akan menagih langsung ke akun WABA Anda. 
                            Platform hanya menarik margin per pesan untuk biaya layanan.
                        </small>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="ti ti-chart-bar me-2"></i>Breakdown per Kategori</h5>
                </div>
                <div class="card-body">
                    @if(!empty($summary['by_category']))
                        @foreach($summary['by_category'] as $category => $data)
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ ucfirst($category) }}</span>
                            <span>
                                <strong>{{ number_format($data['count']) }}</strong> pesan
                                <small class="text-muted ms-2">Rp {{ number_format($data['cost']) }}</small>
                            </span>
                        </div>
                        @endforeach
                    @else
                        <p class="text-muted text-center mb-0">Tidak ada data</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Note -->
    <div class="alert alert-secondary">
        <i class="ti ti-info-circle me-2"></i>
        <strong>Catatan:</strong> Data billing diupdate secara real-time berdasarkan pesan yang terkirim. 
        Untuk invoice resmi, hubungi admin.
    </div>
</div>
@endsection