A view to manage users via table and bootstrap modal

users.blade.php

@extends('layouts.dashboard')

@section('content')
    
<div class="row">
    <div class="col-md-12">
    
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Manage Users</h3>

                <div class="pull-right">
                    <button class="btn btn-sm btn-info" data-toggle="modal" data-target="#form" onClick="createModal()">
                        <i class="fa fa-plus"></i>Create
                    </button>                             
                </div>                
            </div>
            <div class="panel-body">
                <table id="users" class="table datatable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                            <th>Edit</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->age }}</td>
                            <td>
                                <button data-toggle="modal" data-target="#form" onClick="editModal('/users/{{ $user->id }}', {{ $user->makeHidden(['id', 'gender', 'deleted_at', 'created_at', 'updated_at']) }} )" class="btn btn-sm btn-info">Edit</button>
                                
                                {{-- $user->get(['name', 'age']) --}} 
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>                                    
                
            </div>
        </div>

    </div>
</div>

<!-- MODAL -->        
<div class="modal" id="form" tabindex="-1" role="dialog" aria-labelledby="defModalHead" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="defModalHead">New User</h4>
            </div>
            <form action="/users" method="POST" class="form-horizontal section">

                {{ csrf_field() }}

                <input type="hidden" name="_method" value="POST">

                <div class="modal-body">
                    <input type="text" class="form-control" name="name" placeholder="User Name" value="" />
                    <br>
                    <input type="number" class="form-control" name="age" placeholder="User Age" value="" />
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>

            </form>
        </div>
    </div>
</div>

@endsection

@section('bottom')

<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.js"></script>
<script>

    var heading = $('#form h4')
    var form = $('#form form')
    var method = $('#form input[name="_method"]')
    var uname = $('#form input[name="name"]')
    var age = $('#form input[name="age"]')

    editModal = function(url, data) {
       heading.text('Edit User')
       form.attr('action', url)
       method.val('PATCH')
       uname.val(data.name)
       age.val(data.age)
    }
    createModal = function() {
       heading.text('New User')
       form.attr('action', '/users')
       method.val('POST')
       uname.val('')
       age.val('')
    }

</script>

@endsection