@if(!isset($jsonView) || $jsonView === false)
@extends("la.layouts.edit")

@section("contentheader_title")
    <a href="{{ url(config('laraadmin.adminRoute') . '/grupos') }}">Grupo</a>:
@endsection
@section("contentheader_description", $model->$view_col)
@section("section", "Grupos")
@section("section_url", url(config('laraadmin.adminRoute') . '/grupos'))
@section("sub_section", "Edit")

@section("htmlheader_title", "Editar Grupos  : ".$model->$view_col)

@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="modal-header">
    <button type="button" class="close btnClose" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="EditModalLabel">Editar Grupo</h4>
</div>
<div class="modal-body">
{!! Form::model($model, ['route' => [config('laraadmin.adminRoute') . '.grupos.update', $model->id ], 'method'=>'PUT', 'id' => 'grupo-edit-form', 'class' => 'submit-form', 'novalidate' => 'novalidate']) !!}
@endif
    <div class="box-body nosepass">
        @la_form($module)
        @la_access("GrupoUsuarios", "create")
            <div class="form-group col-lg-6">
                <div class="input-group">
                    <select class="form-control no-serialize" rel="select2" required="1" name="user">
                        <option value="0">Seleccione una Opción..</option>
                        @foreach($usuarios as $user)
                            <option value="{{ $user->id }}">{{ $user->name . ' ' . $user->lastName }}</option>
                        @endforeach
                    </select>           
                    <span class="input-group-btn">
                        <button class="unstyled-buttom euron add-ic" data-action="{{ url(config('laraadmin.adminRoute') . '/grupousuarios') }}" data-method="POST" type="button" id="user-button"></button>
                    </span>
                </div>
            </div>
        @endla_access
        <div class="no-row notorius_big">
            <table id="examples1" class="table table-bordered data-table">
                <thead>
                    <tr class="success">
                        @foreach($dataCols as $col)
                            <th>{{ ucfirst(ReplaceLabels($col, $viewOrTable)) }}</th>
                        @endforeach
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@if(!isset($jsonView) || $jsonView === false)
{!! Form::close() !!}
</div>
<div class="modal-footer">
    <button type="button" class="unstyled-buttom" data-dismiss="modal" title="Cancelar">
        <i class="fa fa-times-circle-o" aria-hidden="true"></i>
    </button>
    <button class="unstyled-buttom " type="submit" title="Guardar">
        <i class="fa fa-floppy-o" aria-hidden="true"></i>
    </button>
</div>
@endif

