@extends('layouts.app')
@section('style')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('assets/template') }}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet"
        href="{{ asset('assets/template') }}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('assets/template') }}/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">

    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('assets/template') }}/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">

    <!-- Toastr -->
    <link rel="stylesheet" href="{{ asset('assets/template') }}/plugins/toastr/toastr.min.css">
@endsection
@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title" style="font-weight: bold;font-size: 1.8em;">
                    @lang('الطلاب')
                </h3>

            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th class="text-center">@lang('الاسم الكامل')</th>
                            <th class="text-center">@lang('الدولة')</th>
                            <th class="text-center">@lang('البريد الإلكتروني')</th>
                            <th class="text-center">@lang('رقم واتساب')</th>
                            <th class="text-right">@lang('فعل')</th>
                        </tr>
                    </thead>
                    <tbody>
                                                @foreach ($etudiants as $etudiant)
                            <tr>
                                <td>{{ $cpt }}</td>
                                <td class="text-center">{{ $etudiant->user->name }}</td>
                                <td class="text-center">{{ $etudiant->pays }}</td>
                                <td class="text-center">{{ $etudiant->user->email }} </td>
                                <td class="text-center">{{ $etudiant->tel }}</td>
                                <td class="text-center">



                                </td>
                            </tr>
                                                    @endforeach

                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
    </div>

@endsection
@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('assets/template') }}/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/jszip/jszip.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="{{ asset('assets/template') }}/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

    <script src="{{ asset('assets/template') }}/plugins/jquery-validation/jquery.validate.min.js"></script>

    <script src="{{ asset('assets/template') }}/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="{{ asset('assets/template') }}/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- Toastr -->
    <script src="{{ asset('assets/template') }}/plugins/toastr/toastr.min.js"></script>
    <script>
        $(function() {
            $("#example1").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.11.3/i18n/ar.json"
                }
                //"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

        });
    </script>

    <script>
        $(function() {


            $(document).on('click', '.btn-edit', function() {
                $('#lieuEdit').val($(this).data('lieu'));
                $('#sessionId').val($(this).data('id'));
                $('#dateDEd').val($(this).data('debut'));
                $('#dateFEd').val($(this).data('fin'));

            });

            $(document).on('click', '.btn-delete', function() {

                $('#deleteId').val($(this).data('id'));

            });

        });
    </script>
@endsection