@extends(layoutTenant())
@section('title')
    <title>Módulos</title>
    @php $pagina = "modulos"; @endphp
@endsection
@section('content')

    <h4 style="padding: 20px 0 0px 40px; font-weight: bold; color:#6f2e04;">Módulos {{$conta->name}}</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-content collapse show">
                                <div class="card-body card-dashboard">
                                    <div class="table-strib">
                                        <input type="hidden" name="account_id" value="{{$conta->id}}" id="accountId">
                                        <table class="table" id="models-table">
                                            <thead class="thead-dark">
                                                <tr class="border-0">
                                                    <th>Módulo</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($modulosAtivos as $modulo)
                                                    <tr id="row{{$modulo}}">
                                                        <td>{{ $modulo }}</td>
                                                        <td>
                                                            <div class="form-check form-switch"><input class="form-check-input" style="display:none" 
                                                                    type="checkbox" name="status" value="1"
                                                                    id="statusSwitch{{$modulo}}" data-model="{{$modulo}}"
                                                                    checked>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach

                                                @foreach ($modulosInativos as $modulo)
                                                    <tr id="row{{$modulo}}">
                                                        <td>{{ $modulo }}</td>
                                                        <td>
                                                            <div class="form-check form-switch"><input class="form-check-input" style="display:none" 
                                                                    type="checkbox" name="status" value="1"
                                                                    id="statusSwitch{{$modulo}}" data-model="{{$modulo}}">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach

                                                @foreach ($modulosNaoCadastrados as $modulo)
                                                    <tr id="row{{$modulo}}">
                                                        <td>{{ $modulo }}</td>
                                                        <td>
                                                            <div class="form-check form-switch"><input class="form-check-input" style="display:none" 
                                                                    type="checkbox" name="status" value="1"
                                                                    id="statusSwitch{{$modulo}}" data-model="{{$modulo}}">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </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 () {
            console.log('document');
            accountId = document.getElementById('accountId').value;
            
            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-model]').change(function () {
                console.log('change');
                var loadingModal = document.getElementById('loadingModal');
                loadingModal.style.display = 'flex';
                var modelTitle = $(this).data('model');
                var isActive = $(this).prop('checked');
                row = document.getElementById('row' + modelTitle);
                console.log(accountId);
                console.log(isActive);
                console.log(modelTitle);
                if (isActive == true) {
                    console.log(row);
                    row.style.color = '';
                } else {
                    row.style.color = 'rgba(100,100,100,0.6)';
                }
                $.ajax({
                    url: "{{ routeTenant('portais.modulos.toggle') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        title: modelTitle,
                        ativo: isActive,
                        account_id: accountId
                    },
                    success: function (response) {
                        if (response.success) {
                            console.log(response);
                            loadingModal.style.display = 'none';
                        } else {
                            console.log(response);
                            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