@php
    $truncate = function ($text, $max = 30) {
        if (! $text) {
            return '';
        }
        $text = (string) $text;

        return mb_strlen($text) > $max ? mb_substr($text, 0, $max).'…' : $text;
    };
    $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;
        }
    }
@endphp

<div class="sm">
    <style>
        .sm {
            padding: 20px;
            color: #0f172a;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow: visible;
        }
        .sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
        .sm-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 16px;
        }
        .sm-header h1 {
            font-size: 24px;
            font-weight: 600;
            color: #0f172a;
            margin: 0;
            line-height: 1.25;
        }
        .sm-tools {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sm-search {
            padding: 6px 12px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 14px;
            width: 200px;
            max-width: 100%;
            outline: none;
            background: #fff;
            color: #0f172a;
        }
        .sm-perpage {
            padding: 6px 10px;
            padding-inline-end: 2rem;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
            color: #0f172a;
            min-width: 72px;
        }
        .sm-add {
            padding: 8px 18px;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            white-space: nowrap;
        }
        .sm-add:hover { background: #4f46e5; }
        .sm-form {
            background: #f8fafc;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 24px;
            border: 1px solid #d0d0d0;
        }
        .sm-form h3 { margin-top: 0; margin-bottom: 16px; font-size: 18px; }
        .sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .sm-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
        .sm-field input, .sm-field select, .sm-field textarea {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            font-size: 14px;
            background: #fff;
            color: #0f172a;
            font-family: inherit;
        }
        .sm-span2 { grid-column: 1 / -1; }
        .sm-form-actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
        .sm-save {
            padding: 8px 20px;
            background: #6366f1;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
        }
        .sm-cancel {
            padding: 8px 20px;
            background: #e2e8f0;
            color: #0f172a;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        /* Table container: horizontal + vertical scroll stay here (match React) */
        .sm-wrap {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: auto;
            overflow-y: auto;
            max-height: min(560px, calc(100vh - 280px));
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            background: #fff;
            -webkit-overflow-scrolling: touch;
        }
        .sm:has(.sm-form) .sm-wrap {
            max-height: min(360px, calc(100vh - 480px));
            min-height: 160px;
        }
        .sm-table {
            width: 100%;
            min-width: 1400px;
            border-collapse: collapse;
            font-size: 13px;
            font-family: Calibri, Arial, sans-serif;
        }
        .sm-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f0f0f0;
        }
        .sm-table th {
            border: 1px solid #d0d0d0;
            padding: 6px 8px;
            text-align: start;
            font-weight: 600;
            color: #475569;
            white-space: nowrap;
        }
        .sm-table th.ctr { text-align: center; min-width: 40px; }
        .sm-table td {
            border: 1px solid #d0d0d0;
            padding: 4px 8px;
            vertical-align: middle;
        }
        .sm-table td.ctr { text-align: center; }
        .sm-table td.muted { font-size: 12px; color: #94a3b8; }
        .sm-empty {
            padding: 30px;
            text-align: center;
            color: #94a3b8;
            border: 1px solid #d0d0d0;
        }
        .sm-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            display: inline-block;
        }
        .sm-badge.on { background: #d4edda; color: #155724; }
        .sm-badge.off { background: #f8d7da; color: #721c24; }
        .sm-icon {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 14px;
            padding: 0 4px;
        }
        .sm-icon.edit { color: #6366f1; margin-inline-end: 8px; }
        .sm-icon.del { color: #dc3545; }
        .sm-pager {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding: 6px 12px;
            background: #f8f9fa;
            border-radius: 4px;
            flex-wrap: wrap;
            gap: 6px;
            border: 1px solid #d0d0d0;
        }
        .sm-pager-info { font-size: 13px; color: #475569; }
        .sm-pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .sm-page-btn {
            padding: 4px 10px;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            font-size: 13px;
            color: #0f172a;
            min-height: 32px;
        }
        .sm-page-btn:disabled { cursor: not-allowed; opacity: 0.5; }
        .sm-page-btn.on { background: #6366f1; color: #fff; font-weight: 600; border-color: #6366f1; }
        .sm-msg { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
        .sm-msg.ok { color: #059669; }
        .sm-msg.err { color: #dc2626; }

        @media (max-width: 768px) {
            .sm { padding: 12px; }
            .sm-header { flex-direction: column; align-items: stretch; gap: 12px; }
            .sm-header h1 { font-size: 20px; }
            .sm-tools {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            .sm-search { width: 100%; grid-column: 1 / -1; min-height: 42px; }
            .sm-perpage { min-height: 42px; width: 100%; }
            .sm-add { grid-column: 1 / -1; width: 100%; min-height: 44px; }
            .sm-form { padding: 14px; }
            .sm-grid { grid-template-columns: 1fr; }
            .sm-span2 { grid-column: span 1; }
            .sm-form-actions { flex-direction: column; }
            .sm-save, .sm-cancel { width: 100%; min-height: 44px; }
            .sm-wrap { max-height: min(420px, calc(100vh - 300px)); }
            .sm-pager { flex-direction: column; align-items: stretch; gap: 10px; }
            .sm-pager-info { text-align: center; }
            .sm-pager-btns { justify-content: center; }
        }
        @media (max-width: 420px) {
            .sm-tools { grid-template-columns: 1fr; }
        }
    </style>

    <div class="sm-header">
        <h1>{{ __('suppliers.title') }}</h1>
        <div class="sm-tools">
            <input type="text" class="sm-search" placeholder="{{ __('suppliers.search_by_name_or_code') }}" wire:model.live.debounce.300ms="searchTerm">
            <select class="sm-perpage" wire:model.live="itemsPerPage">
                <option value="3">{{ __('suppliers.3_per_page') }}</option>
                <option value="5">{{ __('suppliers.5_per_page') }}</option>
                <option value="10">{{ __('suppliers.10_per_page') }}</option>
                <option value="100">{{ __('suppliers.100_per_page') }}</option>
            </select>
            <button type="button" class="sm-add" wire:click="handleAdd">{{ __('suppliers.add_new_supplier') }}</button>
        </div>
    </div>

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

    @if ($showForm)
        <form wire:submit.prevent="save" class="sm-form">
            <h3>{{ $editingId ? __('suppliers.edit_supplier') : __('suppliers.add_new_supplier') }}</h3>
            <div class="sm-grid">
                <div class="sm-field">
                    <label>{{ __('suppliers.supplier_code') }}</label>
                    <input type="text" wire:model="supplier_code" required>
                </div>
                <div class="sm-field">
                    <label>{{ __('suppliers.supplier_name') }}</label>
                    <input type="text" wire:model="supplier_name" required>
                </div>
                <div class="sm-field">
                    <label>{{ __('suppliers.company_name') }}</label>
                    <input type="text" wire:model="company_name">
                </div>
                <div class="sm-field">
                    <label>{{ __('suppliers.contact_person') }}</label>
                    <input type="text" wire:model="contact_person">
                </div>
                <div class="sm-field">
                    <label>{{ __('common.phone') }}</label>
                    <input type="text" wire:model="phone">
                </div>
                <div class="sm-field">
                    <label>{{ __('common.email') }}</label>
                    <input type="email" wire:model="email">
                </div>
                <div class="sm-field sm-span2">
                    <label>{{ __('common.address') }}</label>
                    <textarea wire:model="address" rows="2"></textarea>
                </div>
                <div class="sm-field">
                    <label>{{ __('suppliers.tax_number') }}</label>
                    <input type="text" wire:model="tax_number">
                </div>
                <div class="sm-field">
                    <label>{{ __('common.status') }}</label>
                    <select wire:model="status">
                        <option value="active">{{ __('common.active') }}</option>
                        <option value="inactive">{{ __('common.inactive') }}</option>
                    </select>
                </div>
                <div class="sm-field">
                    <label>{{ __('suppliers.payable_account_for_credit_purchases') }}</label>
                    <select wire:model="account_id">
                        <option value="">{{ __('suppliers.none') }}</option>
                        @foreach ($accounts as $a)
                            <option value="{{ $a->id }}">{{ $a->account_code }} — {{ $a->account_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm-field sm-span2">
                    <label>{{ __('common.remarks') }}</label>
                    <textarea wire:model="remarks" rows="2"></textarea>
                </div>
            </div>
            <div class="sm-form-actions">
                <button type="submit" class="sm-save" wire:loading.attr="disabled">{{ $editingId ? __('common.edit') : __('common.save') }}</button>
                <button type="button" class="sm-cancel" wire:click="cancelForm">{{ __('common.cancel') }}</button>
            </div>
        </form>
    @endif

    <div class="sm-wrap">
        <table class="sm-table">
            <thead>
                <tr>
                    <th class="ctr">#</th>
                    <th>{{ __('common.code') }}</th>
                    <th>{{ __('common.name') }}</th>
                    <th>{{ __('suppliers.company') }}</th>
                    <th>{{ __('suppliers.contact') }}</th>
                    <th>{{ __('common.phone') }}</th>
                    <th>{{ __('common.email') }}</th>
                    <th>{{ __('common.address') }}</th>
                    <th>{{ __('suppliers.tax') }}</th>
                    <th>{{ __('common.status') }}</th>
                    <th>{{ __('common.remarks') }}</th>
                    <th>{{ __('suppliers.created') }}</th>
                    <th>{{ __('suppliers.updated') }}</th>
                    <th class="ctr" style="min-width:80px">{{ __('common.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($pageRows as $index => $supplier)
                    @php $serial = $startIndex + $index + 1; @endphp
                    <tr style="background: {{ $index % 2 === 0 ? '#ffffff' : '#f9f9f9' }}" wire:key="sup-{{ $supplier->id }}">
                        <td class="ctr">{{ $serial }}</td>
                        <td><strong>{{ $supplier->supplier_code }}</strong></td>
                        <td>{{ $supplier->supplier_name }}</td>
                        <td>{{ $supplier->company_name ?: '—' }}</td>
                        <td>{{ $supplier->contact_person ?: '—' }}</td>
                        <td>{{ $supplier->phone ?: '—' }}</td>
                        <td>{{ $supplier->email ?: '—' }}</td>
                        <td title="{{ $supplier->address }}">{{ $truncate($supplier->address, 25) }}</td>
                        <td>{{ $supplier->tax_number ?: '—' }}</td>
                        <td>
                            <span class="sm-badge {{ $supplier->status === 'active' ? 'on' : 'off' }}">{{ $supplier->status }}</span>
                        </td>
                        <td title="{{ $supplier->remarks }}">{{ $truncate($supplier->remarks, 25) }}</td>
                        <td class="muted">{{ $supplier->created_at ? \Carbon\Carbon::parse($supplier->created_at)->format('n/j/Y') : '—' }}</td>
                        <td class="muted">{{ $supplier->updated_at ? \Carbon\Carbon::parse($supplier->updated_at)->format('n/j/Y') : '—' }}</td>
                        <td class="ctr">
                            <button type="button" class="sm-icon edit" wire:click="handleEdit({{ $supplier->id }})" title="{{ __('common.edit') }}">✏️</button>
                            <button type="button" class="sm-icon del" wire:click="delete({{ $supplier->id }})" wire:confirm="{{ __('suppliers.confirm_delete') }}" title="{{ __('common.delete') }}">🗑️</button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="14" class="sm-empty">
                            {{ $searchTerm ? __('suppliers.no_suppliers_match_your_search') : __('suppliers.no_suppliers_found_click_add_new_supplier_to_create_one') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if ($filteredCount > 0)
        <div class="sm-pager">
            <div class="sm-pager-info">
                Showing {{ $startIndex + 1 }}–{{ min($startIndex + $itemsPerPage, $filteredCount) }} of {{ $filteredCount }}
            </div>
            <div class="sm-pager-btns">
                <button type="button" class="sm-page-btn" wire:click="goToPage({{ $currentPage - 1 }})" @disabled($currentPage === 1)>{{ __('suppliers.previous') }}</button>
                @foreach ($pagesToShow as $pageNum)
                    <button type="button" class="sm-page-btn {{ $pageNum === $currentPage ? 'on' : '' }}" wire:click="goToPage({{ $pageNum }})">{{ $pageNum }}</button>
                @endforeach
                <button type="button" class="sm-page-btn" wire:click="goToPage({{ $currentPage + 1 }})" @disabled($currentPage === $totalPages)>{{ __('suppliers.next') }}</button>
            </div>
        </div>
    @endif
</div>