@extends('admin.layout')
@section('title','Menus')
@section('styles')
    <style>
        body.dragging, body.dragging * {
            cursor: move !important;
        }

        .dragged {
            position: absolute;
            opacity: 0.5;
            z-index: 2000;
        }

        ol.example li.placeholder {
            position: relative;
            /** More li styles **/
        }

        ol.example li.placeholder:before {
            position: absolute;
            /** Define arrowhead **/
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="pull-right col-md-6">
                    <button type="button" class="btn btn-default sombra" style="width: 100%" onclick="showMenuModal()">Agregar
                        Menú
                    </button>
                    <button type="button" class="btn btn-success sombra" style="width: 100%" onclick="saveMenu()">Guardar
                        Cambios
                    </button>
                </div>
                <div class="col-md-6 pull-left">
                   {{-- <label>Buscar Vistas</label>--}}
                    <div class="form-group">
                        <input id="searchViews" type="search" class="form-control input-md" placeholder="Buscar permisos...">
                        <button class="btn btn-primary pull-right" onclick="searchView()">Buscar</button>
                    </div>
                </div>
            </div>


        </div>
        <hr>
        <div class="col-lg-6 pull-left">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">
                        Permisos </h3>
                </div>
                <div class="panel-body" style="overflow-y: auto; max-height:85%; height: 600px;">
                    <ol id="permissionViews" class="nested_with_switch vertical list-group">
                        @foreach($permissions as $permission)
                            <li class="list-group-item ">
                                <a href="#"
                                   data-id="0"
                                   data-title="{{$permission->name."(".$permission->description.")"}}"
                                   data-permission="{{$permission->id}}"
                                   data-visible="true"
                                   data-class="fa-circle-o"
                                   onclick="showMenuModal(this);"
                                ><i class="fa fa-circle-o"></i>{{$permission->name}}
                                    <em>{{" (".$permission->description.")"}}</em></a>
                            </li>
                        @endforeach
                    </ol>
                </div>

            </div>
        </div>
        <div class="col-lg-6 pull-right">
            <div class="panel-heading">
                <h3 class="panel-title text-center">
                    Menú </h3>
            </div>
            <div class="panel-body" style="overflow-y: auto; max-height:85%; height: 600px;">
                <ol id="menuGroup" class="nested_with_switch vertical list-group">
                    @foreach($menus as $menu)

                        <li class="list-group-item {{($menu['visible'])?"":"disabled"}}">
                            <a class=".menu" href="#"
                               data-id="{{$menu['id']}}"
                               data-title="{{$menu['title']}}"
                               data-permission="{{$menu['permission_id']}}"
                               data-class="{{$menu['icon']}}"
                               data-visible="{{$menu['visible']}}"
                               data-identifier="{{$menu['identifier']}}"
                               onclick="showMenuModal(this);"
                            ><i class="fa {{$menu['icon']}} "></i>
                                {{$menu['title']}}</a>
                            @if(sizeof($menu['submenues'])>0)
                                <ol class="list-group-item">
                                    @foreach($menu['submenues'] as $submenu)
                                        <li class="list-group-item {{($submenu['visible'])?"":"disabled"}}">
                                            <a href="#"
                                               data-id="{{$submenu['id']}}"
                                               data-title="{{$submenu['title']}}"
                                               data-visible="{{$submenu['visible']}}"
                                               onclick="showMenuModal(this);"
                                               data-class="{{$submenu['icon']}}"
                                               data-identifier="{{$menu['identifier']}}"
                                               data-permission="{{$submenu['permission_id']}}"
                                            ><i class="fa {{$submenu['icon']}}"></i>
                                                {{$submenu['title']}}</a>
                                        </li>
                                    @endforeach
                                </ol>
                            @endif
                        </li>
                    @endforeach
                </ol>
            </div>
        </div>
    </div>

    <!-- Modal Menú-->
    <div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="menuModalLabel">Agregar menú</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="panel-group" id="editMenuForm">
                        <div class="panel panel-default panel-success">
                            <div class="panel-body">
                                <div class="row">
                                    <input type="hidden" id="id" name="id">
                                {{csrf_field()}}

                                <!-- Text input-->
                                    <div class="col-md-offset-1 col-md-12">
                                        <label>Título del menú:</label>
                                        <div class="form-group">
                                            <input id="title" name="title" type="text" placeholder="Ejemplo: Dependencias"
                                            onkeyup="this.value = this.value.toUpperCase();" class="form-control input-md" required="">

                                        </div>
                                    </div>

                                    <!-- Select Basic -->
                                    <div class="col-md-offset-1 col-md-12">
                                        {{--<label>Icono</label>--}}
                                        <div class="form-group">
                                            <span>Icono asignado: <i class="fa " id="selectedIcon"></i></span>
                                            <select id="icon" name="icon" class="form-control" data-show-icon="true">
                                                <option value="">Seleccione un icono</option>
                                                @foreach($clases as $clase)
                                                    <option value="{{$clase->clases}}"
                                                            data-icon="{{$clase->clases}}"> {{$clase->clases}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Multiple Radios (inline) -->
                                    <div class="col-md-offset-1 col-md-10">
                                        <div class="form-check form-check-radio">
                                            <label class="form-check-label" for="visible-0">
                                                <input class="form-check-input" type="radio" name="visible"
                                                       id="visible-0" value="true" checked="checked">
                                                <span class="form-check-sign"></span> Visible
                                            </label>
                                            <label class="form-check-label" for="visible-1">
                                                <input type="radio" name="visible" id="visible-1" value="false">
                                                <span class="form-check-sign"></span> Invisible
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="submitButton" class="btn btn-primary sombra">Guardar</button>
                    <button type="button" class="btn btn-secondary sombra" data-dismiss="modal">Cancelar</button>

                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->

@endsection
@section('scripts')
    <script src="js/sortable.js"></script>.
    <script src="js/menus.js"></script>.
@endsection