how to create dependent dropdown? and when doing two filters make Input Select with join the second one doesn't work

[codemasterjoel]

I have a table called avv with foreign estado, municipio and parroquia tables.

the parroquia table is a subtable of the municipio table.
and the municipio table is a subtable of the estado table.

1. The first problem I have is how to create dependent dropdown lists.

I was able to solve a bit by making a filter when making the dropdown list of the second filter, but I don't know how to pass the id of the element selected in the first filter.

2. the second problem is the same with the dropdown list with join that all the filters work when you apply it but when you use a second filter the second one doesn't work... it's like it works only with one filter and not with two.

I attach the file AvvsTable.php

<?php

namespace App\Http\Livewire;

use App\Models\avv;
use App\Models\estado;
use App\Models\municipio;
use App\Models\parroquia;
use Illuminate\Support\Carbon;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Rules\{Rule, RuleActions};
use PowerComponents\LivewirePowerGrid\Traits\ActionButton;
use PowerComponents\LivewirePowerGrid\{Button, Column, Exportable, Footer, Header, PowerGrid, PowerGridComponent, PowerGridEloquent};

final class AvvsTable extends PowerGridComponent
{
    use ActionButton;
    // public string $primaryKey = 'avvs.id';
    // public string $sortField = 'avvs.id';

    /*
    |--------------------------------------------------------------------------
    |  Features Setup
    |--------------------------------------------------------------------------
    | Setup Table's general features
    |
    */
    public function setUp(): array
    {
        $this->showCheckBox();
        // $this->persist(['columns', 'filters']);

        return [
            Exportable::make('avv')
                ->striped()
                ->type(Exportable::TYPE_XLS)
                ->columnWidth([
                    2 => 30,
                    4 => 20,
                    ]),
            Header::make()
                ->showSearchInput()
                ->showToggleColumns(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */

    /**
    * PowerGrid datasource.
    *
    * @return Builder<\App\Models\avv>
    */
    public function datasource(): ?Builder
    {
        return avv::query()
        ->join('estados', function ($estado)
        {
            $estado->on('avvs.estado_id', '=', 'estados.id');
        })
        ->join('municipios', function($estado)
        {
            $estado->on('avvs.municipio_id', '=', 'municipios.id');
        })
        ->join('parroquias', function($estado)
        {
            $estado->on('avvs.parroquia_id', '=', 'parroquias.id');
        })
        ->select([
            'avvs.*',
            'estados.nombre as nombre_estado',
            'municipios.nombre as nombre_municipio',
            'parroquias.nombre as nombre_parroquia',
        ]);
    }

    /*
    |--------------------------------------------------------------------------
    |  Relationship Search
    |--------------------------------------------------------------------------
    | Configure here relationships to be used by the Search and Table Filters.
    |
    */

    /**
     * Relationship search.
     *
     * @return array<string, array<int, string>>
     */
    public function relationSearch(): array
    {
        return [
            'estado' => ['nombre'],
            'municipio' => ['nombre'],
            'parroquia' => ['nombre']
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Add Column
    |--------------------------------------------------------------------------
    | Make Datasource fields available to be used as columns.
    | You can pass a closure to transform/modify the data.
    |
    | ❗ IMPORTANT: When using closures, you must escape any value coming from
    |    the database using the `e()` Laravel Helper function.
    |
    */
    public function addColumns(): PowerGridEloquent
    {

        return PowerGrid::eloquent()
            ->addColumn('estado_id')
            ->addColumn('municipio_id')
            ->addColumn('parroquia_id')
            ->addColumn('nombre')

           /** Example of custom column using a closure **/
            // ->addColumn('nombre_lower', function (avv $model) {
            //     return strtolower(e($model->nombre));
            // })

            // ->addColumn('nombre')

            ->addColumn('nivel1', function (avv $model) {
              return ($model->nivel1 ? 'SI' : 'NO');})

            ->addColumn('nombre_terreno')
            ->addColumn('codigo_intu');
    }

    /*
    |--------------------------------------------------------------------------
    |  Include Columns
    |--------------------------------------------------------------------------
    | Include the columns added columns, making them visible on the Table.
    | Each column can be configured with properties, filters, actions...
    |
    */

     /**
     * PowerGrid Columns.
     *
     * @return array<int, Column>
     */
    public function columns(): array
    {
        return [

            // Column::make('ESTADOS', 'estado_id')
            // ->makeInputRange(),

            Column::make(__('ESTADO'), 'nombre_estado')
                ->sortable()
                ->searchable()
                ->makeInputSelect(estado::all(), 'nombre', 'avvs.estado_id'),

            Column::make(__('MUNICIPIO'), 'nombre_municipio')
                ->sortable()
                ->searchable()
                ->makeInputSelect(municipio::all(), 'nombre', 'avvs.municipio_id'),

            Column::make(__('PARROQUIA'), 'nombre_parroquia')
                ->sortable()
                ->searchable()
                ->makeInputSelect(parroquia::all(), 'nombre', 'avvs.parroquia_id'),

            Column::make('NOMBRE', 'nombre')
                ->sortable()
                ->searchable()
                ->headerAttribute('text-center', 'color:red', '')
                ->makeInputText('avvs.nombre'),

                Column::make('NOMBRE TERRENO', 'nombre_terreno')
                ->sortable()
                ->hidden()
                ->searchable()
                ->visibleInExport(true)
                ->makeInputText(),               

            Column::make('CODIGO INTU', 'codigo_intu')
                ->makeInputRange(),
            
            Column::make('NIVEL 1', 'nivel1')
                ->makeBooleanFilter('nivel1', 'SI', 'NO')
        ];
    }


    /*
    |--------------------------------------------------------------------------
    | Actions Method
    |--------------------------------------------------------------------------
    | Enable the method below only if the Routes below are defined in your app.
    |
    */

     /**
     * PowerGrid avv Action Buttons.
     *
     * @return array<int, Button>
     */

    
    // public function actions(): array
    // {
    //    return [
    //        Button::make('edit', 'Edit')
    //            ->class('bg-indigo-500 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm')
    //            ->route('avv.edit', ['avv' => 'id']),

    //        Button::make('destroy', 'Delete')
    //            ->class('bg-red-500 cursor-pointer text-white px-3 py-2 m-1 rounded text-sm')
    //            ->route('avv.delete', ['avv' => 'id'])
    //            ->method('delete')
    //     ];
    // }
    

    /*
    |--------------------------------------------------------------------------
    | Actions Rules
    |--------------------------------------------------------------------------
    | Enable the method below to configure Rules for your Table and Action Buttons.
    |
    */

     /**
     * PowerGrid avv Action Rules.
     *
     * @return array<int, RuleActions>
     */

    
    // public function actionRules(): array
    // {
    //    return [

    //        //Hide button edit for ID 1
    //         Rule::button('edit')
    //             ->when(fn($avv) => $avv->id === 1)
    //             ->hide(),
    //     ];
    // }
}

entering the id of the first filter manually works but I don't know how to get the id automatically

filter works with id manually

datatable without filter

datatable with one dropdown

when I apply the first filter with join it works but when I apply a second filter with join whatever the second one doesn't work. but if I delete the first there if the second works.

when i remove the first i filter the second if it works