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

    <div class="page-wide"
         x-data="dataTable({ rowsSelector: 'tbody > tr[data-dt-row]' })">
        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('supplier_payments.title') }}</h1>
                <p class="page-sub">{{ __('supplier_payments.sub') }}</p>
            </div>
            @can('create', App\Models\PurchasePayment::class)
                <a href="{{ route('admin.supplier-payments.create') }}" class="pos-btn pos-btn-sm pos-btn-primary">
                    <x-icon name="plus" class="w-4 h-4" />
                    {{ __('supplier_payments.new') }}
                </a>
            @endcan
        </div>

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

        <div class="card card-pad-0">
            <div class="dt-toolbar">
                <div class="dt-toolbar-title">{{ __('supplier_payments.list.title', ['count' => $payments->count()]) }}</div>
                <x-admin.dt-toolbar-actions />
            </div>
            <form method="GET" action="{{ route('admin.supplier-payments.index') }}" class="inv-filter">
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('supplier_payments.columns.supplier') }}</span>
                    <select name="supplier_id" class="pos-input" x-data="enhancedSelect()" onchange="this.form.submit()">
                        <option value="">{{ __('supplier_payments.filter.supplier_all') }}</option>
                        @foreach ($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" @selected($filters['supplierId'] === $supplier->id)>{{ $supplier->name }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('supplier_payments.columns.method') }}</span>
                    <select name="payment_method_id" class="pos-input" x-data="enhancedSelect()" onchange="this.form.submit()">
                        <option value="">{{ __('supplier_payments.filter.method_all') }}</option>
                        @foreach ($methods as $m)
                            <option value="{{ $m->id }}" @selected($filters['paymentMethodId'] === $m->id)>{{ $m->name }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('supplier_payments.filter.from') }}</span>
                    <input type="text" name="from" value="{{ $filters['from'] }}"
                           class="pos-input js-datepicker" data-fp-submit-on-change="1"
                           placeholder="{{ __('table.filter_date_from_placeholder') }}">
                </label>
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('supplier_payments.filter.to') }}</span>
                    <input type="text" name="to" value="{{ $filters['to'] }}"
                           class="pos-input js-datepicker" data-fp-submit-on-change="1"
                           placeholder="{{ __('table.filter_date_to_placeholder') }}">
                </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="{{ __('supplier_payments.filter.search') }}">
                    </span>
                </label>
                <x-admin.filter-reset route="admin.supplier-payments.index" />
            </form>

            @if ($payments->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">{{ __('supplier_payments.empty_state.title') }}</div>
                    <div class="dt-empty-sub">{{ __('supplier_payments.empty_state.sub') }}</div>
                </div>
            @else
                <div class="dt-scroll">
                <table class="dt-table">
                    <thead>
                        <tr>
                            <th>{{ __('supplier_payments.columns.date') }}</th>
                            <th>{{ __('supplier_payments.columns.supplier') }}</th>
                            <th>{{ __('supplier_payments.columns.purchase') }}</th>
                            <th>{{ __('supplier_payments.columns.method') }}</th>
                            <th>{{ __('supplier_payments.columns.reference') }}</th>
                            <th class="num">{{ __('supplier_payments.columns.amount') }}</th>
                            <th class="dt-actions-col"><span class="sr-only">{{ __('table.actions') }}</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($payments as $p)
                            <tr class="prod-row {{ $p->isVoided() ? 'is-inactive' : '' }}" data-dt-row
                                data-dt-name="{{ $p->supplier->name ?? $p->reference ?? '' }}"
                                data-dt-id="{{ $p->id }}"
                                @click="window.location.href = {{ \Illuminate\Support\Js::from(route('admin.supplier-payments.show', $p)) }}">
                                <td>{{ format_date($p->payment_date) }}</td>
                                <td>{{ $p->supplier?->name ?: '—' }}</td>
                                <td class="mono">
                                    @if ($p->purchase)
                                        {{ $p->purchase->number }}
                                    @elseif (! $p->isVoided())
                                        <span class="fg-tertiary">{{ __('supplier_payments.list.unallocated_credit') }}</span>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td>{{ $p->paymentMethod?->name ?: '—' }}</td>
                                <td class="mono fg-tertiary">{{ $p->reference ?: '—' }}</td>
                                <td class="num tnum">
                                    {{ format_money($p->amount) }}
                                    @if ($p->isVoided())
                                        <span class="prod-badge prod-badge-muted ms-1">{{ __('supplier_payments.badges.voided') }}</span>
                                    @endif
                                </td>
                                <td>
                                    <x-admin.row-actions>
                                        <x-admin.row-action :href="route('admin.supplier-payments.show', $p)" icon="eye" :label="__('table.action.view')" />
                                        @can('void', $p)
                                            @unless ($p->isVoided())
                                                <div class="row-action-sep"></div>
                                                <x-admin.row-action icon="x" variant="danger" :label="__('supplier_payments.void.action')"
                                                    @click="$store.confirm.show({
                                                        title:        {{ \Illuminate\Support\Js::from(__('supplier_payments.void.confirm_title')) }},
                                                        message:      {{ \Illuminate\Support\Js::from(__('supplier_payments.void.confirm_body')) }},
                                                        intent:       'danger',
                                                        confirmLabel: {{ \Illuminate\Support\Js::from(__('supplier_payments.void.action')) }},
                                                        cancelLabel:  {{ \Illuminate\Support\Js::from(__('supplier_payments.actions.discard')) }},
                                                        onConfirm:    () => $submitForm({{ \Illuminate\Support\Js::from(route('admin.supplier-payments.void', $p)) }}),
                                                    })" />
                                            @endunless
                                        @endcan
                                    </x-admin.row-actions>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                </div>

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