In this video we are going to learn about Change Location.
So let see how can we change the location.
For that lets create a livewire component for change location.
So go to the command prompt and run the command.

php artisan make:livewire ChangeLocationComponent

Now switch to the project and lets create the route for this.
So go to the web.php file and add the following route.

Route::get('/change-location',ChangeLocationComponent::class)->name('home.change_location’);

Now go to the Change Location Component class file and here add the following code.

<?php

namespace App\\Http\\Livewire;

use Livewire\\Component;

class ChangeLocationComponent extends Component
{
    public $streetnumber;
    public $routes;
    public $city;
    public $state;
    public $country;
    public $zipcode;

    public function changeLocation()
    {
        session()->put('streetnumber',$this->streetnumber);
        session()->put('routes',$this->routes);
        session()->put('city',$this->city);
        session()->put('state',$this->state);
        session()->put('country',$this->country);
        session()->put('zipcode',$this->zipcode);
        session()->flash('message','Location has been changed');   
        $this->emitTo('location-component','refreshComponent');   
    }


    public function render()
    {
        return view('livewire.change-location-component')->layout('layouts.base');
    }
}

Now lets open the change-location-component.blade.php view file and write the following code.

<div>
    <div class=\"section-title-01 honmob\">
        <div class=\"bg_parallax image_01_parallax\"></div>
        <div class=\"opacy_bg_02\">
            <div class=\"container\">
                <h1>Change Location</h1>
                <div class=\"crumbs\">
                    <ul>
                        <li><a href=\"/\">Home</a></li>
                        <li>/</li>
                        <li>Change Location</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class=\"content-central\">
        <div class=\"semiboxshadow text-center\">
            <img src=\"img/img-theme/shp.png\" class=\"img-responsive\" alt=\"\">
        </div>
        <div class=\"content_info\">
            <div class=\"paddings-mini\">
                <div class=\"container\">
                    <div class=\"row\">
                        @if(Session::has('message'))
                            <div class=\"alert alert-success\" role=\"alert\">{{Session::get('message')}}</div>
                        @endif
                        <form wire:submit.prevent=\"changeLocation\">                            
                            <div class=\"col-md-8\">
                                <h3>Search Your Location</h3>
                                <p class=\"lead\">
                                </p>
                                <input type=\"text\" class=\"form-control\" id=\"autocomplete\" name=\"location\"
                                    placeholder=\"Search Location....\">
                                <div id=\"map\" style=\"height: 400px;\"></div>
                            </div>
                            <div class=\"col-md-4\">
                                <aside class=\"addlocation\">
                                    <h4>Your Location<input type=\"submit\" class=\"btn btn-primary pull-right\"
                                            name=\"submit\" value=\"Add Location\"></h4>
                                    <address>
                                        <div class=\"form-group\">
                                            <label for=\"streetnumber\" class=\"col-form-label\">Street Number:</label>
                                            <input type=\"text\" class=\"form-control\" id=\"street_number\"
                                                name=\"streetnumber\" wire:model=\"streetnumber\">
                                        </div>
                                        <div class=\"form-group\">
                                            <label for=\"routes\" class=\"col-form-label\">Route:</label>
                                            <input type=\"text\" class=\"form-control\" id=\"route\" name=\"routes\" wire:model=\"routes\">
                                        </div>
                                        <div class=\"form-group\">
                                            <label for=\"city\" class=\"col-form-label\">City:</label>
                                            <input type=\"text\" class=\"form-control\" id=\"locality\" name=\"city\" wire:model=\"city\">
                                        </div>
                                        <div class=\"form-group\">
                                            <label for=\"state\" class=\"col-form-label\">State:</label>
                                            <input type=\"text\" class=\"form-control\" id=\"administrative_area_level_1\"
                                                name=\"state\" wire:model=\"state\">
                                        </div>
                                        <div class=\"form-group\">
                                            <label for=\"country\" class=\"col-form-label\">Country:</label>
                                            <input type=\"text\" class=\"form-control\" id=\"country\" name=\"country\" wire:model=\"country\">
                                        </div>
                                        <div class=\"form-group\">
                                            <label for=\"pincode\" class=\"col-form-label\">Pincode:</label>
                                            <input type=\"text\" class=\"form-control\" id=\"postal_code\" name=\"pincode\" wire:model=\"zipcode\">
                                        </div>
                                    </address>
                                </aside>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class=\"section-twitter content_resalt border-top\">
            <i class=\"fa fa-twitter icon-big\"></i>
            <div class=\"container\">
                <div class=\"row\">
                    <div class=\"col-md-12\">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now lets create one more component for this location.
So go to the command prompt and run the command.

php artisan make:livewire LocationComponent

Now lets run the application

php artisan serve

Now switch to the project and lets open the base.blade.php layout file and from here cut this search div
Now render here location-component.blade.php view here.

@livewire(‘location-component’)

Now go to the location-component.blade.php view file and paste the code as following.

<div>
    <div class=\"col-md-6\">
        <ul class=\"visible-md visible-lg text-right\">
            <li><i class=\"fa fa-comment\"></i> Live Chat</li>
            @if(Session::has('city'))
                <li><a href=\"{{route('home.change_location')}}\"><i class=\"fa fa-map-marker\"></i> {{Session::get('city')}}, {{Session::get('state')}}</a></li>   
            @else
                <li><a href=\"{{route('home.change_location')}}\"><i class=\"fa fa-map-marker\"></i> Faridabad, Haryana</a></li>   
            @endif                 
        </ul>
    </div>
</div>

And here past the code Now go to the LocationComponent.php class file add the following code.

<?php

namespace App\\Http\\Livewire;

use Livewire\\Component;

class LocationComponent extends Component
{
    protected $listeners = ['refreshComponent'=>'$refresh'];
    public function render()
    {
        return view('livewire.location-component');
    }
}

Now go to the ChangeLocationComponent.php class file and here inside the changeLocation method add the following code.

$this->emitTo('location-component','refreshComponent');

Now its done, so lets check it.
So switch to the browser and refresh the page.
Now click here for change the location.
And here you can see the change location form.
Now enter there location details and now click on add location.
And here you can see the location has been changed.
So in this way you can Change the Location.