@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "LISTE DES UTILISATEURS ÉTUDIANTS",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Liste des utilisateurs étudiants" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('title', "Liste des étudiants | GestStudent Admin")

@section('css')
    <link href="{{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
	<link href="{{ asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <style>
        .form-select{ 
            background-image:url({{asset('assets/images/custom-select.png')}});
        }

        th, td {
            text-align: center;
        }

        #usersList_length {
            margin-top: 10px;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="border-bottom mb-3 title-part-padding" style="text-align: end;">
                    <a href="" target="_blank">
                        <button class="btn btn-primary">
                            <i class="fas fa-download"></i>
                            Générer le pdf
                        </button>
                    </a>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered display" id="usersList">
                            <thead class="bg-info">
                                <tr>
                                    <th>ID</th>
                                    <th>USERNAME</th>
                                    <th>EMAIL</th>
                                    <th>CREATED_AT</th>
                                    <th>UPDATED_AT</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data['infoUsers'] as $userStudent)   
                                    <tr>
                                        <td>{{$userStudent->id}}</td>
                                        <td>{{$userStudent->username}}</td>
                                        <td id='mail_{{$userStudent->id}}'>{{$userStudent->email}}</td>
                                        <td>{{$userStudent->created_at}}</td>
                                        <td>{{$userStudent->updated_at}}</td>
                                        <td>
                                            <button type="button" class="btn btn-outline-info btn-circle btn-lg m-r-5 editer" 
                                                data-toggle="modal" data-target="#add-mail" onclick="editUserMail({{$userStudent->matricule}}, {{$userStudent->id}})">
                                                <i class="ti-pencil-alt"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="bg-info">
                                <tr>
                                <th>ID</th>
                                    <th>USERNAME</th>
                                    <th>EMAIL</th>
                                    <th>CREATED_AT</th>
                                    <th>UPDATED_AT</th>
                                    <th>ACTION</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js') }}"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script>
        $('#usersList').DataTable({
            dom: 'lfrtip',
            "lengthMenu": [ 
                [10, 25, 50, -1], 
                [10, 25, 50, "All"] 
            ],	
        });

        function editUserMail(matricule, id){
            let email = $('#mail_'+id).text();
            Swal.fire({

                html: `
                    <h1 style="font-weight: normal;">Modifier email</h1>
                    <form class="needs-validation" novalidate action="#" id="chgMail" style='overflow: hidden'>
                        @csrf
                        <div class="form-group mb-3 row">
                            <div class="col-3" style="text-align:right;">
                                <label>Matricule</label>
                            </div>
                            <div class="col-7">
                                <input class="form-control" id="matricule" name="matricule" style="width: 100%;height: 36px;" required="" value=`+ matricule +` readonly/>
                                <input class="form-control" id="id" name="id" style="width: 100%;height: 36px; display:none;" required="" value=`+ id +` readonly/>
                            </div>
                        </div>
                        <div class="form-group mb-3 row">
                            <div class="col-3" style="text-align:right;">
                                <label>Email</label>
                            </div>
                            <div class="col-7">
                                <input class="form-control" id="email" name="email" style="width: 100%;height: 36px;" required="" value=`+ email +` />
                            </div>
                        </div>
                    </form>
                    `,
                showCancelButton: true,
                confirmButtonColor: "#0000F5",
                confirmButtonText: "Update",
                cancelButtonText: "Close",
                reverseButtons: true,
                allowOutsideClick: true,
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    if($("#email").val() == '')
                    {
                        Swal.showValidationMessage(
                        `Le champ email est vide`
                        )
                        return false;
                    }
                    let data = new FormData($("#chgMail")[0]);
                    Swal.fire({
                            text: 'En cours de traitement...',
                            didOpen: () => {
                                Swal.showLoading()
                            },
                            allowOutsideClick: false
                        });
                    $.ajax({
                        type: "POST",  
                        url: '{{route("etudiants.changeAUserMail")}}',  
                        data: data,
                        processData: false,  // tell jQuery not to process the data
                        contentType: false ,  // tell jQuery not to set contentType
                        dataType: "json",       
                        success: function(jqXHR, exception)  
                        {
                            $('#mail_'+id).text(jqXHR.mail);
                            Swal.fire({
                                title: 'Saved...',
                                text: 'Nouvelle adresse mail sauvegardée avec succès!',
                                icon: 'success',
                                showConfirmButton: true,
                                confirmButtonColor: '#8cd4f5',
                                backdrop: `rgba(0,200,0,0.4)`
                            });	
                        }, 
                        complete: function() { 
                            //$('#decodeimage').html('<div class="form-group" id="decodeimage"><label class="control-label col-md-3">Reçu bank info</label><div class="col-md-6"><input name = "decode"  id = "decode" type = "text" class="form-control" readonly ></div></div>');	
                            // unblock when remote call returns 
                            $.unblockUI(); 
                        }, 
                        error: function(jqXHR, exception){
                            Swal.fire({
                                title: 'Alert info',
                                text: "Une erreur est survenue lors de l'enregistrement de la nouvelle adresse mail. Vérifiez votre connexion internet et re-essayez!!",
                                icon: 'error',
                                showConfirmButton: true,
                                confirmButtonColor: '#8cd4f5',
                                backdrop: `rgba(200,0,0,0.4)`
                            });    
                        }
                    });
                }
            })
        }
    </script>
@endsection