@extends('layouts.backend.app')
@section('title', "Tableau de bord")
@section('content')
    <!-- Page Wrapper -->
    <!-- Page Wrapper -->
            <div class="page-wrapper">
                <div class="content container-fluid">

					<!-- Page Header -->
					<div class="page-header">
						<div class="row">
							<div class="col">
								<h3 class="page-title">Liste des utilisateurs</h3>
								<ul class="breadcrumb">
									<li class="breadcrumb-item"><a href="#">Tableau de bord</a></li>
									<li class="breadcrumb-item active">Utilisateurs</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- /Page Header -->

					<div class="row">
                        <div class="col-md-12">
                            <x-alert/>
                        </div>
						<div class="col-sm-12">
							<div class="card">
								<div class="card-header">
									<button class="btn btn-primary" type="button" data-toggle="modal" data-original-title="test" data-target="#exampleModal">Ajouter <i class="fa fa-plus"></i></button>
								</div>
								<div class="card-body">

									<div class="table-responsive">
										<table class="datatable table table-stripped">
											<thead>
												<tr>
													<th>N°</th>
                                                    <th>Nom d'utilisateur</th>
                                                    <th>Email</th>
													<th>Rôle</th>
													<th class="text-center">Actions</th>
												</tr>
											</thead>
											<tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>username</td>
                                                    <td>example@mail.com</td>
                                                    <td>Admin</td>
                                                    <td class="text-center">
                                                        <button class="btn btn-mc" id="edit-button" title="Modifier" style="padding: 5px;">
                                                            <span class="fa fa-pencil"></span>
                                                        </button>
                                                        <button type="button" title="Supprimer" class="btn delete-action btn-mc" style="color: #ff0000">
                                                            <span class="fa fa-trash"></span>
                                                        </button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>username 2</td>
                                                    <td>example@mail.com</td>
                                                    <td>Super Admin</td>
                                                    <td class="text-center">
                                                        <button class="btn btn-mc" id="edit-button" title="Modifier" style="padding: 5px;">
                                                            <span class="fa fa-pencil"></span>
                                                        </button>
                                                        <button type="button" title="Supprimer" class="btn delete-action btn-mc" style="color: #ff0000">
                                                            <span class="fa fa-trash"></span>
                                                        </button>
                                                    </td>
                                                </tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- /Main Wrapper -->

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
				    <div class="modal-content">
                        <form action="{{route('utilisateurs.store')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title">Création d'un utilisateur</h5>
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close" data-original-title="" title=""><span aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Nom</label>
                                             <input type="text" name="name" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Nom d'utilisateur *</label>
                                             <input type="text" name="username" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Email *</label>
                                            <input type="email" name="email" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Rôle *</label>
                                            <select name="role" id="" class="form-control" required>
                                                <option value="0">Super Admin</option>
                                                <option value="1">Admin</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    @include('extensions.password_component')
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                                <button class="btn btn-primary" type="submit" title="">Enregistrer</button>
                            </div>
                        </form>
				    </div>
				</div>
			</div>

            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
				    <div class="modal-content" id="edit-content">

				    </div>
				</div>
			</div>
@endsection

@section('js')
    <script>
        $(function(){
            $('.delete-action').click(function (e) {
                if (confirm('Voulez-vous vraiment supprimer cet utilisateur ?')) {
                    $(this).siblings('form').submit();
                }

                return false;
            });
            $("#edit-button").on('click', function (e) {
                $('#main-loading').show();
                let data = {id: $(this).data('id')},
                    url = $(this).data('url');
                $.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    dataType: 'json',
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if(data.success){
                            $('#edit-content').html(data.html);
                            $('#editModal').modal('show');
                            $('#main-loading').hide();
                        }
                        else{
                            $('#main-loading').hide();
                            alert(data.message);
                        }
                    },
                    error: function (xhr, textStatus, errorThrown, err, status) {
                        //alert("Error: " + errorThrown);
                    }
                });
            });
        });
    </script>
@endsection