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

@push('styles')
<style>
    .summary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        color: white;
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    .summary-card.success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .summary-card.warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .summary-card.info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .summary-card .icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 48px;
        opacity: 0.3;
    }
    .summary-card h3 { font-size: 28px; margin-bottom: 5px; }
    .summary-card p { margin: 0; opacity: 0.9; }
    
    .stat-badge { font-size: 12px; padding: 4px 8px; }
    .chart-container { min-height: 250px; }
    
    .filter-row { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
    .table-responsive { max-height: 400px; }
    
    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }
    .status-sent { background: #e3f2fd; color: #1976d2; }
    .status-delivered { background: #e8f5e9; color: #388e3c; }
    .status-read { background: #c8e6c9; color: #2e7d32; }
    .status-failed { background: #ffebee; color: #c62828; }
    .status-queued { background: #fff3e0; color: #ef6c00; }
    
    .client-row { cursor: pointer; transition: background 0.2s; }
    .client-row:hover { background: #f0f7ff !important; }
</style>
@endpush

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

    {{-- Filters --}}
    <div class="filter-row">
        <form id="filter-form" class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label small">Dari Tanggal</label>
                <input type="date" name="date_from" id="date_from" class="form-control form-control-sm" 
                    value="{{ now()->startOfMonth()->toDateString() }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Sampai Tanggal</label>
                <input type="date" name="date_to" id="date_to" class="form-control form-control-sm" 
                    value="{{ now()->toDateString() }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small">Client</label>
                <select name="client_id" id="client_id" class="form-select form-select-sm">
                    <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 small">Kategori</label>
                <select name="category" id="category" class="form-select form-select-sm">
                    <option value="">Semua</option>
                    <option value="marketing">Marketing</option>
                    <option value="utility">Utility</option>
                    <option value="otp">OTP</option>
                    <option value="service">Service</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Status</label>
                <select name="status" id="status" class="form-select form-select-sm">
                    <option value="">Semua</option>
                    <option value="sent">Sent</option>
                    <option value="delivered">Delivered</option>
                    <option value="read">Read</option>
                    <option value="failed">Failed</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100">
                    <i class="ti ti-filter me-1"></i>Filter
                </button>
            </div>
        </form>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-3 mb-4" id="summary-cards">
        <div class="col-md-3">
            <div class="summary-card">
                <i class="ti ti-send icon"></i>
                <h3 id="total-messages" class="text-white">-</h3>
                <p>Total Pesan</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="summary-card success">
                <i class="ti ti-check icon"></i>
                <h3 id="success-rate" class="text-white">-</h3>
                <p>Success Rate</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="summary-card warning">
                <i class="ti ti-x icon"></i>
                <h3 id="failed-count" class="text-white">-</h3>
                <p>Gagal</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="summary-card info">
                <i class="ti ti-currency-dollar icon"></i>
                <h3 id="total-cost" class="text-white">-</h3>
                <p>Total Transaksi</p>
            </div>
        </div>
    </div>

    {{-- Charts & Per-Client Summary --}}
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-chart-line me-1"></i>Trend Harian</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="dailyTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-users me-1"></i>Rekap Per Client</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="per-client-table">
                            <thead class="table-light">
                                <tr>
                                    <th>Client</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Success</th>
                                    <th class="text-end">Failed</th>
                                    <th class="text-end">Biaya</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Statistics Row --}}
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-chart-pie me-1"></i>Status</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-template me-1"></i>Top Templates</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="top-templates-table">
                            <thead class="table-light">
                                <tr>
                                    <th>Template</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Failed</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-alert-triangle me-1"></i>Top Errors</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="top-errors-table">
                            <thead class="table-light">
                                <tr>
                                    <th>Error</th>
                                    <th class="text-end">Count</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Data Table --}}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="ti ti-list me-1"></i>Detail Pengiriman</h6>
            <a href="#" id="btn-export" class="btn btn-sm btn-outline-success">
                <i class="ti ti-download me-1"></i>Export CSV
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm table-hover" id="messages-table">
                    <thead class="table-light">
                        <tr>
                            <th>Waktu</th>
                            <th>Client</th>
                            <th>Template</th>
                            <th>Recipient</th>
                            <th>Status</th>
                            <th class="text-end">Biaya</th>
                            <th>Error</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <nav id="pagination-nav" class="mt-3"></nav>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let dailyTrendChart, statusChart;
let currentPage = 1;

$(document).ready(function() {
    loadReportData();

    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        currentPage = 1;
        loadReportData();
    });

    $('#btn-export').on('click', function(e) {
        e.preventDefault();
        exportData();
    });
});

function loadReportData() {
    const params = new URLSearchParams($('#filter-form').serialize());
    params.append('page', currentPage);

    $.ajax({
        url: '{{ route("reseller.reports.data") }}',
        data: params.toString(),
        success: function(resp) {
            updateSummary(resp.summary);
            updateCharts(resp.statistics);
            updatePerClientTable(resp.statistics.per_client || []);
            updateTopTemplates(resp.statistics.top_templates);
            updateTopErrors(resp.statistics.top_errors);
            updateDataTable(resp.data);
        },
        error: function() {
            toastr.error('Gagal memuat data laporan');
        }
    });
}

function updateSummary(summary) {
    $('#total-messages').text(summary.total_messages.toLocaleString('id-ID'));
    $('#success-rate').text(summary.success_rate + '%');
    $('#failed-count').text(summary.failed_count.toLocaleString('id-ID'));
    $('#total-cost').text('Rp ' + summary.total_cost.toLocaleString('id-ID'));
}

