@extends(layoutTenant())
@section('title')
    <title>Configurações</title>
    @php 
        $pagina = "configuracoes"; 
        $user = Auth::user();
    @endphp
@endsection
@section('content')
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-4">
        <div class="card">
            <h4 style="padding: 20px 0 0px 40px; font-weight: bold; color:#6f2e04;">Configurações</h4>
            <hr>
            <table class="table" id="users-table">
                <thead class="bg-light m-4">
                    <tr class="border-0">
                        <th class="border-0" width="70%">Configuração</th>
                        <th class="border-0" width="30%">Ativar/Desativar</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="rowprofap">
                        <td>
                            <label for="profap" style="font-weight: bold; margin-left: 10px;"
                                class="form-check-label">Profap</label>
                        </td>
                        <td>
                            <div class="form-check form-switch">
                                <input type="checkbox" class="form-check-input" name="profap" id="profap" value="1">
                                <input type="checkbox" data-id="profap" class="form-check-input" id="profap" {{$config && $config->profap ? 'checked' : ''}}>
                            </div>
                        </td>
                    </tr>
                    <tr id="rowpublicblock">
                        <td>
                            <label for="publicblock" style="font-weight: bold; margin-left: 10px;"
                                class="form-check-label">Bloquear area pública</label>
                        </td>
                        <td>
                            <div class="form-check form-switch">
                                <input type="checkbox" class="form-check-input" name="publicblock" id="publicblock" value="1">
                                <input type="checkbox" data-id="publicblock" class="form-check-input" id="publicblock" {{ $user->account &&  $user->account->publicBlock ? 'checked' : ''}} disabled>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <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>
        </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 () {
            // Manipula os checkboxes e botões após o carregamento dos dados
            $('input[data-id]').change(function () {
                console.log('change');
                var loadingModal = document.getElementById('loadingModal');
                loadingModal.style.display = 'flex';
                var id = $(this).data('id');
                var isActive = $(this).prop('checked');
                row = document.getElementById('row' + id);
                if (isActive == true) {
                    console.log(row);
                    row.style.color = '';
                } else {
                    row.style.color = 'rgba(100,100,100,0.6)';
                }
                $.ajax({
                    url: 'configuracoesForm/' + id + '/toggle-status',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        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);
            })
            $.ajax({
                url: "{{ routeTenant('configuracoesForm.profap.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';
                }
            });
        });
    </script>
@endsection