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

    <div class="page-wide">
        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('inventory.adjustments.title') }}</h1>
                <p class="page-sub">{{ __('inventory.adjustments.sub') }}</p>
            </div>
            <div class="flex items-center gap-2">
                <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" />
                        {{ __('inventory.adjustments.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.inventory.adjustments.export', ['format' => 'csv']) }}"
                           class="dropdown-item"
                           @click="close()">
                            <span class="dropdown-item-label">{{ __('inventory.adjustments.actions.export_csv') }}</span>
                        </a>
                        <a href="{{ route('admin.inventory.adjustments.export', ['format' => 'xlsx']) }}"
                           class="dropdown-item"
                           @click="close()">
                            <span class="dropdown-item-label">{{ __('inventory.adjustments.actions.export_xlsx') }}</span>
                        </a>
                    </div>
                </div>

                @can('create', App\Models\StockAdjustment::class)
                    <a href="{{ route('admin.inventory.adjustments.create') }}" class="pos-btn pos-btn-sm pos-btn-primary">
                        <x-icon name="plus" class="w-4 h-4" />
                        {{ __('inventory.adjustments.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">{{ __('inventory.adjustments.list_title', ['count' => $adjustments->count()]) }}</div>
                <x-admin.dt-toolbar-actions />
            </div>
            <form method="GET" action="{{ route('admin.inventory.adjustments.index') }}" class="inv-filter">
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('inventory.adjustments.columns.store') }}</span>
                    <select name="store_id" class="pos-input" x-data="enhancedSelect()" onchange="this.form.submit()">
                        <option value="">{{ __('inventory.adjustments.filter.store_all') }}</option>
                        @foreach ($stores as $store)
                            <option value="{{ $store->id }}" @selected($filters['storeId'] === $store->id)>{{ $store->name }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('inventory.adjustments.columns.status') }}</span>
                    <select name="status" class="pos-input" x-data="enhancedSelect()" onchange="this.form.submit()">
                        <option value="">{{ __('inventory.adjustments.filter.status_all') }}</option>
                        <option value="draft"  @selected($filters['status'] === 'draft')>{{ __('inventory.adjustments.status.draft') }}</option>
                        <option value="posted" @selected($filters['status'] === 'posted')>{{ __('inventory.adjustments.status.posted') }}</option>
                    </select>
                </label>
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('inventory.adjustments.filter.date_from') }}</span>
                    <input type="text" name="from" value="{{ $filters['from'] }}"
                           class="pos-input js-datepicker"
                           placeholder="{{ __('table.filter_date_from_placeholder') }}"
                           data-fp-submit-on-change="1">
                </label>
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('inventory.adjustments.filter.date_to') }}</span>
                    <input type="text" name="to" value="{{ $filters['to'] }}"
                           class="pos-input js-datepicker"
                           placeholder="{{ __('table.filter_date_to_placeholder') }}"
                           data-fp-submit-on-change="1">
                </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="{{ __('inventory.adjustments.filter.search') }}">
                    </span>
                </label>
                <x-admin.filter-reset route="admin.inventory.adjustments.index" />
            </form>

            @if ($adjustments->isEmpty())
                <div class="dt-empty">
                    <span class="dt-empty-icon"><x-icon name="edit" class="w-5 h-5" /></span>
                    <div class="dt-empty-title">{{ __('inventory.adjustments.empty_state.title') }}</div>
                    <div class="dt-empty-sub">{{ __('inventory.adjustments.empty_state.sub') }}</div>
                </div>
            @else
                <div class="dt-scroll">
                <table class="dt-table">
                    <thead>
                        <tr>
                            <th>{{ __('inventory.adjustments.columns.number') }}</th>
                            <th>{{ __('inventory.adjustments.columns.date') }}</th>
                            <th>{{ __('inventory.adjustments.columns.store') }}</th>
                            <th>{{ __('inventory.adjustments.columns.reason') }}</th>
                            <th class="num">{{ __('inventory.adjustments.columns.items') }}</th>
                            <th>{{ __('inventory.adjustments.columns.status') }}</th>
                            <th>{{ __('inventory.adjustments.columns.by') }}</th>
                            <th class="dt-actions-col"><span class="sr-only">{{ __('inventory.adjustments.columns.actions') }}</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($adjustments as $adj)
                            <tr class="prod-row" data-dt-row
                                data-dt-name="{{ $adj->number ?? '' }}"
                                data-dt-id="{{ $adj->id }}"
                                @click="window.location.href = {{ \Illuminate\Support\Js::from(route('admin.inventory.adjustments.show', $adj)) }}">
                                <td class="mono">{{ $adj->number }}</td>
                                <td>{{ format_date($adj->adjustment_date) }}</td>
                                <td>{{ $adj->store?->name }}</td>
                                <td>{{ $adj->reasonCode?->name ?: ($adj->reason ?: '—') }}</td>
                                <td class="num tnum">
                                    {{-- Peek the lines inline — saves a round-trip to the
                                         document just to answer "which products?". --}}
                                    <x-admin.cell-peek
                                        :label="$adj->items_count"
                                        :disabled="$adj->items_count === 0"
                                        :title="__('inventory.adjustments.peek.title')"
                                        :sr-label="__('inventory.adjustments.peek.sr_label', ['number' => $adj->number])">
                                        @foreach ($adj->items as $item)
                                            @php $d = (float) $item->quantity_delta; @endphp
                                            <div class="cell-peek-row">
                                                <span class="cell-peek-name">
                                                    {{ $item->product?->name ?? __('inventory.adjustments.peek.unknown_product') }}
                                                    @if ($item->variant?->label)
                                                        <span class="cell-peek-meta">{{ $item->variant->label }}</span>
                                                    @endif
                                                </span>
                                                <span class="cell-peek-value {{ $d >= 0 ? 'inv-delta-pos' : 'inv-delta-neg' }}">
                                                    {{ $d >= 0 ? '+' : '' }}{{ rtrim(rtrim(number_format($d, 4, '.', ''), '0'), '.') ?: '0' }}
                                                </span>
                                            </div>
                                        @endforeach
                                    </x-admin.cell-peek>
                                </td>
                                <td>
                                    @if ($adj->isPosted())
                                        <span class="prod-badge prod-badge-positive">{{ __('inventory.adjustments.status.posted') }}</span>
                                    @else
                                        <span class="prod-badge prod-badge-muted">{{ __('inventory.adjustments.status.draft') }}</span>
                                    @endif
                                </td>
                                <td>{{ $adj->creator?->name ?? '—' }}</td>
                                <td>
                                    <x-admin.row-actions>
                                        @if ($adj->isDraft())
                                            <x-admin.row-action :href="route('admin.inventory.adjustments.edit', $adj)" icon="edit" :label="__('inventory.adjustments.actions.edit')" />
                                            <div class="row-action-sep"></div>
                                            <x-admin.row-action icon="trash" variant="danger" :label="__('inventory.adjustments.actions.delete')"
                                                @click="$store.confirm.show({
                                                    title: {{ \Illuminate\Support\Js::from(__('inventory.adjustments.confirm_delete.title', ['number' => $adj->number])) }},
                                                    message: {{ \Illuminate\Support\Js::from(__('inventory.adjustments.confirm_delete.message')) }},
                                                    intent: 'danger',
                                                    confirmLabel: {{ \Illuminate\Support\Js::from(__('inventory.adjustments.confirm_delete.confirm')) }},
                                                    onConfirm: () => $deleteForm({{ \Illuminate\Support\Js::from(route('admin.inventory.adjustments.destroy', $adj)) }}),
                                                })" />
                                        @else
                                            <x-admin.row-action :href="route('admin.inventory.adjustments.show', $adj)" icon="eye" :label="__('inventory.adjustments.actions.view')" />
                                        @endif
                                    </x-admin.row-actions>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>

                <x-admin.dt-pager />
            @endif
        </div>
    </div>
</x-admin-layout>
