@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <h5 class="card-header">Permissions   &nbsp;&nbsp;&nbsp;
                <a href="{{ route('permissions.create') }}" type="button" class="btn btn-primary">
                    <span class="tf-icons bx bx-plus"></span>&nbsp; Add new Permission
                </a>
            </h5>
            <div  class="card-body">
                    <div id="login_success">
                        @if(session()->has('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session()->get('success') }}
                        </div>
                        @endif
                    </div>
                <div class="table-responsive text-nowrap mt-3">
                    <table class="table table-bordered data-table" id="permission_table">

                    <thead>
                        <tr>
                            <th>Sr No.</th>
                            <th>Permissions</th>
                            <th>Guard Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="view_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCenterTitle">Edit Permission</h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('permission.update') }}" id="permissionform" method="POST">
                    @csrf
                    @method('POST')
                    <input type="hidden" name="tmp_id" id="tmp_id">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Permission Name</label>
                            <input type="text" id="permission_name" name="permission_name" class="form-control">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Slug</label>
                            <input type="text" id="slug" name="slug" class="form-control">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Permissions</label>
                            <select name="permissions" id="permissions" class="form-control">
                                <option value=""> --- Select Permission --- </option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">

    var table = $('#permission_table').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        "ajax": {
            "url" : "{{ route('permission.index') }}",
        },
        order: [[0, 'desc']],
        columns: [
            {data: 'DT_RowIndex', name: 'id'},
            {data: 'title', name: 'title'},
            {data: 'guard_name', name: 'guard_name'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    $(document).on('click','#permissionModel', function(){
        var id = $(this).attr('data-id');
        $.ajax({
            url : "{{ route('permission.view') }}",
            type: "POST",
            data : {id:id,"_token": "{{ csrf_token() }}"},
            dataType : 'JSON',
            success: function(result) {
                var permission_name = result.permission_name;
                var slug = result.slug;
                var permission = result.permission;
                $.each(result.permissions, function (key, val) {
                    var option = '<option value="' + val.id + '"';
                    if(val.is_parent_id == result.is_parent_id){
                        option += ' selected';
                    }
                    option += '>' + val.title + '</option>';
                    $('#permissions').append(option);
                });
                $('#view_modal').modal("show");
                $('#tmp_id').val(id);
                $('#permission_name').val(permission_name);
                $('#slug').val(slug);
            }
        });
    });

    $(document).on('click','#submit',function (){
        var permission_name = $('#permission_name').val();
        var slug = $('#slug').val();
        var permissions = $('#permissions').val();
        var tmp_id = $('#tmp_id').val();
        $.ajax({
            url : "{{ route('permission.update') }}",
            type : 'POST',
            data : {permission_name:permission_name,permissions:permissions,slug:slug,tmp_id:tmp_id},
            success: function(result){
                $('#view_modal').modal("hide");
                if(result.status == '1'){
                    $('#login_success').html('<div class="alert alert-success" role="alert">'+ result.message +'</div>');
                    setTimeout(() => {
                        $('#login_success').hide();
                    }, 800);
                    table.ajax.reload();
                }
            },
        });
    });
</script>
@endsection