@extends('layout')

@section('cssUrl')
    <link rel="stylesheet" href="{{ asset('assets/plugins/morrisjs/morris.css') }}" />
    <!-- Colorpicker Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" />
    <!-- Multi Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/multi-select/css/multi-select.css') }}">
    <!-- Bootstrap Spinner Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-spinner/css/bootstrap-spinner.css') }}">
    <!-- Bootstrap Tagsinput Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}">
    <!-- Bootstrap Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-select/css/bootstrap-select.css') }}" />
    <!-- noUISlider Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/nouislider/nouislider.min.css') }}" />
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/select2.css') }}" />
@endsection

@section('csss')

@endsection

@php
    $title = 'Permissão do usuário'    
@endphp

@section('title')
{{ $title }}
@endsection

@section('conteudo')
    <section class="content">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                        <h2 class="uppercase">{{ $title }}</h2>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                            class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                    <div class="col-sm-12">
                        
                    </div>
                </div>
            </div>
            <form action="{{ route('usuarioperm.store') }}" id="frmCadastro" class="form-horizontal">
                <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                <div class="card">
                    <div class="body">                        
                        <div class="row">
                            <div class="col-lg-2">
                                <label>Id.:</label><br>
                                <input type="text" style="width: 100%;" name="id_usuario" id="id_usuario" readonly
                                    class="form-control bg-light" required value="{{ $dataShow->id_usuario }}"><br>
                            </div>
                            <div class="col-lg-10">
                                <label>Usuário:</label><br>
                                <input type="text" style="width: 100%;" name="nome_pessoa" id="nome_pessoa" readonly
                                    class="form-control bg-light" required value="{{ $dataShow->nome_pessoa }}"><br>
                                <br><br>
                            </div>                           
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <hr>
                            </div>
                        </div>
                        <div class="row">                            
                            <div class="col-lg-6">
                                <label>Selecione uma tela:</label><br>
                                <select name="id_tela" id="id_tela"
                                    class="form-control show-tick ms select2 bg-light" data-placeholder="Select" required>
                                    <option value="0" selected>Selecione uma tela</option>
                                    @forelse ($dataModuloTela as $item)
                                        <option value="{{ $item->id_tela }}">{{ $item->nome_modulo }} / {{ $item->nome_tela }}</option>       
                                    @empty
                                        <option value="0" selected>Sem telas</option>
                                    @endforelse
                                </select><br><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Nível:</label><br>
                                <input type="number" min="0" max="5" value="5" style="width: 100%;" name="nivel_usuario_perm" id="nivel_usuario_perm"
                                    class="form-control bg-light"><br>
                                <br><br>
                            </div>                        
                            <div class="col-lg-4"><br>
                                <button id="btAddPerm" style="width: 100%;" class="btn btn-primary btn-icon float-right"
                                    type="button"><i>Adicionar permissão</i></button><br>
                                <br><br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card" id="cardPContato">
                    <div class="body">  
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="uppercase">Lista de permissões concedidas</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tablePerm">
                                    <thead>
                                        <tr>
                                            <th>Id. Permissão:</th>
                                            <th>Id/Modulo:</th>
                                            <th>Id/Tela:</th>
                                            <th>Nível:</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>                                        
                                        @forelse ($dataPerm as $item)
                                            <tr id="tr{{ $item->id_usuario_perm }}">
                                                <td>{{ $item->id_usuario_perm }} </td>
                                                <td>{{ $item->id_modulo }} / {{ $item->nome_modulo }}</td>
                                                <td>{{ $item->id_tela }} / {{ $item->nome_tela }}</td>
                                                <td>{{ $item->nivel_usuario_perm }}</td>
                                                <td style="float-right">
                                                    <a href="javascript:void(0);" onclick="deleteItem({{ $item->id_usuario_perm }});" data-id_perm="{{ $item->id_usuario_perm }}" class="btn btn-default waves-effect waves-float btn-sm waves-red">
                                                        <i class="zmdi zmdi-delete"></i>
                                                    </a>
                                                </td>   
                                            </tr>    
                                        @empty
                                            <td>Sem permissão cadastrada</td>
                                        @endforelse                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card">
                            <div class="body">
                                <div class="row">
                                    <div class="col-lg-6" id="msgReturn">
                                        
                                    </div>
                                    <div class="col-lg-2">
                                        
                                    </div>
                                    <div class="col-lg-2">
                                        
                                    </div>
                                    <div class="col-lg-2">
                                        <button type="button" id="btVoltar" class="btn btn-raised btn-primary bg-default btn-lg">Voltar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
    </section>
