Livewire CRUD

app\Http\Livewire\NoticesCrud.php
<?php

namespace App\Http\Livewire;

use App\Models\Notice;
use Livewire\Component;

class NoticesCrud extends Component
{
    public $notices, $nameinput, $notice_id;
    public $showModal = false;

    public function openModal()
    {
        $this->showModal = true;
    }

    public function closeModal()
    {
        $this->showModal = false;
    }

    public function render()
    {
        $this->notices = Notice::orderby("name", "asc")->get();
        return view('livewire.notices-crud');
    }

    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }

    private function resetInputFields()
    {
        $this->nameinput = '';
        $this->notice_id = null;
    }

    public function store()
    {
        $this->validate([
            'nameinput' => 'required',
        ]);
        Notice::updateOrCreate(['id' => $this->notice_id], [
            'name' => $this->nameinput,
        ]);
        session()->flash('message', $this->notice_id ? 'Notice Updated.' : 'Notice Created.');
        $this->resetInputFields();
        $this->closeModal();
    }

    public function edit($id)
    {
        $notice = Notice::findOrFail($id);
        $this->notice_id = $id;
        $this->nameinput = $notice->name;
        $this->openModal();
    }

    public function delete($id)
    {
        Notice::find($id)->delete();
        session()->flash('message', 'Notice Deleted.');
    }
}
resources\views\livewire\notices-crud.blade.php
<div>

<div class="wrapper d-flex flex-column min-vh-100 bg-light">
@component('myComponents.header', ['title' => 'Notices'])
<a class="breadcrumb-button btn btn-primary" wire:click="create"> Add Notice </a>
@endcomponent

<div class="body flex-grow-1 mt-4">
<div class="container-lg">

<div class="card mb-4">
<div class="card-body">
<h4 id="tasks" class="card-title mb-3">Notices</h4>

<h6>@if (session()->has('message'))
<div>{{ session('message') }}</div>
@endif</h6>

@php
$x=0;
@endphp
@foreach($notices as $notice)
@php
$x++;
@endphp
<div id="taskcats-grd-id{{$x}}" class="notices-grd">
<div>
<h5 style="border-bottom: 1px solid; height: 100%;">{{$notice->name}}</h5>
</div>

<div>
<button id="btn{{$x}}" class="btn btn-primary" wire:click="edit({{ $notice->id }})"
style="width: 100%;">Edit
</button>
</div>
<div>
<div>
<button wire:click="delete({{ $notice->id }})"
onclick="return confirm('Are you sure?')"
style="margin-left: 10px; width: 100%;" class="btn btn-danger"
type="button">Delete
</button>
</div>
</div>
</div>
@endforeach

@if ($showModal)
<div id="myModal" class="modal" style="display: flex; position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); z-index: 9000000; align-items: center;
justify-content: center;">
<!-- Modal content -->
<div class="modal-content" style=" background: #fff;
margin: 10% auto;
padding: 20px;
width: 90%;
position: relative;
max-width: 500px;">
<span
style="position: absolute; top: 0px; right: 15px; cursor: pointer; font-size: 40px;"
wire:click="closeModal"
>&times;</span>
<h2>{{ $notice_id ? 'Edit' : 'Create' }} Notice</h2>
<input type="text" wire:model="nameinput" placeholder="Name">

<div class="modal-footer" style="margin-top: 10px;">
<div>
<button wire:click="store" class="btn btn-primary" style="width: 200px">
Save
</button>
</div>
<div>
<button wire:click="closeModal" class="btn btn-secondary"
style="width: 200px">Close
</button>
</div>
</div>
</div>
</div>
@endif
</div>

</div>
</div>

@component('myComponents.footer', []) @endcomponent
</div>

</div>
resources\views\notice.blade.php
<?php

use App\Models\CompanyTasks;
use App\Models\CompanyContacts;

?>
<html lang="en">
<head>
    @component('myComponents.head', []) @endcomponent
</head>
<body>

@component('myComponents.sidebar', []) @endcomponent

<style>

    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
    }

    /* The Close Button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

</style>


        <livewire:notices-crud />
        @livewireScripts


</body>
</html>