@extends('admin::layouts.master')
@section('content')
    <div class="row">
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header border-0 pb-0">
                    <div class="chart-head-text project-cri">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h4 class="card-title float-none">Fill the below Information</h4>
                            </div>
                        </div>
                    </div>
                    <div class="border-bottom my-3"></div>
                </div>
                <div class="card-body pt-0">
                    <div class="row padd-bot-one">
                        <div class="col-md-12">
                            <div class="row justify-content-between">
                                <div class="col-md-5">
                                    <div class="form-group select-custom">
                                        <label for="exampleFormControlSelect1">Select Role <span
                                                class="danger">*</span></label>
                                        <form id="roleForm">
                                            <select class="select2 form-control form-control-lg"
                                                data-placeholder="Choose Role" name="role_id"
                                                onchange="$('#roleForm').submit()">
                                                @foreach ($roles as $value)
                                                    <option value="{{ $value->id }}"
                                                        @if ($value->id == $role->id) selected @endif>
                                                        {{ $value->name }}</option>
                                                @endforeach
                                            </select>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <form class="form" role="post-data" method="POST" action="/api/admin/role-permissions/store"
                                reload="true">
                                @csrf
                                <input type="hidden" value="{{ $role->id }}" name="role_id">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="role-permission-text my-3">
                                            <h1>Role Permission</h1>
                                            <p>Select Moudles.</p>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table permission-table order-list">
                                                <tbody>
                                                    <tr>
                                                        <td width="400px">
                                                            <h2>Select All Modules</h2>
                                                        </td>
                                                        <td>
                                                            <div class="filter-check-permission">
                                                                <input type="checkbox" class="filled-in" id="selectall">
                                                                <label class="form-check-label" for="selectall">All</label>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @if (count($menus) > 0)
                                                        @php
                                                            $appType = '';
                                                        @endphp
                                                        @foreach ($menus as $menu)
                                                            <tr>
                                                                <td>
                                                                    <h2><i class="fa fa-arrow-circle-o-right"
                                                                            aria-hidden="true"></i>
                                                                        {{ $menu->name }}
                                                                    </h2>
                                                                </td>
                                                                <td>
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="filter-check-view">
                                                                            <input type="checkbox"
                                                                                class="filled-in check_menu menu_{{ $menu->id }}"
                                                                                id="menu_{{ $menu->id }}"
                                                                                onclick="checkAllSubdMenu({{ $menu->id }},this)"
                                                                                name="menu_ids[]"
                                                                                value="{{ $menu->id }}"
                                                                                {{ $role->hasMenu($menu->id) ? 'checked' : '' }}>
                                                                            <label class="form-check-label"
                                                                                for="menu_{{ $menu->id }}"></label>
                                                                        </div>
                                                                        @if (isset($menu->pageAction) && count($menu->pageAction) > 0)
                                                                            <div class="edit-pop ml-4">
                                                                                <p><a href="#addRoleModal"
                                                                                        data-toggle="modal"
                                                                                        onclick="setPermissions('{{ $menu->id }}','{{ $role->id }}')"><i
                                                                                            class="fa fa-pencil"
                                                                                            aria-hidden="true"></i>Edit</a>
                                                                                </p>
                                                                            </div>
                                                                        @endif
                                                                    </div>

                                                                </td>
                                                            </tr>
                                                            @if (count($menu->subMenus) > 0)
                                                                @foreach ($menu->subMenus as $subMenu)
                                                                    <tr>
                                                                        <td>
                                                                            <h5 class="ml-3"><i class="fa fa-angle-right"
                                                                                    aria-hidden="true"></i>
                                                                                {{ $subMenu->name }}</h5>
                                                                        </td>
                                                                        <td>
                                                                            <div class="d-flex align-items-center">
                                                                                <div class="filter-check-view-default">
                                                                                    <input type="checkbox"
                                                                                        class="filled-in check_sub_menu sub_menu_{{ $menu->id }}"
                                                                                        id="sub_menu_{{ $subMenu->id }}"
                                                                                        name="menu_ids[]"
                                                                                        value="{{ $subMenu->id }}"
                                                                                        {{ $role->hasMenu($subMenu->id) ? 'checked' : '' }}>
                                                                                    <label class="form-check-label"
                                                                                        for="sub_menu_{{ $subMenu->id }}"></label>
                                                                                </div>
                                                                                @if (isset($subMenu->pageAction) && count($subMenu->pageAction) > 0)
                                                                                    <div class="edit-pop ml-4"
                                                                                        data-toggle="modal"
                                                                                        data-target="#exampleModal">
                                                                                        <p><a href="#addRoleModal"
                                                                                                data-toggle="modal"
                                                                                                onclick="setPermissions('{{ $subMenu->id }}','{{ $role->id }}')"><i
                                                                                                    class="fa fa-pencil"
                                                                                                    aria-hidden="true"></i>
                                                                                                Edit
                                                                                            </a>
                                                                                        </p>
                                                                                    </div>
                                                                                @endif
                                                                            </div>

                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-2">
                                        <a href="##">
                                            <button type="reset" class="btn btn-filter btn-export btn-block"
                                                role="button" onclick="this.form.reset()">Reset</button>
                                        </a>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-filter btn-primary btn-block" role="button"
                                            data-request="ajax-submit" data-target="[role=post-data]">Submit</button>

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade new-modal" id="addRoleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header py-3">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="close close-btn-filter" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">Close <i class="fa fa-times" aria-hidden="true"></i></span>
                    </button>
                </div>
                <div class="modal-body pb-4">
                    <div class="text-center modal-top-head pb-3">
                        <h1>Add new project</h1>
                    </div>
                    <div id="page-modal-render">
                        {{-- render dynamic pages modal here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(function() {
            $("#selectall").click(function() {
                if ($(this).prop('checked') == true) {
                    $('.check_menu').attr('checked', true);
                    $('.check_sub_menu').attr('checked', true);
                } else {
                    $('.check_menu').attr('checked', false);
                    $('.check_sub_menu').attr('checked', false);
                }
            });

            // add multiple select / deselect functionality
            $(document).on("click", "#selectAllPage", function() {
                if ($(this).prop('checked') == true) {
                    $('.checkPage').attr('checked', true);
                } else {
                    $('.checkPage').attr('checked', false);
                }
            });
        });

        function checkAllSubdMenu(parent_id, event) {
            if ($('.menu_' + parent_id).prop('checked') == true) {
                $('.sub_menu_' + parent_id).attr('checked', true);
            } else {
                $('.sub_menu_' + parent_id).attr('checked', false);
            }
        }

        function setPermissions(id, role_id) {
            $_token = "{{ csrf_token() }}";
            $.ajax({
                headers: {
                    'X-CSRF-Token': $('meta[name=_token]').attr('content')
                },
                url: "{{ route('admin.role-permissions.render-page') }}",
                type: 'POST',
                cache: false,
                data: {
                    'id': id,
                    '_token': $_token,
                    'role_id': role_id,
                },
                datatype: 'html',
                success: function(data) {
                    $('#page-modal-render').html(data.data);
                }
            });
        }
    </script>
@endsection