@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    #permissions-table td .btn-group .btn{
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Permissions</h1>

    <div class="d-flex justify-content-end mb-3">
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createPermissionModal">
            <i class="material-icons md-add"></i> Add Permission
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="permissions-table" class="table table-bordered table-striped w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Module</th>
                        <th>Name</th>
                        <th>Display Name</th>
                        <th>Description</th>
                        <th>Created At</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- CREATE --}}
<div class="modal fade" id="createPermissionModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <form id="createPermissionForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title"><i class="material-icons me-2">add</i> Add Permission</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Module</label>
                        <select class="form-select" name="module_id" id="create_module_id">
                            <option value="">— Select Module —</option>
                            @foreach($modules as $m)
                                <option value="{{ $m->id }}">{{ $m->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Permission Name (system)</label>
                        <input type="text" class="form-control" name="name" placeholder="e.g. users.create" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Display Name</label>
                        <input type="text" class="form-control" name="display_name" placeholder="Create Users">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" rows="2"></textarea>
                    </div>

                    <div class="alert alert-danger d-none" id="createPermissionErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- VIEW --}}
<div class="modal fade" id="viewPermissionModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title"><i class="material-icons me-2">visibility</i> View Permission</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Module</label>
                    <input type="text" class="form-control" id="view_permission_module" readonly>
                </div>

                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control" id="view_permission_name" readonly>
                </div>

                <div class="mb-3">
                    <label class="form-label">Display Name</label>
                    <input type="text" class="form-control" id="view_permission_display_name" readonly>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea class="form-control" id="view_permission_description" rows="2" readonly></textarea>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- EDIT --}}
<div class="modal fade" id="editPermissionModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <form id="editPermissionForm" method="POST">
            @csrf
            @method('PUT')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title"><i class="material-icons me-2">edit</i> Edit Permission</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="edit_permission_id">

                    <div class="mb-3">
                        <label class="form-label">Module</label>
                        <select class="form-select" name="module_id" id="edit_module_id">
                            <option value="">— Select Module —</option>
                            @foreach($modules as $m)
                                <option value="{{ $m->id }}">{{ $m->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Permission Name</label>
                        <input type="text" class="form-control" name="name" id="edit_permission_name" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Display Name</label>
                        <input type="text" class="form-control" name="display_name" id="edit_permission_display_name">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" id="edit_permission_description" rows="2"></textarea>
                    </div>

                    <div class="alert alert-danger d-none" id="editPermissionErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- DELETE --}}
<div class="modal fade" id="deletePermissionModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form id="deletePermissionForm" method="POST">
            @csrf
            @method('DELETE')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title"><i class="material-icons me-2">delete</i> Confirm Delete</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Delete permission <strong id="delete_permission_name">—</strong>?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(function () {

    const table = $('#permissions-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("permissions.index") }}',
        autoWidth: false,
        responsive: false,
        columns: [
            { data: 'DT_RowIndex', orderable:false, searchable:false },
            { data: 'display_name', name: 'display_name' },
            { data: 'name' },
            { data: 'display_name' },
            { data: 'description' },
            { data: 'created_at' },
            { data: 'action', orderable:false, searchable:false }
        ]
    });

    // VIEW
    $(document).on('click','.viewPermissionBtn',function(){
        $('#view_permission_module').val($(this).data('module_name') ?? '—');
        $('#view_permission_name').val($(this).data('name') ?? '—');
        $('#view_permission_display_name').val($(this).data('display_name') ?? '—');
        $('#view_permission_description').val($(this).data('description') ?? '—');
        new bootstrap.Modal(document.getElementById('viewPermissionModal')).show();
    });

    // EDIT
    $(document).on('click','.editPermissionBtn',function(){
        const id = $(this).data('id');
        $('#edit_permission_id').val(id);
        $('#edit_module_id').val($(this).data('module_id') ?? '');
        $('#edit_permission_name').val($(this).data('name') ?? '');
        $('#edit_permission_display_name').val($(this).data('display_name') ?? '');
        $('#edit_permission_description').val($(this).data('description') ?? '');
        $('#editPermissionForm').attr('action', `/permissions/${id}`);
        new bootstrap.Modal(document.getElementById('editPermissionModal')).show();
    });

    $('#editPermissionForm').submit(function(e){
        e.preventDefault();
        $.post($(this).attr('action'), $(this).serialize(), () => {
            bootstrap.Modal.getInstance(document.getElementById('editPermissionModal')).hide();
            table.ajax.reload(null,false);
        });
    });

    // DELETE
    $(document).on('click','.deletePermissionBtn',function(){
        $('#delete_permission_name').text($(this).data('name'));
        $('#deletePermissionForm').attr('action', `/permissions/${$(this).data('id')}`);
        new bootstrap.Modal(document.getElementById('deletePermissionModal')).show();
    });

    $('#deletePermissionForm').submit(function(e){
        e.preventDefault();
        $.post($(this).attr('action'), $(this).serialize(), () => {
            bootstrap.Modal.getInstance(document.getElementById('deletePermissionModal')).hide();
            table.ajax.reload(null,false);
        });
    });

});
</script>
@endpush