@extends('material.layouts.dashboard')
@push('styles')

<!-- Modal Styles -->
    <link href="{{ asset('assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('assets/pages/css/blog.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Select picker -->
    <link href="{{ asset('assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- Radio Styae -->
    <link href="{{ asset('assets/global/plugins/icheck/skins/all.css') }}" rel="stylesheet" type="text/css" />

    <!-- Datatables Styles -->
    <link href="{{ asset('bower_components/datatables.net-responsive-bs/css/responsive.bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('bower_components/datatables.net-bs/css/dataTables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('bower_components/datatables.net-buttons-dt/css/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css"> 

    <!-- DatePicker -->
    <link href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet"> 

    <!-- Custom -->
    <link href="{{ asset('css/general.css?v=2022-02-08') }}" rel="stylesheet"> 

@endpush

@section('content')  
    <div class="col-md-12" id="main" data-url="{{URL::to('/')}}">
        @component('themes.bootstrap.components.portlet', ['icon' => 'fa fa-building-o', 'title' => 'Gestión de Roles', 'color' => 'font-blue-madison'])
            <div class="row">
                <div id="contenedorTablaRoles">
                    <div class="col-md-12">
                        <div class="row mb-2">
                            <div class="col-xs-12">                 
                                <button type="button" class='btn btn-success pull-right gestion-rol' data-toggle='tooltip'>
                                    <i class="fa fa-plus" aria-hidden="true"></i>Nuevo
                                </button> 
                            </div>
                        </div>
                    </div>
                    @include('material.sections.maquinaEstados.tabla-roles')
                </div>
            </div>
        @endcomponent        
    </div> 

    @component('themes.bootstrap.components.modal-large', [
        'id' => 'modalRoles', 
        'title' => 'Datos del Rol',
        'icon'=>'fa fa-plus-circle',
        'class'=>'',
        'width'=>'70',
        ])     
        @slot('body') 
            <div id="contenedor-form-rol" class="col-xs-12">    
    
            </div>                                
        @endslot
        @slot('footer')
            <div class="progress progress-striped active" style="display: none;">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    <span class="sr-only"> </span>
                </div>
            </div>
        @endslot
    @endcomponent

@endsection

@push('plugins')
    <!-- Validation Scripts -->
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/localization/messages_es.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/form-validation-md.js') }}" type="text/javascript"></script>

    <script src="{{ asset('assets/pages/scripts/general-request.js') }}" type="text/javascript"></script>
<!-- Modal Scripts -->
    <script src="{{ asset('assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js') }}" type="text/javascript"></script>
<!-- Select picker -->
    <script src="{{ asset('assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/i18n/es.js"></script> --}}
<!-- Radio Script -->
    <script src="{{ asset('assets/global/plugins/icheck/icheck.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/form-icheck.min.js') }}" type="text/javascript"></script>
<!-- Datatables Scripts -->   
    <script src="{{ asset('bower_components/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/datatables.net-responsive/js/dataTables.responsive.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/datatables.net-responsive-bs/js/responsive.bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/datatables.net-buttons/js/dataTables.buttons.min.js') }}"  type="text/javascript" ></script>
    <script src="{{ asset('bower_components/jszip/dist/jszip.min.js') }}"  type="text/javascript" ></script>
    <script src="{{ asset('bower_components/datatables.net-buttons/js/buttons.html5.min.js') }}" type="text/javascript" ></script>  
    
    <!-- DatePicker -->
    <script src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script> 
    <script src="{{ asset('js/general.js?v=1') }} {{ time() }}" type="text/javascript"></script>
    <script src="{{ asset('js/maquinaEstados/maquinaEstados.js?v=2') }} {{ time() }}" type="text/javascript"></script>
@endpush

@php
    if($errors->count()>0){
        $message = "Verifique los campos señalados en rojo";
        $title = "Algo Salió mal!";
        $type  = "error";
    }
@endphp
@push('functions')
<script>
    jQuery(document).ready(function () {
        @if (session('message'))
            swal({
                title: "{{ session('title') }}",
                text: "{{ session('message') }}",
                buttonsStyling: false,
                confirmButtonClass: "btn btn-success",
                type: "{{ session('type') }}",
            });
        @endif
        {{-- cuando no se envía por redirect --}}
        @if (isset($message))
            swal({
                title: "{{ $title }}",
                text: "{{ $message }}",
                buttonsStyling: false,
                confirmButtonClass: "btn btn-success",
                type: "{{ $type }}",
            });
        @endif       
        
        @if($errors->count()>0)
            swal({
                title: "{{ $title }}",
                text: "{{ $message }}",
                buttonsStyling: false,
                confirmButtonClass: "btn btn-success",
                type: "{{ $type }}",
            });        
        @endif
    }); 
</script>

@endpush