@extends('layouts.backend.master')
@push('styles')
<link rel="stylesheet" href="{{ asset('backend/css/menu.css') }}">
@endpush
@section('title',__('Menu'))
@section('content')
<div class="row" id="content_add_new">
    <div class="col-xl-12 col-lg-8 col-12">
        <div class="box">

            <div class="box-header with-border">
                @if(isset($getMenu->id))
                <h4 class="box-title">{{__('Edit menu') }}</h4>
                @else
                <h4 class="box-title">{{__('Create menu') }}</h4>
                @endif

            </div>
            <div class="box-body">
                @if(isset($getMenu->id))
                <input type="hidden" name="menuId" id="menuId" value="{{$getMenu->id ? $getMenu->id : 0 }}">
                @endif
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>{{__('Name') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control username-validation" placeholder="{{__('Enter menu name')}}" name="name" id="name" value="{{ isset($getMenu->name) ? $getMenu->name : '' }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>{{__('Select role') }} <span class="text-danger">*</span></label>
                            <select class="form-control" id="roles_id" name="roles_id">
                                <option value="">{{__('Select role') }}</option>

                                @foreach($getRolesData as $roles)
                                <option value="{{$roles->id}}" {{ $roles->id == (isset($getMenu->roles_id) ?
                                    $getMenu->roles_id : '') ? 'selected' : ''}}>
                                    {{ $roles->name ? $roles->name : '' }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" id="routeMenuListBox" {{!isset($getMenu->id) ? 'style="display:none"' : ''}}>
    <div class="col-xl-4 col-lg-8 col-12">
        <div class="box">
            <div class="box-header with-border">
                <h4 class="box-title">{{__('Select route list') }}</h4>
                <input type="text" class="form-control mt-1" placeholder="{{__('search routes')}}" onkeyup="searchRoute()" id="search">
                <select name="top_category" class="form-control mt-1 top_category">
                    <option value=""> {{__('Select top level category')}}</option>
                    @foreach ($categories as $row)
                    <option value="{{  $row->id }}">{{ $row->name }}</option>
                    @endforeach
                </select>
                <select name="" id="category-select" class="form-control mt-1 sub_category" onchange="filterCategory()">
                    <option value="">{{__('Select sub category')}}</option>
                </select>
            </div>
            <div class="box-body">
                @if(!empty($getRouteData))
                <div class="slimScrollDiv menu">
                    @endif
                    <div class="mailbox-messages inbox-bx">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <tbody>
                                    <div class="form-group" id="searchTable">

                                        @foreach($getRouteData as $key => $row)
                                        <div class="main-div">
                                            @if(count($row['data']) > 0)
                                            <h6> <strong> {{__($row['cn']) ?? 'ND'}}</strong></h6>
                                            @endif
                                            @foreach ($row['data'] as $route)
                                            <div class="checkbox">
                                                <input type="checkbox" onchange="checkBoxChange(event)" class="routeslist" id="routes_{{$route->id}}" name="routes_id[]" value="{{$route->id}}" data-name="{{ $route->name ? $route->name : '' }}" data-id="{{ $route->id ? $route->id : '' }}" @php if(isset($getMenu->id))
                                                {
                                                if($routeIdArr)
                                                {
                                                if (in_array($route->id, $routeIdArr)) {

                                                echo 'checked';
                                                }

                                                }
                                                }
                                                @endphp >
                                                <label for="routes_{{$route->id}}">{!! __($route->name) ? __($route->name) : ''
                                                    !!} -- {{$route->url}}
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>

                                        @endforeach

                                    </div>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if(!empty($getRouteData))
                </div>
                @endif
            </div>

        </div>

    </div>
    <div class="col-xl-8 col-12" id="menuBoxList" {{!isset($getMenu->id) ? '' : ''}}>
        <div class="box">
            <div class="box-body pt-10">
                <div class="mailbox-read-info">
                    <h4 class="box-title">{{__('Menu list') }}</h4>
                </div>
                <div class="box-body menu">
                    <ul id="myEditor" class="sortableLists list-group">
                    </ul>
                </div>
            </div>
            <div class="box-footer">
                <div class="pull-right">
                    @if(!empty($getMenu->id))
                    <button type="button" id="btnOutput" class="btn btn-primary"> {{__('Update') }}</button>
                    <a href="{{route('super-user.menu.index')}}">
                        <button type="button" id="btnOutput" class="btn btn-primary"> {{__('Cancel') }}</button>
                    </a>

                    @else
                    <button type="button" id="btnOutput" class="btn btn-primary"> {{__('Save') }}</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="box">
            <div class="box-header with-border">
                <h4 class="box-title">{{__('Manage menu') }} </h4>
            </div>
            <div id="custom_toolbar" class="float-right">
                <div class="btn-group float-right" role="group" data-toggle="tooltip" data-placement="top" title="{{__('Export data')}}">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-download"></i>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <li><a class="dropdown-item" href="#" onclick="exportTasks('menus',['id','role','name'],'csv')">{{__('CSV')}}</a></li>
                        <li><a class="dropdown-item" href="#" onclick="exportTasks('menus',['id','role','name'],'zip')">{{__('ZIP')}}</a></li>
                    </ul>
                </div>
                <a data-toggle="tooltip" data-placement="top" title="{{__('Show archived')}}" class="btn btn-secondary float-right ml-1" href="{{ route('super-user.menu.showArchived') }}"> <i style="color:#fff;" class="fa fa-archive"></i></a>
            </div>
            <div class="box-body">
                <div class="table-responsive su_tables">
                    <table id="bstable" class="table-striped" data-icons="icons" data-show-search-clear-button="true" data-search-time-out="2000" data-icons-prefix="fas" data-filter-control="true" table-for="manage_menu" data-pagination="true" data-show-export="false" data-show-columns-toggle-all="true" data-show-columns="true" data-show-search-clear-button="true" data-toolbar="#custom_toolbar" data-toggle="table" data-unique-id="id" data-export-options='{"fileName": "{{ config('app.name')." - Menu - ".date('d/m/Y-H:m:s')}}"}' data-search-time-out="2000">
                        <thead>
                            <tr>
                                <th title="{{__('#')}}" data-field="id" data-sortable="true" data-switchable="false" data-width="50" data-width-unit="px">#</th>
                                <th title="{{__('Name')}}" data-field="name" data-filter-control="input" data-sortable="true">{{__('Name') }}</th>
                                <th title="{{__('Role')}}" data-field="role" data-filter-control="select" data-sortable="true">{{__('Role') }}</th>
                                <th title="{{__('Action')}}" width="120px" data-width="120" data-width-unit="px" data-force-hide="true">{{__('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($getMenuData as $key => $menu)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $menu->name ? $menu->name : '' }}</td>
                                <td>{{ $menu->roleName ? $menu->roleName : '' }}</td>
                                <td class="display-flex">
                                    <a href="{{ url('super-user/menu/viewbyid',
                                                    ['menuId' =>  basicEncrypt($menu->id)]) }}" class="btn btn-sm btn-info btnEditAction" data-toggle="tooltip" data-placement="top" title="{{__('Edit')}}"><i class="fa fa-edit"></i>
                                    </a>
                                    <a class="btn btn-sm btn-primary ml-2 archive" title="{{__('Archive')}}" data-toggle="tooltip" data-iteration="{{$loop->iteration}}" data-id="{{basicEncrypt($menu->id)}}" data-url="{{ route('super-user.menu.isArchived') }}" data-name="{{ $menu->name }}">
                                        <i style="color:#fff;" class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="get_category_url" value="{{ route('super-user.menu.getsubcategory') }}">
@endsection

@push('scripts')
<script src="{{ asset('backend/vendor/dropdown/jquery-menu-editor.js')}}"></script>
<script type="text/javascript" src="{{ asset('backend/vendor/dropdown/bootstrap-iconpicker/js/iconset/fontawesome5-3-1.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('backend/vendor/dropdown/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('frontend/js/pages-js/super-user-menu.js')}}"></script>
<script>
    let getMenusItemsByparentId = @json($getMenusItemsByparentId);
</script>

@endpush