@extends('admin.layout.master')
@section('title', 'ROLE MANAGEMENT')
@section('content')
    <style>
        .tree ul {
            display: none;
            padding-left: 2rem;
        }
        .tree li {
            padding: 0.65rem 0;
            cursor: pointer;
            vertical-align: middle;
        }
        @media (max-width: 992px) {
            .tree li {
                display: inline-block;
            }
        }
        .tree label {
            cursor: pointer;
        }
        .tree input[type=checkbox] {
            margin: -2px 6px 0 0px;
        }
        .has>label {
            color: #000;
        }
        .tree .total {
            color: #e13300;
        }
        li {
            list-style: none !important;
        }
        .table thead th {
            vertical-align: middle;
        }
        .table td,
        .table th {
            color: #000000;
        }
    </style>
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center justify-content-between">
            <h4 class="col-6 pl-0">{{ __('obs.role') }} {{ __('obs.create') }}</h4>
            <a href="{{ route('role.create') }}" class="btn btn-sm btn-light">{{ __('obs.new') }}</a>
        </div>
        <div class="card-body">
            <form action="{{ route('role.store') }}" method="post">
                @csrf
                <div class="row justify-content-end">
                    <div class="col-md-6">
                        <div class="row gx-2">
                            <label for="name" class="col-xl-2 col-sm-3 form-label">{{ __('obs.role') }} {{ __('obs.name') }}</label>
                            <div class="col-xl-10 col-sm-9">
                                <input type="text" name="name" id="name" class="form-control" required>
                                <input type="hidden" name="auto_asigned_permission_ids" id="auto_asigned_permission_ids">
                            </div>
                        </div>
                    </div>
                    <button style="position: fixed;bottom:10%;right:2px;z-index:2;" class="btn-sina-submit" type="submit">
                        <i class="fa fa-save"></i>
                        {{ __('obs.save') }}
                    </button>
                </div>
                <hr>
                <div class="row g-3" >
                    <div class="col-lg-3" style="max-height: calc(100vh - 250px); overflow-y: auto;">
                        <ul class="tree">
                            @php
                                $i = 1;
                                $p = 1;
                                $submods = getMenuGroup();
                            @endphp
                            @forelse ($modules as $module)
                                <li class="has">
                                    <label>
                                        <strong>{{ $i++ }}.</strong>
                                        <strong class="ms-2">{{ __('obs.m_' . strtolower($module->name)) }}</strong>
                                        <span class="total">({{ count($permissionsByModule[$module->id]->groupBy('code')) }})</span>
                                    </label>
                                    @if (active_user() == 1)
                                        <label class="ps-2">
                                            <button type="button" class="btn btn-sm btn-primary" onclick="getPermissionDataFromBackUp({{ $module->id }},1)">
                                                <i class="fa fa-sync"></i>
                                            </button>
                                        </label>
                                    @endif
                                    <ul>
                                        @forelse ($permissionsByModule[$module->id]->groupBy('code') as $code=>$subModule)
                                            @if ($code && array_key_exists($code, $submods))
                                                <li class="d-flex align-items-center">
                                                    <input id="{{ 'code_' . ++$p }}" type="checkbox" name="subdomain[]" class="form-check-input" onchange="sub_module_change(this,{{ $code }})">
                                                    <label for="{{ 'code_' . $p }}">{{ ucwords(__('obs.' . str_replace(' ', '_', strtolower($submods[$code])))) }} </label>
                                                    @if (active_user() == 1)
                                                        <label class="ps-2">
                                                            <button type="button" class="btn btn-sm btn-warning" onclick="getPermissionDataFromBackUp({{ $code }},2)">
                                                                <i class="fa fa-sync"></i>
                                                            </button>
                                                        </label>
                                                    @endif
                                                </li>
                                            @endif
                                        @empty
                                        @endforelse
                                    </ul>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                    <div class="col-lg-9">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#general001" data-bs-target="#general001" data-bs-toggle="tab" aria-selected="true">{{ __('obs.normal') }}</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#report001" data-bs-target="#report001" data-bs-toggle="tab">{{ __('obs.report') }}</a>
                            </li>
                        </ul>
                        <div class="tab-content mt-2">
                            <div id="general001" class="tab-pane active">
                                <div class="cl-table-container" style="max-height: calc(100vh - 250px);">
                                    <table class="table cl-table table-bordered cb-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">{{ __('obs.group') }}</th>
                                                <th>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="col-12 px-0 sp-label text-center">
                                                            <input type="checkbox" id="index_head" class="form-check-input vh" onchange="column_head(this,0)">
                                                        </div>
                                                        <div class="col-12 px-0 text-center">
                                                            <label for="index_head"><strong>{{ __('obs.index') }}</strong></label>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="col-12 px-0 sp-label text-center">
                                                            <input type="checkbox" id="create_head" class="form-check-input vh" onchange="column_head(this,1)">
                                                        </div>
                                                        <div class="col-12 px-0 text-center">
                                                            <label for="create_head"><strong>{{ __('obs.create') }}</strong></label>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="col-12 px-0 sp-label text-center">
                                                            <input type="checkbox" id="edit_head" class="form-check-input vh" onchange="column_head(this,2)">
                                                        </div>
                                                        <div class="col-12 px-0 text-center">
                                                            <label for="edit_head"><strong>{{ __('obs.edit') }}</strong></label>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="col-12 px-0 sp-label text-center">
                                                            <input type="checkbox" id="delete_head" class="form-check-input vh" onchange="column_head(this,3)">
                                                        </div>
                                                        <div class="col-12 px-0 text-center">
                                                            <label for="delete_head"><strong>{{ __('obs.delete') }}</strong></label>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="col-12 px-0 sp-label text-center">
                                                            <input type="checkbox" id="print_head" class="form-check-input vh" onchange="column_head(this,4)">
                                                        </div>
                                                        <div class="col-12 px-0 text-center">
                                                            <label for="print_head"><strong>{{ __('obs.print') }}</strong></label>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="col-12 px-0 sp-label text-center">
                                                            <input type="checkbox" id="others" class="form-check-input vh" onchange="column_head(this,5)">
                                                        </div>
                                                        <div class="col-12 px-0 text-center">
                                                            <label for="others"><strong>{{ __('obs.other') }}</strong></label>
                                                        </div>
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="report001" class="tab-pane">
                                <div class="cl-table-container" style="max-height: calc(100vh - 250px);">
                                    <table class="table cl-table table-bordered cb-table">
                                        <thead>
                                            <tr>
                                                <th colspan="2" class="text-center">
                                                    <div class="sp-label text-center">
                                                        <input type="checkbox" id="report_others" class="form-check-input vh" onchange="report_column_head(this,'report_permission')">
                                                        <label for="report_others" class="mx-1"><strong>{{ __('obs.all') }} {{ __('obs.reports') }}</strong></label>
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbody_report">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var submodule_data = @json(getMenuGroup());
        var child_permissions = @json($child_parmissions);
        var same_permission = [];
        function row_head(t, rn) {
            if (t.checked) {
                $('.' + rn).prop("checked", true);
            } else {
                $('.' + rn).prop("checked", false);
            }
        }
        function report_row_head(t, rn) {
            if (t.checked) {
                $('.' + rn).prop("checked", true);
            } else {
                $('.' + rn).prop("checked", false);
            }
        }
        function column_head(t, cn) {
            if (t.checked) {
                $('.vh' + cn).prop("checked", true);
            } else {
                $('.vh' + cn).prop("checked", false);
            }
        }
        const getPermissionDataFromBackUp = (id, type) => {
            Swal.fire({
                icon: 'warning',
                title: 'Sync Permission',
                html: 'Are You Sure?',
                showConfirmButton: true,
                showDenyButton: true,
                position: 'center',
                timer: null,
            }).then((res) => {
                console.log(res);
                if (res.isConfirmed) {
                    const setReloadtHtml = data => {
                        Swal.fire((data == 1 ? 'successful' : data), '', 'success');
                    }
                    let int_data_param = {
                        id: id,
                        type: type
                    };
                    ajaxCall("{{ route('default.sync_with_backup') }}", 'GET', int_data_param, setReloadtHtml);
                }
            });
        }
        function same_group_task(t, id) {
            var childs = child_permissions;
            if (childs.length) {
                for (let index = 0; index < childs.length; index++) {
                    if (childs[index].parent_id == id) {
                        if (t.checked) {
                            same_permission.push(childs[index].id);
                        } else {
                            same_permission.splice(same_permission.indexOf(childs[index].id), 1);
                        }
                    }
                }
                console.log(same_permission);
                $('#auto_asigned_permission_ids').val(same_permission);
            }
        }
        function report_column_head(t, cn) {
            if (t.checked) {
                $('.report_permission').prop("checked", true);
            } else {
                $('.report_permission').prop("checked", false);
            }
        }
        function module_change(t, n) {
            alert(n)
        }
        function sub_module_change(t, n) {
            if (t.checked) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('default.permission_by_submodule') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        sub_module_id: n,
                    },
                    success: function(permission_groups) {
                        var returnTr = `<tr id="module_1_sub_1" class="tr` + n + `"><th colspan="7" class="text-white text-center" style="background: var(--cl-primary) !important;">` + submodule_data[n] + `</th></tr>`;
                        var returnReportTr = `<tr id="module_1_sub_1" class="trr` + n + `"><th colspan="2" class="text-white text-center" style="background: var(--cl-primary) !important;">` + submodule_data[n] + `</th></tr>`;
                        for (let i = 0; i < permission_groups.length; i++) {
                            let g_name = permission_groups[i][0].group_name.replace(/ /g, "_");
                            let g_title = permission_groups[i][0].group_name;
                            returnTr += `<tr id="module_1_sub_1" class="tr` + n + `">
                                     <td>
                                        <div class="sp-label d-flex mb-2">
                                          <input type="checkbox" id="` + g_name + `" class="form-check-input vh mt-0" onchange="row_head(this,'` + g_name + `')" >
                                          <label for="` + g_name + `" class="mx-1"> ` + capitalize(g_title) + `</label>
                                        </div>
                                     </td>`;
                            var task0 = [];
                            var task1 = [];
                            var task2 = [];
                            var task3 = [];
                            var task4 = [];
                            var task5 = [];
                            var task7 = [];
                            var permissions = permission_groups[i];
                            for (let index = 0; index < permissions.length; index++) {
                                if (permissions[index].task == 0) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task0.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                                if (permissions[index].task == 1) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name;
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task1.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                                if (permissions[index].task == 2) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name;
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task2.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                                if (permissions[index].task == 3) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name;
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task3.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                                if (permissions[index].task == 4) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name;
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task4.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                                if (permissions[index].task == 5) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name;
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task5.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                                if (permissions[index].task == 7) {
                                    var id = permissions[index].id;
                                    var group_name = permissions[index].group_name;
                                    var task_no = permissions[index].task;
                                    var name = permissions[index].name;
                                    task7.push({
                                        'id': id,
                                        'group_name': group_name,
                                        'task_no': task_no,
                                        'name': name
                                    });
                                }
                            }
                            var totalTask = [task0, task1, task2, task3, task4, task5];
                            console.log(totalTask);
                            for (let p = 0; p < totalTask.length; p++) {
                                returnTr += `<td>`;
                                var singletask = totalTask[p];
                                for (let q = 0; q < singletask.length; q++) {
                                    returnTr += `<div class="col-12 d-flex px-0 sp-label text-left mb-2">
                                                    <input type="checkbox" id="` + singletask[q].id + `" class="form-check-input mt-0 vh vh` + p + ` ` + singletask[q].group_name.replace(/ /g, "_") + `" name="asigned_permission[]" value="` + singletask[q].id + `" onchange="same_group_task(this,'` + singletask[q].id + `')">
                                                    <label for="` + singletask[q].id + `" class="mx-1"> ` + capitalize(singletask[q].name) + `</label>
                                                </div>`;
                                }
                                returnTr += `</td>`;
                            }
                            returnTr += `</tr>`;
                            if (task7.length > 0) {
                                returnReportTr += `<tr id="module_1_sub_1" class="trr` + n + `">
                                                          <td style="width: 20%">
                                                            <div class="d-flex sp-label mb-2">
                                                              <input type="checkbox" id="report_` + permission_groups[i][0].group_name.replace(/ /g, "_") + `" class="form-check-input mt-0 vh" onchange="report_row_head(this,'report_` + permission_groups[i][0].group_name + `')" >
                                                              <label for="report_` + permission_groups[i][0].group_name.replace(/ /g, "_") + `" class="mx-1"> ` + capitalize(permission_groups[i][0].group_name) + `</label>
                                                            </div>
                                                          </td>`;
                                returnReportTr += `<td>`;
                                var singletask = task7;
                                for (let q = 0; q < singletask.length; q++) {
                                    returnReportTr += `<div class="col-12 px-0 sp-label text-left mb-2">
                                                                  <input type="checkbox" id="` + singletask[q].id + `" class="form-check-input mt-0 vh report_` + singletask[q].group_name + ` report_permission" name="asigned_permission[]" value="` + singletask[q].id + `">
                                                                  <label for="` + singletask[q].id + `" class="mx-1"> ` + capitalize(singletask[q].name) + `</label>
                                                                </div>`;
                                }
                                returnReportTr += `</td></tr>`;
                            }
                        }
                        console.log(returnTr);
                        $('#tbody').prepend(returnTr);
                        $('#tbody_report').prepend(returnReportTr);
                    },
                    error: function(response) {},
                });
            } else {
                $('.tr' + n).remove();
                $('.trr' + n).remove();
            }
        }
        $(document).on('click', '.tree label', function(e) {
            $(this).parent().find('ul').slideToggle();
            e.stopPropagation();
        });
        $(document).on('change', '.tree input[type=checkbox]', function(e) {
            $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
            $(this).parentsUntil('.tree').children("input[type='checkbox']").prop('checked', this.checked);
            e.stopPropagation();
        });
        $(document).on('click', 'button', function(e) {
            switch ($(this).text()) {
                case 'Collepsed':
                    $('.tree ul').fadeOut();
                    break;
                case 'Expanded':
                    $('.tree ul').fadeIn();
                    break;
                case 'Checked All':
                    $(".tree input[type='checkbox']").prop('checked', true);
                    break;
                case 'Unchek All':
                    $(".tree input[type='checkbox']").prop('checked', false);
                    break;
                default:
            }
        });
    </script>
@endsection