@extends('admin.layouts.app')

@section('title', 'Department Permission')

@section('content')
<!-- TOPBAR -->
<div class="top_bar page-content" style="min-height:534px">
    <!-- LOADER -->
    <div class="loader">
        <div class="top_status_bar load">
            <div class="progress_bar bar" style="left: 0px;">
            </div>
        </div>
    </div>
    <!-- END LOADER -->
    <!-- BREADCRUMBS -->
    <div class="breadcrumbs">
        <ul>
            <li><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li><a href="{{ route('admin.settings.index') }}" class="">Settings</a></li>
            <li><a href="#" class="breadcrumb_link" onclick="return false">System Users</a></li>
        </ul>
        <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
    </div>
    <!-- END BREADCRUMBS -->
</div>
<!-- END TOPBAR -->
<!-- PAGE CONTENT -->
<div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <!-- Begin: life time stats -->
            <div class="portlet setting_landing">
                <!-- MAIN CAPTION START -->
                <div class="portlet-title">
                    <div class="caption">
                        <h2>Group & Policies
                            <span class="subtitle">Setup previleges for a group or a member in your organization. You can define and control their access levels anytime from this screen.</span>
                        </h2>
                    </div>
                </div>
                <!-- MAIN CAPTION END -->
                <hr>
                <!-- MAIN CONTENT START -->
                <div class="portlet-body">
                <div class="settings">
                    {{-- <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <span class="main_title">User Roles</span>
                            </div>
                        </div>
                    </div>
                    <div class="row each_row">
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <span class="sub_heading">What are the roles you allow to team members?</span>
                                <span class="sub_heading">Setup user roles for the system user for your business in SaleSoft CRM.</span>
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="portlet-body">
                                        <div class="products box role">
                                            <div class="header_tbl">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-md-3 row_header">Role</div>
                                                        <div class="col-md-3 row_header">Parent Role</div>
                                                        <div class="col-md-5 row_header b4_del_header">Description</div>
                                                        <div class="row_header del_header"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row_wrap roles" id="roles">
                                                <div class="row_inner_wrap">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="col-md-3 inner_row">
                                                                <input type="text" name="" placeholder="Enter a role here" value="CEO" class="form-control role_name">
                                                            </div>
                                                            <div class="col-md-3 inner_row">
                                                                <select class="select2 parent_role select2-hidden-accessible" name="" tabindex="-1" aria-hidden="true">
                                                                    <option value="1">Reserved</option>
                                                                </select>
                                                            </div>
                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                <input type="text" name="" placeholder="Enter role description" value="" class="form-control role_description">
                                                            </div>
                                                            <div class="del_icon" data-toggle="modal" data-target="#myModal">
                                                                <i class="fa fa-trash-o del" aria-hidden="true" data-uuid=""></i>
                                                            </div>
                                                            <!-- Modal HTML -->
                                                            <div id="myModal" class="modal fade">
                                                                <div class="modal-dialog modal-confirm">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h4 class="modal-title">Are you sure?</h4>	
                                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <p>Do you really want to delete these records? This process cannot be undone.</p>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                                                                            <button type="button" class="btn btn-danger">Delete</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Modal HTML -->
                                                            <div class="add_icon" style="display: none;">
                                                                <i class="fa fa-plus add_row"></i>
                                                            </div>
                                                            <div class="edit_icon" style="display: none;">
                                                                <i class="fa fa-check edit_row" data-uuid=""></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row_inner_wrap">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="col-md-3 inner_row">
                                                                <input type="text" name="" placeholder="Enter a role here" value="Sales Manager" class="form-control role_name">
                                                            </div>
                                                            <div class="col-md-3 inner_row">
                                                                <select class="select2 parent_role select2-hidden-accessible" name="" tabindex="-1" aria-hidden="true">
                                                                    <option value=""></option>
                                                                    <option value="bc2a5a90-8da0-11e9-ac29-419c7f8f36b0" selected="selected">CEO</option>
                                                                    <option value="955146d0-9183-11e9-864f-bbd6e461ea45">Sales Manager</option>
                                                                    <option value="9fc92820-9183-11e9-938a-a791c4905277">Business Development Manager</option>
                                                                    <option value="a4284070-9183-11e9-a4f2-5760fde6e434">CTO</option>
                                                                    <option value="4484a720-918b-11e9-aec2-6dcfb84ef36f">Technical Manager</option>                                                                                             
                                                                </select>
                                                            </div>
                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                <input type="text" name="" placeholder="Enter role description" value="" class="form-control role_description">
                                                            </div>
                                                            <div class="del_icon">
                                                                <i class="fa fa-trash-o del" aria-hidden="true" data-uuid=""></i>
                                                            </div>
                                                            <div class="add_icon" style="display: none;">
                                                                <i class="fa fa-plus add_row"></i>
                                                            </div>
                                                            <div class="edit_icon" style="display: none;">
                                                                <i class="fa fa-check edit_row" data-uuid=""></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                                                                                                                 
                                                <div class="row_inner_wrap">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="col-md-3 inner_row">
                                                                <input type="text" name="" placeholder="Enter a role here" value="" class="form-control role_name">
                                                            </div>
                                                            <div class="col-md-3 inner_row">
                                                                <select class="select2 parent_role select2-hidden-accessible" name="" tabindex="-1" aria-hidden="true">
                                                                    <option value=""></option>
                                                                    <option value="bc2a5a90-8da0-11e9-ac29-419c7f8f36b0">CEO</option>
                                                                    <option value="955146d0-9183-11e9-864f-bbd6e461ea45">Sales Manager</option>
                                                                    <option value="9fc92820-9183-11e9-938a-a791c4905277">Business Development Manager</option>
                                                                    <option value="a4284070-9183-11e9-a4f2-5760fde6e434">CTO</option>
                                                                    <option value="4484a720-918b-11e9-aec2-6dcfb84ef36f">Technical Manager</option>
                                                                    <option value="947743e0-918b-11e9-afe6-c1047add2b05">Head Of PMO</option>
                                                                    <option value="a29cbc80-918d-11e9-b187-317df68c8aa0">Branch Manager</option>
                                                                    <option value="5c46dc40-918e-11e9-b593-bb930023714d">Presales Manager</option>
                                                                </select>
                                                            </div>
                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                <input type="text" name="" placeholder="Enter role description" value="" class="form-control role_description">
                                                            </div>
                                                            <div class="del_icon" style="display: none;">
                                                                <i class="fa fa-trash-o del" aria-hidden="true" data-uuid=""></i>
                                                            </div>
                                                            <div class="add_icon">
                                                                <i class="fa fa-plus add_row"></i>
                                                            </div>
                                                            <div class="edit_icon" style="display: none;">
                                                                <i class="fa fa-check edit_row" data-uuid=""></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    
                    <!--TEAM MEMBER CATEGORY-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <span class="main_title">Access Policies</span>
                            </div>
                        </div>
                    </div>
                    <div class="row each_row">
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <span class="sub_heading">What are the access levels you allow to team members?</span>
                                <span class="sub_heading">Setup privileges for the system user for your business in SaleSoft CRM.</span>
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-md-6">
                                <form id="update_access_levels" action="{{ route('admin.settings.group-policy.store') }}">
                                    @csrf                                               
                                    <!--TEAM AND MANAGER SELECTOR-->
                                    
                                    <div class="row" style="margin-bottom: 10px;">
                                        <div class="col-md-12 pl_pr_0 variable_column">
                                            <label>Select a Group</label>
                                            <select  id="role_select" class="select2 role_select validate select2-hidden-accessible" name="group_select" tabindex="-1" aria-hidden="true">
                                                <option value=""></option>
                                                @if(!empty($data['groups']))
                                                @foreach($data['groups'] as $key => $group)                                                                                        
                                                <option value="{{ $group['group_uuid'] }}">{{ $group['title'] }} </option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <!--TEAM AND MANAGER SELECTOR-->
                                    <div id="group_permission">
                                        <div class="row">
                                            <div class="portlet-body">
                                                <div class="products box member">
                                                    <div class="header_tbl">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-4 row_header">Screens</div>
                                                                <div class="col-md-4 row_header">Mode</div>
                                                                <div class="col-md-4 row_header">Access Level</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @if(!empty($data['modules']))
                                                    @foreach($data['modules'] as $key => $group)
                                                    <div class="row_wrap" id="access_details">
                                                        <div class="row_inner_wrap">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="col-md-4 inner_row">
                                                                        <input type="text" name="screen[]" value="{{ !empty($group['title']) ? $group['title'] : '' }}" class="form-control screen_name" readonly="readonly" disabled="true">
                                                                        <input type="hidden" name="modules[]" value="{{ $group['module_uuid'] }}">
                                                                    </div>
                                                                    <div class="col-md-4 inner_row">
                                                                        <select id="access_mode" class="select2 access_mode mode validate select2-hidden-accessible" name="access_modes[]" tabindex="-1" aria-hidden="true">
                                                                            <option value=""></option>
                                                                            @if(!empty($data['access_modes']))
                                                                            @foreach($data['access_modes'] as $key => $access_mode)
                                                                            <option value="{{ $key }}">{{ $access_mode }}</option>
                                                                            @endforeach
                                                                            @endif
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-md-4 inner_row">
                                                                        <select id="access_level" class="select2 access_level validate select2-hidden-accessible" name="access_levels[]" tabindex="-1" aria-hidden="true">
                                                                            <option value=""></option>
                                                                            @if(!empty($data['access_level']))
                                                                            @foreach($data['access_level'] as $key => $access_level)
                                                                            <option value="{{ $key }}">{{ $access_level }}</option>
                                                                            @endforeach
                                                                            @endif
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row top15">
                                        <div class="col-md-12 pl_pr_0">
                                            
                                                <input type="hidden" name="submit" value="1">
                                                <input type="submit" name="save" value="Save" class="btn theme_btn_round float_btn">
                                                <a href="{{ route('admin.settings.index') }}" class="btn theme_btn_round cancel_page float_btn">Cancel</a>
                                            
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!--------------------------------------1ST ROW --------------------------------------->
            </div>
                <!-- MAIN CONTENT END -->

            </div>
            <!-- End: life time stats -->
        </div>
    </div>
</div>
<!-- END PAGE CONTENT -->
@stop

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('css/settings.css') }}" />
@stop

