<div class="card-body">
    <div class="row">
        <div class='col-sm-6'>
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm">Página a permitir:</span>
                <input id="myInput" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"
                placeholder="Ingresa nombre de página a filtrar..">
            </div>
            @push('scripts')
                <script>
                    $(document).ready(function() {
                        $("#myInput").on("keyup", function() {
                            var value = $(this).val().toLowerCase();
                            $("#myTable tr").filter(function() {
                                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                            });
                        });
                    });
                </script>
            @endpush

            <table class="table" id="tpermisos">
                <thead class="table">
                    <tr>
                        <th class="active">
                            <input type="checkbox" class="select-all checkbox" name="select-all"/>
                            {!! Form::label('todos', 'Todos') !!}
                        </th>
                        <th>Pagina</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    @foreach ($paginasdisponibles as $key => $disponibles)
                        <tr>
                            <td width="5%">
                                {{-- {!! Form::input('idpagina',null, ['name' => 'permi[' . $disponibles->idpagina . '][idpagina]']) !!} --}}
                                {!! Form::checkbox('idpagina', $disponibles->idpagina, null, ['class'=>"chk-box", 'name' => 'permi[' . $key . '][idpagina]']) !!}
                                {{-- {!! Form::hidden('id_formulario', $rolpermisos->id_formulario, ['name' => 'permi[' . $rolpermisos->id_rol_permiso . '][id_formulario]']) !!} --}}
                                {{-- {!! Form::checkbox('listar', '1', $rolpermisos->listar, ['name' => 'permi[' . $rolpermisos->id_rol_permiso . '][listar]']) !!} --}}
                            </td>
                            <td width="5%">
                                {{$disponibles->nombre}}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="col-sm-6">
            <div class="input-group input-group-sm mb-3">
                <span class="input-group-text" id="inputGroup-sizing-sm">Páginas permitidas:</span>
                <input id="myaplicados" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"
                placeholder="Ingresa nombre de página a filtrar..">
            </div>
            @push('scripts')
                <script>
                    $(document).ready(function() {
                        $("#myaplicados").on("keyup", function() {
                            var value = $(this).val().toLowerCase();
                            $("#permiactuales tr").filter(function() {
                                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                            });
                        });
                    });
                </script>
            @endpush
                <table class="table" id="actuales">
                    <thead class="table">
                        <tr>
                            <th>Pagina</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody id="permiactuales">
                        @foreach ($permiso as $key=>$value)
                            <tr>
                                <td width="5%">
                                    {{$value->nombre}}
                                </td>
                                <td width="5%">
                                    {{$value->estado}}
                                    {{-- <input class="form-control" id="myInput" type="text" value={{$value->estado}}> --}}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
        </div>
    </div>    
</div>

<div class="card-footer" align="right">
    {!! Form::hidden('updatepermisos', 1) !!}
    {!! Form::hidden('idrol', $rol->idrol) !!}
    <a href="{{ URL::previous() }}" class="btn btn-secondary">Cancelar</a>
    <input type="submit" value="Guardar" class="btn btn-success">
</div>

@push('scripts')
<script>
    $('document').ready(function(){
        
        $(".select-all").click(function (){
            $('.chk-box').attr('checked', this.checked)
        });
    
        $(".chk-box").click(function(){
            if($(".chk-box").length == $(".chk-box:checked").length){
                $(".select-all").attr("checked", "checked");
            }else{
                $(".select-all").removeAttr("checked");
            }
        });
    });
</script>
@endpush
