@extends('layout.mainlayout')
<style>
    .bold-italic {
        font-weight: bold;
        /* font-style: italic; */
        size: 10px;
    }
</style>
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="row align-items-center">
                <div class="col-lg-9">
                    @component('components.pageheader')
                        @slot('title')
                            Inscription d'un nouveau utilisateur
                        @endslot
                        @slot('title_1')
                            Ajout/Modifier un utilisateur
                        @endslot
                    @endcomponent
                </div>
                <div class="col-lg-3 mb-4">
                    <a href="{{ route('userlists') }}" class="btn btn-primary ">
                        <i class="fas fa-list-alt"></i>
                        <span class="flex-grow-1 text-center" style="margin-left: 10px">Liste des Utilisateurs</span>
                    </a>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div id="success-ok" class="alert alert-success" style="display: none;"></div>
                    <div id="error-ok" class="alert alert-danger" style="display: none;"></div>
                    <form id="newUserForm" method="POST">
                        @csrf
                        <div class="row">
                            <div class="row">
                                <div class="col-lg-6 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label  style="font-weight: bold;">Nom d'Utilisateur</label>
                                        <input type="text" name="name" class="form-control" id="name"
                                            placeholder="Entrez le Nom de l'Utilisateur" autocomplete="name" required>
                                        <span id="name-error" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label style="font-weight: bold;">Email</label>
                                        <input type="email" name="email" class="form-control" id="email"
                                            placeholder="ENTREZ L'EMAIL DE L'UTILISATEUR" autocomplete="email" required>
                                        <span id="email-error" class="text-danger"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label style="font-weight: bold;">Type d'Utilisateur</label>
                                        <select name="user_type" class="form-control select" id="user_type" required>
                                            <option value="standard">UTILISATEUR STANDARD</option>
                                            <option value="admin">ADMINISTRATEUR</option>
                                        </select>
                                        <span id="user_type-error" class="text-danger"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-sm-6 col-12">
                                    <div class="form-group">
                                        <label style="font-weight: bold;">Mot de Passe</label>
                                        <div class="pass-group">
                                            <input type="password" name="password" value="logimatique" readonly
                                                placeholder="Entrez un mot de passe pour l'utilisateur"
                                                class="pass-input form-control" id="password"
                                                autocomplete="current-password">
                                            <span id="password-error" class="text-danger"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <a href="javascript:void(0);" id="submitBtn" class="btn btn-envoie me-2">Enregistrer</a>
                                <a href="javascript:void(0);" id="cancelBtn" class="btn btn-retour">Retour</a>
                            </div>
                        </div>
                    </form>
                    <!-- Ajout de l'image en bas du formulaire -->
                </div>
            </div>
        </div>
    </div>
    <div class="page-wrapper">
        <div style="border-color: orange" class="image-container mt-4">
        </div>
    </div>
@endsection

@section('script')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            $('#submitBtn').on('click', function(e) {
                e.preventDefault();

                $.ajax({
                    type: 'POST',
                    url: '/newuser',
                    data: $('#newUserForm').serialize(),
                    success: function(response) {
                        $('#success-ok').text('Utilisateur créé avec succès!').show();

                        setTimeout(function() {
                            $('#success-ok').fadeOut();
                        }, 3000);

                        $('#newUserForm')[0].reset();
                        $('#name-error, #email-error, #user_type-error, #password-error').text(
                            '');
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            for (var key in errors) {
                                if (errors.hasOwnProperty(key)) {
                                    $('#' + key + '-error').text(errors[key][0]);
                                }
                            }
                        } else {
                            alert('Erreur de serveur.');
                        }
                    }
                });
            });

            $('#cancelBtn').on('click', function() {
                window.location.href = '/index';
            });
        });
    </script>
@endsection