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

@section('page_content')
    <form action="javascript:;" id="create_form">
        @csrf
        <div class="row">
            <div class="col-md-12 text-md">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                                @if($invRevStatus === 'INVOKED')
                                    <h4 class="header-title">Permission System: {{$permissionSystem["systemName"]}} | Grant Permissions</h4>
                                @else
                                    <h4 class="header-title">Permission System: {{$permissionSystem["systemName"]}} | Revoke Permissions</h4>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-12">
                                @if($invRevStatus === 'INVOKED')
                                    <p class="text-muted">You can grant permissions to administrators apart from their admin role using this window.</p>
                                @else
                                    <p class="text-muted">You can revoke permissions of administrators apart from their admin role using this window.</p>
                                @endif
                                <div class="card">
                                    <div class="card-body">
                                        <script>
                                            function onChangePeriod(elem)
                                            {
                                                let period = $(elem).val();

                                                if(period === "temporary")
                                                {
                                                    $("#period").slideDown(300);
                                                }
                                                else
                                                {
                                                    $("#period").slideUp(300);
                                                }
                                            }
                                        </script>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Administrator</label>
                                                    <hr class="mt-1 mb-2">
                                                    <input type="text" disabled value="{{$admin["name"]}}" class="form-control">
                                                </div>

                                                <div class="form-group">
                                                    <label>Date Period <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <select name="period" class="form-control" onchange="return onChangePeriod(this);">
                                                        <option value="permanent">Permanent</option>
                                                        <option value="temporary">Temporarily</option>
                                                    </select>
                                                </div>

                                                <div class="row" id="period" style="display:none;">
                                                    <div class="col-md-6">
                                                        <input type="text" name="validFrom" class="form-control default-date-picker" placeholder="Valid From" data-date-start-date="0d">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" name="validTill" class="form-control default-date-picker" placeholder="Valid Till" data-date-start-date="0d">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label>Remarks <span class="text-danger">*</span></label>
                                                    <hr class="mt-1 mb-2">
                                                    <textarea name="remarks" class="form-control" style="min-height: 137px;"></textarea>
                                                </div>
                                            </div>

                                            <input type="hidden" name="invRevStatus" value="{{$invRevStatus}}">
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-body">
                                                                                <input type="hidden" name="system_id[]" value="">
                                        <table class="table table-bordered fixed_header">
                                            <thead>
                                            <tr>
                                                <th>Permission Module</th>
                                                <th>Permission Group</th>
                                                <th>Permission</th>
                                                <th>In Role</th>
                                                @if($invRevStatus === 'INVOKED')
                                                    <th>Granted</th>
                                                    <th>Grant Permissions</th>
                                                @else
                                                    <th>Revoked</th>
                                                    <th>Revoked Permissions</th>
                                                @endif
                                            </tr>
                                            </thead>
                                            <tbody>
                                                                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-4 text-center">
                                <div class="form-group">
                                    @if($invRevStatus === 'INVOKED')
                                        <button type="submit" class="btn btn-success btn-add-row">Grant Permissions</button>
                                    @else
                                        <button type="submit" class="btn btn-success btn-add-row">Revoke Permissions</button>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        let permissions={};
        let systemId = "";

        window.onload = function()
        {
            submitCreateForm();

            let format = "yyyy-mm-dd";

            $("input[name='validFrom']").datepicker({
                format	: format,
                orientation: 'bottom'
            });

            $("input[name='validTill']").datepicker({
                format	: format,
                orientation: 'bottom'
            });
        };

        function onPermissionChange(elem, permId, prevStatus)
        {
            let newStatus = $(elem).val();
            let key = getPermissionKey(permId);

            let perm = {};
            perm.perm_id = permId;
            perm.prev_tatus = prevStatus;
            perm.new_status = newStatus;

            if(permissions[systemId])
            {
                if(key !== null)
                {
                    if(prevStatus == newStatus)
                    {
                        permissions[systemId].splice(key, 1);
                    }
                    else
                    {
                        permissions[systemId][key]=perm;
                    }
                }
                else
                {
                    permissions[systemId].push(perm);
                }
            }
            else
            {
                permissions[systemId] = [];
                permissions[systemId].push(perm);
            }
        }

        function getPermissionKey(permId)
        {
            let key = null;
            if(permissions[systemId] && permissions[systemId].length>0)
            {
                $(permissions[systemId]).each(function (index, perm){

                    if(perm.perm_id === permId)
                    {
                        key = index;
                    }
                });
            }

            return key;
        }

        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 period=form.period.value;
            let validFrom=form.validFrom.value;
            let validTill=form.validTill.value;
            let remarks=form.remarks.value;

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

            if(remarks === "")
            {
                errors++;
                errorText.push('Remarks Required.');
            }

            if(period === "temporary")
            {
                if(validFrom === "" || validTill === "")
                {
                    errors++;
                    errorText.push('Please select Date Period.');
                }
            }

            if(!permissions[systemId] || permissions[systemId].length===0)
            {
                errors++;
                errorText.push('Permission change not detected.');
            }

            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");

            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