@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')
<div class="page-content">
    <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card data-table">
                    <div class="card-header">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" href="{{ route('roles') }}">
                                    <i class="fa fa-user-shield"></i> {{ __('rolePermission.role.item') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('permission') }}">
                                    <i class="fa fa-user-tag"></i> {{ __('rolePermission.permission.item') }}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane fade active show pl-3 pr-3 pt-3">
                                <label class="custom-label"><i class="fa fa-list"></i> {{ __('rolePermission.role.list') }}</label>
                                @if(auth()->user()->hasPermissionTo('Role - Add New Role'))
                                <button class="btn btn-sm btn-primary pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" onclick="roleModal(0, 'add');">
                                    <i class="fa fa-plus"></i> {{ __('rolePermission.role.add') }}
                                </button>
                                @endif
                                <div id="data_content">
                                    @include('dnekcab/setting/rolePermission.listRole')
                                </div>
                            </div>
                        </div>
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->keys() as $key)
                                        @if ($errors->has($key))
                                            <li>{{ $errors->first($key) }}</li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
</div>

{{-- add role modal --}}
<div class="modal fade" id="add-role-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="add-role-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form id="add-role-form" action="{{ route('role.storeRole') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add-role-modalLabel">
                        {{ __('rolePermission.role.add'); }}
                    </h5>
                    <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="card card-dark mb-1" id="add-modal-content"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" onclick="addRole('add-role-form');">
                        {{ __('global.submit') }}
                    </button>
                    <button type="button" class="btn btn-light pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{--end add role modal --}}

{{-- edit role modal --}}
<div class="modal fade" id="edit-role-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="edit-role-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <form id="update-role-form" action="{{ route('role.updateRole') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="edit-role-modalLabel">
                        {{ __('rolePermission.role.edit'); }}
                    </h5>
                    <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="card card-dark mb-1" id="edit-modal-content"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" onclick="updateRole('update-role-form');">
                        {{ __('global.submit') }}
                    </button>
                    <button type="button" class="btn btn-light pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{--end edit role modal --}}

{{-- delete confrim modal --}}
<div class="modal fade custom-modal" id="confirm-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="confirm-role-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirm-role-modalLabel">
                    <i class="fa fa-check" style="margin-top: -1px"></i> {{ __('global.confirmTitle'); }}
                </h5>
                <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="confrim-content-text"></div>
                <div style="padding: 0px 10px 5px 18px;">
                    <button class="btn btn-primary btn-sm delete-btn">
                        {{ __('global.confirm') }}
                    </button>
                    <button class="btn btn-danger btn-sm cancel-btn" data-bs-dismiss="modal" aria-label="Close">
                        {{ __('global.cancel') }}
                    </button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
{{-- delete confrim modal --}}
@section('js')
<script>
    $('[data-toggle="tooltip"]').tooltip();
    var rowid = 0;
    function roleModal(roleID, type)
    {
        $.ajax({
            url: '{{ route("role.modal") }}',
            type: 'GET',
            data: {
                "_token": "{{ csrf_token() }}",
                "roleID": roleID,
            },
            success: function (response) {
                
                if(type == 'add'){
                    $("#add-modal-content").html(response);
                    $("#add-role-modal").modal('show');
                } else {
                    $("#edit-modal-content").html(response);
                    $("#edit-role-modal").modal('show');
                }
                $(".select2").select2();
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(response.errors);
                }
            }
        });
    }
    // submit add role form
    function addRole(formID)
    {
        var roleName = $("#role-name").val();
        var rolePermission = $("#role-perssion").val();
        if(roleName == ""){
            $("#role-name").css("border", "1px solid #F00");
            $("#role-name").focus();
            return false;
        }else{
            $("#role-name").css("border", "");
        }
        if(rolePermission == ""){
            $("#role-perssion").css("border", "1px solid #F00");
            $("#role-perssion").focus();
            return false;
        }else{
            $("#role-perssion").css("border", "");
        }
        $("#"+formID).submit();
    }
    // submit update role form
    function updateRole(formID)
    {
        var roleName = $("#edit-role-name").val();
        var rolePermission = $("#edit-role-perssion").val();
        if(roleName == ""){
            $("#edit-role-name").css("border", "1px solid #F00");
            $("#edit-role-name").focus();
            return false;
        }else{
            $("#edit-role-name").css("border", "");
        }
        if(rolePermission == ""){
            $("#edit-role-perssion").css("border", "1px solid #F00");
            $("#edit-role-perssion").focus();
            return false;
        }else{
            $("#edit-role-perssion").css("border", "");
        }
        $("#"+formID).submit();
    }
    // delete role
    function deleteRole(roleID, trid)
    {
        $.ajax({
            url: '{{ route("role.deleteRole") }}',
            type: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
                "roleID": roleID
            },
            success: function (response) {
                $(".cancel-btn").click();
                $("#role-tr-"+trid).remove();
                toastr.success(response.success);
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(response.errors);
                }
            }
        });
    }
    // open confirm modal
    function confirmModal(roleID, trid)
    {
        rowid = trid;
        var confirmContent = "{{ __('rolePermission.role.deleteConfirm') }}";
        $("#role-tr-"+trid).addClass("table-danger");
        $("#confrim-content-text").html(confirmContent);
        $(".delete-btn").attr("onclick", "deleteRole('"+roleID+"', '"+trid+"')");
        $('#confirm-modal').modal('show');
    }

    $(document).ready(function(){
        $(".cancel-btn").click(function (){
            $("#role-tr-"+rowid).removeClass("table-danger");
        });
    });

</script>
@endsection

<style>
    .data-table .card-header{
        padding: 0;
        border-bottom: none;
    }
    
    .data-table .card-header li a{
        padding: 10px;
    }
    ul.pagination{
        margin-bottom: 0;
    }
    #confrim-content-text{
        padding: 10px 20px 5px 20px;
        font-size: 16px;
        max-height: 430px;
    }
    .select2-dropdown{
        z-index: 1070;
    }
</style>
@endsection()