@extends('root')
@section('title', 'Message Report & Cost Analysis')

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

    <!-- Ringkasan Statistik -->
    <div class="row mb-4" id="summaryCards">
        <div class="col-md-2 mb-3">
            <div class="card h-100 border-start border-4 border-success shadow-sm">
                <div class="card-body py-3">
                    <h6 class="text-muted text-uppercase fw-semibold mb-1 small">Pesan Sukses</h6>
                    <h4 class="mb-0 fw-bold text-success" id="totalSuccess">-</h4>
                </div>
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <div class="card h-100 border-start border-4 border-danger shadow-sm">
                <div class="card-body py-3">
                    <h6 class="text-muted text-uppercase fw-semibold mb-1 small">Pesan Gagal</h6>
                    <h4 class="mb-0 fw-bold text-danger" id="totalFailed">-</h4>
                </div>
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <div class="card h-100 border-start border-4 border-warning shadow-sm">
                <div class="card-body py-3">
                    <h6 class="text-muted text-uppercase fw-semibold mb-1 small">Pesan Pending</h6>
                    <h4 class="mb-0 fw-bold text-warning" id="totalPending">-</h4>
                </div>
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <div class="card h-100 border-start border-4 border-danger shadow-sm">
                <div class="card-body py-3">
                    <h6 class="text-muted text-uppercase fw-semibold mb-1 small">Total Cost Provider</h6>
                    <h4 class="mb-0 fw-bold text-danger" id="totalProviderCost">-</h4>
                </div>
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <div class="card h-100 border-start border-4 border-primary shadow-sm">
                <div class="card-body py-3">
                    <h6 class="text-muted text-uppercase fw-semibold mb-1 small">Saldo Terpotong</h6>
                    <h4 class="mb-0 fw-bold text-primary" id="totalBalanceDeducted">-</h4>
                </div>
            </div>
        </div>
        <div class="col-md-2 mb-3">
            <div class="card h-100 border-start border-4 border-info shadow-sm">
                <div class="card-body py-3">
                    <h6 class="text-muted text-uppercase fw-semibold mb-1 small">Selisih</h6>
                    <h4 class="mb-0 fw-bold" id="totalDifference">-</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Analysis Box -->
    <div class="card mb-4 border-2 border-dark">
        <div class="card-header bg-dark text-white py-2">
            <h5 class="mb-0"><i class="ti ti-chart-pie me-2"></i>Summary Analysis</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Revenue</small>
                        <span class="fw-bold fs-5 text-success" id="summaryRevenue">-</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Provider Cost</small>
                        <span class="fw-bold fs-5 text-danger" id="summaryProviderCost">-</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Net Profit</small>
                        <span class="fw-bold fs-5 text-primary" id="summaryNetProfit">-</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="p-3 bg-light rounded">
                        <small class="text-muted d-block">Total Selisih</small>
                        <span class="fw-bold fs-5" id="summaryDifference">-</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 ketidaksesuaian data:</strong>
                    <ul id="warningsList" class="mb-0 mt-2"></ul>
                </div>
            </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">Client</label>
                    <select class="form-select" name="client_id">
                        <option value="">Semua Client</option>
                        @foreach($clients as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </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">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 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>

    <!-- Tabel Rekap Per Client -->
    <div class="card">
        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="ti ti-users-group text-primary me-2"></i>Rekap Per Client</h5>
            <button type="button" class="btn btn-info btn-sm" id="btnAdjustmentMassal">
                <i class="ti ti-adjustments me-1"></i> Adjustment Massal
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="reportTable">
                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Client Name</th>
                            <th class="text-end">Total Deposit (Nett)</th>
                            <th class="text-end">Cost Message</th>
                            <th class="text-end">Cost Add-ons</th>
                            <th class="text-end">Saldo Sekarang</th>
                            <th class="text-end">Total Messages</th>
                            <th class="text-end">Success</th>
                            <th class="text-end">Failed</th>
                            <th class="text-end">Provider Cost</th>
                            <th class="text-end">Client Charge</th>
                            <th class="text-end">Net Profit</th>
                            <th class="text-end">Audit Deposit vs Cost</th>
                            <th class="text-end">Adjustment</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Adjustment Massal -->
<div class="modal fade" id="modalAdjustmentMassal" tabindex="-1" aria-labelledby="modalAdjustmentMassalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalAdjustmentMassalLabel"><i class="ti ti-adjustments me-2"></i>Adjustment Massal - Deposit vs Cost</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Step: Preview / Load -->
                <div id="adjustmentStepLoad" class="text-center py-4">
                    <div class="spinner-border text-info" role="status"><span class="visually-hidden">Loading...</span></div>
                    <p class="mt-2 mb-0 text-muted">Memuat daftar client dengan adjustment...</p>
                </div>

                <!-- Step: Preview List -->
                <div id="adjustmentStepPreview" class="d-none">
                    <p class="text-muted small">Client dengan nilai adjustment tidak sama dengan 0 (melebihi toleransi):</p>
                    <div class="table-responsive mb-3" style="max-height: 280px;">
                        <table class="table table-sm table-hover mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>No</th>
                                    <th>Client</th>
                                    <th class="text-end">Saldo Sekarang</th>
                                    <th class="text-end">Selisih D-C</th>
                                    <th class="text-end">Adjustment</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="adjustmentPreviewBody"></tbody>
                        </table>
                    </div>
                    <div id="adjustmentEmptyState" class="text-center py-4 text-muted d-none">
                        <i class="ti ti-circle-check ti-lg mb-2"></i>
                        <p class="mb-0">Tidak ada client yang perlu adjustment saat ini.</p>
                    </div>
                </div>

                <!-- Step: Executing -->
                <div id="adjustmentStepExecute" class="d-none">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between small mb-1">
                            <span>Progress</span>
                            <span id="adjustmentProgressText">0 / 0</span>
                        </div>
                        <div class="progress" style="height: 22px;">
                            <div id="adjustmentProgressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%">0%</div>
                        </div>
                    </div>
                    <div class="table-responsive" style="max-height: 220px;">
                        <table class="table table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Client</th>
                                    <th class="text-end">Adjustment</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody id="adjustmentExecuteBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary d-none" id="btnAdjustmentSubmit">
                    <i class="ti ti-send me-1"></i> Jalankan Adjustment
                </button>
                <button type="button" class="btn btn-secondary d-none" id="btnAdjustmentDone" disabled>
                    <i class="ti ti-check me-1"></i> Selesai
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    function formatCurrency(value) {
        if (value === null || value === undefined || value === '') return '-';
        var num = typeof value === 'string' ? parseFloat(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 reportTable = $('#reportTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.clients.message-report-cost.data') }}",
            data: function(d) {
                d.date_from = $('input[name="date_from"]').val();
                d.date_to = $('input[name="date_to"]').val();
                d.client_id = $('select[name="client_id"]').val();
                d.status = $('select[name="status"]').val();
                d.category = $('select[name="category"]').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center' },
            { data: 'client_name', name: 'client_name', className: 'fw-semibold' },
            { data: 'total_deposit', name: 'total_deposit', className: 'text-end' },
            { data: 'cost_message', name: 'cost_message', className: 'text-end' },
            { data: 'cost_addon', name: 'cost_addon', className: 'text-end' },
            { data: 'saldo_sekarang', name: 'saldo_sekarang', className: 'text-end' },
            { data: 'total_messages', name: 'total_messages', className: 'text-end' },
            { data: 'total_success', name: 'total_success', className: 'text-end' },
            { data: 'total_failed', name: 'total_failed', className: 'text-end' },
            { data: 'total_provider_cost', name: 'total_provider_cost', className: 'text-end' },
            { data: 'total_client_charge', name: 'total_client_charge', className: 'text-end' },
            { data: 'net_profit', name: 'net_profit', className: 'text-end' },
            { data: 'selisih_deposit_cost', name: 'selisih_deposit_cost', className: 'text-end' },
            { data: 'adjustment', name: 'adjustment', className: 'text-end' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' }
        ],
        order: [[3, '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: 25,
        lengthMenu: [10, 25, 50, 100],
        language: {
            search: "",
            searchPlaceholder: "Cari client...",
            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.clients.message-report-cost.summary') }}",
            data: {
                date_from: $('input[name="date_from"]').val(),
                date_to: $('input[name="date_to"]').val(),
                client_id: $('select[name="client_id"]').val(),
                status: $('select[name="status"]').val(),
                category: $('select[name="category"]').val()
            },
            success: function(response) {
                if (response.success) {
                    var s = response.data.summary;
                    $('#totalSuccess').text(new Intl.NumberFormat('id-ID').format(s.total_success));
                    $('#totalFailed').text(new Intl.NumberFormat('id-ID').format(s.total_failed));
                    $('#totalPending').text(new Intl.NumberFormat('id-ID').format(s.total_pending));
                    $('#totalProviderCost').text(formatCurrency(s.total_provider_cost));
                    $('#totalBalanceDeducted').text(formatCurrency(s.total_balance_deducted));
                    var diffEl = $('#totalDifference');
                    diffEl.text(formatCurrency(s.difference));
                    diffEl.removeClass('text-success text-danger text-info').addClass(s.difference >= 0 ? 'text-success' : 'text-danger');

                    $('#summaryRevenue').text(formatCurrency(s.total_revenue));
                    $('#summaryProviderCost').text(formatCurrency(s.total_provider_cost));
                    $('#summaryNetProfit').text(formatCurrency(s.total_net_profit));
                    $('#summaryDifference').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();
        reportTable.ajax.reload();
        loadSummary();
    });

    $('#filterForm').on('change', 'select, input', function() {
        reportTable.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() }}');
        reportTable.ajax.reload();
        loadSummary();
    });

    loadSummary();

    // --- Adjustment Massal ---
    var adjustmentItems = [];
    var adjustmentModal = null;

    $('#btnAdjustmentMassal').on('click', function() {
        adjustmentItems = [];
        $('#adjustmentStepLoad').removeClass('d-none');
        $('#adjustmentStepPreview').addClass('d-none');
        $('#adjustmentStepExecute').addClass('d-none');
        $('#btnAdjustmentSubmit').addClass('d-none');
        $('#btnAdjustmentDone').addClass('d-none');
        if (!adjustmentModal) {
            adjustmentModal = new bootstrap.Modal(document.getElementById('modalAdjustmentMassal'));
        }
        adjustmentModal.show();

        $.ajax({
            url: "{{ route('admin.clients.message-report-cost.adjustment-preview') }}",
            success: function(res) {
                $('#adjustmentStepLoad').addClass('d-none');
                $('#adjustmentStepPreview').removeClass('d-none');

                if (!res.success || !res.data || !res.data.items) {
                    $('#adjustmentPreviewBody').empty();
                    $('#adjustmentEmptyState').removeClass('d-none');
                    return;
                }
                adjustmentItems = res.data.items;
                var tbody = $('#adjustmentPreviewBody');
                tbody.empty();
                if (adjustmentItems.length === 0) {
                    $('#adjustmentEmptyState').removeClass('d-none');
                } else {
                    $('#adjustmentEmptyState').addClass('d-none');
                    adjustmentItems.forEach(function(item, i) {
                        var actLabel = item.action === 'credit' ? 'Credit' : 'Debit';
                        var actClass = item.action === 'credit' ? 'text-success' : 'text-danger';
                        tbody.append(
                            '<tr>' +
                            '<td>' + (i + 1) + '</td>' +
                            '<td class="fw-semibold">' + escapeHtml(item.client_name) + '</td>' +
                            '<td class="text-end">' + formatCurrency(item.saldo_sekarang) + '</td>' +
                            '<td class="text-end">' + formatCurrency(item.selisih_deposit_cost) + '</td>' +
                            '<td class="text-end ' + (item.adjustment >= 0 ? 'text-info' : 'text-danger') + '">' + formatCurrency(item.adjustment) + '</td>' +
                            '<td class="text-center"><span class="badge bg-' + (item.action === 'credit' ? 'success' : 'danger') + '">' + actLabel + ' ' + formatCurrency(item.amount) + '</span></td>' +
                            '</tr>'
                        );
                    });
                    $('#btnAdjustmentSubmit').removeClass('d-none');
                }
            },
            error: function(xhr) {
                $('#adjustmentStepLoad').addClass('d-none');
                $('#adjustmentStepPreview').removeClass('d-none');
                $('#adjustmentEmptyState').removeClass('d-none');
                $('#adjustmentPreviewBody').empty();
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    $('#adjustmentEmptyState p').text('Error: ' + xhr.responseJSON.message);
                }
            }
        });
    });

    function escapeHtml(s) { return $('<div>').text(s || '').html(); }

    $('#btnAdjustmentSubmit').on('click', function() {
        if (adjustmentItems.length === 0) return;
        $('#btnAdjustmentSubmit').addClass('d-none');
        $('#adjustmentStepPreview').addClass('d-none');
        $('#adjustmentStepExecute').removeClass('d-none');
        $('#btnAdjustmentDone').removeClass('d-none');

        var executeBody = $('#adjustmentExecuteBody');
        executeBody.empty();
        adjustmentItems.forEach(function(item) {
            executeBody.append(
                '<tr data-client-id="' + item.client_id + '">' +
                '<td class="client-name">' + escapeHtml(item.client_name) + '</td>' +
                '<td class="text-end">' + (item.action === 'credit' ? '+' : '-') + formatCurrency(item.amount) + '</td>' +
                '<td class="text-center status-cell"><span class="badge bg-secondary">Menunggu</span></td>' +
                '</tr>'
            );
        });

        var total = adjustmentItems.length;
        var done = 0;
        var idx = 0;

        function runNext() {
            if (idx >= total) {
                $('#adjustmentProgressBar').removeClass('progress-bar-animated').addClass('bg-success');
                $('#btnAdjustmentDone').prop('disabled', false);
                reportTable.ajax.reload();
                loadSummary();
                return;
            }
            var item = adjustmentItems[idx];
            var row = executeBody.find('tr[data-client-id="' + item.client_id + '"]');
            row.find('.status-cell').html('<span class="badge bg-warning text-dark">Memproses...</span>');

            $.ajax({
                url: "{{ route('admin.clients.message-report-cost.adjustment-execute') }}",
                method: 'POST',
                data: {
                    client_id: item.client_id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    done++;
                    var pct = Math.round((done / total) * 100);
                    $('#adjustmentProgressBar').css('width', pct + '%').text(pct + '%');
                    $('#adjustmentProgressText').text(done + ' / ' + total);
                    if (res.data && res.data.skipped) {
                        row.find('.status-cell').html('<span class="badge bg-secondary">Dilewati</span>');
                    } else {
                        row.find('.status-cell').html('<span class="badge bg-success">Sukses</span>');
                    }
                    idx++;
                    runNext();
                },
                error: function(xhr) {
                    done++;
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Gagal';
                    row.find('.status-cell').html('<span class="badge bg-danger" title="' + escapeHtml(msg) + '">Gagal</span>');
                    var pct = Math.round((done / total) * 100);
                    $('#adjustmentProgressBar').css('width', pct + '%').text(pct + '%');
                    $('#adjustmentProgressText').text(done + ' / ' + total);
                    idx++;
                    runNext();
                }
            });
        }
        runNext();
    });
});
</script>
@endpush