@extends('root')
@section('title', 'Laporan Pendapatan')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Laporan Pendapatan',
        'links' => [['label' => 'Reports', 'url' => '#']],
        'current' => 'Pendapatan'
    ])

    <!-- Summary Cards -->
    <div class="row mb-4" id="summaryCards">
        <!-- Message Revenue -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 border-start border-4 border-primary shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="ti ti-currency-dollar fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-muted text-uppercase fw-semibold mb-1">Message Revenue</h6>
                            <h4 class="mb-0 fw-bold text-primary" id="msgRevenue">-</h4>
                        </div>
                    </div>
                    <small class="text-muted">Total Selling Price</small>
                </div>
            </div>
        </div>

        <!-- Provider Cost -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 border-start border-4 border-danger shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-label-danger">
                                <i class="ti ti-chart-arrows-vertical fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-muted text-uppercase fw-semibold mb-1">Provider Cost</h6>
                            <h4 class="mb-0 fw-bold text-danger" id="msgCost">-</h4>
                        </div>
                    </div>
                    <small class="text-muted">Total Meta Cost</small>
                </div>
            </div>
        </div>

        <!-- Message Profit -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 border-start border-4 border-success shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="ti ti-chart-line fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-muted text-uppercase fw-semibold mb-1">Message Profit</h6>
                            <h4 class="mb-0 fw-bold text-success" id="msgProfit">-</h4>
                        </div>
                    </div>
                    <small class="text-muted">Net Profit from Messages</small>
                </div>
            </div>
        </div>

        <!-- Total Messages -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 border-start border-4 border-info shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-label-info">
                                <i class="ti ti-message fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-muted text-uppercase fw-semibold mb-1">Total Messages</h6>
                            <h4 class="mb-0 fw-bold text-info" id="totalMessages">-</h4>
                        </div>
                    </div>
                    <small class="text-muted">Total Sent/Delivered/Read</small>
                </div>
            </div>
        </div>

        <!-- Subscription Revenue -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 border-start border-4 border-warning shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="ti ti-crown fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-muted text-uppercase fw-semibold mb-1">Subscription</h6>
                            <h4 class="mb-0 fw-bold text-warning" id="subRevenue">-</h4>
                        </div>
                    </div>
                    <small class="text-muted">Revenue from Packages</small>
                </div>
            </div>
        </div>

        <!-- Add-on Revenue -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 border-start border-4 border-secondary shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-label-secondary">
                                <i class="ti ti-puzzle fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-muted text-uppercase fw-semibold mb-1">Add-on Revenue</h6>
                            <h4 class="mb-0 fw-bold text-secondary" id="addonRevenue">-</h4>
                        </div>
                    </div>
                    <small class="text-muted">Revenue from Add-ons</small>
                </div>
            </div>
        </div>

        <!-- Grand Total Revenue -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 bg-dark text-white shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-secondary text-white">
                                <i class="ti ti-wallet fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-white-50 text-uppercase fw-semibold mb-1">Total Revenue</h6>
                            <h4 class="mb-0 fw-bold text-white" id="grandRevenue">-</h4>
                        </div>
                    </div>
                    <small class="text-white-50">Msg + Sub + Addon</small>
                </div>
            </div>
        </div>

        <!-- Grand Total Profit -->
        <div class="col-md-3 mb-3">
            <div class="card h-100 bg-success text-white shadow-sm" style="background: linear-gradient(135deg, #28c76f 0%, #48da89 100%);">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar me-3">
                            <span class="avatar-initial rounded bg-white/20 text-white" style="background-color: rgba(255,255,255,0.2)">
                                <i class="ti ti-trending-up fs-4"></i>
                            </span>
                        </div>
                        <div>
                            <h6 class="text-white-50 text-uppercase fw-semibold mb-1">Total Profit</h6>
                            <h4 class="mb-0 fw-bold text-white" id="grandProfit">-</h4>
                        </div>
                    </div>
                    <small class="text-white-50">75% = <span class="text-white" id="profit1"></span></small><br>
                    <small class="text-white-50">25% = <span class="text-white" id="profit2"></span></small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form id="filterForm" class="row g-3">
                <div class="col-md-2">
                    <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-2">
                    <label class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" name="date_to" value="{{ now()->toDateString() }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Client</label>
                    <select class="form-select" name="client_id">
                        <option value="">Semua Client</option>
                        @foreach($clients as $client)
                        <option value="{{ $client->id }}">{{ $client->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Reseller</label>
                    <select class="form-select" name="reseller_id">
                        <option value="">Semua Reseller</option>
                        @foreach($resellers as $reseller)
                        <option value="{{ $reseller->id }}">{{ $reseller->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">WABA Number</label>
                    <input type="text" class="form-control" name="waba_number" placeholder="628xxx">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                     <select class="form-select" name="status">
                        <option value="">Semua Status</option>
                        @foreach($statuses as $st)
                        <option value="{{ $st }}">{{ ucfirst($st) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Package Type</label>
                    <select class="form-select" name="package_type">
                        <option value="">Semua</option>
                        @foreach($packageTypes as $type)
                        <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Category</label>
                    <select class="form-select" name="category">
                        <option value="">Semua</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat }}">{{ ucfirst($cat) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary flex-grow-1">
                        <i class="ti ti-filter me-1"></i> Filter
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="resetFilter">
                        <i class="ti ti-x"></i>
                    </button>
                </div>
            </form>
            <div class="mt-2">
                <small id="revenue-response-time" class="text-muted d-none" title="Waktu respons">
                    <i class="ti ti-clock me-1"></i><span id="revenue-response-time-value">-</span>
                </small>
            </div>
        </div>
    </div>

    <!-- Tabs & Data Table -->
    <div class="card">
        <div class="card-header border-bottom">
            <div class="d-flex justify-content-between align-items-center mb-3">
                 <h5 class="mb-0"><i class="ti ti-chart-pie text-primary me-2"></i>Rincian Pendapatan</h5>
                  <div class="btn-group">
                    <a href="#" class="btn btn-outline-success btn-sm" id="exportCsv">
                        <i class="ti ti-file-spreadsheet me-1"></i> CSV
                    </a>
                    <a href="#" class="btn btn-outline-primary btn-sm" id="exportExcel">
                        <i class="ti ti-file-type-xls me-1"></i> Excel
                    </a>
                </div>
            </div>
<style>
    .nav-tabs .nav-link.active {
        color: #7367f0 !important; /* Primary Color */
        border-color: #dee2e6 #dee2e6 #fff !important;
    }
    .nav-tabs .nav-link {
        color: #5d596c;
    }
</style>
            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active fw-medium" data-bs-toggle="tab" href="#tab-message" role="tab" data-type="message">
                        <i class="ti ti-message-2 me-1"></i> Message Revenue
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link fw-medium" data-bs-toggle="tab" href="#tab-subscription" role="tab" data-type="subscription">
                        <i class="ti ti-package me-1"></i> Subscriptions
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link fw-medium" data-bs-toggle="tab" href="#tab-addon" role="tab" data-type="addon">
                        <i class="ti ti-plug me-1"></i> Add-ons
                    </a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <!-- Message Revenue Tab -->
                <div class="tab-pane fade show active" id="tab-message" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover" id="messageTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Client</th>
                                    <th>Sender Number</th>

                                    <th class="text-end">Total Messages</th>
                                    <th class="text-end">Selling Price</th>
                                    <th class="text-end">Provider Cost</th>
                                    <th class="text-end">Net Profit</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody id="messageTableBody">
                                <tr><td colspan="8" class="text-center py-4"><div class="spinner-border text-primary"></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Subscription Revenue Tab -->
                <div class="tab-pane fade" id="tab-subscription" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover" id="subscriptionTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Client</th>
                                    <th>Package</th>
                                    <th>Action</th>
                                    <th class="text-end">Price</th>
                                </tr>
                            </thead>
                            <tbody id="subscriptionTableBody"></tbody>
                        </table>
                    </div>
                </div>

                <!-- Add-on Revenue Tab -->
                 <div class="tab-pane fade" id="tab-addon" role="tabpanel">
                      <div class="table-responsive">
                        <table class="table table-hover" id="addonTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Client</th>
                                    <th>Add-on Name</th>
                                    <th>Status</th>
                                     <th class="text-end">Price</th>
                                     <th class="text-end" data-bs-toggle="tooltip" title="(11% dari pertama topup)">Biaya Layanan</th>
                                     <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody id="addonTableBody"></tbody>
                        </table>
                    </div>
                 </div>
            </div>
            
             <nav id="pagination" class="mt-3"></nav>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // --- Helper: Format Currency ---
        function formatCurrency(value) {
            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(value);
        }

        // --- Helper: Badge Renderer ---
        function renderBadge(value, type = 'primary') {
             if(!value) return '-';
             let color = 'secondary';
             let text = value;

             // Logic for Mapping Values into Colors
             if (['sent', 'delivered', 'read'].includes(value)) color = 'success';
             if (value === 'failed') color = 'danger';
             if (value === 'pending') color = 'warning';
             
             if (value === 'marketing') color = 'info';
             if (value === 'utility') color = 'warning';
             if (value === 'authentication') color = 'primary';
             if (value === 'service') color = 'secondary';

             return `<span class="badge bg-label-${color}">${text.toUpperCase()}</span>`;
        }

        // --- 1. Message Revenue DataTable ---
        var messageTable = $('#messageTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.reports.revenue.data') }}",
                data: function(d) {
                    d.date_from = $('input[name="date_from"]').val();
                    d.date_to = $('input[name="date_to"]').val();
                    d.reseller_id = $('select[name="reseller_id"]').val();
                    d.client_id = $('select[name="client_id"]').val();
                    d.package_type = $('select[name="package_type"]').val();
                    d.category = $('select[name="category"]').val();
                    d.waba_number = $('input[name="waba_number"]').val();
                    d.status = $('select[name="status"]').val();
                }
            },
            columns: [
                { data: 'date', name: 'date', className: 'text-nowrap' },
                { 
                    data: 'client_name', 
                    name: 'clients.name',
                    className: 'fw-bold text-wrap'
                },
                { data: 'waba_number', name: 'waba_pools.phone_number', defaultContent: '-', className: 'text-nowrap font-monospace' },

                { 
                    data: 'total_messages', 
                    name: 'total_messages', 
                    className: 'text-end fw-bold',
                    render: function(data) {
                        return `<span>${new Intl.NumberFormat('id-ID').format(data)}</span>`;
                    }
                },
                { 
                    data: 'total_revenue', 
                    name: 'total_revenue', 
                    className: 'text-end text-success',
                    render: function(data) { return formatCurrency(data); }
                },
                { 
                    data: 'total_cost', 
                    name: 'total_cost', 
                    className: 'text-end text-danger',
                    render: function(data) { return formatCurrency(data); }
                },
                { 
                    data: null, 
                    className: 'text-end fw-bold text-dark',
                    render: function(data, type, row) {
                        var profit = parseFloat(row.total_revenue) - parseFloat(row.total_cost);
                        var colorClass = profit >= 0 ? 'text-success' : 'text-danger';
                        return `<span class="${colorClass}">${formatCurrency(profit)}</span>`;
                    }
                },
                {
                    data: null,
                    className: 'text-center',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        if(row.client_id) {
                            var url = "{{ route('admin.reports.revenue.client.detail', ':id') }}".replace(':id', row.client_id);
                            return `<a href="${url}" class="btn btn-sm btn-icon btn-text-secondary rounded-pill waves-effect" title="View Details"><i class="ti ti-eye"></i></a>`;
                        }
                        return '';
                    }
                }
            ],
            order: [[0, 'desc']],
            dom: '<"d-flex justify-content-between align-items-center header-actions mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            displayLength: 10,
            lengthMenu: [10, 25, 50, 75, 100],
            language: {
                search: "",
                searchPlaceholder: "Search...",
                paginate: {
                    next: '<i class="ti ti-chevron-right ti-sm"></i>',
                    previous: '<i class="ti ti-chevron-left ti-sm"></i>'
                }
            }
        });

        // --- 2. Subscription Revenue DataTable ---
        var subscriptionTable = $('#subscriptionTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.reports.revenue.data-subscription') }}",
                data: function(d) {
                    d.date_from = $('input[name="date_from"]').val();
                    d.date_to = $('input[name="date_to"]').val();
                    d.reseller_id = $('select[name="reseller_id"]').val();
                    d.client_id = $('select[name="client_id"]').val();
                }
            },
            columns: [
                { data: 'created_at', name: 'package_histories.created_at', className: 'text-nowrap' },
                { data: 'client_name', name: 'clients.name', className: 'fw-bold' },
                { 
                    data: 'package_name', 
                    name: 'packages.name',
                    render: function(data) {
                        return `<span class="badge bg-label-info">${data}</span>`;
                    }
                },
                { 
                    data: 'action', 
                    name: 'package_histories.action',
                    render: function(data) {
                        return renderBadge(data); // Use helper
                    }
                },
                { 
                    data: 'amount', 
                    name: 'package_histories.amount', 
                    className: 'text-end fw-bold text-success',
                    render: function(data) { return formatCurrency(data); }
                }
            ],
            order: [[0, 'desc']],
            dom: '<"d-flex justify-content-between align-items-center header-actions mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            displayLength: 10,
            language: {
                search: "",
                searchPlaceholder: "Search...",
                paginate: {
                    next: '<i class="ti ti-chevron-right ti-sm"></i>',
                    previous: '<i class="ti ti-chevron-left ti-sm"></i>'
                }
            }
        });

        // --- 3. Add-on Revenue DataTable ---
        var addonTable = $('#addonTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.reports.revenue.data-addon') }}",
                data: function(d) {
                    d.date_from = $('input[name="date_from"]').val();
                    d.date_to = $('input[name="date_to"]').val();
                    d.reseller_id = $('select[name="reseller_id"]').val();
                    d.client_id = $('select[name="client_id"]').val();
                }
            },
            columns: [
                { data: 'created_at', name: 'addon_transactions.created_at', className: 'text-nowrap' },
                { data: 'client_name', name: 'clients.name', className: 'fw-bold' },
                { 
                    data: 'addon_name', 
                    name: 'addon_transactions.addon_code',
                    render: function(data) {
                         return `<span class="badge bg-primary">${data}</span>`;
                    }
                },
                { 
                    data: 'type', 
                    name: 'addon_transactions.type',
                    render: function(data) {
                        var color = 'secondary';
                        if(data === 'purchase') color = 'success';
                        if(data === 'renewal') color = 'info';
                        return `<span class="badge bg-info">${data.toUpperCase()}</span>`;
                    }
                },
                { 
                    data: 'amount', 
                    name: 'addon_transactions.amount', 
                    className: 'text-end fw-bold text-success',
                    render: function(data) { return formatCurrency(data); }
                },
                { 
                    data: 'ppn', 
                    name: 'addon_transactions.ppn', 
                    searchable: false,
                    orderable: false,
                    className: 'text-end fw-bold text-success',
                    render: function(data) { return formatCurrency(data); }
                },
                { 
                    data: 'total', 
                    searchable: false,
                    orderable: false,
                    name: 'addon_transactions.total', 
                    className: 'text-end fw-bold text-success',
                    render: function(data) { return formatCurrency(data); }
                }
            ],
            order: [[0, 'desc']],
             dom: '<"d-flex justify-content-between align-items-center header-actions mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            displayLength: 10,
            language: {
                search: "",
                searchPlaceholder: "Search...",
                paginate: {
                    next: '<i class="ti ti-chevron-right ti-sm"></i>',
                    previous: '<i class="ti ti-chevron-left ti-sm"></i>'
                }
            }
        });


        function loadSummary() {
            $.ajax({
                url: "{{ route('admin.reports.revenue.summary') }}",
                data: {
                    date_from: $('input[name="date_from"]').val(),
                    date_to: $('input[name="date_to"]').val(),
                    reseller_id: $('select[name="reseller_id"]').val(),
                    client_id: $('select[name="client_id"]').val(),
                    package_type: $('select[name="package_type"]').val(),
                    category: $('select[name="category"]').val(),
                    waba_number: $('input[name="waba_number"]').val(),
                    status: $('select[name="status"]').val()
                },
                success: function(response) {
                    if (response.success) {
                        var d = response.data;
                        $('#msgRevenue').text(formatCurrency(d.message_revenue)); // Updated ID
                        $('#msgCost').text(formatCurrency(d.message_cost)); // Updated ID
                        $('#msgProfit').text(formatCurrency(d.message_profit)); // Updated ID
                        $('#totalMessages').text(new Intl.NumberFormat('id-ID').format(d.total_messages)); // Updated ID and format
                        $('#subRevenue').text(formatCurrency(d.subscription_revenue)); // Updated ID
                        $('#addonRevenue').text(formatCurrency(d.addon_revenue)); // Updated ID
                        $('#grandRevenue').text(formatCurrency(d.grand_total_revenue)); // Updated ID
                        $('#grandProfit').text(formatCurrency(d.grand_total_profit)); // Updated ID
                        $('#profit1').text(formatCurrency(d.grand_total_profit * 0.75)); // Updated ID
                        $('#profit2').text(formatCurrency(d.grand_total_profit * 0.25)); // Updated ID
                    }
                }
            });
        }

        // --- Event Listener: Filter Change ---
        $('#filterForm').on('change', 'select, input', function() { // Changed from #filter-form to #filterForm
            messageTable.ajax.reload();
            subscriptionTable.ajax.reload();
            addonTable.ajax.reload();
            loadSummary();
        });

        // Event Listener: Filter Form Submit
        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            messageTable.ajax.reload();
            subscriptionTable.ajax.reload();
            addonTable.ajax.reload();
            loadSummary();
        });

        // Event Listener: Reset Filter
        $('#resetFilter').on('click', function() {
            $('#filterForm')[0].reset();
            $('input[name="date_from"]').val('{{ now()->startOfMonth()->toDateString() }}');
            $('input[name="date_to"]').val('{{ now()->toDateString() }}');
            messageTable.ajax.reload();
            subscriptionTable.ajax.reload();
            addonTable.ajax.reload();
            loadSummary();
        });

        // Initial Load
        loadSummary();
    });
</script>
@endpush