<section class="activities-table-shell overflow-x-auto">
    @php
        $submissionStatusStyles = [
            'completed' => 'bg-emerald-100 text-emerald-700',
            'in progress' => 'bg-amber-100 text-amber-700',
            'pending' => 'bg-blue-100 text-blue-700',
        ];
    @endphp

    <table class="table mb-0 w-full" id="activitiesTable" style="width: 100%;">
        <thead>
            <tr>
                <th>Submission ID</th>
                <th>Date</th>
                <th>Status</th>
                <th class="text-right">Points</th>
            </tr>
        </thead>
        <tbody>
            @forelse($submissionItems as $item)
                <tr>
                    <td class="font-semibold text-slate-800">{{ $item['submission_id'] }}</td>
                    <td>{{ Format::datetime($item['date'], 'M j, Y', '') }}</td>
                    <td>
                        <span class="inline-flex rounded-full px-3 py-1 text-sm font-semibold {{ $submissionStatusStyles[$item['status']] ?? 'bg-slate-100 text-slate-700' }}">
                            {{ \Illuminate\Support\Str::title($item['status']) }}
                        </span>
                    </td>
                    <td class="text-right font-semibold text-slate-800">{{ Format::amount($item['points']) }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="py-8 text-center text-slate-500">No submissions found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</section>

@section('js')
    @parent
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $('#activitiesDownload').on('click', function () {
                var rows = activitiesTable.rows({ search: 'applied' }).nodes().toArray();
                var csvRows = [
                    ['Submission ID', 'Date', 'Status', 'Points']
                ];

                rows.forEach(function (row) {
                    var $cells = $(row).find('td');
                    csvRows.push([
                        $cells.eq(0).text().trim(),
                        $cells.eq(1).text().trim(),
                        $cells.eq(2).text().trim(),
                        $cells.eq(3).text().trim()
                    ]);
                });

                var csvContent = csvRows.map(function (columns) {
                    return columns.map(function (value) {
                        return '"' + String(value).replace(/"/g, '""') + '"';
                    }).join(',');
                }).join('\n');

                var blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                var url = window.URL.createObjectURL(blob);
                var link = document.createElement('a');
                link.href = url;
                link.download = 'activities.csv';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            });
        });
    </script>
@endsection
