@extends('layouts.layout')
    @section('content')
        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <div class="page-breadcrumb border-bottom">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-xs-12 justify-content-start d-flex align-items-center">
                        <h5 class="font-weight-medium text-uppercase mb-0">Contrôle en Temps Réel</h5>
                    </div>
                    <div class="col-lg-9 col-md-8 col-xs-12 d-flex justify-content-start justify-content-md-end align-self-center">
                        <nav aria-label="breadcrumb" class="mt-2">
                            <ol class="breadcrumb mb-0 p-0">
                                <li class="breadcrumb-item"><a href="{{route('Home')}}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Contrôle en Temps Réel</li>
                            </ol>
                        </nav>
                        <button class="btn ms-3 d-none d-md-block" style ="background-color: {{ Session::get('colors')['schoolColor1']}}; color : {{ Session::get('colors')['TextColor1']}};">
                        GestStudent v22.xx</button>
                    </div>
                </div>
            </div>
            @include('partials.StudentsCards')
            {{--  @include('partials.TeachersCards')  --}}
            {{-- @include('Classrooms.RealTimeControlContents') --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="border-bottom title-part-padding">
                            <h4 class="card-title mb-0">Etudiants probables en salle de cours</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="InDatatable" class="table table-striped table-bordered display">
                                    <thead>
                                        <tr>
                                            <th>ZK ID</th>
                                            <th>Nom et Prénom(s)</th>
                                            <th>Date / Heure</th>
                                            {{-- <th>Filière</th> --}}
                                            <th>Contact</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                         @foreach ($today_punches as $today_punch) 
                                            <tr>
                                                <th>{{ $today_punch->zk_id }}</th>
                                                <th>{{ $today_punch->nom }} {{ $today_punch->prenom }}</th>
                                                <th>{{ $today_punch->punch_date }} / {{ $today_punch->punch_hour }}</th>
                                                {{-- <th>{{ $today_punch->code_pays }} {{ $today_punch->adresse }}</th> --}}
                                                <th>{{ $today_punch->code_pays }} {{ $today_punch->adresse }}</th>
                                            </tr>
                                         @endforeach 
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>ZK ID</th>
                                            <th>Nom et Prénom(s)</th>
                                            <th>Date / Heure</th>
                                            {{-- <th>Filière</th> --}}
                                            <th>Contact</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        {{-- Authentification --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="border-bottom title-part-padding">
                            <h4 class="card-title mb-0">Authentifications</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="authentificationsDatatable" class="table table-striped table-bordered display text-center">
                                    <thead style = "font-size : 15px">
                                        <tr>
                                            <th>ZK ID</th>
                                            <th>Nom et Prénom(s)</th>
                                            <th>Date / Heure</th>
                                            <th>Mode d'authentification</th>
                                            <th>Type d'authentification</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($punches as $punch) 
                                            <tr>
                                                <th> {{ $punch->zk_id }} </th>
                                                <th> {{ $punch->nom }} {{ $punch->prenom }} </th>
                                                <th> {{ $punch->punch_date }} / {{ $punch->punch_hour }} </th>
                                                <th> {{ $punch->punch_mode }} </th>
                                                <th> {{ $punch->punch_type }} </th>
                                            </tr>
                                        @endforeach 
                                    </tbody>
                                    <tfoot style = "font-size : 15px">
                                        <tr>
                                            <th>ZK ID</th>
                                            <th>Nom et Prénom(s)</th>
                                            <th>Date / Heure</th>
                                            <th>Mode d'authentification</th>
                                            <th>Type d'authentification</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    @endsection

    @section('script')
        <script>
            let inList = 
                initDT({
                table: "#InDatatable",
                cLang: {
                        name: "mouvement",
                        plural: "mouvements",
                        gender: "M",
                        lang: "fr"
                    },
                tbTitle: "Liste des étudiants en salle de cours"
            });
            
            let authentificationsList = 
            initDT({
                table: "#authentificationsDatatable",
                cLang: {
                name: "Liste des authentifications",
                plural: "Liste des authentifications",
                gender: "F",
                lang: "fr"
                },
                tbTitle: "Liste des modules Time and Attendance"
            });
        </script>
    @endsection