@php 
    $expenseTransaction = $plan->transactions
        ->where('type', $type)
        ->where('direction', TransactionDirection::EXPENSE)
        ->when(isset($clientId), 
            fn($query) => $query->where('client_id', $clientId)
        )
        ->first(); 

    if(! $expenseTransaction) {
       return;
    }
@endphp
<div class="d-flex flex-wrap g-2" class="form-control-wrap"
        x-data="{
            'transaction': @js($expenseTransaction->toArray()),
            showButton() {
                return this.transaction.locked;
            },
            updateTransaction(transaction) {
                if(this.transaction.id === transaction.id) {
                    this.transaction = transaction;
                }
            },
        }"
        x-bind:class="{'d-none': ! showButton()}"
        @update-transaction-{{ $plan->id }}-{{ $type }}.window="updateTransaction($event.detail.transaction)"
    >
    <div>
        <div class="input-group btn-input-group flex-nowrap">
            <x-ui.button label="Bordereau" href="{{ route('payment_slip.detail', $expenseTransaction) }}" target="_blank" 
                class="btn-dim btn-sm" icon="report-profit"/>
            <button class="btn btn-icon btn-primary btn-dim dropdown-toggle dropdown-toggle-split ms-1 btn-sm" data-bs-toggle="dropdown">               
                <em class="icon ni ni-chevron-down"></em>
                <span class="visually-hidden">Options</span>            
            </button>
            <div class="dropdown-menu"> 
                <ul class="link-list-opt no-bdr">
                    <li><a href="{{ route('payment_slip.detail', $expenseTransaction) }}?download=true"><x-ui.nicon name="download-cloud" class="me-1"/> Télécharger</a></li>
                    <li><a href="{{ route('payment_slip.detail', $expenseTransaction) }}" target="_blank"><x-ui.nicon name="eye" class="me-1"/> Visualiser</a></li>
                    <li><a wire:click="sendPaymentSlipNotification({{ $expenseTransaction->id }})" @confirm("envoyer ce bordereau au MIOB")><x-ui.nicon name="send" class="me-1"/> Envoyer</a></li>
                    @if(auth()->user()->is_any_accountant)
                    <li class="divider"></li>
                    <li><a wire:click="deletePaymentSlip({{ $expenseTransaction->id }})" @confirm("supprimer ce bordereau") class="text-danger"><x-ui.nicon name="trash" class="me-1"/> Supprimer</a></li>
                    @endif
                </ul>
            </div>
        </div>
    </div>
    <div x-show="transaction.payment_slip_sent_at" x-cloak>
        <small>(Envoyé le <span x-text="transaction.payment_slip_sent_at"></span>)</small>
    </div>
</div>