@extends('admin.layouts.master')
@section('title', 'Permissions')
@section('content')
<div class="head" style="display: flex;justify-content:space-between;align-items:center">
    <h2>Permissions</h2>
    <button class="btn btn-primary show-modal">Create Permission</button>
</div>
<br />
@include('admin.layouts.delete-msg')
<table class="table table-bordered table-striped datatable" id="table-2">
    <thead>
        <tr>
            <th>#</th>
            <th>Permission Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($permissions as $key => $permission)
        <tr>
            <td>{{ $key+1 }}</td>
            <td>{{ $permission->name }}</td>
            <td>
                <a href="javascript:void()" class="btn btn-default btn-sm btn-icon icon-left show-modal" data-id="{{ $permission->id }}" data-name="{{ $permission->name }}">
                    <i class="entypo-pencil"></i>
                    Edit
                </a>
                {{-- <a href="{{ route('permissions.destroy', $permission->id) }}" onclick="return confirm('Are you sure you want delete Permission?')" class="btn btn-danger btn-sm btn-icon icon-left">
                    <i class="entypo-cancel"></i>
                    Delete
                </a> --}}
                <button data-id="{{ $permission->id }}" data-type="permission" class="btn btn-danger btn-sm btn-icon icon-left delete">
                    <i class="entypo-cancel"></i>
                    Delete
                </button>
            </td>
        </tr>
        @empty
            no data found
        @endforelse
    </tbody>
</table>

<!-- Modal 6 (Long Modal)-->
<div class="modal fade" id="modal-6">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="row">
            <form method="post" id="permissionForm">
                @csrf
                <input type="hidden" name="permission_id" id="permissionId">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="permission_name" class="control-label">Permission Name</label>
                            <input type="text" class="form-control" name="permission_name" id="permission_name" placeholder="Permission Name" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-info" id="submitBtn"></button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.show-modal').click(function() {

            var permissionId = $(this).data('id');
            var permissionName = $(this).data('name');
            var modal = $('#modal-6');
            var form = modal.find('#permissionForm');

            if(permissionId) {
                modal.find('.modal-title').text('Edit Permission');
                form.attr('action', '{{ url("permissions/update") }}');
                modal.find('#permissionId').val(permissionId);
                modal.find('#permission_name').val(permissionName);
                modal.find('#submitBtn').text('Update Permission');
            } else {
                modal.find('.modal-title').text('Create Permission');
                form.attr('action', "{{ route('permissions.store') }}");
                modal.find('#permissionId').val('');
                modal.find('#permission_name').val('');
                modal.find('#submitBtn').text('Create Permission');
            }
            modal.modal('show');
        });
    });
</script>
@endsection