@props([
    'categories' => [],
    'isEditingCommissions' => false
])

<div class="card card-inner" x-data="{commissionsTab: 1}">
    <div class="mb-4 d-flex align-items-center gx-4">
        <div>
            <h4 class="nk-block-title">
                @lang('Remuneration')
            </h4>
        </div>
        <div>
            @can('companies.update')
            <x-ui.select 
                wire:model="company.commission_level"
                :options="CompanyCommissionLevel::selectOptions()" 
                :placeholder="__('Select a commission level')"
            />
            {{-- @elseif($this->company->commission_level)
            <span class="badge badge-pill bg-primary">
               {{ $this->company->commission_level?->label() }}
            </span> --}}
            @endcan
        </div>
    </div>
    <ul class="nav nav-tabs">
        <li class="nav-item"> 
            <a class="nav-link" 
                x-bind:class="{'active': commissionsTab == 1}"
                x-on:click="commissionsTab = 1">
                Rémunération par type de dossier
            </a>
            <a class="nav-link ms-4" 
                x-bind:class="{'active': commissionsTab == 2}"
                x-on:click="commissionsTab = 2">
                Rémunération par produit
            </a>
        </li>    
    </ul>
    <div class="tab-content">
        <div class="tab-pane" x-bind:class="{'active': commissionsTab == 1}">
            <x-commissions.commissions-table :categories="$this->project_categories" :is-editing="$this->isEditingCommissions"/>

            @if(auth()->user()->can('companies.update') && ! $isEditingCommissions)
            <button type="button" wire:click="$set('isEditingCommissions', true)" class="btn btn-outline-light btn-white mt-2">Éditer</button>
            @endif
        </div>
        <div class="tab-pane" x-bind:class="{'active': commissionsTab == 2}">
            @livewire('commissions.bonus-commissions-table', [
                'restrict' => [
                    'company_id' => $this->company->id, 
                    'transaction_type' => TransactionType::MANDATE()
                ],
                'loader' => false,
                'deferLoad' => true
            ], key('bonus-mandate'))
        </div> 
    </div>    
</div>