@extends('layout.app')
@section('title')
    Add Menu | {{env('APP_NAME')}}
@endsection
@section('content')
    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <div class="m-content">
            <div class="row">
                <div class="col-6">
                    <div class="m-portlet m-portlet--primary m-portlet--head-solid-bg m-portlet--head-sm" m-portlet="true" id="data">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <span class="m-portlet__head-icon">
                                        <i class="flaticon-users"></i>
                                    </span>
                                    <h3 class="m-portlet__head-text">
                                        Add Menu
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-angle-down"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-expand"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--begin::Form-->
						<form class="m-form m-form--fit m-form--label-align-right" >
                            <div class="m-portlet__body">
                                @if(Session::has('status'))
                                <div class="form-group m-form__group m--margin-top-10">
                                    <div class="alert alert-{{Session::get('alert')}}" role="alert">
                                        {{Session::get('status')}}
                                    </div>
                                </div>
                                @endif

                                <div class="form-group m-form__group">
                                    <label>Role Petugas</label>
                                    <select class="form-control col-md-12 m-input--air" data-placeholder="Pilih Role Petugas" required="" name="role" id="roles_select">
                                        <option value="">Pilih Role</option>
                                        @foreach($role as $row)
                                            <option value="{{$row->id}}">{{$row->role}}</option>
                                        @endforeach
                                    </select>
                                    <span class="help-block" style="color:red">{{$errors->first('role')}}</span>
                                </div>

                                <div class="form-group m-form__group">
                                    <label>Display Menu</label><br>
                                    <select class="form-control col-md-12 m-input--air" data-placeholder="Pilih Role Petugas" required="" name="menus" id="menus">
                                        <option value="">Pilih Menu</option>
                                        @foreach($head_menu as $row)
                                                <optgroup label="{{$row->nama}}">
                                                <!-- untuk menu tanpa submenu -->
                                                @foreach($sub_head as $sh)
                                                    @if(substr($row->urut,0,1) == substr($sh->urut,0,1))
                                                        <option value="{{$row->id}}||{{$sh->id}}">{{$sh->nama}}</option>
                                                    @endif
                                                @endforeach
                                                <!-- end untuk menu tanpa submenu -->
                                                <!-- start head sub menu -->
                                                @foreach($subhead_menu as $subhead)
                                                    <!-- <option value="{{$row->id}}||{{$subhead->id}}"><b>{{$subhead->nama}}</b></option> -->
                                                    @if(substr($row->urut,0,1) == substr($subhead->urut,0,1))
                                                        <option value="{{$row->id}}||{{$subhead->id}}">*{{$subhead->nama}}</option>
                                                        @foreach($sub_menu as $subrow)
                                                            @if(substr($subhead->urut,0,2) == substr($subrow->urut,0,2))
                                                                <option value="{{$subhead->id}}||{{$subrow->id}}">&nbsp&nbsp&nbsp{{$subrow->nama}}</option>
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                @endforeach
                                                <!-- end of head sub menu -->
                                                </optgroup>
                                        @endforeach
                                    </select>
                                    <span class="help-block">Ganti untuk menambah menu setiap role</span>
                                </div>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                </div>

                <div class="col-6">
                    <div class="m-portlet m-portlet--primary m-portlet--head-solid-bg m-portlet--head-sm" m-portlet="true" id="data">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <span class="m-portlet__head-icon">
                                        <i class="flaticon-users"></i>
                                    </span>
                                    <h3 class="m-portlet__head-text">
                                        View Menu
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-angle-down"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-expand"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <form class="m-form m-form--fit m-form--label-align-right" method="post" action="{{route('datarolemenus-post')}}">
                            <!-- additional -->
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="action_form" value="add">
    
    
                            <div class="m-portlet__body">
                                <div style="padding:15px">
                                <p id="role_selected"></p>
                                <input type="text" value="" hidden name="role" id="role_selected_val"/>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <td align="center">Menu</td>
                                                <td align="center">Action</td>
                                            </tr>
                                        </thead>
                                        <tbody id="table_menu">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="m-portlet__foot m-portlet__foot--fit">
                                <div class="m-form__actions">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                    <a href="{{URL::previous()}}" class="btn btn-secondary">Back</a>
                                </div>
                            </div>
                            <!--end::Form-->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('css')
    <link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('js')
    <!--begin::Page Vendors -->
    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#menus').select2({
                placeholder: 'Tentukan menu setiap role...',
                width: 'resolve'
            });
            $('#menus').prop('disabled', true);
        });


        $("#roles_select").change(function(){
            $("#role_selected").text("Role Terpilih : "+$("#roles_select option:selected").text());
            $("#role_selected_val").val($("#roles_select option:selected").val());
            $('#table_menu').empty();
            $('#menus').prop('disabled', false);

            if($("#roles_select option:selected").val() === ''){
                $('#menus').prop('disabled', true);
                $("#role_selected").text("Role Terpilih : -");
            }
        });


        $("#menus").change(function(){
            var menu_id = $("#menus option:selected").val();
            var menu_name = $("#menus option:selected").text();
            
            $("#table_menu").append('<tr>'+
                    '<td>'+menu_name+' <input hidden type="text" value="'+ menu_id +'" name="menu[]"/></td>'+
                    '<td align="center"><a href="javascript:void(0)" onclick="del($(this).parent().parent())"><i class="fa fa-times"></i> delete</a></td>'+
            '</tr>');
        });

        function del(rm){
            var aa = confirm('Yakin menghapus data ini ?');
            if(aa){
                $(rm).remove();
            }else{
                return false;
            }
        }
       
    </script>
@endsection