@extends('root')
@section('title', 'Detail Pendapatan: ' . $client->name)

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Detail Pendapatan: ' . $client->name,
        'links' => [
            ['label' => 'Reports', 'url' => '#'],
            ['label' => 'Pendapatan', 'url' => route('admin.reports.revenue.index')],
        ],
        'current' => $client->name
    ])

    <!-- Summary Cards -->
    <div class="row mb-4">
        <!-- Message Metrics -->
        <div class="col-md-3 mb-3">
            <div class="card bg-primary text-white h-100">
                <div class="card-body p-3">
                    <h6 class="text-white-50 mb-1">Message Revenue</h6>
                    <h3 class="mb-0 text-white" id="msgRevenue">{{ number_format($summary['message_revenue'], 0, ',', '.') }}</h3>
                    <small class="text-white-50">Total Selling Price</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-danger text-white h-100">
                <div class="card-body p-3">
                    <h6 class="text-white-50 mb-1">Provider Cost</h6>
                    <h3 class="mb-0 text-white" id="msgCost">{{ number_format($summary['message_cost'], 0, ',', '.') }}</h3>
                    <small class="text-white-50">Total Meta Cost</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-success text-white h-100">
                <div class="card-body p-3">
                    <h6 class="text-white-50 mb-1">Message Profit</h6>
                    <h3 class="mb-0 text-white" id="msgProfit">{{ number_format($summary['message_profit'], 0, ',', '.') }}</h3>
                    <small class="text-white-50">Net Profit</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-info text-white h-100">
                <div class="card-body p-3">
                    <h6 class="text-white-50 mb-1">Total Messages</h6>
                    <h3 class="mb-0 text-white" id="totalMessages">{{ number_format($summary['total_messages'], 0, ',', '.') }}</h3>
                    <small class="text-white-50">Volume</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form id="filterForm" class="row g-3">
                <input type="hidden" name="client_id" value="{{ $client->id }}">
                <div class="col-md-3">
                    <label class="form-label">Dari Tanggal</label>
                    <input type="date" class="form-control" name="date_from" value="{{ request('date_from', now()->startOfMonth()->toDateString()) }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" name="date_to" value="{{ request('date_to', now()->toDateString()) }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">WABA Number</label>
                    <input type="text" class="form-control" name="waba_number" placeholder="628xxx">
                </div>
                <!-- Add other filters if needed -->
                
                <div class="col-md-3 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>
                    <a href="{{ route('admin.reports.revenue.index') }}" class="btn btn-outline-dark">
                         <i class="ti ti-arrow-left"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card">
        <div class="card-header border-bottom">
            <h5 class="mb-0"><i class="ti ti-list text-primary me-2"></i>Riwayat Transaksi Harian</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="detailTable">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>WABA Number</th>

                            <th>Type</th>
                            <th class="text-end">Total Messages</th>
                            <th class="text-end">Revenue</th>
                            <th class="text-end">Cost</th>
                            <th class="text-end">Profit</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        var table = $('#detailTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.reports.revenue.client.data', $client->id) }}",
                data: function(d) {
                    d.date_from = $('input[name="date_from"]').val();
                    d.date_to = $('input[name="date_to"]').val();
                    d.waba_number = $('input[name="waba_number"]').val();
                }
            },
            columns: [
                { data: 'date', name: 'date' },
                { data: 'waba_number', name: 'waba_pools.phone_number', defaultContent: '-' },

                { 
                    data: 'category', 
                    name: 'messages.category',
                    render: function(data) {
                        return renderBadge(data);
                    }
                },
                { data: 'total_messages', name: 'total_messages', className: 'text-end' },
                { 
                    data: 'total_revenue', 
                    name: 'total_revenue', 
                    className: 'text-end',
                    render: function(data) { return formatCurrency(data); }
                },
                { 
                    data: 'total_cost', 
                    name: 'total_cost', 
                    className: 'text-end',
                    render: function(data) { return formatCurrency(data); }
                },
                { 
                    data: null, 
                    className: 'text-end tex-bold',
                    render: function(data, type, row) {
                        var profit = parseFloat(row.total_revenue) - parseFloat(row.total_cost);
                        var color = profit >= 0 ? 'text-success' : 'text-danger';
                        return `<span class="${color} fw-bold">${formatCurrency(profit)}</span>`;
                    }
                }
            ],
            order: [[0, 'desc']]
        });

        // Helper: Badge Renderer (Copied/Shared Logic)
        function renderBadge(value) {
             if(!value) return '-';
             let color = 'secondary';

             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-${color}">${value}</span>`;
        }

        // Helper: Format Currency
        function formatCurrency(value) {
            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(value);
        }

        // Helper: Update Summary
        function updateSummary() {
            $.ajax({
                url: "{{ route('admin.reports.revenue.summary') }}",
                data: $('#filterForm').serialize(),
                success: function(response) {
                    if (response.success) {
                        var d = response.data;
                        $('#msgRevenue').text(formatCurrency(d.message_revenue));
                        $('#msgCost').text(formatCurrency(d.message_cost));
                        $('#msgProfit').text(formatCurrency(d.message_profit));
                        $('#totalMessages').text(new Intl.NumberFormat('id-ID').format(d.total_messages));
                    }
                }
            });
        }

        // Filter Submit
        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            table.ajax.reload();
            updateSummary();
        });

        // Reset Filter
        $('#resetFilter').on('click', function() {
            $('input[name="date_from"]').val('{{ now()->startOfMonth()->toDateString() }}');
            $('input[name="date_to"]').val('{{ now()->toDateString() }}');
            $('input[name="waba_number"]').val('');
            table.ajax.reload();
            updateSummary();
        });
    });
</script>
@endpush