@extends('layouts.admin-base')

@section('css')
    <link href="../../assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css"
        href="../../assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css">
@endsection

@section('under-header')

    <div style="margin-bottom:20px;" 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 align-self-center">
                    <h5 class="font-medium  mb-0">Liste des utilisateurs</h5>
                </div>
                <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                    <!--button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Buy Ample Admin</button-->
                    <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                        <ol class="breadcrumb mb-0 justify-content-end p-0">
                            <li class="breadcrumb-item"><a href="#">Utilisateurs</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Admin</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
</div>

@endsection

@section('content')

    <div class="page-content container-fluid">
        <div class="row">
            <!-- <div style="margin-bottom: 20px" class="col-12">
                <ul class="navbar-nav float-right">
                    <!-- ============================================================== -->
                    <!-- Search -->
                    <!-- ============================================================== ->
                    <li  class="nav-item search-box">
                        <form class="app-search d-none d-lg-block">
                            <input style="width: 500px;" type="text" class="form-control" placeholder="Search...">
                            <a href="" class="active"><i class="fa fa-search"></i></a>
                        </form>
                    </li>
                </ul>

            </div> -->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Liste des utilisateurs</h4>
                        <h6 class="card-subtitle"></h6>
                        <!-- <button type="button" class="btn btn-info btn-rounded m-t-10 mb-2 float-right"
                            data-toggle="modal" data-target="#add-contact">Ajouter un nouvel utilisateur</button> -->
                        <!-- Add Contact Popup Model -->
                        <div id="add-contact" class="modal fade in" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="myModalLabel">Ajouter un nouvel utilisateur</h4>
                                        <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true">×</button>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal form-material">
                                            <div class="form-group">
                                                <div class="mb-3">
                                                    <input type="text" class="form-control"
                                                        placeholder="Type name"> </div>
                                                <div class="mb-3">
                                                    <input type="text" class="form-control" placeholder="Email">
                                                </div>
                                                <div class="mb-3">
                                                    <input type="text" class="form-control" placeholder="Phone">
                                                </div>
                                                <div class="mb-3">
                                                    <input type="text" class="form-control"
                                                        placeholder="Designation"> </div>
                                                <div class="mb-3">
                                                    <input type="text" class="form-control" placeholder="Location">
                                                </div>
                                                <div class="mb-3">
                                                    <input type="text" class="form-control"
                                                        placeholder="Date of joining"> </div>
                                                <div class="mb-3">
                                                    <input type="text" class="form-control"
                                                        placeholder="Matricule"> </div>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"
                                                            id="inputGroupFileAddon01">Importer</span>
                                                    </div>
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input"
                                                            id="inputGroupFile01"
                                                            aria-describedby="inputGroupFileAddon01">
                                                        <label class="custom-file-label"
                                                            for="inputGroupFile01">Choisir un fichier</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-info waves-effect"
                                            data-dismiss="modal">Save</button>
                                        <button type="button" class="btn btn-default waves-effect"
                                            data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <div class="table-responsive">
                            <table id="zero_config"
                                class="table table-striped border" data-filtering="true" data-paging="true"
                                data-paging-size="7">
                                <thead>
                                    <tr>
                                        <th><center>No</center> </th>
                                        <th><center>Photo</center></th>
                                        <th><center>Nom</center></th>
                                        <th><center>Prénom</center></th>
                                        <th><center>Email</center></th>
                                        <th><center>Phone</center></th>
                                        <th><center>Role</center></th>
                                        <th><center>Matricule</center></th>
                                    </tr>
                                </thead>
                                @php
                                $i=1;
                                @endphp
                                <tbody>
                                    @foreach($students as $student)
                                    <tr>
                                        <td><center> {{$i}} </center></td>
                                        <td><center><img src="{{config('app.aws_url').$cheminsPhotos[$i-1]}}" style="width: 50px" class="rounded-circle" alt="" > </center></td>
                                        <td>
                                            <center><a href="{{url('/profile-user')}}">{{$noms[$i-1]}}</a> </center>
                                        </td>
                                        <td>
                                            <center> {{$prenoms[$i-1]}} </center>
                                        </td>
                                        <td><center> {{$student->email}} </center></td>
                                        <td><center> {{$student->phone}} </center></td>
                                        <td> <center> <span class="label label-danger" style="color:rgb(1, 84, 84)">Etudiant</span> </center> </td>
                                        <td> <center> {{$student->matricule}} </center></td>
                                    </tr>
                                    @php
                                    $i++;
                                    @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection

@section('script')
{{--
    <!--This page JavaScript -->
    <script src="{{asset('assets/libs/moment/moment.js')}}"></script>
    <script src="{{asset('assets/libs/footable/js/footable.min.js')}}"></script>
    <script src="{{asset('dist/js/pages/tables/footable-init.js')}}"></script> --}}

    <!--This page plugins -->
    <script src="../../assets/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="../../assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js"></script>
    <script src="../../dist/js/pages/datatable/datatable-basic.init.js"></script>

@endsection
