@extends('../partials.model')

@section('content')
<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-2 page-header-breadcrumb">
        <div>

            <h1 class="text-3xl font-bold text-slate-900">
                Gestion des utilisateurs
            </h1>
            <p class="text-slate-600 mtw-1">
                Gérer tous vos utilisateurs et leurs informations
            </p>

        </div>
        <div class="ms-md-1 ms-0">
            <nav>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#utilisateurModal" id="callModal">
                    <i class="bi bi-plus-circle btn-icon-size"></i>
                    Nouveau Utilisateur
                </button>
            </nav>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="card card-border">
        <div class="card-body">


            <div class="table-responsive">
                <table class="table table-striped" id="utilisateurTable" style=" border-radius: 10px; overflow: hidden;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Email</th>
                            <!-- <th>Rôle</th> -->
                            <th>Téléphone</th>
                            <th>Statut</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--End::row-1 -->


    <!-- Modal -->
    <div class="modal fade" id="utilisateurModal" tabindex="-1" aria-labelledby="utilisateurModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="utilisateurModalLabel">Nouveau utilisateur</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="utilisateur_form">
                        @csrf
                        <input type="hidden" id="id_hidden" name="id_hidden" value="0" />
                        <div class="row">

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Nom* :</div>
                                <input type="text" class="form-control" name="nom_utilisateur" id="nom_utilisateur" placeholder="Nom utilisateur" />
                            </div>

                            <div class="col-xl-12  mb-1">
                                <div class="lib">Prénoms* :</div>
                                <input type="text" class="form-control" name="prenom_utilisateur" id="prenom_utilisateur" placeholder="Prénoms utilisateur" />
                            </div>

                            <div class="col-xl-12  mb-1">
                                <div class="lib">Email* :</div>
                                <input type="email" class="form-control" name="email_utilisateur" id="email_utilisateur" placeholder="Email utilisateur" />
                            </div>

                            <!-- <div class="col-xl-12  mb-1">
                                <div class="lib">Rôle* :</div>
                                <select name="role_utilisateur" id="role_utilisateur" class="form-select"></select>
                            </div> -->

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Téléphone* :</div>
                                <input type="number" class="form-control" name="telephone_utilisateur" id="telephone_utilisateur" placeholder="Téléphone utilisateur" />
                            </div>

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Mot de passe* :</div>
                                <input type="password" class="form-control" name="mot_de_passe_utilisateur" id="mot_de_passe_utilisateur" placeholder="Mot de passe utilisateur" />
                            </div>

                            <div class="col-xl-12 " id="block-statut" style="display:none">
                                <div class="lib">Statut* :</div>
                                <select class="form-select" name="statut_utilisateur" id="statut_utilisateur">
                                    <option value="1">ACTIF</option>
                                    <option value="2">INACTIF</option>
                                </select>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_utilisateur">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal droits -->
    <div class="modal fade" id="Droits_utilisateurModal" tabindex="-1" aria-labelledby="Droits_utilisateurModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="Droits_utilisateurModalLabel">Droits utilisateur</h1>
                    <!-- <div class="form-check form-switch">
                    <input class="form-check-input ms-2" type="checkbox" role="switch"
                        id="switch-sm">
                    <label class="form-check-label ms-1" style="font-size:12px;margin-top:2px" for="switch-sm">Cocher/Décocher tous</label>
                </div> -->

                    <div class="ms-2" id="cocherTous" style="background: greenyellow;padding:4px;border-radius:15px;cursor:pointer">
                        <label class="form-check-label ms-1" style="font-size:12px;margin-top:2px;;cursor:pointer" for="switch-sm">Cocher tous</label>
                    </div>

                    <div class="ms-2" id="decocherTous" style="background: greenyellow;padding:4px;border-radius:15px;cursor:pointer">
                        <label class="form-check-label ms-1" style="font-size:12px;margin-top:2px;;cursor:pointer" for="switch-sm">Décocher tous</label>
                    </div>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                <input type="hidden" id="userIdHidden">
                    <div class="table-responsive">
                        <table class="table table-striped w-100" id="droits_utilisateurTable">
                            <thead>
                                <tr>
                                    <th>Groupe</th>
                                    <th>Libellé droit</th>
                                    <th class="text-center">Attribué</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_droits_utilisateur">Appliquer</button>
                </div>
            </div>
        </div>
    </div>

</div>
</div>


@endsection

@section('script')

