@extends('layouts.site')

@section('meta_title', 'Submissions')

@section('content_header')
@include('partials._components._heading', ['heading' => 'Submissions'])
@endsection

@section('content')
<section class="site-main-section">
    <div class="site-container">
        <div class="account-shell mx-auto max-w-6xl">
            <div class="account-shell__aside min-w-0">
                @include('partials._components._user-menu')
            </div>

            <div class="account-shell__content min-w-0">
                <header>
                    <h1 class="text-3xl font-bold text-slate-900">{{ $submissionPageTitle }}</h1>
                    <p class="mt-2 text-xl text-slate-500">Track your submissions, statuses, and awarded points.</p>
                </header>

                <section class="mt-8 grid gap-5 lg:grid-cols-3">
                    @foreach($submissionSummaryCards as $card)
                    <article class="rounded-2xl border border-slate-200 bg-white px-6 py-7 shadow-[0_2px_10px_rgba(15,23,42,0.08)]">
                        <div class="flex items-center gap-4">
                            <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-[12px] border-2 border-primary bg-white text-[1.6rem] text-primary">
                                <i class="fa-solid {{ $card['icon'] }}" aria-hidden="true"></i>
                            </span>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold uppercase tracking-wide text-slate-500">{{ $card['label'] }}</p>
                                <p class="mt-2 text-xl font-semibold leading-none text-slate-900">{{ $card['value'] }}</p>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </section>

                <section class="activities-toolbar">
                    <label class="activities-search" for="activitiesSearch">
                        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                        <input
                        id="activitiesSearch"
                        type="search"
                        placeholder="Search by submission ID, status, or points"
                        >
                    </label>

                    <select id="activitiesLength" class="activities-select" aria-label="Show records" data-native-select>
                        <option value="10">Show 10</option>
                        <option value="25">Show 25</option>
                        <option value="50">Show 50</option>
                    </select>

                    <button type="button" id="activitiesDownload" class="activities-download">
                        <i class="fa-solid fa-download" aria-hidden="true"></i>
                        Download
                        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
                    </button>
                </section>

                @include('activity.type.partials.submissions-table')
            </div>
        </div>
    </div>
</section>
@endsection

@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 ($) {
        var activitiesTable = $('#activitiesTable').DataTable({
            paging: true,
            pageLength: 10,
            ordering: false,
            info: false,
            searching: true,
            lengthChange: false,
            autoWidth: false,
            responsive: false,
            dom: 'tp'
        });

        $('#activitiesTable_filter').hide();

        var $wrapper = $('#activitiesTable_wrapper');
        var $paginate = $wrapper.find('.dataTables_paginate');
        var $footer = $('<div class="activities-table-footer"></div>');
        var $summary = $('<div class="activities-table-footer__summary"></div>');

        $paginate.before($summary);
        $paginate.addClass('activities-table-footer__pagination');
        $paginate.add($summary).wrapAll($footer);

        $('#activitiesSearch').on('input', function () {
            activitiesTable.search(this.value).draw();
        });

        $('#activitiesLength').on('change', function () {
            activitiesTable.page.len(parseInt(this.value, 10)).draw();
        });

        function updateActivitiesSummary() {
            var info = activitiesTable.page.info();
            $summary.text('Showing ' + info.recordsDisplay + ' of ' + info.recordsTotal + ' submissions');
        }

        activitiesTable.on('draw', updateActivitiesSummary);
        activitiesTable.columns.adjust().draw(false);
        updateActivitiesSummary();
    });
</script>
@endsection
