In this video, we will learn about editing a service in the admin panel of our Laravel 8 project.

Let's see how we can edit a service.

First of all, let's create a new Livewire component.

Switch to the command prompt and type the following command:

php artisan make:livewire admin/AdminEditServiceComponent

Now, switch to the project and let's create a route for this component.

Go inside the routes directory, open the web.php file, and create a new route inside the admin middleware route group:

Route::get('/admin/service/edit/{service_slug}',AdminEditServiceComponent::class)->name('admin.edit_service');

Now, let's open the AdminEditServiceComponent class file and add the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsService;
use AppModelsServiceCategory;
use CarbonCarbon;
use LivewireComponent;
use LivewireWithFileUploads;
use IlluminateSupportStr;
class AdminEditServiceComponent extends Component
{
    use WithFileUploads;
    public $name;
    public $slug;
    public $tagline;
    public $service_category_id;
    public $price;
    public $discount;
    public $discount_type;
    public $image;
    public $thumbnail;
    public $description;
    public $inclusion;
    public $exclusion;
    public $newthumbnail;
    public $newimage;
    public $service_id;
    public function mount($service_slug)
    {
        $service = Service::where('slug',$service_slug)->first();
        $this->service_id= $service->id;
        $this->name = $service->name;
        $this->slug = $service->slug;
        $this->tagline = $service->tagline;
        $this->service_category_id = $service->service_category_id;
        $this->price = $service->price;
        $this->discount = $service->discount;
        $this->discount_type = $service->discount_type;
        $this->image = $service->image;
        $this->thumbnail = $service->thumbnail;
        $this->description = $service->description;
        $this->inclusion = str_replace(`|`,`
`,$service->inclusion);
        $this->exclusion = str_replace(`|`,`
`,$service->exclusion);
    }
    public function generateSlug()
    {
        $this->slug = Str::slug($this->name,'-');
    }
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'name'=> 'required',
            'slug'=> 'required',
            'tagline'=> 'required',
            'service_category_id'=> 'required',
            'price'=> 'required',                                
            'description'=> 'required',
            'inclusion'=> 'required',
            'exclusion'=> 'required'
        ]);
        if($this->newthumbnail)
        {
            $this->validateOnly($fields,[
                'newthumbnail'=> 'required|mimes:jpeg,png'
            ]);
        }
        if($this->newimage)
        {
            $this->validateOnly($fields,[
                'newimage'=> 'required|mimes:jpeg,png'
            ]);
        }
    }
    public function updateService()
    {
        $this->validate([
            'name'=> 'required',
            'slug'=> 'required',
            'tagline'=> 'required',
            'service_category_id'=> 'required',
            'price'=> 'required',                                
            'description'=> 'required',
            'inclusion'=> 'required',
            'exclusion'=> 'required'
        ]);
        if($this->newthumbnail)
        {
            $this->validate([
                'newthumbnail'=> 'required|mimes:jpeg,png'
            ]);
        }
        if($this->newimage)
        {
            $this->validate([
                'newimage'=> 'required|mimes:jpeg,png'
            ]);
        }
        $service = Service::find($this->service_id);
        $service->name = $this->name;
        $service->slug = $this->slug;
        $service->tagline = $this->tagline;
        $service->service_category_id = $this->service_category_id;
        $service->price = $this->price;
        $service->discount = $this->discount;
        $service->discount_type = $this->discount_type;       
        $service->description = $this->description;
        $service->inclusion = str_replace(`
`,'|',trim($this->inclusion));
        $service->exclusion = str_replace(`
`,'|',trim($this->exclusion));
        if($this->newthumbnail)
        {
            unlink('images/services/thumbnails'.'/'.$service->thumbnail);
            $imageName = Carbon::now()->timestamp . '.' . $this->newthumbnail->extension();
            $this->newthumbnail->storeAs('services/thumbnails',$imageName);
            $service->thumbnail = $imageName;
        }
       
        if($this->newimage)
        {
            unlink('images/services'.'/'.$service->image);
            $imageName2 = Carbon::now()->timestamp . '.' . $this->newimage->extension();
            $this->newimage->storeAs('services',$imageName2);
            $service->image = $imageName2;
        }        
        $service->save();
        session()->flash('message','Service has been updated successfully!');
    }
    public function render()
    {
        $categories = ServiceCategory::all();
        return view('livewire.admin.admin-edit-service-component',['categories'=>$categories])->layout('layouts.base');
    }
}

