@extends('layouts.theme1')

@section('title', 'Sessions Multiplayer')

@section('content')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h4 class="card-title mb-0">Liste des sessions multiplayer</h4>
                </div>
                <div class="card-body">
                    <h6 class="card-subtitle mb-3">
                        Voici les sessions en cours ou créées via Firestore
                    </h6>

                    <div class="table-responsive">
                        <table id="sessions-table" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Session</th>
                                    <th>Créateur</th>
                                    <th>Date de création</th>
                                    <th>Démarré</th>
                                    <th>Code Examen</th>
                                    <th>Nombre de questions</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#sessions-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("firebase.multijoueurs.index") }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'creator', name: 'creator', defaultContent: '-' },
                    { data: 'createdAt', name: 'createdAt', defaultContent: '-' },
                    { data: 'started', name: 'started', defaultContent: '-' },
                    { data: 'examen.code', name: 'examen.code', defaultContent: '-' },
                    { 
                        data: 'examen.questions', 
                        name: 'examen.questions', 
                        render: function(data, type, row) {
                            return Array.isArray(data) ? data.length : 0;
                        },
                        defaultContent: '0'
                    },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false 
                    },
                ]
            });
        });
    </script>
@endsection