In this video we are going to learn about Add New Service Category
So let see how can we Add New Service Category
So first of all lets create new livewire component for adding new Service category
Switch to command prompt and for creating new livewire component type the command

php artisan make:livewire admin/AdminAddServiceCategoryComponent

Now switch to project and lets create the route for the AdminAddCategoryComponent
So open web.php
And inside the route group
After this route just write here

Route::get('/admin/service-category/add',AdminAddServiceCategoryComponent::class)->name('admin.add_service_category');

Now open the AdminAddCategoryComponent View file add the following code

<div>
<div class=\"section-title-01 honmob\">
<div class=\"bg_parallax image_02_parallax\"></div>
<div class=\"opacy_bg_02\">
<div class=\"container\">
<h1>Add Service Category</h1>
<div class=\"crumbs\">
<ul>
<li><a href=\"/\">Home</a></li>
<li>/</li>
<li>Add Service Category</li>
</ul>
</div>
</div>
</div>
</div>
<section class=\"content-central\">
<div class=\"content_info\">
<div class=\"paddings-mini\">
<div class=\"container\">
<div class=\"row portfolioContainer\">
<div class=\"col-md-8 col-md-offset-2 profile1\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
<div class=\"row\">
<div class=\"col-md-6\">
Add New Service Category
</div>
<div class=\"col-md-6\">
<a href=\"{{route('admin.service_categories')}}\" class=\"btn btn-info pull-right\">All Categories</a>
</div>
</div>
</div>
<div class=\"panel-body\">
@if(Session::has('message'))
<div class=\"alert alert-success\" role=\"alert\">{{Session::get('message')}}</div>
@endif
<form class=\"form-horizontal\" wire:submit.prevent=\"createNewCategory\">
@csrf
<div class=\"form-group\">
<label for=\"name\" class=\"control-label col-sm-3\">Category Name: </label>
<div class=\"col-sm-9\">
<input type=\"text\" class=\"form-control\" name=\"name\" wire:model=\"name\" wire:keyup=\"generateSlug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label for=\"slug\" class=\"control-label col-sm-3\">Category Slug: </label>
<div class=\"col-sm-9\">
<input type=\"text\" class=\"form-control\" name=\"slug\" wire:model=\"slug\" />
@error('slug') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>
<div class=\"form-group\">
<label for=\"slug\" class=\"control-label col-sm-3\">Category Image: </label>
<div class=\"col-sm-9\">
<input type=\"file\" class=\"form-control-file\" name=\"image\" wire:model=\"image\" />
@error('image') <p class=\"text-danger\">{{$message}}</p> @enderror
@if($image)
<img src=\"{{$image->temporaryUrl()}}\" width=\"60\" />
@endif
</div>
</div>
<button type=\"submit\" class=\"btn btn-success pull-right\">Add Category</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>


Now open the AdminAddServiceCategoryComponent class file and first of all lets add the layout

public function render()
{
return view('livewire.admin.admin-add-service-category-component')->layout('layouts.base');
}

Now open the AdminServiceCategoryCompoent View file and add here the
Link for the adding new category inside this header

<div class=\"panel-heading\">
<div class=\"row\">
<div class=\"col-md-6\">
All Service Categories
</div>
<div class=\"col-md-6\">
<a href=\"{{route('admin.add_service_category')}}\" class=\"btn btn-info pull-right\">Add New</a>
</div>
</div>
</div>

Alright now go to the AdminAddServiceCategoryComponent Class file
And inside this file lets create three properties

public $name;
public $slug;
public $image

now bind these property with the input field in form on AdminAddCategoryComponent View file

Now go to the class file and here lets create a function for generating the slug from category name

public function generateslug()
{
     $this->slug = Str::slug($this->name,'-');
}

Now call this function on keyup event
So inside the view file add here keyup event

<div class=\"form-group\">
<label for=\"name\" class=\"control-label col-sm-3\">Category Name: </label>
<div class=\"col-sm-9\">
<input type=\"text\" class=\"form-control\" name=\"name\" wire:model=\"name\" wire:keyup=\"generateSlug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>

Alright now create function for createing the new category

public function createNewCategory()
{
$this->validate([
'name' => 'required',
'slug' => 'required',
'image' => 'required|mimes:jpeg,png'
]);

$scategory = new ServiceCategory();
$scategory->name = $this->name;
$scategory->slug = $this->slug;
$imageName = Carbon::now()->timestamp. '.' . $this->image->extension();
$this->image->storeAs('categories',$imageName);
$scategory->image = $imageName;
$scategory->save();
session()->flash('message','Category has been created successfully!');
}

also add here the livewire lifecycle hook method updated

public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required',
'image' => 'required|mimes:jpeg,png'
]);
}

Now call this function on form submit

<form class=\"form-horizontal\" wire:submit.prevent=\"createNewCategory\">
@csrf
<div class=\"form-group\">
<label for=\"name\" class=\"control-label col-sm-3\">Category Name: </label>
<div class=\"col-sm-9\">
<input type=\"text\" class=\"form-control\" name=\"name\" wire:model=\"name\" wire:keyup=\"generateSlug\" />
@error('name') <p class=\"text-danger\">{{$message}}</p> @enderror
</div>
</div>


Go to the config\\filesystem.php file
And here modify the local array and add here the images directory which conatins categories and servcies images

'local' => [
'driver' => 'local',
// 'root' => storage_path('app'),
'root' => public_path('images'),
],

Now before the form display the message

@if(Session::has('message'))
<div class=\"alert alert-success\" role=\"alert\">{{Session::get('message')}}</div>
@endif

Now everything is done so lets check it
So switch to browser and refresh the page
Now enter the category name such as \"Washing Machine\"
And here you can see slug is auto generated
Now click on submit
And you can see the message category has been added successfully
Now click on this link for seeing all category and here you can see the newly created category
So in this way you can add service category