Next, open the AdminEditServiceComponent view file and 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>Edit Service</h1>
                <div class=`crumbs`>
                    <ul>
                        <li><a href=`/`>Home</a></li>
                        <li>/</li>
                        <li>Edit Service</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`>
                                            Edit Service
                                        </div>
                                        <div class=`col-md-6`>
                                            <a href=`{{route('admin.all_services')}}` class=`btn btn-info pull-right`>All Services</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=`updateService`>
                                        @csrf
                                        <div class=`form-group`>
                                            <label for=`name` class=`control-label col-sm-3`>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`>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`>Tagline: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`slug` wire:model=`tagline` />
                                                @error('tagline') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Service Category: </label>
                                            <div class=`col-sm-9`>
                                                <select class=`form-control` wire:model=`service_category_id`>
                                                    <option value=``>Select Servie Category</option>
                                                    @foreach($categories as $category)
                                                    <option value=`{{$category->id}}`>{{$category->name}}</option>
                                                    @endforeach
                                                </select>
                                                @error('service_category_id') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Price: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`price` wire:model=`price` />
                                                @error('price') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Discount: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`text` class=`form-control` name=`discount` wire:model=`discount` />
                                                @error('discount') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Discount Type: </label>
                                            <div class=`col-sm-9`>
                                                <select class=`form-control` wire:model=`discount_type`>
                                                    <option value=``>Select Discount Type</option>
                                                    <option value=`fixed`>Fixed</option>
                                                    <option value=`percent`>Percent</option>
                                                </select>
                                                @error('discount_type') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Description: </label>
                                            <div class=`col-sm-9`>
                                                <textarea class=`form-control` wire:model=`description`></textarea>
                                                @error('description') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Inclusion: </label>
                                            <div class=`col-sm-9`>
                                                <textarea class=`form-control` wire:model=`inclusion`></textarea>
                                                @error('inclusion') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Exclusion: </label>
                                            <div class=`col-sm-9`>
                                                <textarea class=`form-control` wire:model=`exclusion`></textarea>
                                                @error('exclusion') <p class=`text-danger`>{{$message}}</p> @enderror
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Thumbnail: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`file` class=`form-control-file` name=`thumbnail` wire:model=`newthumbnail` />
                                                @error('newthumbnail') <p class=`text-danger`>{{$message}}</p> @enderror
                                                @if($newthumbnail)
                                                    <img src=`{{$newthumbnail->temporaryUrl()}}` width=`60` />
                                                @else
                                                    <img src=`{{asset('images/services/thumbnails')}}/{{$thumbnail}}` width=`60` />
                                                @endif
                                            </div>
                                        </div>
                                        <div class=`form-group`>
                                            <label for=`slug` class=`control-label col-sm-3`>Image: </label>
                                            <div class=`col-sm-9`>
                                                <input type=`file` class=`form-control-file` name=`image` wire:model=`newimage` />
                                                @error('newimage') <p class=`text-danger`>{{$message}}</p> @enderror
                                                @if($newimage)
                                                    <img src=`{{$newimage->temporaryUrl()}}` width=`60` />
                                                @else
                                                    <img src=`{{asset('images/services')}}/{{$image}}` width=`60` />
                                                @endif
                                            </div>
                                        </div>
                                        <button type=`submit` class=`btn btn-success pull-right`>Update Service</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now, go to the admin-services-component.blade.php view file and add a link for editing a service:

<a href=`{{route('admin.edit_service',['service_slug'=>$service->slug])}}`><i class=`fa fa-edit fa-2x text-info`></i></a>

Now, everything is done. Let's check it.

Switch to the browser and refresh the page. Now, let's edit any service.

Change the name and image, and then click on `Update`.

And here you can see the service has been updated.

So, in this way, you can edit a service. That's all about editing a service.