@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" href="{{ route('roles') }}">
                                    <i class="fa fa-user-shield"></i> {{ __('rolePermission.role.item') }}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" 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.permission.list') }}</label>
                                @if(auth()->user()->hasPermissionTo('Permission - Add New Permission'))
                                <button class="btn btn-sm btn-primary pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" onclick="permissionModal(0, 'add');">
                                    <i class="fa fa-plus"></i> {{ __('rolePermission.permission.add') }}
                                </button>
                                @endif
                                <div id="data_content">
                                    @include('dnekcab/setting/rolePermission.listPermission')
                                </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 permission modal --}}
<div class="modal fade" id="add-permission-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="add-permission-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form id="add-permission-form" action="{{ route('permission.storepermission') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add-permission-modalLabel">
                        {{ __('rolePermission.permission.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() == 'fa' ? 'left' : 'right' }}" onclick="addPermission('add-permission-form');">
                        {{ __('global.submit') }}
                    </button>
                    <button type="button" class="btn btn-light pull-{{ app()->getLocale() == 'fa' ? 'left' : 'right' }}" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{-- end add role permission modal --}}

{{-- edit role permission modal --}}
<div class="modal fade" id="edit-permission-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="edit-permission-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <form id="update-permission-form" action="{{ route('permission.updatePermission') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="edit-permission-modalLabel">
                        {{ __('rolePermission.permission.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() == 'fa' ? 'left' : 'right' }}" onclick="addPermission('update-permission-form');">
                        {{ __('global.submit') }}
                    </button>
                    <button type="button" class="btn btn-light pull-{{ app()->getLocale() == 'fa' ? 'left' : 'right' }}" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{-- edit add role permission 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 permissionModal(roleID, type)
    {
        $.ajax({
            url: '{{ route("permission.modal") }}',
            type: 'GET',
            data: {
                "_token": "{{ csrf_token() }}",
                "roleID": roleID,
            },
            success: function (response) {

                if(type == 'add'){
                    $("#add-modal-content").html(response);
                    $("#add-permission-modal").modal('show');
                } else {
                    $("#edit-modal-content").html(response);
                    $("#edit-permission-modal").modal('show');
                }
                $(".select2").select2();
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(response.errors);
                }
            }
        });
    }
    // add permission function
    function addPermission(formID)
    {
        var permissionName = $("#permission-name").val();
        if(permissionName == ""){
            $("#permission-name").css("border", "1px solid #F00");
            $("#permission-name").focus();
            return;
        }else{
            $("#permission-name").css("border", "");
        }
        $("#"+formID).submit();
    }
     // show edit form
     function showEditForm(id)
    {
        $("#permission-tr-"+id+" span").hide();
        $("#permission-tr-"+id+" input").show();
        $("#permission-tr-"+id+" .show-edit-btn").hide();
        $("#permission-tr-"+id+" .delete-btn").hide();
        $("#permission-tr-"+id+" .submit-edit-btn").show();
        $("#permission-tr-"+id+" .hide-edit-btn").show();
    }
    //hide edit form
    function hideEditForm(id)
    {
        $("#permission-tr-"+id+" span").show();
        $("#permission-tr-"+id+" input").hide();
        $("#permission-tr-"+id+" .show-edit-btn").show();
        $("#permission-tr-"+id+" .delete-btn").show();
        $("#permission-tr-"+id+" .submit-edit-btn").hide();
        $("#permission-tr-"+id+" .hide-edit-btn").hide();
        $("#permission-tr-"+id+" .spinner-btn").hide();
    }
    // update permission function
    function updatePermission(id, pid)
    {
        var permission = $("#permission-tr-"+id+" #permission").val();
        if(permission == ""){
            $("#permission-tr-"+id+" #permission").css("border", "1px solid #F00");
            $("#permission-tr-"+id+" #permission").focus();
            return false;
        }else{
            $("#permission-tr-"+id+" #permission").css("border", "");
        }
        $.ajax({
            url: '{{ route("permission.updatePermission") }}',
            type: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
                "permissionName": permission,
                'permissionID': pid
            },
            success: function (response) {
                hideEditForm(id);
                $("#pname-"+id).html(permission);
                toastr.success(response.success);
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(response.errors);
                }
            }
        });
    }
    // open confirm modal
    function confirmModal(permissionID, trid)
    {
        rowid = trid;
        var confirmContent = "{{ __('rolePermission.role.deleteConfirm') }}";
        $("#permission-tr-"+trid).addClass("table-danger");
        $("#confrim-content-text").html(confirmContent);
        $(".delete-btn").attr("onclick", "deletePermission('"+permissionID+"', '"+trid+"')");
        $('#confirm-modal').modal('show');
    }
    // delete permission
    function deletePermission(pid, trid)
    {
        $.ajax({
            url: '{{ route("permission.deletePermission") }}',
            type: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
                "pid": pid
            },
            success: function (response) {
                $(".cancel-btn").click();
                $("#permission-tr-"+trid).remove();
                toastr.success(response.success);
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    toastr.error(response.errors);
                }
            }
        });
    }

    $(document).ready(function(){
        $(".cancel-btn").click(function (){
            $("#permission-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;
    }
    .select2-dropdown{
        z-index: 1070;
    }
</style>
@endsection()