<script>
    $(document).ready(function() {

        recuperation_utilisateur();
        $('#save_utilisateur').on('click', function() {
            $('#utilisateur_form').submit();
        })

        remplirSelect2('{{ route("role_utilisateur.get") }}', null, '#role_utilisateur', 'id_role', 'libelle_role', '#utilisateurModal', 'SELECTIONNEZ UN RÔLE')

        $('#callModal').on('click', function() {
            $('#block-statut').css('display', 'none')
        })

        $('#utilisateur_form').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                type: "POST",
                url: "{{ route('utilisateur.store') }}",
                data: new FormData(this),
                dataType: "JSON",
                contentType: false,
                processData: false,
                beforeSend: function() {

                    if ($('#nom_utilisateur').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#nom_utilisateur').focus()
                        return false
                    }

                    if ($('#prenom_utilisateur').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#prenom_utilisateur').focus()
                        return false
                    }

                    if ($('#email_utilisateur').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#email_utilisateur').focus()
                        return false
                    }

                    if ($('#telephone_utilisateur').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#telephone_utilisateur').focus()
                        return false
                    }

                    if ($('#mot_de_passe_utilisateur').val().length == 0) {
                        notify_error('Ce champ est obligatoire')
                        $('#mot_de_passe_utilisateur').focus()
                        return false
                    }
                },
                success: function(resp) {
                    $('#utilisateurModal').modal('hide')
                    notif('success', 'Succès', resp.msg);
                    $('#id_hidden').val(0)
                    recuperation_utilisateur()
                    $('#utilisateur_form')[0].reset()
                },
                error: handleAjaxError
            });
        })

        $(document).on('click', '#modification_ligne', function() {

            var id = $(this).data('id')
            useAjaxPromise('GET', "{{ route('utilisateur.get') }}", {
                    id: id
                })
                .then(resp => {
                    $('#nom_utilisateur').val(resp.data[0].name)
                    $('#prenom_utilisateur').val(resp.data[0].prenom)
                    $('#email_utilisateur').val(resp.data[0].email)
                    $('#telephone_utilisateur').val(resp.data[0].telephone)
                    $('#mot_de_passe_utilisateur').val(resp.data[0].telephone)
                    $('#id_hidden').val(resp.data[0].id_utilisateur)
                    $('#statut_utilisateur').val(resp.data[0].statut).trigger('change')
                    $('#role_utilisateur').val(resp.data[0].id_role).trigger('change')
                    $('#block-statut').css('display', 'block')
                    $('#utilisateurModal').modal('show')
                })
                .catch(xhr => {
                    handleAjaxError(xhr)
                });
        })

        $(document).on('click', '#suppression_ligne', function() {

            var id = $(this).data('id')
            sweet_alert(callback = function() {
                useAjaxPromise('DELETE', "{{ route('utilisateur.delete') }}", {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    })
                    .then(resp => {
                        notif('success', 'Succès', resp.msg);
                        recuperation_utilisateur()
                    })
                    .catch(xhr => {
                        handleAjaxError(xhr)
                    });
            })
        })

        $(document).on('click', '#droit_utilisateur', function() {
            var id = $(this).data('id');
            $('#userIdHidden').val(id)
            recuperation_droit_utilisateur(id)
            
        });


        $('#save_droits_utilisateur').on('click', function() {

            var id_utilisateur = $(this).data('id_utilisateur')
            var droits = []
            $('.droit_check').each(function() {
                var id_droit = $(this).data('id')
                var attribue = 0
                if ($(this).is(':checked')) {
                    attribue = 1
                }
                droits.push({
                    id_droit: id_droit,
                    attribue: attribue
                })
            })

            useAjaxPromise('POST', "{{ route('utilisateur.droits.store') }}", {
                    id_utilisateur: id_utilisateur,
                    droits: droits,
                    _token: '{{ csrf_token() }}'
                })
                .then(resp => {
                    // $('#Droits_utilisateurModal').modal('hide')
                    notif('success', 'Succès', resp.msg);
                })
                .catch(xhr => {
                    handleAjaxError(xhr)
                });
        })

        $('#cocherTous').on('click',function(){
             var id_user = $('#userIdHidden').val()
              useAjaxPromise('POST', "{{ route('droits.cocheTous') }}", {
                    id_utilisateur : id_user,
                    _token: '{{ csrf_token() }}'
                })
                .then(resp => {
                    recuperation_droit_utilisateur(id_user)
                    notif('success', 'Succès', resp.msg);
                })
                .catch(xhr => {
                    handleAjaxError(xhr)
                });
        })

        $('#decocherTous').on('click',function(){
             var id_user = $('#userIdHidden').val()
              useAjaxPromise('POST', "{{ route('droits.decocheTous') }}", {
                    id_utilisateur : id_user,
                    _token: '{{ csrf_token() }}'
                })
                .then(resp => {
                    recuperation_droit_utilisateur(id_user)
                    notif('success', 'Succès', resp.msg);
                })
                .catch(xhr => {
                    handleAjaxError(xhr)
                });
        })

    })

    function recuperation_utilisateur($id) {

        $.ajax({
            type: "GET",
            url: "{{ route('utilisateur.get') }}",
            data: {
                id: $id
            },
            dataType: "json",
            success: function(resp) {


                var table = $('#utilisateurTable').DataTable();
                table.clear();
                $.each(resp.data, function(key, value) {

                    var statut = '';
                    if (value.statut == 1) {
                        statut = '<span class="badge bg-success">ACTIF</span>';
                    } else {
                        statut = '<span class="badge bg-danger">INACTIF</span>';
                    }
                    table.row.add([
                        renderActions(value.id_utilisateur, null, 'modification_ligne', 'suppression_ligne', null, null, 'droit_utilisateur'),
                        value.name,
                        value.prenom,
                        value.email,
                        // value.libelle_role,
                        value.telephone,
                        statut
                    ])
                })
                table.draw();
            },
            error: handleAjaxError
        });
    }

    function recuperation_droit_utilisateur($id){
            
            useAjaxPromise('GET', "{{ route('utilisateur.droits') }}", {
                    id_utilisateur: $id
                })
                .then(resp => {

                    var table = $('#droits_utilisateurTable').DataTable();
                    table.clear();

                    $.each(resp.data, function(key, value) {

                        var checked = value.attribue == 1 ? 'checked' : '';

                        table.row.add([
                            value.groupe,
                            value.libelle_droit,
                            `
                            <div class="d-flex justify-content-center">
                                <div class="form-check form-check-md">
                                    <input class="form-check-input check-radius droit_check"
                                        type="checkbox"
                                        data-id="${value.id_droit}"
                                        ${checked}/>
                                </div>
                            </div>`
                        ]);
                    });

                    // ⭐ TRÈS IMPORTANT : on trie avant de dessiner
                    table.order([0, 'asc']).draw();

                    $('#Droits_utilisateurModal').modal('show');
                    $('#save_droits_utilisateur').data('id_utilisateur', $id);
                })
                .catch(xhr => {
                    handleAjaxError(xhr);
                });
    }
</script>
@endsection