@extends('root')
@section('title', 'Message Report - ' . $client->name)

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Message Report & Cost - ' . $client->name,
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.clients.index'), 'label' => 'WA Clients'],
            ['url' => route('admin.clients.message-report-cost'), 'label' => 'Message Report & Cost'],
        ],
        'current' => $client->name
    ])

    <!-- Summary Box -->
    <div class="card mb-4 border-2 border-primary">
        <div class="card-header bg-primary text-white py-2">
            <h5 class="mb-0"><i class="ti ti-chart-pie me-2"></i>Ringkasan Client: {{ $client->name }}</h5>
        </div>
        <div class="card-body">
            <div class="row g-3" id="summaryBox">
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Messages</small>
                        <span class="fw-bold fs-5" id="sumTotalMessages">-</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Success</small>
                        <span class="fw-bold fs-5 text-success" id="sumTotalSuccess">-</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Failed</small>
                        <span class="fw-bold fs-5 text-danger" id="sumTotalFailed">-</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Provider Cost</small>
                        <span class="fw-bold fs-5 text-danger" id="sumProviderCost">-</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Saldo Terpotong</small>
                        <span class="fw-bold fs-5 text-primary" id="sumBalanceDeducted">-</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Net Profit</small>
                        <span class="fw-bold fs-5" id="sumNetProfit">-</span>
                    </div>
                </div>
                <div class="col-md-2" style="display: none;">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Selisih</small>
                        <span class="fw-bold fs-5" id="sumDifference">-</span>
                    </div>
                </div>
            </div>
            <div id="warningsBox" class="mt-3 d-none">
                <div class="alert alert-warning mb-0">
                    <strong><i class="ti ti-alert-triangle me-1"></i> Peringatan:</strong>
                    <ul id="warningsList" class="mb-0 mt-2"></ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Audit Deposit vs Cost -->
    <div class="card mb-4 border-2 border-info">
        <div class="card-header bg-info text-white py-2">
            <h5 class="mb-0"><i class="ti ti-report-analytics me-2"></i>Audit Deposit vs Cost</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Deposit (Nett)</small>
                        <span class="fw-bold fs-5 text-success">Rp {{ number_format($totalDeposit, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Cost Pesan</small>
                        <span class="fw-bold fs-5 text-primary">Rp {{ number_format($messageCost, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Cost Add-on</small>
                        <span class="fw-bold fs-5 text-primary" title="Langganan mobile agent dll">Rp {{ number_format($addonCost, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Cost</small>
                        <span class="fw-bold fs-5 text-primary">Rp {{ number_format($totalCostAllTime, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Selisih (Deposit - Cost)</small>
                        <span class="fw-bold fs-5 {{ $selisihDepositCost >= 0 ? 'text-success' : 'text-danger' }}">Rp {{ number_format($selisihDepositCost, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Saldo Sekarang</small>
                        <span class="fw-bold fs-5 text-info">Rp {{ number_format($saldoSekarang, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Adjustment</small>
                        @if(abs($adjustment) < 1)
                            <span class="fw-bold fs-5 text-success">0</span>
                        @else
                            <span class="fw-bold fs-5 {{ $adjustment >= 0 ? 'text-info' : 'text-danger' }}">Rp {{ number_format($adjustment, 0, ',', '.') }}</span>
                        @endif
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Status</small>
                        @if(abs($adjustment) < 1)
                            <span class="badge bg-success">Match</span>
                        @else
                            <span class="badge bg-warning text-dark">Perlu Adjustment</span>
                        @endif
                    </div>
                </div>
            </div>
            <p class="text-muted small mb-0 mt-2"><i class="ti ti-info-circle me-1"></i>Total Deposit (Nett) = Total Deposit Bruto dikurangi 11% biaya layanan. Total Cost = Cost Pesan + Cost Add-on (langganan mobile agent dll). Selisih positif = deposit lebih besar; negatif = cost melebihi deposit (perlu dicek: saldo awal, adjustment, refund).</p>
        </div>
    </div>

    <!-- Deposit Client -->
    <div class="card mb-4 border-2 border-success">
        <div class="card-header bg-success text-white py-2 d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="ti ti-wallet me-2"></i>Deposit Client</h5>
            <span class="fw-bold fs-5">Total: Rp {{ number_format($totalDeposit, 0, ',', '.') }}</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Order ID</th>
                            <th>Tanggal</th>
                            <th>Channel</th>
                            <th class="text-end">Amount (Bruto)</th>
                            <th class="text-end">Layanan 11%</th>
                            <th class="text-end">Amount (Nett)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($deposits as $i => $d)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td class="font-monospace small">{{ $d->order_id ?? '-' }}</td>
                            <td>{{ $d->paid_at?->format('d/m/Y H:i') ?? $d->created_at?->format('d/m/Y H:i') ?? '-' }}</td>
                            <td>{{ $d->payment_channel ?? '-' }}</td>
                            <td class="text-end">Rp {{ number_format($d->amount, 0, ',', '.') }}</td>
                            <td class="text-end text-danger">-Rp {{ number_format($d->amount * 0.11, 0, ',', '.') }}</td>
                            <td class="text-end fw-semibold text-success">Rp {{ number_format($d->amount * 0.89, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">Belum ada deposit</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Filter -->
    <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">Status</label>
                    <select class="form-select" name="status">
                        <option value="">Semua</option>
                        @foreach($statuses as $st)
                        <option value="{{ $st }}">{{ ucfirst($st) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Message Type</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">
                    <label class="form-label">Nomor Tujuan</label>
                    <input type="text" class="form-control" name="search_to_number" placeholder="Cari nomor...">
                </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>
    </div>

    <!-- Legenda Audit -->
    <div class="mb-3 d-flex flex-wrap gap-3">
        <span class="badge bg-success">🟢 Normal</span>
        <span class="badge bg-warning text-dark">🟡 Provider cost kosong</span>
        <span class="badge bg-danger">🔴 Mismatch (selisih negatif)</span>
    </div>

    <!-- Tabel Detail Transaksi -->
    <div class="card">
        <div class="card-header border-bottom">
            <h5 class="mb-0"><i class="ti ti-list-details text-primary me-2"></i>Detail Transaksi Pesan</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-striped" id="detailTable">
                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Tanggal</th>
                            <th>Message ID</th>
                            <th>Nomor Tujuan</th>
                            <th>Message Type</th>
                            <th>Status</th>
                            <th class="text-end">Provider Cost</th>
                            <th class="text-end">Harga Client</th>
                            <th class="text-end">Saldo Terpotong</th>
                            <th class="text-end">Net Profit</th>
                            <th class="text-end">Selisih</th>
                            <th class="text-center">Keterangan</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var clientId = {{ $client->id }};
    var summaryUrl = "{{ route('admin.clients.message-report.summary', $client->id) }}";
    var dataUrl = "{{ route('admin.clients.message-report.data', $client->id) }}";

    function formatCurrency(value) {
        if (value === null || value === undefined || value === '') return '-';
        var num = typeof value === 'string' ? parseFloat(String(value).replace(/[^0-9.-]/g, '')) : value;
        if (isNaN(num)) return '-';
        return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(num);
    }

    var detailTable = $('#detailTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: dataUrl,
            data: function(d) {
                d.date_from = $('input[name="date_from"]').val();
                d.date_to = $('input[name="date_to"]').val();
                d.status = $('select[name="status"]').val();
                d.category = $('select[name="category"]').val();
                d.search_to_number = $('input[name="search_to_number"]').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center' },
            { data: 'created_at', name: 'messages.created_at', className: 'text-nowrap' },
            { data: 'uuid', name: 'messages.uuid', orderable: false, render: function(data) { return data ? '<span class="small font-monospace">' + (data.length > 10 ? data.substring(0, 10) + '…' : data) + '</span>' : '-'; } },
            { data: 'to_number', name: 'to_number', orderable: false, defaultContent: '-', className: 'font-monospace' },
            { data: 'category', name: 'messages.category', className: 'text-nowrap' },
            { data: 'status', name: 'messages.status' },
            { data: 'provider_cost', name: 'provider_cost', className: 'text-end' },
            { data: 'price_to_client', name: 'price_to_client', className: 'text-end' },
            { data: 'balance_deducted', name: 'balance_deducted', className: 'text-end' },
            { data: 'net_profit', name: 'net_profit', className: 'text-end' },
            { data: 'row_difference', name: 'row_difference', className: 'text-end' },
            { data: 'keterangan', name: 'keterangan', orderable: false, searchable: false, className: 'text-center' },
            { data: 'row_class', name: 'row_class', visible: false }
        ],
        order: [[1, 'desc']],
        createdRow: function(row, data) {
            if (data.row_class) $(row).addClass(data.row_class);
        },
        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: 25,
        lengthMenu: [10, 25, 50, 100],
        language: {
            search: "",
            searchPlaceholder: "Cari...",
            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: summaryUrl,
            data: {
                date_from: $('input[name="date_from"]').val(),
                date_to: $('input[name="date_to"]').val(),
                status: $('select[name="status"]').val(),
                category: $('select[name="category"]').val()
            },
            success: function(response) {
                if (response.success) {
                    var s = response.data.summary;
                    $('#sumTotalMessages').text(new Intl.NumberFormat('id-ID').format(s.total_messages));
                    $('#sumTotalSuccess').text(new Intl.NumberFormat('id-ID').format(s.total_success));
                    $('#sumTotalFailed').text(new Intl.NumberFormat('id-ID').format(s.total_failed));
                    $('#sumProviderCost').text(formatCurrency(s.total_provider_cost));
                    $('#sumBalanceDeducted').text(formatCurrency(s.total_balance_deducted));
                    $('#sumNetProfit').text(formatCurrency(s.total_net_profit)).removeClass('text-success text-danger').addClass(s.total_net_profit >= 0 ? 'text-success' : 'text-danger');
                    $('#sumDifference').text(formatCurrency(s.difference)).removeClass('text-success text-danger').addClass(s.difference >= 0 ? 'text-success' : 'text-danger');

                    var warnings = response.data.warnings || [];
                    var box = $('#warningsBox');
                    var list = $('#warningsList');
                    list.empty();
                    if (warnings.length) {
                        warnings.forEach(function(w) { list.append('<li>' + w + '</li>'); });
                        box.removeClass('d-none');
                    } else {
                        box.addClass('d-none');
                    }
                }
            }
        });
    }

    $('#filterForm').on('submit', function(e) { e.preventDefault(); detailTable.ajax.reload(); loadSummary(); });
    $('#filterForm').on('change', 'select, input', function() { detailTable.ajax.reload(); loadSummary(); });
    $('#resetFilter').on('click', function() {
        $('#filterForm')[0].reset();
        $('input[name="date_from"]').val('{{ now()->startOfMonth()->toDateString() }}');
        $('input[name="date_to"]').val('{{ now()->toDateString() }}');
        detailTable.ajax.reload();
        loadSummary();
    });

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