@push('styles')
<style>
    #accounting-manager .dropdown-toggle :not(.dropdown-toggle-split) {
        border-radius: 0.25rem !important;
    }
    #debts_credit .livewire-datatable .nk-block-head {
        padding: 0.8rem;
    }
    #accounting-manager .livewire-datatable .nk-block-head {
        padding: 0.75rem 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-bottom: 1px solid #e5e9f2;
        min-height: 61px;
        background-color: #F8FAFC !important;
    }
    .dark-mode #accounting-manager .livewire-datatable .nk-block-head {
        background-color: #0d141d !important;
        border-bottom: 1px solid #1d2d40 !important;
    }
    #accounting-tables .livewire-datatable .nk-block-head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: start;
    }
</style>
@endpush
<div id="accounting-manager" x-data="{tab: 0, tabs: [], loaded: []}" class="mx-auto wide-md mt-5" x-bind:class="{'mx-auto wide-md mt-5': tab == 0}" x-transition>
   <div class="row gy-gs mb-4">
       <div class="col-lg-6" x-bind:class="{'col-lg-6': tab == 0, 'col-xl-3 col-md-6': tab > 0}">
            <x-widgets.card-icon-svg 
                title="Suivi comptable"
                icon="devices" 
                x-bind:class="{'active shadow': tab == 1, 'compact': tab > 0, 'card-bordered': tab == 0 || tab != 1}"
                :items="$this->getItems('accounting')"
                x-on:click="
                    tab = 1;
                    if(!loaded.includes(tab)) {
                        Livewire.emitTo('financial-plans.financial-plans-table', 'readyToLoad')
                        loaded.push(tab);
                    }"
            />
       </div>
       <div class="col-lg-6" x-bind:class="{'col-lg-6': tab == 0, 'col-xl-3 col-md-6': tab > 0}">
            <x-widgets.card-icon-svg 
                title="Bordereaux de paiement"
                icon="invoice"
                :items="$this->getItems('transactions')"
                x-bind:class="{'active shadow': tab == 2, 'compact': tab > 0, 'card-bordered': tab == 0 || tab != 2}"
                x-on:click="
                    tab = 2;
                    if(!loaded.includes(tab)) {
                        Livewire.emitTo('transactions.transactions-table', 'readyToLoad')
                        loaded.push(tab);
                    }"
            />
       </div>
       <div class="col-lg-6" x-bind:class="{'col-lg-6': tab == 0, 'col-xl-3 col-md-6': tab > 0}">
            <x-widgets.card-icon-svg 
                title="Créances/Dettes MIOB" 
                icon="support-payment"
                :items="$this->getItems('debts')"
                x-bind:class="{'active shadow': tab == 3, 'compact': tab > 0, 'card-bordered': tab == 0 || tab != 3}"
                x-on:click="
                    tab = 3;
                    if(!loaded.includes(tab)) {
                        Livewire.emitTo('transactions.transaction-expense-debts-table', 'readyToLoad')
                        loaded.push(tab);
                    }"
            />
       </div>
       <div class="col-lg-6" x-bind:class="{'col-lg-6': tab == 0, 'col-xl-3 col-md-6': tab > 0}">
         <x-widgets.card-icon-svg 
                title="Alertes et notes" 
                icon="recheck"
                :items="$this->getItems('notes')"
                x-bind:class="{'active shadow': tab == 4, 'compact': tab > 0, 'card-bordered': tab == 0 || tab != 4}"
                x-on:click="tab = 4;
                    if(!loaded.includes(tab)) {
                        Livewire.emitTo('notes.notes-table', 'readyToLoad')
                        loaded.push(tab);
                    }"
            />
       </div>
   </div>

    <div class="nk-content-body" x-show="tab > 0" x-cloak @transition>
        <div x-show="tab == 1" class="mt-1">
            @livewire('accounting.accounting-table')
        </div>
        <div x-show="tab == 2" class="mt-1" x-cloak>
            @livewire('transactions.transactions-table', [
                'loader' => false,
                'deferLoad' => true
            ])
        </div>
        <div id="debts_credit" x-show="tab == 3" class="mt-1" x-cloak>
            <x-widgets.card-fw class="border-primary" x-data="{tab: 1}">
                <x-slot name="header">
                    <x-ui.tabs :tabs="$this->debts_credits_tabs" index="id"/>
                </x-slot>
                <div x-show="tab == 1" x-cloak>
                    @livewire('transactions.transaction-expense-debts-table', [
                        'loader' => false,
                        'deferLoad' => true
                    ])
                </div>
                <div x-show="tab == 2" x-cloak>
                    @livewire('transactions.transaction-expense-credits-table', [
                        'loader' => false,
                        'deferLoad' => true
                    ])
                </div>
            </x-widgets.card-fw>
        </div>
        <div x-show="tab == 4" class="mt-1" x-cloak>
            @livewire('notes.notes-table', [
                'loader' => false,
                'deferLoad' => true
            ])
        </div>
    </div>
</div>