@php
    $formatMoney = function ($amount, $symbol = '$') {
        return $symbol . number_format((float) $amount, 2);
    };

    $pagesToShow = [];
    if ($totalPages <= 5) {
        for ($i = 1; $i <= $totalPages; $i++) {
            $pagesToShow[] = $i;
        }
    } elseif ($currentPage <= 3) {
        $pagesToShow = [1, 2, 3, 4, 5];
    } elseif ($currentPage >= $totalPages - 2) {
        for ($i = $totalPages - 4; $i <= $totalPages; $i++) {
            $pagesToShow[] = $i;
        }
    } else {
        for ($i = $currentPage - 2; $i <= $currentPage + 2; $i++) {
            $pagesToShow[] = $i;
        }
    }

    $formGrandTotal = (float) collect($lineItems)->sum(fn ($item) => (float) ($item['line_total'] ?? 0));
@endphp

<div class="pm">
    <style>
        .pm {
            padding: 24px;
            max-width: 1600px;
            margin: 0 auto;
            color: #0f172a;
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
        }
        .pm *, .pm *::before, .pm *::after { box-sizing: border-box; }

        .pm-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 20px;
        }
        .pm-title-wrap h1 {
            font-size: 28px;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 4px;
            display: flex;
            align-items: center;
            gap: 12px;
            line-height: 1.25;
        }
        .pm-title-wrap h1 i { color: #6366f1; }
        .pm-subtitle {
            font-size: 14px;
            color: #475569;
            margin: 0;
        }
        .pm-header-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .pm-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            font-family: inherit;
        }
        .pm-btn-excel { background: #10b981; color: #fff; }
        .pm-btn-excel:hover { background: #059669; }
        .pm-btn-pdf { background: #ef4444; color: #fff; }
        .pm-btn-pdf:hover { background: #dc2626; }
        .pm-btn-primary {
            padding: 12px 24px;
            background: #6366f1;
            color: #fff;
            font-size: 15px;
        }
        .pm-btn-primary:hover { background: #4f46e5; }

        .pm-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        .pm-card {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }
        .pm-card-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .pm-card-head h4 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
        }
        .pm-card-count { font-size: 14px; color: #475569; }
        .pm-card-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .pm-card-label { font-size: 12px; color: #94a3b8; }
        .pm-card-value {
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
        }
        .pm-card-value.ok { color: #10b981; }
        .pm-card-value.due { color: #ef4444; }
        .pm-cards-empty {
            text-align: center;
            padding: 20px;
            color: #94a3b8;
            grid-column: 1 / -1;
        }

        .pm-toolbar {
            background: #fff;
            padding: 16px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            margin-bottom: 20px;
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        .pm-search-wrap {
            flex: 1;
            min-width: 250px;
            position: relative;
        }
        .pm-search-wrap i {
            position: absolute;
            inset-inline-start: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }
        .pm-search {
            width: 100%;
            padding-block: 10px;
            padding-inline: 40px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            background: #fff;
            color: #0f172a;
            font-family: inherit;
            text-align: start;
        }
        .pm-perpage {
            padding: 10px 16px;
            padding-inline-end: 2.25rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            background-color: #fff;
            color: #0f172a;
            cursor: pointer;
            font-family: inherit;
            min-width: 72px;
        }

        .pm-msg {
            margin: 0 0 16px;
            font-size: 14px;
            font-weight: 600;
            padding: 10px 14px;
            border-radius: 8px;
        }
        .pm-msg.ok { color: #059669; background: #d1fae5; }
        .pm-msg.err { color: #dc2626; background: #fee2e2; }

        .pm-form {
            background: #fff;
            padding: 24px;
            border-radius: 12px;
            margin-bottom: 24px;
            border: 1px solid #e2e8f0;
        }
        .pm-form-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 2px solid #e2e8f0;
        }
        .pm-form-head h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }
        .pm-form-cancel-top {
            padding: 8px 16px;
            background: #fee2e2;
            color: #ef4444;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            font-family: inherit;
        }
        .pm-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
        }
        .pm-field label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 6px;
        }
        .pm-field input,
        .pm-field select,
        .pm-field textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            background: #fff;
            color: #0f172a;
            font-family: inherit;
        }
        .pm-field input[readonly] {
            background: #f1f5f9;
            font-weight: 600;
        }
        .pm-field-hint { font-size: 12px; color: #94a3b8; font-weight: 400; }

        .pm-items-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 24px 0 16px;
        }
        .pm-items-head h4 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
        }
        .pm-add-item {
            padding: 8px 16px;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
            font-size: 14px;
        }
        .pm-items-wrap {
            overflow-x: auto;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
        }
        .pm-items-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            min-width: 900px;
        }
        .pm-items-table th,
        .pm-items-table td {
            padding: 8px;
            border: 1px solid #e2e8f0;
        }
        .pm-items-table thead tr { background: #f8fafc; }
        .pm-items-table th { text-align: start; font-weight: 600; color: #475569; }
        .pm-items-table th.r, .pm-items-table td.r { text-align: right; }
        .pm-items-table th.c, .pm-items-table td.c { text-align: center; }
        .pm-items-table select,
        .pm-items-table input {
            width: 100%;
            padding: 4px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-size: 13px;
            font-family: inherit;
        }
        .pm-items-table input.qty { width: 70px; text-align: right; }
        .pm-items-table input.num { width: 70px; text-align: right; }
        .pm-items-table input.price { width: 90px; text-align: right; }

        .pm-item-picker {
            position: relative;
            min-width: 180px;
        }
        .pm-item-picker-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 4px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            background: #fff;
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            text-align: start;
            color: #0f172a;
            min-height: 30px;
        }
        .pm-item-picker-btn.open {
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
        }
        .pm-item-picker-btn .placeholder { color: #94a3b8; }
        .pm-item-picker-btn .label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .pm-item-picker-menu {
            position: fixed;
            z-index: 9999;
            min-width: 260px;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
            overflow: hidden;
        }
        .pm-item-picker-search {
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-bottom: 1px solid #e2e8f0;
            font-size: 13px;
            font-family: inherit;
            outline: none;
            box-sizing: border-box;
        }
        .pm-item-picker-search:focus {
            background: #f8fafc;
        }
        .pm-item-picker-list {
            max-height: 220px;
            overflow-y: auto;
            margin: 0;
            padding: 4px 0;
            list-style: none;
        }
        .pm-item-picker-list li {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            color: #0f172a;
        }
        .pm-item-picker-list li:hover,
        .pm-item-picker-list li.active {
            background: #eef2ff;
            color: #4338ca;
        }
        .pm-item-picker-empty {
            padding: 12px 10px;
            color: #94a3b8;
            font-size: 13px;
            text-align: center;
        }
        [x-cloak] { display: none !important; }
        .pm-line-total {
            font-weight: 600;
            background: #f0f9ff;
        }
        .pm-remove-item {
            background: #fee2e2;
            border: none;
            color: #ef4444;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .pm-items-empty {
            text-align: center;
            padding: 20px;
            color: #94a3b8;
        }
        .pm-items-foot td {
            background: #f8fafc;
            font-weight: 600;
        }
        .pm-items-foot .grand {
            font-size: 16px;
            color: #6366f1;
        }

        .pm-paid-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
            margin-top: 16px;
        }
        .pm-form-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        .pm-save {
            padding: 10px 32px;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-family: inherit;
        }
        .pm-cancel {
            padding: 10px 24px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
        }

        .pm-panel {
            background: #fff;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }
        .pm-wrap {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            overflow-y: auto;
            max-height: min(560px, calc(100vh - 280px));
            -webkit-overflow-scrolling: touch;
        }
        .pm:has(.pm-form) .pm-wrap {
            max-height: min(360px, calc(100vh - 480px));
            min-height: 160px;
        }
        .pm-table {
            width: 100%;
            min-width: 1600px;
            border-collapse: collapse;
            font-size: 13px;
        }
        .pm-table thead tr {
            background: #f8fafc;
            border-bottom: 2px solid #e2e8f0;
        }
        .pm-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8fafc;
            padding: 10px 8px;
            text-align: start;
            font-weight: 600;
            color: #475569;
            white-space: nowrap;
        }
        .pm-table thead th.c { text-align: center; }
        .pm-table thead th.r { text-align: right; }
        .pm-table tbody td {
            padding: 8px;
            border-bottom: 1px solid #e2e8f0;
            vertical-align: middle;
        }
        .pm-table tbody td.c { text-align: center; }
        .pm-table tbody td.r { text-align: right; }
        .pm-table tbody td.po { font-weight: 600; }
        .pm-table tbody td.muted { color: #94a3b8; font-style: italic; }
        .pm-table tbody td.line-total { font-weight: 600; color: #6366f1; }
        .pm-table tbody td.paid { color: #10b981; }
        .pm-table tbody td.due { color: #ef4444; }
        .pm-table tbody td.disc { color: #ef4444; }
        .pm-empty {
            padding: 40px;
            text-align: center;
            color: #94a3b8;
        }

        .pm-badge {
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            display: inline-block;
        }
        .pm-badge.paid { background: #d1fae5; color: #10b981; }
        .pm-badge.partial { background: #fef3c7; color: #f59e0b; }
        .pm-badge.unpaid { background: #fee2e2; color: #ef4444; }

        .pm-icon-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 14px;
            padding: 0 4px;
        }
        .pm-icon-btn.edit { color: #3b82f6; margin-inline-end: 6px; }
        .pm-icon-btn.del { color: #ef4444; }

        .pm-pager {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: #f8fafc;
            border-top: 1px solid #e2e8f0;
            flex-wrap: wrap;
            gap: 12px;
        }
        .pm-pager-info { font-size: 14px; color: #475569; }
        .pm-pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .pm-page-btn {
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background: #fff;
            cursor: pointer;
            font-size: 14px;
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
            min-height: 36px;
        }
        .pm-page-btn:disabled { cursor: not-allowed; opacity: 0.5; }
        .pm-page-btn.on {
            background: #6366f1;
            color: #fff;
            font-weight: 600;
            border-color: #6366f1;
        }

        @media (max-width: 768px) {
            .pm { padding: 12px; }
            .pm-header { flex-direction: column; align-items: stretch; }
            .pm-title-wrap h1 { font-size: 22px; }
            .pm-header-actions { flex-direction: column; width: 100%; }
            .pm-btn { width: 100%; justify-content: center; min-height: 44px; }
            .pm-toolbar { flex-direction: column; align-items: stretch; }
            .pm-search-wrap { min-width: 0; width: 100%; }
            .pm-perpage { width: 100%; min-height: 42px; }
            .pm-grid { grid-template-columns: 1fr; }
            .pm-paid-grid { grid-template-columns: 1fr; }
            .pm-form-actions { flex-direction: column; }
            .pm-save, .pm-cancel { width: 100%; min-height: 44px; }
            .pm-wrap { max-height: min(420px, calc(100vh - 300px)); }
            .pm-pager { flex-direction: column; align-items: stretch; }
            .pm-pager-btns { justify-content: center; }
        }
    </style>

    {{-- Header --}}
    <div class="pm-header">
        <div class="pm-title-wrap">
            <h1><i class="fa fa-file-invoice-dollar"></i> {{ __('purchases.purchase_management') }}</h1>
            <p class="pm-subtitle">{{ __('purchases.manage_your_purchase_orders_suppliers_and_inventory') }}</p>
        </div>
        <div class="pm-header-actions">
            <button type="button" class="pm-btn pm-btn-excel" wire:click="exportExcel">
                <i class="fa fa-file-excel"></i> {{ __('common.export_excel') }}
            </button>
            <button type="button" class="pm-btn pm-btn-pdf" wire:click="exportPdf">
                <i class="fa fa-file-pdf"></i> {{ __('common.export_pdf') }}
            </button>
            <button type="button" class="pm-btn pm-btn-primary" wire:click="handleAdd">
                <i class="fa fa-plus"></i> {{ __('purchases.new_purchase_order') }}
            </button>
        </div>
    </div>

    {{-- Currency summary cards --}}
    <div class="pm-cards">
        @forelse ($currencyStats as $curr)
            <div class="pm-card" wire:key="curr-{{ $curr['currency'] }}">
                <div class="pm-card-head">
                    <h4>{{ $curr['currency'] }} ({{ $curr['symbol'] }})</h4>
                    <span class="pm-card-count">
                        {{ $curr['count'] }} purchase{{ $curr['count'] !== 1 ? 's' : '' }}
                    </span>
                </div>
                <div class="pm-card-grid">
                    <div>
                        <div class="pm-card-label">{{ __('purchases.total_amount') }}</div>
                        <div class="pm-card-value">{{ $formatMoney($curr['totalAmount'], $curr['symbol']) }}</div>
                    </div>
                    <div>
                        <div class="pm-card-label">{{ __('purchases.total_paid') }}</div>
                        <div class="pm-card-value ok">{{ $formatMoney($curr['totalPaid'], $curr['symbol']) }}</div>
                    </div>
                    <div>
                        <div class="pm-card-label">{{ __('purchases.total_due') }}</div>
                        <div class="pm-card-value due">{{ $formatMoney($curr['totalDue'], $curr['symbol']) }}</div>
                    </div>
                </div>
            </div>
        @empty
            <div class="pm-cards-empty">{{ __('common.no_records') }}</div>
        @endforelse
    </div>

    @if ($flashMessage)
        <div class="pm-msg {{ $flashType === 'success' ? 'ok' : 'err' }}">{{ $flashMessage }}</div>
    @endif

    {{-- Add/Edit form --}}
    @if ($showForm)
        @php
            $itemCatalog = $itemOptions->map(fn ($it) => [
                'id' => (string) $it->id,
                'label' => trim(($it->item_code ? $it->item_code.' - ' : '').$it->item_name),
            ])->values();
        @endphp
        <form
            wire:submit.prevent="save"
            class="pm-form"
            x-data
            x-init="Alpine.store('poItemCatalog', {{ \Illuminate\Support\Js::from($itemCatalog) }})"
        >
            <div class="pm-form-head">
                <h3>{{ $editingId ? __('purchases.edit_purchase_order') : __('purchases.create_new_purchase_order') }}</h3>
                <button type="button" class="pm-form-cancel-top" wire:click="cancelForm">{{ __('common.cancel') }}</button>
            </div>

            <div class="pm-grid">
                <div class="pm-field">
                    <label>{{ __('purchases.purchase_number') }}</label>
                    <input type="text" wire:model="purchase_no" placeholder="{{ __('purchases.auto_generated') }}">
                </div>
                <div class="pm-field">
                    <label>{{ __('purchases.purchase_date') }}</label>
                    <input type="date" wire:model="purchase_date" required>
                </div>
                <div class="pm-field">
                    <label>{{ __('purchases.supplier') }}</label>
                    <select wire:model="supplier_id" required>
                        <option value="">{{ __('purchases.select_supplier') }}</option>
                        @foreach ($suppliers as $s)
                            <option value="{{ $s->id }}">{{ $s->supplier_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pm-field">
                    <label>{{ __('purchases.destination_type') }}</label>
                    <select wire:model.live="destination_type">
                        <option value="warehouse">{{ __('common.warehouse') }}</option>
                        <option value="project">{{ __('purchases.project_site') }}</option>
                    </select>
                </div>
                @if ($destination_type === 'warehouse')
                    <div class="pm-field">
                        <label>{{ __('purchases.warehouse') }}</label>
                        <select wire:model="warehouse_id">
                            <option value="">{{ __('purchases.select_warehouse') }}</option>
                            @foreach ($warehouses as $w)
                                <option value="{{ $w->id }}">{{ $w->warehouse_name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                @if ($destination_type === 'project')
                    <div class="pm-field">
                        <label>{{ __('common.project_required') }}</label>
                        <select wire:model="project_id">
                            <option value="">{{ __('common.select_project') }}</option>
                            @foreach ($projects as $p)
                                <option value="{{ $p->id }}">{{ $p->project_name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <div class="pm-field">
                    <label>{{ __('purchases.invoice_no') }}</label>
                    <input type="text" wire:model="invoice_no">
                </div>
                <div class="pm-field">
                    <label>{{ __('common.currency') }}</label>
                    <select wire:model="currency_id">
                        <option value="">{{ __('common.select_currency') }}</option>
                        @foreach ($currencies as $c)
                            <option value="{{ $c->id }}">{{ $c->name }} ({{ $c->symbol }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="pm-field">
                    <label>{{ __('purchases.payment_type') }}</label>
                    <select wire:model="payment_type">
                        <option value="cash">{{ __('purchases.cash') }}</option>
                        <option value="bank">{{ __('purchases.bank_transfer') }}</option>
                        <option value="credit">{{ __('common.credit') }}</option>
                    </select>
                </div>
            </div>

            {{-- Line items --}}
            <div class="pm-items-head">
                <h4><i class="fa fa-box"></i> {{ __('purchases.purchase_items') }}</h4>
                <button type="button" class="pm-add-item" wire:click="addLineItem">
                    <i class="fa fa-plus"></i> {{ __('common.add_item') }}
                </button>
            </div>
            <div class="pm-items-wrap">
                <table class="pm-items-table">
                    <thead>
                        <tr>
                            <th>{{ __('common.item') }}</th>
                            <th>{{ __('common.unit') }}</th>
                            <th class="r">{{ __('purchases.qty') }}</th>
                            <th class="r">{{ __('common.price') }}</th>
                            <th class="r">{{ __('purchases.discount') }}</th>
                            <th class="r">{{ __('purchases.tax') }}</th>
                            <th class="r">{{ __('purchases.transport') }}</th>
                            <th class="r">{{ __('common.other') }}</th>
                            <th class="r">{{ __('purchases.line_total') }}</th>
                            <th class="c" style="width:60px">{{ __('purchases.action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($lineItems as $i => $item)
                            <tr wire:key="line-{{ $i }}" style="background: {{ $i % 2 === 0 ? '#fff' : '#f8fafc' }}">
                                <td>
                                    <div
                                        class="pm-item-picker"
                                        wire:key="item-picker-{{ $i }}-{{ $item['item_id'] ?? '' }}"
                                        x-data="{
                                            open: false,
                                            search: '',
                                            menuStyle: {},
                                            selectedId: @entangle('lineItems.'.$i.'.item_id').live,
                                            init() {
                                                const wrap = this.$el.closest('.pm-items-wrap');
                                                if (wrap) {
                                                    wrap.addEventListener('scroll', () => {
                                                        if (this.open) {
                                                            this.placeMenu();
                                                        }
                                                    }, { passive: true });
                                                }
                                            },
                                            get items() {
                                                return Alpine.store('poItemCatalog') || [];
                                            },
                                            get filtered() {
                                                const q = this.search.trim().toLowerCase();
                                                if (!q) {
                                                    return this.items;
                                                }
                                                return this.items.filter((item) => item.label.toLowerCase().includes(q));
                                            },
                                            get selectedLabel() {
                                                const found = this.items.find((item) => String(item.id) === String(this.selectedId));
                                                return found ? found.label : '';
                                            },
                                            toggle() {
                                                this.open = !this.open;
                                                if (this.open) {
                                                    this.$nextTick(() => {
                                                        this.placeMenu();
                                                        this.$refs.itemSearch?.focus();
                                                    });
                                                }
                                            },
                                            placeMenu() {
                                                const btn = this.$refs.itemBtn;
                                                if (!btn) {
                                                    return;
                                                }
                                                const rect = btn.getBoundingClientRect();
                                                const width = Math.max(rect.width, 280);
                                                const menuHeight = 280;
                                                const spaceBelow = window.innerHeight - rect.bottom;
                                                const openUp = spaceBelow < menuHeight && rect.top > spaceBelow;
                                                const left = Math.min(rect.left, window.innerWidth - width - 8);
                                                this.menuStyle = {
                                                    position: 'fixed',
                                                    top: openUp ? 'auto' : (rect.bottom + 4) + 'px',
                                                    bottom: openUp ? (window.innerHeight - rect.top + 4) + 'px' : 'auto',
                                                    left: Math.max(8, left) + 'px',
                                                    width: width + 'px',
                                                };
                                            },
                                            select(item) {
                                                this.selectedId = String(item.id);
                                                this.search = '';
                                                this.open = false;
                                            },
                                            clear() {
                                                this.selectedId = '';
                                                this.search = '';
                                                this.open = false;
                                            }
                                        }"
                                        @keydown.escape.window="open = false"
                                        @scroll.window="if (open) placeMenu()"
                                        @resize.window="if (open) placeMenu()"
                                    >
                                        <button
                                            type="button"
                                            class="pm-item-picker-btn"
                                            x-ref="itemBtn"
                                            :class="{ 'open': open }"
                                            @click="toggle()"
                                        >
                                            <span class="label" :class="{ 'placeholder': !selectedLabel }" x-text="selectedLabel || @js(__('purchases.select_item'))"></span>
                                            <i class="fa fa-chevron-down" style="font-size:11px;color:#94a3b8"></i>
                                        </button>
                                        <template x-teleport="body">
                                            <div
                                                class="pm-item-picker-menu"
                                                x-show="open"
                                                x-cloak
                                                x-transition.opacity.duration.120ms
                                                :style="menuStyle"
                                                @click.outside="if (!$refs.itemBtn.contains($event.target)) open = false"
                                            >
                                                <input
                                                    type="search"
                                                    class="pm-item-picker-search"
                                                    x-ref="itemSearch"
                                                    x-model="search"
                                                    @click.stop
                                                    placeholder="{{ __('items.search_by_name') }}"
                                                >
                                                <ul class="pm-item-picker-list">
                                                    <li @click="clear()" x-show="selectedId">{{ __('purchases.select_item') }}</li>
                                                    <template x-for="opt in filtered" :key="opt.id">
                                                        <li
                                                            @click="select(opt)"
                                                            :class="{ 'active': String(selectedId) === String(opt.id) }"
                                                            x-text="opt.label"
                                                        ></li>
                                                    </template>
                                                </ul>
                                                <div class="pm-item-picker-empty" x-show="filtered.length === 0">{{ __('common.no_records') }}</div>
                                            </div>
                                        </template>
                                    </div>
                                </td>
                                <td>
                                    <select wire:model.live="lineItems.{{ $i }}.unit_id">
                                        <option value="">{{ __('common.unit') }}</option>
                                        @foreach ($units as $u)
                                            <option value="{{ $u->id }}">{{ $u->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="r">
                                    <input type="number" step="0.001" class="qty" wire:model.live="lineItems.{{ $i }}.quantity">
                                </td>
                                <td class="r">
                                    <input type="number" step="0.01" class="price" wire:model.live="lineItems.{{ $i }}.unit_price">
                                </td>
                                <td class="r">
                                    <input type="number" step="0.01" class="num" wire:model.live="lineItems.{{ $i }}.discount">
                                </td>
                                <td class="r">
                                    <input type="number" step="0.01" class="num" wire:model.live="lineItems.{{ $i }}.tax">
                                </td>
                                <td class="r">
                                    <input type="number" step="0.01" class="num" wire:model.live="lineItems.{{ $i }}.transport_cost">
                                </td>
                                <td class="r">
                                    <input type="number" step="0.01" class="num" wire:model.live="lineItems.{{ $i }}.other_cost">
                                </td>
                                <td class="r pm-line-total">{{ number_format((float) ($item['line_total'] ?? 0), 2) }}</td>
                                <td class="c">
                                    <button
                                        type="button"
                                        class="pm-remove-item"
                                        wire:click="removeLineItem({{ $i }})"
                                        wire:confirm="{{ __('purchases.remove_this_line_item') }}"
                                    >
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="pm-items-empty">{{ __('common.no_records') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                    @if (count($lineItems) > 0)
                        <tfoot>
                            <tr class="pm-items-foot">
                                <td colspan="8" class="r">{{ __('purchases.grand_total') }}</td>
                                <td class="r grand">{{ number_format($formGrandTotal, 2) }}</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>

            <div class="pm-field" style="margin-top:16px">
                <label>{{ __('common.remarks') }}</label>
                <textarea wire:model="remarks" rows="2"></textarea>
            </div>

            <div class="pm-paid-grid">
                <div class="pm-field">
                    <label>{{ __('purchases.paid_amount') }}</label>
                    <input type="number" step="0.01" wire:model.live="paid_amount">
                </div>
                <div class="pm-field">
                    <label>{{ __('purchases.paid_from_account') }}</label>
                    <select wire:model="payment_account_id">
                        <option value="">{{ __('purchases.select_account') }}</option>
                        @foreach ($accounts as $a)
                            <option value="{{ $a->id }}">{{ $a->account_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pm-field">
                    <label>
                        {{ __('purchases.due_pending') }}
                        <span class="pm-field-hint">{{ __('purchases.auto_supplier_ledger') }}</span>
                    </label>
                    <input type="number" step="0.01" wire:model="due_amount" readonly>
                </div>
            </div>

            <div class="pm-form-actions">
                <button type="button" class="pm-cancel" wire:click="cancelForm">{{ __('common.cancel') }}</button>
                <button type="submit" class="pm-save" wire:loading.attr="disabled">
                    {{ $editingId ? __('common.edit') : __('common.save') }}
                </button>
            </div>
        </form>
    @endif

    {{-- Search & per page (always above the purchase table) --}}
    <div class="pm-toolbar">
        <div class="pm-search-wrap">
            <i class="fa fa-search"></i>
            <input
                type="text"
                class="pm-search"
                placeholder="{{ __('purchases.search_by_po_number_or_supplier_name') }}"
                wire:model.live.debounce.300ms="searchTerm"
            >
        </div>
        <select class="pm-perpage" wire:model.live="itemsPerPage">
            <option value="5">{{ __('purchases.5_per_page') }}</option>
            <option value="10">{{ __('purchases.10_per_page') }}</option>
            <option value="20">{{ __('purchases.20_per_page') }}</option>
            <option value="50">{{ __('purchases.50_per_page') }}</option>
        </select>
    </div>

    {{-- Flat combined table --}}
    <div class="pm-panel">
        <div class="pm-wrap">
            <table class="pm-table">
                <thead>
                    <tr>
                        <th class="c" style="width:40px">#</th>
                        <th style="min-width:100px">{{ __('purchases.po_number') }}</th>
                        <th style="min-width:120px">{{ __('common.supplier') }}</th>
                        <th style="min-width:80px">{{ __('common.date') }}</th>
                        <th style="min-width:150px">{{ __('common.item') }}</th>
                        <th style="min-width:60px">{{ __('common.unit') }}</th>
                        <th class="r" style="min-width:60px">{{ __('purchases.qty') }}</th>
                        <th class="r" style="min-width:80px">{{ __('common.price') }}</th>
                        <th class="r" style="min-width:70px">{{ __('purchases.discount') }}</th>
                        <th class="r" style="min-width:60px">{{ __('purchases.tax') }}</th>
                        <th class="r" style="min-width:70px">{{ __('purchases.transport') }}</th>
                        <th class="r" style="min-width:60px">{{ __('common.other') }}</th>
                        <th class="r" style="min-width:80px">{{ __('purchases.line_total') }}</th>
                        <th class="r" style="min-width:90px">{{ __('purchases.grand_total') }}</th>
                        <th class="r" style="min-width:80px">{{ __('common.paid') }}</th>
                        <th class="r" style="min-width:80px">{{ __('purchases.due') }}</th>
                        <th class="c" style="min-width:80px">{{ __('common.status') }}</th>
                        <th class="c" style="width:100px">{{ __('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pageRows as $idx => $purchase)
                        @php
                            $items = $lineItemsMap[$purchase->id] ?? collect();
                            $serial = $startIndex + $idx + 1;
                            $paid = (float) $purchase->paid_amount;
                            $total = (float) $purchase->grand_total;
                            if ($paid >= $total && $total > 0) {
                                $statusLabel = 'Paid';
                                $statusClass = 'paid';
                            } elseif ($paid > 0) {
                                $statusLabel = 'Partial';
                                $statusClass = 'partial';
                            } else {
                                $statusLabel = 'Unpaid';
                                $statusClass = 'unpaid';
                            }
                            $purchaseDate = $purchase->purchase_date
                                ? \Carbon\Carbon::parse($purchase->purchase_date)->format('n/j/Y')
                                : '—';
                        @endphp

                        @if ($items->isEmpty())
                            <tr wire:key="pur-{{ $purchase->id }}-empty" style="background: {{ $idx % 2 === 0 ? '#fff' : '#f8fafc' }}">
                                <td class="c">{{ $serial }}</td>
                                <td class="po">{{ $purchase->purchase_no }}</td>
                                <td>{{ $purchase->supplier_name ?: '—' }}</td>
                                <td>{{ $purchaseDate }}</td>
                                <td colspan="9" class="muted">{{ __('common.no_records') }}</td>
                                <td class="r">{{ number_format((float) $purchase->grand_total, 2) }}</td>
                                <td class="r paid">{{ number_format((float) $purchase->paid_amount, 2) }}</td>
                                <td class="r due">{{ number_format((float) $purchase->due_amount, 2) }}</td>
                                <td class="c">
                                    <span class="pm-badge {{ $statusClass }}">{{ $statusLabel }}</span>
                                </td>
                                <td class="c">
                                    <button type="button" class="pm-icon-btn edit" wire:click="handleEdit({{ $purchase->id }})" title="{{ __('common.edit') }}">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button
                                        type="button"
                                        class="pm-icon-btn del"
                                        wire:click="delete({{ $purchase->id }})"
                                        wire:confirm="{{ __('purchases.confirm_delete') }}"
                                        title="{{ __('common.delete') }}"
                                    >
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @else
                            @foreach ($items as $itemIdx => $item)
                                <tr
                                    wire:key="pur-{{ $purchase->id }}-item-{{ $itemIdx }}"
                                    style="background: {{ ($idx + $itemIdx) % 2 === 0 ? '#fff' : '#f8fafc' }}"
                                >
                                    <td class="c">{{ $itemIdx === 0 ? $serial : '' }}</td>
                                    <td class="po">{{ $itemIdx === 0 ? $purchase->purchase_no : '' }}</td>
                                    <td>{{ $itemIdx === 0 ? ($purchase->supplier_name ?: '—') : '' }}</td>
                                    <td>{{ $itemIdx === 0 ? $purchaseDate : '' }}</td>
                                    <td>{{ $item->item_name ?: 'Item' }}</td>
                                    <td>{{ $item->unit_name ?: '—' }}</td>
                                    <td class="r">{{ number_format((float) $item->quantity, 3) }}</td>
                                    <td class="r">{{ number_format((float) $item->unit_price, 2) }}</td>
                                    <td class="r disc">{{ number_format((float) $item->discount, 2) }}</td>
                                    <td class="r">{{ number_format((float) $item->tax, 2) }}</td>
                                    <td class="r">{{ number_format((float) $item->transport_cost, 2) }}</td>
                                    <td class="r">{{ number_format((float) $item->other_cost, 2) }}</td>
                                    <td class="r line-total">{{ number_format((float) $item->line_total, 2) }}</td>
                                    <td class="r">{{ $itemIdx === 0 ? number_format((float) $purchase->grand_total, 2) : '' }}</td>
                                    <td class="r paid">{{ $itemIdx === 0 ? number_format((float) $purchase->paid_amount, 2) : '' }}</td>
                                    <td class="r due">{{ $itemIdx === 0 ? number_format((float) $purchase->due_amount, 2) : '' }}</td>
                                    <td class="c">
                                        @if ($itemIdx === 0)
                                            <span class="pm-badge {{ $statusClass }}">{{ $statusLabel }}</span>
                                        @endif
                                    </td>
                                    <td class="c">
                                        @if ($itemIdx === 0)
                                            <button type="button" class="pm-icon-btn edit" wire:click="handleEdit({{ $purchase->id }})" title="{{ __('common.edit') }}">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button
                                                type="button"
                                                class="pm-icon-btn del"
                                                wire:click="delete({{ $purchase->id }})"
                                                wire:confirm="{{ __('purchases.confirm_delete') }}"
                                                title="{{ __('common.delete') }}"
                                            >
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    @empty
                        <tr>
                            <td colspan="18" class="pm-empty">{{ __('common.no_records') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($filteredCount > 0)
            <div class="pm-pager">
                <div class="pm-pager-info">
                    {{ __('common.showing') }} <strong>{{ $startIndex + 1 }}</strong> {{ __('common.to') }} <strong>{{ min($startIndex + $itemsPerPage, $filteredCount) }}</strong> {{ __('common.of') }} <strong>{{ $filteredCount }}</strong> {{ __('purchases.purchases') }}
                </div>
                <div class="pm-pager-btns">
                    <button
                        type="button"
                        class="pm-page-btn"
                        wire:click="goToPage({{ $currentPage - 1 }})"
                        @disabled($currentPage === 1)
                    >
                        <i class="fa fa-chevron-left"></i> {{ __('common.previous') }}
                    </button>
                    @foreach ($pagesToShow as $pageNum)
                        <button
                            type="button"
                            class="pm-page-btn {{ $pageNum === $currentPage ? 'on' : '' }}"
                            wire:click="goToPage({{ $pageNum }})"
                        >{{ $pageNum }}</button>
                    @endforeach
                    <button
                        type="button"
                        class="pm-page-btn"
                        wire:click="goToPage({{ $currentPage + 1 }})"
                        @disabled($currentPage === $totalPages)
                    >
                        {{ __('common.next') }} <i class="fa fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        @endif
    </div>
</div>