@section('admin_js')
<script type="text/javascript">
    $(document).ready(function() {
        
        // Form submit for store
        $( "#update_access_levels" ).submit(function( event ) {  
            event.preventDefault();
            $('#busyloading').show();
            var action = $(this).attr('action');
            var form = $(this);
            var flag;

            $('select[name="access_modes[]"] option:selected').each(function() {
                if($(this).val()=='') {
                    alertbox('danger', "Select access modes");
                    $('#busyloading').hide();
                    flag= false;
                    return false;
                    
                }
            });
            $('select[name="access_levels[]"] option:selected').each(function() {
                if($(this).val()=='') {
                    alertbox('danger', "Select access levels");
                    $('#busyloading').hide();
                    flag= false;
                    return false; 
                    
                }
            });
            
            if(flag==false){
            return flag;
            }
            $.ajax({
                url: action,
                type:'POST',
                data: form.serialize(),
                success: function(response) {
                    console.log(response);
                    
                     if(response.status == "{{ config('globalConstants.response_status.success_response') }}") {
                        alertbox('success', response.message);
                        $('#busyloading').hide();
                     } else if(response.status == "{{ config('globalConstants.response_status.warning_response') }}") {
                        $('#busyloading').hide();
                          
                     } else if(response.status == "{{ config('globalConstants.response_status.error_response') }}") {
                        alertbox('danger', response.errors.group_select);
                        $('#busyloading').hide();
                     }
               },
               error: function (response) {
                    $('#busyloading').hide();
                    alertbox('danger', "Server error");
                }
            });
        });

        // Data load for edit
        $('#role_select').on('select2:select', function (e) {
            $('#busyloading').show();
            var group_id = this.value;
            
            var action = "{{ url('admin/settings/group-policy/')}}/"+group_id+"/edit"
            $.ajax({
                url: action,
                method: 'GET',
                success: function(response) {
                    $('#group_permission').html(response);
                    $(".select2").select2({
                        placeholder: "--Select--",
                        allowClear: true
                    });
                    $('#busyloading').hide();
                }
            });
        });

        //Mode change function
        $(document).on('change', '.access_mode', function() {
            $('#busyloading').show();
            var parent_row = $(this).parent().parent();
            if ($(this).val() == 0) {
                parent_row.find('.access_level').val(0).trigger('change');
                parent_row.find('.access_level').parent().addClass('no_pointer_events');
                $('#busyloading').hide();
                // parent_row.append('<input type="hidden" class="disabled_option" name="access_level[]" value="5" />');
            } else {
                parent_row.find('.access_level').val('').trigger('change');
                parent_row.find('.access_level').parent().removeClass('no_pointer_events');
                $('#busyloading').hide();
                // parent_row.find('input.disabled_option').remove();
            }
            if ($(this).val() == 1) {
                parent_row.find('.access_level').val(1).trigger('change').parent().addClass('no_pointer_events');
                $('#busyloading').hide();
            }
        });
    })
</script>
@stop