@extends('admin::layouts.master')

@section('page_content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-6">
                            <h4 class="header-title">{{ $pageTitle }}</h4>
                        </div>
                        <div class="col-sm-6">
                            <div class="float-right">
                                @if($formMode=="edit")
                                    @if(isset($urls["historyUrl"]))
                                        <a href="{{ $urls['historyUrl'] . $record['id'] }}">
                                            <div class="btn btn-info btn-sm"><span class="fa fa-list"></span> View Change
                                                History</div>
                                        </a>
                                    @endif

                                    @if(isset($urls["addUrl"]))
                                        <a href="{{ $urls['addUrl'] }}">
                                            <div class="btn btn-info btn-sm"><span class="fa fa-plus"></span> Add New</div>
                                        </a>
                                     @endif
                                @endif

                                @if(isset($urls["listUrl"]))
                                <a href="{{ $urls['listUrl'] }}">
                                    <div class="btn btn-info btn-sm"><span class="fa fa-list"></span> List Administrator
                                        Roles</div>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <form action="javascript:" id="create_form">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Administrator Role Name</label>
                                            <hr class="mt-1 mb-2">
                                            <input type="text" class="form-control" name="roleName"
                                                placeholder="Administrator Role Name" value="{{ $record['roleName'] }}">
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Description</label>
                                            <hr class="mt-1 mb-2">
                                            <textarea class="form-control" name="description"
                                                placeholder="Description">{{ $record['description'] }}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Allowed Roles To Handle</label>
                                            <hr class="mt-1 mb-2">
                                            <input type="text" class="form-control" name="allowedRoles">
                                        </div>
                                    </div>

                                    @if($formMode !== "add")
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Remarks</label>
                                            <hr class="mt-1 mb-2">
                                            <textarea class="form-control" name="remarks"
                                                placeholder="Ex: Reason for changing permissions of this admin role."></textarea>
                                        </div>
                                    </div>
                                    @endif

                                    <div class="col-md-12">
                                        <div class="form-group mb-3">
                                            <label>Enable/Disable Administrator Role<span class="text-danger">*</span></label>
                                            <select name="roleStatus" class="form-control">
                                                <option value="ENABLED" @if ($record["roleStatus"] === 'ENABLED') selected="selected" @endif>
                                                    Enable
                                                </option>
                                                <option value="DISABLED" @if ($record["roleStatus"] === 'DISABLED') selected="selected" @endif>
                                                    Disable
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group" style="margin-top: 30px;">
                                            <button type="submit" class="btn btn-success btn-add-row">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-8">
                                                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <script>
        let adminRoleIdMS = null;
        let permissions = {};
        window.onload = function() {
            submitCreateForm();

            adminRoleIdMS = $("input[name='allowedRoles']").magicSuggest({
                allowFreeEntries: false,
                maxSelection: 999,
                data: "/admin/admin_role/search_data",
                dataUrlParams: {
                    "_token": "{{ csrf_token() }}",
                    "limit": "0"
                },
                value: [],
            });
        };

        function expandMod(systemSlug, modSlug) {
            $("#mod_" + systemSlug + "_" + modSlug).slideDown(300);
            $("#expand_mod_" + systemSlug + "_" + modSlug).slideUp(300, function() {

                $("#collapse_mod_" + systemSlug + "_" + modSlug).slideDown(1);
            });
        }

        function collapseMod(systemSlug, modSlug) {
            $("#mod_" + systemSlug + "_" + modSlug).slideUp(300);
            $("#collapse_mod_" + systemSlug + "_" + modSlug).slideUp(300, function() {

                $("#expand_mod_" + systemSlug + "_" + modSlug).slideDown(1);
            });
        }

        function expandGroup(systemSlug, modSlug, groupSlug) {
            $("#group_" + systemSlug + "_" + modSlug + "_" + groupSlug).slideDown(300);
            $("#expand_group_" + systemSlug + "_" + modSlug + "_" + groupSlug).slideUp(300, function() {

                $("#collapse_group_" + systemSlug + "_" + modSlug + "_" + groupSlug).slideDown(1);
            });
        }

        function collapseGroup(systemSlug, modSlug, groupSlug) {
            $("#group_" + systemSlug + "_" + modSlug + "_" + groupSlug).slideUp(300);
            $("#collapse_group_" + systemSlug + "_" + modSlug + "_" + groupSlug).slideUp(300, function() {

                $("#expand_group_" + systemSlug + "_" + modSlug + "_" + groupSlug).slideDown(1);
            });
        }

        function updatePermissions(systemId) {
            let perms = $("input[name='" + systemId + "_perm_id[]']");

            if (perms.length > 0) {
                let systemPerms = [];
                $(perms).each(function(pI, pElem) {

                    let perm_id = $(this).val();
                    if ($(".perm_" + systemId + "_" + perm_id + "_checked").prop("checked")) {
                        systemPerms.push(perm_id);
                    }
                });

                permissions[systemId] = systemPerms;
            }
        }

        function onChangeModule(systemId, module, initial) {
            let groupElems = $("input[name='" + systemId + "_" + module + "_groups[]']");
            if ($("input[name='" + systemId + "_" + module + "_checked']").prop("checked")) {
                if (groupElems.length > 0) {
                    $(groupElems).each(function(index, gElem) {

                        let group = $(this).val();
                        $("input[name='" + systemId + "_" + module + "_" + group + "_checked']").prop("checked",
                            true);

                        let permElems = $("input[name='" + systemId + "_" + module + "_" + group +
                            "_permissions[]']");
                        if (permElems.length > 0) {
                            $(permElems).each(function(index, pElem) {

                                let perm = $(this).val();
                                $("input[name='" + systemId + "_" + module + "_" + group + "_" + perm +
                                    "_checked']").prop("checked", true);
                            });
                        }
                    });
                }
            } else {
                if (groupElems.length > 0) {
                    $(groupElems).each(function(index, gElem) {

                        let group = $(this).val();
                        $("input[name='" + systemId + "_" + module + "_" + group + "_checked']").prop("checked",
                            false);

                        let permElems = $("input[name='" + systemId + "_" + module + "_" + group +
                            "_permissions[]']");
                        if (permElems.length > 0) {
                            $(permElems).each(function(index, pElem) {

                                let perm = $(this).val();
                                $("input[name='" + systemId + "_" + module + "_" + group + "_" + perm +
                                    "_checked']").prop("checked", false);
                            });
                        }
                    });
                }
            }

            if (!initial) {
                updatePermissions(systemId);
            }
        }

        function onChangeGroup(systemId, module, group, initial) {
            if ($("input[name='" + systemId + "_" + module + "_" + group + "_checked']").prop("checked")) {
                let permElems = $("input[name='" + systemId + "_" + module + "_" + group + "_permissions[]']");
                if (permElems.length > 0) {
                    $(permElems).each(function(index, pElem) {

                        let perm = $(this).val();
                        $("input[name='" + systemId + "_" + module + "_" + group + "_" + perm + "_checked']").prop(
                            "checked", true);
                    });
                }
            } else {
                let permElems = $("input[name='" + systemId + "_" + module + "_" + group + "_permissions[]']");
                if (permElems.length > 0) {
                    $(permElems).each(function(index, pElem) {

                        let perm = $(this).val();
                        $("input[name='" + systemId + "_" + module + "_" + group + "_" + perm + "_checked']").prop(
                            "checked", false);
                    });
                }
            }
            triggerModuleCheck(systemId, module);

            if (!initial) {
                updatePermissions(systemId);
            }
        }

        function onChangePerm(systemId, module, group, initial) {
            triggerGroupCheck(systemId, module, group);

            if (!initial) {
                updatePermissions(systemId);
            }
        }

        function triggerGroupCheck(systemId, module, group) {
            let groupChecked = false;

            //at least one permission is checked, then whole module will be displayed as checked
            let permElems = $("input[name='" + systemId + "_" + module + "_" + group + "_permissions[]']");
            if (permElems.length > 0) {
                $(permElems).each(function(index, pElem) {

                    let perm = $(this).val();
                    if ($("input[name='" + systemId + "_" + module + "_" + group + "_" + perm + "_checked']").prop(
                            "checked")) {
                        groupChecked = true;
                        return false;
                    }
                });
            }

            $("input[name='" + systemId + "_" + module + "_" + group + "_checked']").prop("checked", groupChecked);
            triggerModuleCheck(systemId, module);
        }

        function triggerModuleCheck(systemId, module) {
            let moduleChecked = false;

            //at least one group is checked, then whole module will be displayed as checked
            let groupElems = $("input[name='" + systemId + "_" + module + "_groups[]']");
            if (groupElems.length > 0) {
                $(groupElems).each(function(index, gElem) {

                    let group = $(this).val();
                    if ($("input[name='" + systemId + "_" + module + "_" + group + "_checked']").prop("checked")) {
                        moduleChecked = true;
                        return false;
                    }
                });
            }

            $("input[name='" + systemId + "_" + module + "_checked']").prop("checked", moduleChecked);
        }

        function submitCreateForm() {
            $('#create_form').ajaxForm({
                url: "",
                type: "POST",
                dataType: "json",
                beforeSubmit: validateForm,
                success: serverResponse,
                error: onError

            });
        }

        function validateForm(formData, jqForm) {
            let form = jqForm[0];

            let perms = JSON.stringify(permissions);
            formData.push({
                "name": "permissions",
                "value": perms
            });

            let errors = 0;
            let errorText = [];

            let roleName = form.roleName.value;

            errorText.push(
                "<strong> <span class='glyphicon glyphicon-warning-sign'></span> Following errors occurred while submitting the form</strong><br/>"
            );

            if (roleName === "") {
                errors++;
                errorText.push('Administrator Role Name Required.');
            }

            @if($formMode != "add")
                let remarks = form.remarks.value;
                if (remarks === "") {
                    errors++;
                    errorText.push('Remarks Required.');
                }
            @endif

            if (errors > 0) {
                let errorData = [];
                errorData.status = "warning";
                errorData.notify = errorText;

                showNotifications(errorData);

                return false;
            } else {
                //show preloader
                showPreloader($('#create_form'), true);

                //disable form submit
                $('#create_form button[type="submit"]').attr("disabled", "disabled");
                return true;
            }
        }

        function serverResponse(responseText) {
            //Hide preloader
            hidePreloader($('#create_form'));
            $('#create_form button[type="submit"]').removeAttr("disabled");

            @if($formMode === "add")
            if (responseText.notify.status && responseText.notify.status === "success") {
                $("#create_form").trigger("reset");
            }
            @endif

            showNotifications(responseText.notify)
        }

        function onError() {
            //Hide preloader
            hidePreloader($("#create_form"));
            $('#create_form button[type="submit"]').removeAttr("disabled");

            let errorText = [];
            let errorData = [];

            errorText.push('Something went wrong. Please try again.');

            errorData.status = "warning";
            errorData.notify = errorText;

            showNotifications(errorData)
        }
    </script>
@endsection

@section('page_css')
@endsection

@section('page_js')
@endsection