@endsection

@section('scriptUrl')
    <script src="{{ asset('assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script><!-- Bootstrap Colorpicker Js -->
    <script src="{{ asset('assets/plugins/jquery-inputmask/jquery.inputmask.bundle.js') }}"></script><!-- Input Mask Plugin Js -->
    <script src="{{ asset('assets/plugins/multi-select/js/jquery.multi-select.js') }}"></script><!-- Multi Select Plugin Js -->
    <script src="{{ asset('assets/plugins/jquery-spinner/js/jquery.spinner.js') }}"></script><!-- Jquery Spinner Plugin Js -->
    <script src="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js') }}"></script><!-- Bootstrap Tags Input Plugin Js -->
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script><!-- Select2 Js -->
    <script src="{{ asset('assets/js/pages/forms/advanced-form-elements.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-notify/bootstrap-notify.js') }}"></script>
    <script src="{{ asset('assets/js/formjs.js') }}"></script>
@endsection

@section('scripts')
<script>
    $('#btVoltar').click(function() {
        $(location).attr('href', "{{  route('usuarioperm.index') }}");
    });
    $('#btAddPerm').click(function(){
        $.ajax({
            type: "POST",
            url: "{{ route('usuarioperm.store') }}", 
            data: {
                _token:                     $('#_token').val(),
                idusuario_usuario_perm:     $('#id_usuario').val(),
                idtela_usuario_perm:        $('#id_tela').val(),
                nivel_usuario_perm:         $('#nivel_usuario_perm').val()
            },
            dataType: "json",
            success: function (response) {
                $('#tablePerm').find('tbody').prepend(
                '<tr>' +
                    '<td>' + response[0].id_usuario_perm  + '</td>' +
                    '<td>' + response[0].id_modulo +' / ' + response[0].nome_modulo + '</td>' +
                    '<td>' + response[0].id_tela + ' / ' + response[0].nome_tela + '</td>' +
                    '<td>' + response[0].nivel_usuario_perm + '</td>' +
                    '<td style="float-right">' +
                        '<a href="javascript:void(0);" onclick="deleteItem({{ $item->id_usuario_perm }});" data-id_perm="' + response[0].id_usuario_perm + '" class="btn btn-default waves-effect waves-float btn-sm waves-red">' +
                            '<i class="zmdi zmdi-delete"></i>' +
                        '</a>' +
                    '</td>' +
                '</tr>');
            }
        });
    });
    function deleteItem(item){
        /*$.ajax({
            type: "POST",
            url: "{{ route('usuarioperm.delete') }}",
            data: {
                id_usuario_perm: item
            },
            dataType: "JSON",
            success: function (response) {
                
            }
        });*/

        swal({
            title: "Atenção!!!",
            text: "Você esta prestes a deletar uma permissão, você realmente deseja fazer isso?",
            icon: "warning",
            buttons: true,
            dangerMode: true
        })
        .then((willDelete) => {
            if (willDelete) { 
                $.ajax({
                    url: "{{ route('usuarioperm.delete') }}",
                    method: 'POST',
                    dataType: 'html',
                    data: {
                        id_usuario_perm: item,
                        _token: $('#_token').val()
                    },
                    success: function(retorno) {
                        $('#tr' + item).remove();
                    }
                });
                swal("Permissão deletado com Sucesso", {
                    icon: "success"
                });
            } else {
                swal("Ação cancelada");
            }

        });
    }
</script>
@endsection