@extends(layoutTenant())
@section('title')
<title>Usuarios - Papel zero </title>
@php $pagina = "usuarios"; @endphp
@endsection
@section('content')

<h4 style="padding: 20px 0 0px 40px; font-weight: bold; color:#6f2e04;">Usuarios</h4>
<div class="content-wrapper">
    <div class="content-body">
        <section id="configuration">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <a href="{{ routeTenant('usuariosapp.create') }}" class="btn  btn-primary">Adicionar Novo Usuario</a>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body card-dashboard">
                                <div class="table-responsive">
                                    <table class="table" id="users-table">
                                        <thead class="bg-light">
                                            <tr class="border-0">
                                                <th class="border-0">ID</th>
                                                <th class="border-0">Nome</th>
                                                <th class="border-0">E-mail</th>
                                                <th class="border-0">Telefone</th>
                                                <th class="border-0">Tipo</th>
                                                <th class="border-0">Funções</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title text-white " id="exampleModalLabel">Deletar </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Você tem certeza que Deseja Deletar?
            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <a href="#" class="btn btn-danger deletar" id="deletar">Deletar</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title text-white " id="exampleModalLabel">Desativar </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Você tem certeza que Deseja Ativar/Desativar?
            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <a href="#" class="btn btn-success deletar2" id="deletar2">Desativar</a>
            </div>
        </div>
    </div>
</div>
<div id="loadingModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center;">
  <div style="background-color:white; padding:20px; border-radius:5px; text-align:center;">
    <p>Carregando...</p>
    <!-- Você pode adicionar um spinner aqui se quiser -->
  </div>
</div>
@endsection

@section('post-script')
    <script src="{{url('')}}/admin/app-assets/vendors/js/tables/datatable/datatables.min.js"></script>
    <script src="{{url('')}}/admin/app-assets/js/scripts/tables/datatables/datatable-basic.js"></script>
    <link rel="stylesheet" type="text/css" href="{{url('')}}/admin/app-assets/vendors/css/forms/toggle/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="{{url('')}}/admin/app-assets/vendors/css/forms/toggle/switchery.min.css">
    <link rel="stylesheet" type="text/css" href="{{url('')}}/admin/app-assets/css/core/colors/palette-switch.css">
    <script src="{{url('')}}/admin/app-assets/vendors/js/forms/toggle/bootstrap-switch.min.js"></script>
    <script src="{{url('')}}/admin/app-assets/vendors/js/forms/toggle/switchery.min.js"></script>
    <script src="{{url('')}}/admin/app-assets/vendors/js/forms/toggle/bootstrap-checkbox.min.js"></script>

    <script>
        $(document).ready(function() {
            var table = $('#users-table').DataTable({
                "language": {
                    "url": '{{url("")}}/js/Portuguese-Brasil.json'
                },
                "order": [[ 0, "desc" ]],
                processing: true,
                serverSide: true,
                ajax: '{!! routeTenant("usuario.get.data") !!}',
                columns: [
                    { data: 'id', name: 'id',width: '5%' },
                    { data: 'name', name: 'name',width: '20%' },
                    { data: 'email', name: 'email',width: '15%' },
                    { data: 'telefone', name: 'telefone',width: '20%' },
                    { data: 'tipo', name: 'tipo',width: '10%' },
                    { data: 'funcao', name: 'funcao',width: '30%' },
                ]
            });
            // Manipula os checkboxes e botões após o carregamento dos dados
            $('#users-table').on('draw.dt', function() {
                var checkboxes = document.querySelectorAll('.form-check-input');
                var buttons = document.querySelectorAll('.btn-secondary');

                checkboxes.forEach(function(checkbox) {
                    checkbox.style.display = 'inline-block';
                });
                buttons.forEach(function(button) {
                    button.style.display = 'inline-block';
                });
                $('input[data-id]').change(function() {
                    console.log('change');
                    var loadingModal = document.getElementById('loadingModal');
                    loadingModal.style.display = 'flex';
                    var userId = $(this).data('id');
                    var isActive = $(this).prop('checked');
                    row = document.getElementById('row' + userId);
                    if (isActive == true) {
                        console.log(row);
                        row.style.color = '';
                } else {
                    row.style.color = 'rgba(100,100,100,0.6)';
                }
                $.ajax({
                    url: "{{ routeTenant('usuarios.toggleStatus') }}",
                    method: 'POST',
                    data: {
                    _token: '{{ csrf_token() }}',
                    id: userId,
                    ativo: isActive
                    },
                    success: function(response) {
                    if (response.success) {
                        loadingModal.style.display = 'none';
                    } else {
                        loadingModal.style.display = 'none';
                    }
                    },
                    error: function() {
                    loadingModal.style.display = 'none';
                    }
                });
            });
            });
            
            'use strict';
            var $html = $('html');
            $('.switch').checkboxpicker();
            $('.switchBootstrap').bootstrapSwitch();
            var i = 0;
            if (Array.prototype.forEach) {

                var elems = $('.switchery');
                $.each(elems, function (key, value) {
                    var $size = "",
                        $color = "",
                        $sizeClass = "",
                        $colorCode = "";
                    $size = $(this).data('size');
                    var $sizes = {
                        'lg': "large",
                        'sm': "small",
                        'xs': "xsmall"
                    };
                    if ($(this).data('size') !== undefined) {
                        $sizeClass = "switchery switchery-" + $sizes[$size];
                    } else {
                        $sizeClass = "switchery";
                    }

                    $color = $(this).data('color');
                    var $colors = {
                        'primary': "#967ADC",
                        'success': "#37BC9B",
                        'danger': "#DA4453",
                        'warning': "#F6BB42",
                        'info': "#3BAFDA"
                    };
                    if ($color !== undefined) {
                        $colorCode = $colors[$color];
                    } else {
                        $colorCode = "#37BC9B";
                    }

                    var switchery = new Switchery($(this)[0], {
                        className: $sizeClass,
                        color: $colorCode
                    });
                });
            } else {
                var elems1 = document.querySelectorAll('.switchery');

                for (i = 0; i < elems1.length; i++) {
                    var $size = elems1[i].data('size');
                    var $color = elems1[i].data('color');
                    var switchery = new Switchery(elems1[i], {
                        color: '#37BC9B'
                    });
                }
            }

            $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var recipient = button.data('whatever')
                var modal = $(this)
                var link = document.getElementById("deletar");
                link.setAttribute('href', recipient);
            })

            $('#exampleModal2').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget)
                var recipient = button.data('whatever')
                var status = button.data('status')
                var modal = $(this)

                modal.find('.modal-body').text('Você tem certeza que deseja ' + status + ' o usuário?');
                modal.find('.modal-title').text(status.charAt(0).toUpperCase() + status.slice(1));
                modal.find('.deletar2').text(status);
                var link = document.getElementById("deletar2");
                link.setAttribute('href', recipient);
            })
            
            
        });
    </script>
@endsection