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

    <div class="page-wide">
        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('purchases.returns.title') }}</h1>
                <p class="page-sub">{{ __('purchases.returns.sub') }}</p>
            </div>
        </div>

        <div class="card card-pad-0" x-data="dataTable({ rowsSelector: 'tbody > tr[data-dt-row]' })">
            <div class="dt-toolbar">
                <div class="dt-toolbar-title">{{ __('purchases.returns.list_title', ['count' => $returns->count()]) }}</div>
            </div>

            {{-- Server filter (AJAX via lib/inv-filter-ajax.js): status,
                 date range, and a free-text search over return # / purchase #
                 / supplier name. --}}
            <form method="GET" action="{{ route('admin.purchase-returns.index') }}" class="inv-filter">
                <label class="field inv-filter-select">
                    <span class="field-label">{{ __('purchases.returns.columns.status') }}</span>
                    <select name="status" class="pos-input" x-data="enhancedSelect()">
                        <option value="all" @selected($filters['status'] === 'all')>{{ __('purchases.returns.filter.status_all') }}</option>
                        @foreach (['posted', 'draft'] as $s)
                            <option value="{{ $s }}" @selected($filters['status'] === $s)>{{ __('purchases.returns.status.'.$s) }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="field inv-filter-date">
                    <span class="field-label">{{ __('purchases.returns.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">{{ __('purchases.returns.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="{{ __('purchases.returns.filter.search') }}">
                    </span>
                </label>
                <x-admin.filter-reset route="admin.purchase-returns.index" />
            </form>

            @if ($returns->isEmpty())
                <div class="dt-empty">
                    <span class="dt-empty-icon"><x-icon name="search" class="w-5 h-5" /></span>
                    <div class="dt-empty-title">{{ __('purchases.returns.empty_state.title') }}</div>
                    <div class="dt-empty-sub">{{ __('purchases.returns.empty_state.sub') }}</div>
                </div>
            @else
                <div class="dt-scroll">
                    <table class="dt-table">
                        <thead>
                            <tr>
                                <th>{{ __('purchases.returns.columns.number') }}</th>
                                <th>{{ __('purchases.returns.columns.purchase') }}</th>
                                <th>{{ __('purchases.returns.columns.supplier') }}</th>
                                <th>{{ __('purchases.returns.columns.date') }}</th>
                                <th class="num">{{ __('purchases.returns.columns.total') }}</th>
                                <th>{{ __('purchases.returns.columns.status') }}</th>
                                <th class="dt-actions-col"><span class="sr-only">{{ __('table.actions') }}</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($returns as $return)
                                @php
                                    $badge = $return->status === 'posted' ? 'prod-badge-positive' : 'prod-badge-muted';
                                @endphp
                                <tr data-dt-row class="cursor-pointer hover:bg-hover"
                                    onclick="window.location='{{ route('admin.purchase-returns.show', $return) }}'">
                                    <td class="mono font-medium">{{ $return->number }}</td>
                                    <td>
                                        <a href="{{ route('admin.purchases.show', $return->purchase_id) }}"
                                           class="link mono"
                                           onclick="event.stopPropagation()">
                                            {{ $return->purchase?->number }}
                                        </a>
                                    </td>
                                    <td>{{ $return->supplier?->name ?: '—' }}</td>
                                    <td>{{ format_date($return->return_date) }}</td>
                                    <td class="num tnum">{{ format_money($return->grand_total) }}</td>
                                    <td>
                                        <span class="prod-badge {{ $badge }}">
                                            {{ __('purchases.returns.status.'.$return->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <x-admin.row-actions>
                                            <x-admin.row-action :href="route('admin.purchase-returns.show', $return)" icon="eye" :label="__('table.action.view')" />
                                            <x-admin.row-action :href="route('admin.purchases.show', $return->purchase_id)" icon="cart" :label="__('purchases.returns.actions.view_purchase')" />
                                        </x-admin.row-actions>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <x-admin.dt-pager />
            @endif
        </div>
    </div>
</x-admin-layout>