@push('scripts')
<script>
    var grupoUsuariosTable = null;
    $(function () {
        $('#grupo-ajax-update-form').attr('action', "{{ url(config('laraadmin.adminRoute') . '/grupos/' . $model->id) }}");
        $('#grupo-ajax-update-form').attr('method', 'POST');
        $('#grupo-ajax-update-form').data('method', 'PUT');
        
        $('#ajax-modal-title').text('Editar Grupo');
        $('#ajax-modal-saveButton').remove();
        $('#ajax-modal-saveButton').remove();
        $('#ajax-modal-footer').html(`
            <button type="button" class="unstyled-buttom" data-dismiss="modal" title="Cancelar">
                <i class="fa fa-times-circle-o" aria-hidden="true"></i>
            </button>
            <button class="unstyled-buttom " type="submit" title="Guardar">
                <i class="fa fa-floppy-o" aria-hidden="true"></i>
            </button>
        `);

        grupoUsuariosTable = $("#examples1").DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url(config('laraadmin.adminRoute') . '/grupousuario_dt_ajax') }}" + '{{(Request::getQueryString() ? ('?' . Request::getQueryString()) : '') . "&filtergrupoquery=equal to&filtergrupo_String=" . $model->nombre }}',
            language: {
                lengthMenu: "_MENU_",
                search: "<div class='datatables-filter-div' data-datatable='table'>_INPUT_</div>",
                searchPlaceholder: "Buscar"
            }
        });

        $('.AddGrupoUsuarioModalCloseButton').on('click', function () {
            $('#AddGrupoUsuarioModal').modal('toggle');
        });
        $('button[data-dismiss-modal=modal2]').on('click', function () {
            $('#AddGrupoUsuarioModal').modal('hide');
        });

        $('#user-button').on('click', function(e){
            e.preventDefault();
            var $me = $(this);
            var user = $('[name=user]').val();

            if(user === null || user <= 0){
                swal({
                    title: 'Debe seleccionar un Usuario',
                    type: 'error',
                    allowOutsideClick: false,
                    confirmButtonText: 'Ok',
                    confirmButtonColor: '#605CA8'
                });
                return;
            }

            var data = {
                usuario: user,
                grupo: '{{ $model->id }}'
            };
            
            $.ajax({
                url: $me.data('action'),
                method: $me.data('method'),
                data: data,
                success: function (response) {
                    if (response.success) {
                        swal({
                            title: response.html,
                            type: 'success',
                            allowOutsideClick: false,
                            confirmButtonText: 'Ok',
                            confirmButtonColor: '#605CA8'
                        }).then(function () {
                            AfterGrupoUsuariosAdd();
                        });
                    } else {
                        swal({
                            title: response.title,
                            type: 'error',
                            html: response.html,
                            allowOutsideClick: true,
                            confirmButtonText: 'Ok',
                            confirmButtonColor: '#605CA8'
                        });
                    }
                }
            });
        });

        var ghaul = $('.ghaul');
        ghaul.clone(true).appendTo('.nosepass .dataTables_length');
        ghaul.remove();
        $('.dataTables_length .ghaul').show();

        var dominus = $('.dominus');
        dominus.clone(true).prependTo('.nosepass .dataTables_filter');
        dominus.remove();
        $('.dataTables_filter .dominus').show();

        var dt_f = $('.dataTables_length');
        dt_f.parent().removeClass('col-sm-6');
        dt_f.parent().addClass('col-sm-8');
        dt_f.parent().css('padding-top', '7px');

        var dt_s = $('.dataTables_filter');
        dt_s.parent().removeClass('col-sm-6');
        dt_s.parent().addClass('col-sm-4');
        dt_s.css('float','right');
        dt_s.parent().css('padding-top', '7px');
    });

    function AfterGrupoUsuariosAdd(){
        grupoUsuariosTable.ajax.reload();
        ReloadDropdownUsers();
    }

    function AfterGrupoUsuariosEdit(){
        $('#EditGrupoUsuarioModal').modal('toggle');
        grupoUsuariosTable.ajax.reload();
        ReloadDropdownUsers();
    }

    function AfterGrupoUsuariosDelete(){
        grupoUsuariosTable.ajax.reload();
        ReloadDropdownUsers();
    }

    function ReloadDropdownUsers(){
        $.ajax({
            url: "{{ url(config('laraadmin.adminRoute') . '/grupos/usuarios') }}?grupoId={{ $model->id }}",
            method: 'GET',
            success: function (response) {
                if (response.success) {
                    $('[name=user]').empty();
                    $('[name=user]').append(`<option value="0">Seleccione una Opción..</option>`);
                    response.data.forEach(function(item, index){
                        $('[name=user]').append(`<option value="${item.id}">${item.name} ${item.lastName}</option>`);
                    });
                } else {
                    // TODO: Quitar o Comentar esta línea
                    swal({
                        title: response.title,
                        type: 'error',
                        html: response.html,
                        allowOutsideClick: true,
                        confirmButtonText: 'Ok',
                        confirmButtonColor: '#605CA8'
                    });
                }
            }
        });
    }

    function GetData2(id) {
        var url = "{{ url(config('laraadmin.adminRoute') . '/grupousuarios') }}/" + id + "/edit";
        $.get(url, {}, function (response) {
            $("[rel=select2]").select2('destroy');
            $('#EditGrupoUsuarioModal #edit').html(response);
            $('#btnEdit2' + id + ' i').removeClass('fa-spinner');
            $('#btnEdit2' + id + ' i').removeClass('fa-spin');
            $('#btnEdit2' + id + ' i').addClass('fa-edit');
            $('.btn').attr("disabled", false);
            $('#EditGrupoUsuarioModal').modal('show');
        }).fail(function () {
            $('#btnEdit2' + id + ' i').removeClass('fa-spinner');
            $('#btnEdit2' + id + ' i').removeClass('fa-spin');
            $('#btnEdit2' + id + ' i').addClass('fa-edit');
            $('.btn').attr("disabled", false);
        });
    }

    function Edit2(id) {
        $('#btnEdit2' + id + ' i').removeClass('fa-edit');
        $('#btnEdit2' + id + ' i').addClass('fa-spinner');
        $('#btnEdit2' + id + ' i').addClass('fa-spin');
        $('.btn').attr("disabled", true);
        GetData2(id);
        return false;
    }
</script>
@endpush

@la_access("GrupoUsuarios", "edit")
<div class="modal fade" id="EditGrupoUsuarioModal" tabindex="-1" role="dialog" aria-labelledby="EditModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="edit"></div>
    </div>
</div>
@endla_access