<x-admin-layout
    active="expenses"
    :title="__('expenses.title')"
    :crumbs="[
        ['label' => __('admin.shell.brand_sub')],
        ['label' => __('expenses.crumb_parent')],
        ['label' => __('expenses.title')],
    ]">

    <div class="page-wide">
        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('expenses.title') }}</h1>
                <p class="page-sub">{{ __('expenses.sub') }}</p>
            </div>
            <div class="flex items-center gap-2">
                @can('export', App\Models\Expense::class)
                <div class="dropdown" x-data="dropdown">
                    <button type="button" class="pos-btn pos-btn-sm pos-btn-ghost" @click="toggle()" :aria-expanded="open">
                        <x-icon name="download" class="w-4 h-4" />
                        {{ __('expenses.actions.export') }}
                        <x-icon name="chevron" class="w-4 h-4" />
                    </button>
                    <div class="dropdown-panel" x-show="open" x-cloak @click.outside="close()" @keydown.escape.window="close()">
                        <a href="{{ route('admin.expenses.export', ['format' => 'csv']) }}" class="dropdown-item" @click="close()">
                            <span class="dropdown-item-label">{{ __('expenses.actions.export_csv') }}</span>
                        </a>
                        <a href="{{ route('admin.expenses.export', ['format' => 'xlsx']) }}" class="dropdown-item" @click="close()">
                            <span class="dropdown-item-label">{{ __('expenses.actions.export_xlsx') }}</span>
                        </a>
                    </div>
                </div>
                @endcan

                @can('viewAny', App\Models\ExpenseCategory::class)
                    <a href="{{ route('admin.expense-categories.index') }}" class="pos-btn pos-btn-sm pos-btn-ghost">
                        <x-icon name="tag" class="w-4 h-4" />
                        {{ __('expense_categories.title') }}
                    </a>
                @endcan

                @can('create', App\Models\Expense::class)
                    <a href="{{ route('admin.expenses.create') }}" class="pos-btn pos-btn-sm pos-btn-primary">
                        <x-icon name="plus" class="w-4 h-4" />
                        {{ __('expenses.new') }}
                    </a>
                @endcan
            </div>
        </div>

        <x-admin.summary-cards :cards="$summaryCards" />

        <div class="card card-pad-0" x-data="dataTable({ rowsSelector: 'tbody > tr[data-dt-row]' })">
            <div class="dt-toolbar">
                <div class="dt-toolbar-title">{{ __('expenses.list.title') }} (<span x-text="rowCount">{{ $expenses->count() }}</span>)</div>
                <x-admin.dt-toolbar-actions />
            </div>

            <form method="GET" action="{{ route('admin.expenses.index') }}" class="inv-filter">
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('expenses.fields.category') }}</span>
                    <select name="category_id" class="pos-input" x-data="enhancedSelect()">
                        <option value="">{{ __('expenses.filter.all_categories') }}</option>
                        @foreach ($categories as $c)
                            <option value="{{ $c->id }}" @selected((int) $filters['categoryId'] === (int) $c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('expenses.filter.from') }}</span>
                    <input type="text" name="from" value="{{ $filters['from'] }}" class="pos-input js-datepicker" data-fp-submit-on-change="1" autocomplete="off">
                </label>
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('expenses.filter.to') }}</span>
                    <input type="text" name="to" value="{{ $filters['to'] }}" class="pos-input js-datepicker" data-fp-submit-on-change="1" autocomplete="off">
                </label>
                <label class="field inv-filter-search">
                    <span class="field-label">&nbsp;</span>
                    <span class="inv-search">
                        <span class="inv-search-icon"><x-icon name="search" class="w-4 h-4" /></span>
                        <input type="search" name="q" value="{{ $filters['q'] }}" class="pos-input" placeholder="{{ __('expenses.filter.search') }}">
                    </span>
                </label>
                <x-admin.filter-reset route="admin.expenses.index" />
            </form>

            @if ($expenses->isEmpty())
                <div class="dt-empty">
                    <span class="dt-empty-icon"><x-icon name="cash" class="w-5 h-5" /></span>
                    <div class="dt-empty-title">{{ __('expenses.empty_state.title') }}</div>
                    <div class="dt-empty-sub">{{ __('expenses.empty_state.sub') }}</div>
                </div>
            @else
                <div class="dt-scroll">
                <table class="dt-table">
                    <thead>
                        <tr>
                            <th>{{ __('expenses.columns.number') }}</th>
                            <th>{{ __('expenses.columns.date') }}</th>
                            <th>{{ __('expenses.columns.category') }}</th>
                            <th>{{ __('expenses.columns.payment_method') }}</th>
                            <th>{{ __('expenses.columns.supplier') }}</th>
                            <th class="num">{{ __('expenses.columns.amount') }}</th>
                            <th class="dt-actions-col"><span class="sr-only">{{ __('expenses.columns.actions') }}</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($expenses as $e)
                            <tr class="prod-row" data-dt-row
                                @click="window.location.href = {{ \Illuminate\Support\Js::from(route('admin.expenses.edit', $e)) }}">
                                <td class="mono">{{ $e->number }}</td>
                                <td>{{ optional($e->expense_date)->format('d M Y') }}</td>
                                <td>{{ $e->category?->name ?: '—' }}</td>
                                <td>{{ $e->paymentMethod?->name ?: '—' }}</td>
                                <td>{{ $e->supplier?->name ?: '—' }}</td>
                                <td class="num tnum">{{ format_money($e->total) }}</td>
                                <td>
                                    <div class="prod-row-actions">
                                        <x-admin.row-actions>
                                            @can('update', $e)
                                                <x-admin.row-action :href="route('admin.expenses.edit', $e)" icon="edit" :label="__('table.action.edit')" />
                                            @endcan
                                            @can('delete', $e)
                                                <div class="row-action-sep"></div>
                                                <x-admin.row-action icon="trash" variant="danger" :label="__('expenses.actions.delete')"
                                                    @click="
                                                        const btn = $event.currentTarget;
                                                        $store.confirm.show({
                                                            title: {{ \Illuminate\Support\Js::from(__('expenses.confirm_delete.title', ['number' => $e->number])) }},
                                                            message: {{ \Illuminate\Support\Js::from(__('expenses.confirm_delete.message')) }},
                                                            intent: 'danger',
                                                            confirmLabel: {{ \Illuminate\Support\Js::from(__('expenses.confirm_delete.confirm')) }},
                                                            onConfirm: () => $deleteRow({{ \Illuminate\Support\Js::from(route('admin.expenses.destroy', $e)) }}, btn),
                                                        })
                                                    " />
                                            @endcan
                                        </x-admin.row-actions>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>
                <x-admin.dt-pager />
            @endif
        </div>
    </div>
</x-admin-layout>