function updateCharts(statistics) {
    // Daily Trend Chart
    const trendData = statistics.daily_trend || [];
    const labels = trendData.map(d => d.date);
    const successData = trendData.map(d => d.success);
    const failedData = trendData.map(d => d.failed);

    if (dailyTrendChart) dailyTrendChart.destroy();
    dailyTrendChart = new Chart(document.getElementById('dailyTrendChart'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                { label: 'Success', data: successData, borderColor: '#38ef7d', fill: false },
                { label: 'Failed', data: failedData, borderColor: '#f5576c', fill: false }
            ]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });

    // Status Pie Chart
    const statusData = statistics.by_status || [];
    const statusLabels = statusData.map(d => d.status);
    const statusCounts = statusData.map(d => d.count);
    const statusColors = statusLabels.map(s => {
        const colors = { sent: '#1976d2', delivered: '#388e3c', read: '#2e7d32', failed: '#c62828', queued: '#ef6c00' };
        return colors[s] || '#999';
    });

    if (statusChart) statusChart.destroy();
    statusChart = new Chart(document.getElementById('statusChart'), {
        type: 'doughnut',
        data: {
            labels: statusLabels,
            datasets: [{ data: statusCounts, backgroundColor: statusColors }]
        },
        options: { responsive: true, maintainAspectRatio: false }
    });
}

function updatePerClientTable(clients) {
    const $tbody = $('#per-client-table tbody').empty();
    if (!clients.length) {
        $tbody.append('<tr><td colspan="5" class="text-center text-muted">Tidak ada data</td></tr>');
        return;
    }
    clients.forEach(function(c) {
        $tbody.append(`
            <tr class="client-row" data-client-id="${c.client_id}">
                <td><strong>${c.client_name}</strong></td>
                <td class="text-end">${c.total_messages}</td>
                <td class="text-end text-success">${c.success_count}</td>
                <td class="text-end text-danger">${c.failed_count}</td>
                <td class="text-end">Rp ${parseFloat(c.total_cost).toLocaleString('id-ID')}</td>
            </tr>
        `);
    });

    // Click to filter by client
    $('.client-row').on('click', function() {
        const clientId = $(this).data('client-id');
        $('#client_id').val(clientId);
        currentPage = 1;
        loadReportData();
    });
}

function updateTopTemplates(templates) {
    const $tbody = $('#top-templates-table tbody').empty();
    if (!templates.length) {
        $tbody.append('<tr><td colspan="3" class="text-center text-muted">Tidak ada data</td></tr>');
        return;
    }
    templates.slice(0, 5).forEach(function(t) {
        $tbody.append(`
            <tr>
                <td><code class="small">${t.template_name || '-'}</code></td>
                <td class="text-end">${t.total_sent}</td>
                <td class="text-end text-danger">${t.failed}</td>
            </tr>
        `);
    });
}

function updateTopErrors(errors) {
    const $tbody = $('#top-errors-table tbody').empty();
    if (!errors.length) {
        $tbody.append('<tr><td colspan="2" class="text-center text-muted">No errors</td></tr>');
        return;
    }
    errors.slice(0, 5).forEach(function(e) {
        $tbody.append(`
            <tr>
                <td><small class="text-danger">${(e.error_message || '-').length > 30 ? (e.error_message || '-').substring(0, 30) + '...' : (e.error_message || '-')}</small></td>
                <td class="text-end">${e.count}</td>
            </tr>
        `);
    });
}

function updateDataTable(data) {
    const $tbody = $('#messages-table tbody').empty();
    const items = data.data || [];
    
    if (!items.length) {
        $tbody.append('<tr><td colspan="7" class="text-center text-muted">Tidak ada data</td></tr>');
        return;
    }

    items.forEach(function(m) {
        const payload = typeof m.payload === 'string' ? JSON.parse(m.payload) : m.payload;
        const templateName = payload?.template_name || '-';
        const recipient = payload?.to || '-';
        const statusClass = 'status-' + m.status;
        
        $tbody.append(`
            <tr>
                <td><small>${formatDate(m.sent_at || m.created_at)}</small></td>
                <td>${m.client_name}</td>
                <td><code class="small">${templateName}</code></td>
                <td>${recipient}</td>
                <td><span class="status-badge ${statusClass}">${m.status}</span></td>
                <td class="text-end">Rp ${(m.status === 'failed' ? 0 : parseFloat(m.cost)).toLocaleString('id-ID')}</td>
                <td><small class="text-danger">${m.error_message || '-'}</small></td>
            </tr>
        `);
    });

    updatePagination(data);
}

function updatePagination(data) {
    const $nav = $('#pagination-nav').empty();
    if (data.last_page <= 1) return;

    let html = '<ul class="pagination pagination-sm justify-content-center">';
    html += `<li class="page-item ${data.current_page === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${data.current_page - 1}">«</a></li>`;
    for (let i = 1; i <= Math.min(data.last_page, 10); i++) {
        html += `<li class="page-item ${i === data.current_page ? 'active' : ''}">
            <a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
    }
    html += `<li class="page-item ${data.current_page === data.last_page ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${data.current_page + 1}">»</a></li></ul>`;
    $nav.html(html);

    $nav.find('.page-link').on('click', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page >= 1 && page <= data.last_page) {
            currentPage = page;
            loadReportData();
        }
    });
}

function formatDate(dateStr) {
    if (!dateStr) return '-';
    const d = new Date(dateStr);
    return d.toLocaleDateString('id-ID') + ' ' + d.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'});
}

function exportData() {
    const params = new URLSearchParams($('#filter-form').serialize());
    window.location.href = '{{ route("reseller.reports.export") }}?' + params.toString();
}
</script>
@endpush