@extends('admin.layout.content')

@section('content')
<div class="content-manager-container px-3 py-4">

    {{-- Flash Messages --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
            <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
            <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <h2 class="content-manager-title h3 mb-1">Riwayat Transaksi</h2>
            <p class="text-muted mb-0">Kelola transaksi offline (POS) dan online (E-Commerce)</p>
        </div>
    </div>

    {{-- TAB NAVIGATION --}}
    <ul class="nav nav-tabs mb-4" id="th-transactionTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="offline-tab" data-bs-toggle="tab" data-bs-target="#offline" type="button" role="tab">
                <span class="material-symbols-outlined align-middle me-1" style="font-size:18px;">storefront</span> Offline (POS)
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online" type="button" role="tab">
                <span class="material-symbols-outlined align-middle me-1" style="font-size:18px;">shopping_cart</span> Online (E-Commerce)
            </button>
        </li>
    </ul>

    <div class="tab-content">
        {{-- ==================== TAB OFFLINE ==================== --}}
        <div class="tab-pane fade show active" id="offline" role="tabpanel">
            <div class="content-manager-card">
                <div class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                    <div class="search-box-wrapper">
                        <span class="material-symbols-outlined">search</span>
                        <input type="text" id="search-offline" class="form-control search-box-input" placeholder="Cari no. invoice / kasir...">
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="text-muted small text-nowrap">Tampilkan:</span>
                        <div class="dropdown show-entries-wrapper position-relative">
                            <button class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between" type="button" id="entriesOfflineDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <span id="selected-offline-value">10</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesOfflineDropdown">
                                <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                                <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                                <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Desktop Table --}}
                <div class="table-responsive th-desktop-table">
                    <table class="table content-data-table mb-0 align-middle">
                        <thead>
                            <tr>
                                <th style="width: 60px;">No</th>
                                <th>Tanggal</th>
                                <th>No. Invoice</th>
                                <th>Kasir</th>
                                <th>Metode Bayar</th>
                                <th>Status</th>
                                <th>Total</th>
                                <th class="text-center" style="width: 140px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="offline-tbody">
                            @forelse($offline as $index => $transaction)
                                @php
                                    $invoiceNumber = $transaction->invoice_number;
                                    $cashierName = $transaction->user->username ?? $transaction->user->full_name ?? 'Kasir tidak diketahui';
                                    $total = $transaction->total_payment;
                                    $date = $transaction->created_at ? $transaction->created_at->format('d/m/Y H:i') : '-';
                                    $qrisStatus = $transaction->qris_status ?? '';
                                    $payMethod = $transaction->payment_method ?? 'CASH';
                                @endphp
                                <tr class="offline-row" data-invoice="{{ $invoiceNumber }}" data-cashier="{{ $cashierName }}" data-date="{{ $date }}" data-total="{{ $total }}">
                                    <td class="row-index-number">{{ $index + 1 }}</td>
                                    <td>{{ $date }}</td>
                                    <td><span class="fw-semibold">{{ $invoiceNumber }}</span></td>
                                    <td>{{ $cashierName }}</td>
                                    <td>{{ $payMethod }}</td>
                                    <td>
                                        @if ($qrisStatus === 'SUCCESS')
                                            <span class="th-badge-status th-badge-success">Berhasil</span>
                                        @elseif ($qrisStatus === 'PENDING')
                                            <span class="th-badge-status th-badge-pending">Pending</span>
                                        @elseif ($qrisStatus === 'FAILED')
                                            <span class="th-badge-status th-badge-failed">Gagal</span>
                                        @else
                                            <span class="th-badge-status th-badge-success">Selesai</span>
                                        @endif
                                    </td>
                                    <td>Rp {{ number_format($total, 0, ',', '.') }}</td>
                                    <td class="text-center">
                                        <div class="d-inline-flex gap-1">
                                            <button type="button" class="btn-table-action btn-action-print" title="Cetak Nota"
                                                onclick="window.open('{{ route('admin.history.receipt', ['type' => 'offline', 'id' => $transaction->getKey()]) }}', '_blank', 'width=450,height=700,top=100,left=100')">
                                                <span class="material-symbols-outlined">print</span>
                                            </button>
                                            <a href="{{ route('admin.history.edit.offline', $transaction->getKey()) }}" class="btn-table-action btn-action-edit" title="Edit">
                                                <span class="material-symbols-outlined">edit</span>
                                            </a>
                                            <button class="btn-table-action btn-action-delete" title="Hapus"
                                                data-bs-toggle="modal" data-bs-target="#modalDelete"
                                                data-id="{{ $transaction->getKey() }}" data-type="offline"
                                                data-invoice="{{ $invoiceNumber }}">
                                                <span class="material-symbols-outlined">delete</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr class="empty-row">
                                    <td colspan="8" class="text-center text-muted py-4">Belum ada transaksi offline.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Mobile Cards --}}
                <div class="th-mobile-cards" id="offline-cards">
                    @forelse($offline as $index => $transaction)
                        @php
                            $invoiceNumber = $transaction->invoice_number;
                            $cashierName = $transaction->user->username ?? $transaction->user->full_name ?? 'Kasir tidak diketahui';
                            $total = $transaction->total_payment;
                            $date = $transaction->created_at ? $transaction->created_at->format('d/m/Y H:i') : '-';
                            $qrisStatus = $transaction->qris_status ?? '';
                            $payMethod = $transaction->payment_method ?? 'CASH';
                        @endphp
                        <div class="th-tx-card offline-card" data-invoice="{{ $invoiceNumber }}" data-cashier="{{ $cashierName }}">
                            <div class="th-tx-card-header">
                                <div>
                                    <div class="th-tx-card-invoice">{{ $invoiceNumber }}</div>
                                    <div class="th-tx-card-date">{{ $date }}</div>
                                </div>
                                @if ($qrisStatus === 'SUCCESS')
                                    <span class="th-badge-status th-badge-success">Berhasil</span>
                                @elseif ($qrisStatus === 'PENDING')
                                    <span class="th-badge-status th-badge-pending">Pending</span>
                                @elseif ($qrisStatus === 'FAILED')
                                    <span class="th-badge-status th-badge-failed">Gagal</span>
                                @else
                                    <span class="th-badge-status th-badge-success">Selesai</span>
                                @endif
                            </div>
                            <div class="th-tx-card-body">
                                <div>
                                    <div class="th-tx-label">Kasir</div>
                                    <div class="th-tx-value">{{ $cashierName }}</div>
                                </div>
                                <div>
                                    <div class="th-tx-label">Metode Bayar</div>
                                    <div class="th-tx-value">{{ $payMethod }}</div>
                                </div>
                                <div>
                                    <div class="th-tx-label">Total</div>
                                    <div class="th-tx-value" style="color:#10b981;">Rp {{ number_format($total, 0, ',', '.') }}</div>
                                </div>
                            </div>
                            <div class="th-tx-card-footer">
                                <div class="th-tx-card-total">Rp {{ number_format($total, 0, ',', '.') }}</div>
                                <div class="th-tx-card-actions">
                                    <button type="button" class="btn-table-action btn-action-print" title="Cetak Struk"
                                        onclick="window.open('{{ route('admin.history.receipt', ['type' => 'offline', 'id' => $transaction->getKey()]) }}', '_blank', 'width=450,height=700,top=100,left=100')">
                                        <span class="material-symbols-outlined">print</span>
                                    </button>
                                    <a href="{{ route('admin.history.edit.offline', $transaction->getKey()) }}" class="btn-table-action btn-action-edit" title="Edit">
                                        <span class="material-symbols-outlined">edit</span>
                                    </a>
                                    <button class="btn-table-action btn-action-delete" title="Hapus"
                                        data-bs-toggle="modal" data-bs-target="#modalDelete"
                                        data-id="{{ $transaction->getKey() }}" data-type="offline"
                                        data-invoice="{{ $invoiceNumber }}">
                                        <span class="material-symbols-outlined">delete</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">Belum ada transaksi offline.</div>
                    @endforelse
                </div>

                <div class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                    <p class="pagination-summary" id="offline-summary"></p>
                    <nav class="d-flex align-items-center" id="offline-pagination"></nav>
                </div>
            </div>
        </div>

        {{-- ==================== TAB ONLINE ==================== --}}
        <div class="tab-pane fade" id="online" role="tabpanel">
            <div class="content-manager-card">
                <div class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                    <div class="search-box-wrapper">
                        <span class="material-symbols-outlined">search</span>
                        <input type="text" id="search-online" class="form-control search-box-input" placeholder="Cari invoice / pembeli...">
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="text-muted small text-nowrap">Tampilkan:</span>
                        <div class="dropdown show-entries-wrapper position-relative">
                            <button class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between" type="button" id="entriesOnlineDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <span id="selected-online-value">10</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesOnlineDropdown">
                                <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                                <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                                <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Desktop Table --}}
                <div class="table-responsive th-desktop-table">
                    <table class="table content-data-table mb-0 align-middle">
                        <thead>
                            <tr>
                                <th style="width: 60px;">No</th>
                                <th>Tanggal</th>
                                <th>Invoice</th>
                                <th>Pembeli</th>
                                <th>Status Bayar</th>
                                <th>Status Pesanan</th>
                                <th>Total</th>
                                <th class="text-center" style="width: 140px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="online-tbody">
                            @forelse($online as $index => $transaction)
                                @php
                                    $invoiceNumber = $transaction->invoice_number;
                                    $customerName = $transaction->user->username ?? ($transaction->user->profile->full_name ?? 'Guest');
                                    $total = $transaction->total_payment ?? 0;
                                    $date = $transaction->created_at ? $transaction->created_at->format('d/m/Y H:i') : '-';
                                    $paymentStatus = $transaction->payment_status ?? '';
                                    $orderStatus = $transaction->order_status ?? '';
                                @endphp
                                <tr class="online-row" data-invoice="{{ $invoiceNumber }}" data-customer="{{ $customerName }}">
                                    <td class="row-index-number">{{ $index + 1 }}</td>
                                    <td>{{ $date }}</td>
                                    <td><span class="fw-semibold">{{ $invoiceNumber }}</span></td>
                                    <td>{{ $customerName }}</td>
                                    <td>
                                        @if ($paymentStatus === 'paid')
                                            <span class="th-badge-status th-badge-paid">Lunas</span>
                                        @elseif ($paymentStatus === 'unpaid')
                                            <span class="th-badge-status th-badge-unpaid">Belum Bayar</span>
                                        @elseif ($paymentStatus === 'expired')
                                            <span class="th-badge-status th-badge-expired">Kedaluwarsa</span>
                                        @elseif ($paymentStatus === 'failed')
                                            <span class="th-badge-status th-badge-failed">Gagal</span>
                                        @else
                                            <span class="th-badge-status th-badge-pending">{{ $paymentStatus }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($orderStatus === 'pending')
                                            <span class="th-badge-status th-badge-pending">Menunggu</span>
                                        @elseif ($orderStatus === 'processing')
                                            <span class="th-badge-status th-badge-processing">Diproses</span>
                                        @elseif ($orderStatus === 'shipped')
                                            <span class="th-badge-status th-badge-shipped">Dikirim</span>
                                        @elseif ($orderStatus === 'completed')
                                            <span class="th-badge-status th-badge-completed">Selesai</span>
                                        @elseif ($orderStatus === 'cancelled')
                                            <span class="th-badge-status th-badge-cancelled">Dibatalkan</span>
                                        @else
                                            <span class="th-badge-status th-badge-pending">{{ $orderStatus }}</span>
                                        @endif
                                    </td>
                                    <td>Rp {{ number_format($total, 0, ',', '.') }}</td>
                                    <td class="text-center">
                                        <div class="d-inline-flex gap-1">
                                            <button type="button" class="btn-table-action btn-action-print" title="Cetak Invoice"
                                                onclick="window.open('{{ route('admin.history.receipt', ['type' => 'online', 'id' => $transaction->getKey()]) }}', '_blank', 'width=850,height=750,top=50,left=100')">
                                                <span class="material-symbols-outlined">print</span>
                                            </button>
                                            <a href="{{ route('admin.history.edit.online', $transaction->getKey()) }}" class="btn-table-action btn-action-edit" title="Edit">
                                                <span class="material-symbols-outlined">edit</span>
                                            </a>
                                            <button class="btn-table-action btn-action-delete" title="Hapus"
                                                data-bs-toggle="modal" data-bs-target="#modalDelete"
                                                data-id="{{ $transaction->getKey() }}" data-type="online"
                                                data-invoice="{{ $invoiceNumber }}">
                                                <span class="material-symbols-outlined">delete</span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr class="empty-row">
                                    <td colspan="8" class="text-center text-muted py-4">Belum ada transaksi online.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Mobile Cards --}}
                <div class="th-mobile-cards" id="online-cards">
                    @forelse($online as $index => $transaction)
                        @php
                            $invoiceNumber = $transaction->invoice_number;
                            $customerName = $transaction->user->username ?? ($transaction->user->profile->full_name ?? 'Guest');
                            $total = $transaction->total_payment ?? 0;
                            $date = $transaction->created_at ? $transaction->created_at->format('d/m/Y H:i') : '-';
                            $paymentStatus = $transaction->payment_status ?? '';
                            $orderStatus = $transaction->order_status ?? '';
                        @endphp
                        <div class="th-tx-card online-card" data-invoice="{{ $invoiceNumber }}" data-customer="{{ $customerName }}">
                            <div class="th-tx-card-header">
                                <div>
                                    <div class="th-tx-card-invoice">{{ $invoiceNumber }}</div>
                                    <div class="th-tx-card-date">{{ $date }}</div>
                                </div>
                                @if ($orderStatus === 'completed')
                                    <span class="th-badge-status th-badge-completed">Selesai</span>
                                @elseif ($orderStatus === 'shipped')
                                    <span class="th-badge-status th-badge-shipped">Dikirim</span>
                                @elseif ($orderStatus === 'processing')
                                    <span class="th-badge-status th-badge-processing">Diproses</span>
                                @elseif ($orderStatus === 'cancelled')
                                    <span class="th-badge-status th-badge-cancelled">Dibatalkan</span>
                                @else
                                    <span class="th-badge-status th-badge-pending">Menunggu</span>
                                @endif
                            </div>
                            <div class="th-tx-card-body">
                                <div>
                                    <div class="th-tx-label">Pembeli</div>
                                    <div class="th-tx-value">{{ $customerName }}</div>
                                </div>
                                <div>
                                    <div class="th-tx-label">Total</div>
                                    <div class="th-tx-value" style="color:#10b981;">Rp {{ number_format($total, 0, ',', '.') }}</div>
                                </div>
                                <div>
                                    <div class="th-tx-label">Status Bayar</div>
                                    <div class="th-tx-value">
                                        @if ($paymentStatus === 'paid')
                                            <span class="th-badge-status th-badge-paid">Lunas</span>
                                        @elseif ($paymentStatus === 'unpaid')
                                            <span class="th-badge-status th-badge-unpaid">Belum Bayar</span>
                                        @else
                                            <span class="th-badge-status th-badge-pending">{{ $paymentStatus }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div>
                                    <div class="th-tx-label">Status Pesanan</div>
                                    <div class="th-tx-value">
                                        @if ($orderStatus === 'completed')
                                            <span class="th-badge-status th-badge-completed">Selesai</span>
                                        @elseif ($orderStatus === 'shipped')
                                            <span class="th-badge-status th-badge-shipped">Dikirim</span>
                                        @elseif ($orderStatus === 'processing')
                                            <span class="th-badge-status th-badge-processing">Diproses</span>
                                        @elseif ($orderStatus === 'cancelled')
                                            <span class="th-badge-status th-badge-cancelled">Dibatalkan</span>
                                        @else
                                            <span class="th-badge-status th-badge-pending">Menunggu</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="th-tx-card-footer">
                                <div class="th-tx-card-total">Rp {{ number_format($total, 0, ',', '.') }}</div>
                                <div class="th-tx-card-actions">
                                    <button type="button" class="btn-table-action btn-action-print" title="Cetak Invoice"
                                        onclick="window.open('{{ route('admin.history.receipt', ['type' => 'online', 'id' => $transaction->getKey()]) }}', '_blank', 'width=850,height=750,top=50,left=100')">
                                        <span class="material-symbols-outlined">print</span>
                                    </button>
                                    <a href="{{ route('admin.history.edit.online', $transaction->getKey()) }}" class="btn-table-action btn-action-edit" title="Edit">
                                        <span class="material-symbols-outlined">edit</span>
                                    </a>
                                    <button class="btn-table-action btn-action-delete" title="Hapus"
                                        data-bs-toggle="modal" data-bs-target="#modalDelete"
                                        data-id="{{ $transaction->getKey() }}" data-type="online"
                                        data-invoice="{{ $invoiceNumber }}">
                                        <span class="material-symbols-outlined">delete</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">Belum ada transaksi online.</div>
                    @endforelse
                </div>

                <div class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                    <p class="pagination-summary" id="online-summary"></p>
                    <nav class="d-flex align-items-center" id="online-pagination"></nav>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL DETAIL --}}
<div class="modal fade modal-modern" id="modalDetail" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 pb-0 pt-4 px-4">
                <div class="d-flex align-items-center gap-3">
                    <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light shadow-sm" style="width: 52px; height: 52px;">
                        <span class="material-symbols-outlined" style="font-size: 28px; color: #10b981;">receipt_long</span>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold mb-0" style="font-size: 1.35rem; color: #1f2937;">Detail Transaksi</h5>
                        <small class="text-muted">Informasi lengkap dan rincian pembelian</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" id="modalDetailContent">
                <div class="text-center py-4">
                    <div class="spinner-border text-success" style="width: 3rem; height: 3rem;"></div>
                    <p class="mt-2 text-muted">Memuat detail transaksi...</p>
                </div>
            </div>
            <div class="modal-footer border-0 p-3 d-flex justify-content-between w-100">
                <button type="button" class="btn btn-modern-success px-4 d-flex align-items-center gap-1" id="btn-print-from-modal" style="background-color: #10b981; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600;">
                    <span class="material-symbols-outlined" style="font-size: 20px;">print</span> Cetak Nota
                </button>
                <button type="button" class="btn btn-modern-secondary px-4" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL HAPUS --}}
<div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="formDelete" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-body text-center p-4 pt-5">
                    <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3" style="width: 56px; height: 56px;">
                        <span class="material-symbols-outlined" style="font-size: 28px;">delete_forever</span>
                    </div>
                    <h5 class="fw-bold mb-2">Hapus Transaksi?</h5>
                    <p class="text-secondary small">Data berikut akan dihapus permanen:</p>
                    <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light" id="deleteInfo"></div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0 justify-content-center gap-2">
                    <button type="button" class="btn btn-modern-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger" style="background-color: #ef4444;">Ya, Hapus</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Helper format rupiah
function formatRupiah(val) {
    try {
        return new Intl.NumberFormat('id-ID').format(Number(val) || 0);
    } catch (e) {
        return (Number(val) || 0).toString();
    }
}

// Auto close flash alerts
document.querySelectorAll('.flash-alert').forEach(alert => {
    setTimeout(() => { bootstrap.Alert.getOrCreateInstance(alert)?.close(); }, 5000);
});

// ========== SHARED PAGINATION RENDERER ==========
function renderPagination(container, totalPages, currentPage, onPageChange) {
    if (!container) return;
    container.innerHTML = '';

    const prev = document.createElement('a');
    prev.href = '#';
    prev.className = 'content-page-link ' + (currentPage === 1 ? 'disabled' : '');
    prev.innerHTML = '<span class="material-symbols-outlined">chevron_left</span>';
    prev.addEventListener('click', (e) => { e.preventDefault(); if (currentPage > 1) onPageChange(currentPage - 1); });
    container.appendChild(prev);

    for (let i = 1; i <= totalPages; i++) {
        const link = document.createElement('a');
        link.href = '#';
        link.className = 'content-page-link ' + (currentPage === i ? 'active' : '');
        link.innerText = i;
        link.addEventListener('click', (e) => { e.preventDefault(); onPageChange(i); });
        container.appendChild(link);
    }

    const next = document.createElement('a');
    next.href = '#';
    next.className = 'content-page-link ' + (currentPage === totalPages ? 'disabled' : '');
    next.innerHTML = '<span class="material-symbols-outlined">chevron_right</span>';
    next.addEventListener('click', (e) => { e.preventDefault(); if (currentPage < totalPages) onPageChange(currentPage + 1); });
    container.appendChild(next);
}

// ========== OFFLINE FILTER & PAGINATION ==========
const offlineRows = Array.from(document.querySelectorAll('#offline-tbody .offline-row'));
const offlineCards = Array.from(document.querySelectorAll('#offline-cards .offline-card'));
const searchOffline = document.getElementById('search-offline');
const offlineSelectedSpan = document.getElementById('selected-offline-value');
const offlineSummary = document.getElementById('offline-summary');
const offlinePaginationNav = document.getElementById('offline-pagination');
let offlineLimit = parseInt(offlineSelectedSpan.innerText) || 10;
let offlinePage = 1;

function applyOfflineFilters() {
    const query = searchOffline.value.toLowerCase().trim();
    const allItems = [...offlineRows, ...offlineCards];
    return allItems.filter(item => {
        const invoice = (item.getAttribute('data-invoice') || '').toLowerCase();
        const cashier = (item.getAttribute('data-cashier') || '').toLowerCase();
        return invoice.includes(query) || cashier.includes(query);
    });
}

function updateOfflinePagination() {
    const matched = applyOfflineFilters();
    const totalMatch = matched.length;
    const totalPages = Math.ceil(totalMatch / offlineLimit) || 1;
    if (offlinePage > totalPages) offlinePage = totalPages;
    const start = (offlinePage - 1) * offlineLimit;
    const end = start + offlineLimit;

    offlineRows.forEach(row => row.style.display = 'none');
    offlineCards.forEach(card => card.style.display = 'none');

    matched.forEach((item, idx) => {
        if (idx >= start && idx < end) {
            item.style.display = '';
            const noCell = item.querySelector('.row-index-number');
            if (noCell) noCell.innerText = idx + 1;
        } else {
            item.style.display = 'none';
        }
    });

    if (totalMatch === 0) {
        offlineSummary.innerText = 'Menampilkan 0 data';
    } else {
        offlineSummary.innerText = 'Menampilkan ' + (start + 1) + ' sampai ' + Math.min(end, totalMatch) + ' dari ' + totalMatch + ' entri';
    }

    renderPagination(offlinePaginationNav, totalPages, offlinePage, (newPage) => { offlinePage = newPage; updateOfflinePagination(); });
}

if (searchOffline) searchOffline.addEventListener('input', () => { offlinePage = 1; updateOfflinePagination(); });

document.querySelectorAll('#entriesOfflineDropdown').forEach(dropdown => {
    const menu = dropdown.nextElementSibling;
    if (menu) {
        menu.querySelectorAll('.dropdown-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const val = this.getAttribute('data-value');
                offlineLimit = parseInt(val) || 10;
                offlinePage = 1;
                offlineSelectedSpan.innerText = val;
                menu.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                updateOfflinePagination();
            });
        });
    }
});

updateOfflinePagination();

// ========== ONLINE FILTER & PAGINATION ==========
const onlineRows = Array.from(document.querySelectorAll('#online-tbody .online-row'));
const onlineCards = Array.from(document.querySelectorAll('#online-cards .online-card'));
const searchOnline = document.getElementById('search-online');
const onlineSelectedSpan = document.getElementById('selected-online-value');
const onlineSummary = document.getElementById('online-summary');
const onlinePaginationNav = document.getElementById('online-pagination');
let onlineLimit = parseInt(onlineSelectedSpan.innerText) || 10;
let onlinePage = 1;

function applyOnlineFilters() {
    const query = searchOnline.value.toLowerCase().trim();
    const allItems = [...onlineRows, ...onlineCards];
    return allItems.filter(item => {
        const invoice = (item.getAttribute('data-invoice') || '').toLowerCase();
        const customer = (item.getAttribute('data-customer') || '').toLowerCase();
        return invoice.includes(query) || customer.includes(query);
    });
}

function updateOnlinePagination() {
    const matched = applyOnlineFilters();
    const totalMatch = matched.length;
    const totalPages = Math.ceil(totalMatch / onlineLimit) || 1;
    if (onlinePage > totalPages) onlinePage = totalPages;
    const start = (onlinePage - 1) * onlineLimit;
    const end = start + onlineLimit;

    onlineRows.forEach(row => row.style.display = 'none');
    onlineCards.forEach(card => card.style.display = 'none');

    matched.forEach((item, idx) => {
        if (idx >= start && idx < end) {
            item.style.display = '';
            const noCell = item.querySelector('.row-index-number');
            if (noCell) noCell.innerText = idx + 1;
        } else {
            item.style.display = 'none';
        }
    });

    if (totalMatch === 0) {
        onlineSummary.innerText = 'Menampilkan 0 data';
    } else {
        onlineSummary.innerText = 'Menampilkan ' + (start + 1) + ' sampai ' + Math.min(end, totalMatch) + ' dari ' + totalMatch + ' entri';
    }

    renderPagination(onlinePaginationNav, totalPages, onlinePage, (newPage) => { onlinePage = newPage; updateOnlinePagination(); });
}

if (searchOnline) searchOnline.addEventListener('input', () => { onlinePage = 1; updateOnlinePagination(); });

document.querySelectorAll('#entriesOnlineDropdown').forEach(dropdown => {
    const menu = dropdown.nextElementSibling;
    if (menu) {
        menu.querySelectorAll('.dropdown-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const val = this.getAttribute('data-value');
                onlineLimit = parseInt(val) || 10;
                onlinePage = 1;
                onlineSelectedSpan.innerText = val;
                menu.querySelectorAll('.dropdown-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                updateOnlinePagination();
            });
        });
    }
});

updateOnlinePagination();

// ========== MODAL DETAIL (AJAX) ==========
const modalDetail = document.getElementById('modalDetail');
const modalDetailContent = document.getElementById('modalDetailContent');

modalDetail.addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget;
    if (!button) return;
    const id = button.getAttribute('data-id');
    const type = button.getAttribute('data-type');

    // Simpan ke data-attribute tombol print modal
    const printBtn = document.getElementById('btn-print-from-modal');
    if (printBtn) {
        printBtn.setAttribute('data-id', id);
        printBtn.setAttribute('data-type', type);
    }

    modalDetailContent.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-success" style="width: 3rem; height: 3rem;"></div><p class="mt-2 text-muted">Memuat detail transaksi...</p></div>';

    fetch('/admin/transaction-history/{{ session('admin_route_code') }}/' + type + '/' + id + '?format=json')
        .then(response => {
            if (!response.ok) throw new Error('Gagal memuat data');
            return response.json();
        })
        .then(data => {
            let html = '';

            html += '<div class="mb-4">';
            html += '<div class="th-detail-section-title">Informasi Transaksi</div>';
            html += '<div class="th-detail-info-grid">';

            if (type === 'offline') {
                html += '<div class="th-detail-info-item"><div class="th-detail-label">No. Invoice</div><div class="th-detail-value">' + (data.invoice_number || '-') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Kasir</div><div class="th-detail-value">' + (data.user?.username || data.user?.full_name || '-') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Tanggal</div><div class="th-detail-value">' + (data.created_at || '-') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Metode Pembayaran</div><div class="th-detail-value">' + (data.payment_method_pos || 'Tunai') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Status QRIS</div><div class="th-detail-value">';
                if (data.qris_status === 'SUCCESS') {
                    html += '<span class="th-badge-status th-badge-success">Berhasil</span>';
                } else if (data.qris_status === 'PENDING') {
                    html += '<span class="th-badge-status th-badge-pending">Pending</span>';
                } else if (data.qris_status === 'FAILED') {
                    html += '<span class="th-badge-status th-badge-failed">Gagal</span>';
                } else {
                    html += '<span class="th-badge-status th-badge-success">Selesai</span>';
                }
                html += '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Total</div><div class="th-detail-value" style="color:#10b981;">Rp ' + formatRupiah(data.total_payment) + '</div></div>';
                if (data.payment_method_pos === 'CASH' && data.cash_received) {
                    html += '<div class="th-detail-info-item"><div class="th-detail-label">Uang Diterima</div><div class="th-detail-value">Rp ' + formatRupiah(data.cash_received) + '</div></div>';
                    html += '<div class="th-detail-info-item"><div class="th-detail-label">Kembalian</div><div class="th-detail-value">Rp ' + formatRupiah(data.cash_change || 0) + '</div></div>';
                }
            } else {
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Invoice</div><div class="th-detail-value">' + (data.invoice_number || '-') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Pembeli</div><div class="th-detail-value">' + (data.user?.username || 'Guest') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Tanggal</div><div class="th-detail-value">' + (data.created_at || '-') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Metode Pembayaran</div><div class="th-detail-value">' + (data.payment_method || '-') + '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Status Bayar</div><div class="th-detail-value">';
                if (data.payment_status === 'paid') {
                    html += '<span class="th-badge-status th-badge-paid">Lunas</span>';
                } else if (data.payment_status === 'unpaid') {
                    html += '<span class="th-badge-status th-badge-unpaid">Belum Bayar</span>';
                } else if (data.payment_status === 'expired') {
                    html += '<span class="th-badge-status th-badge-expired">Kedaluwarsa</span>';
                } else if (data.payment_status === 'failed') {
                    html += '<span class="th-badge-status th-badge-failed">Gagal</span>';
                } else {
                    html += '<span class="th-badge-status th-badge-pending">' + (data.payment_status || '-') + '</span>';
                }
                html += '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Status Pesanan</div><div class="th-detail-value">';
                if (data.order_status === 'completed') {
                    html += '<span class="th-badge-status th-badge-completed">Selesai</span>';
                } else if (data.order_status === 'shipped') {
                    html += '<span class="th-badge-status th-badge-shipped">Dikirim</span>';
                } else if (data.order_status === 'processing') {
                    html += '<span class="th-badge-status th-badge-processing">Diproses</span>';
                } else if (data.order_status === 'cancelled') {
                    html += '<span class="th-badge-status th-badge-cancelled">Dibatalkan</span>';
                } else {
                    html += '<span class="th-badge-status th-badge-pending">' + (data.order_status || 'Menunggu') + '</span>';
                }
                html += '</div></div>';
                html += '<div class="th-detail-info-item"><div class="th-detail-label">Total Pembayaran</div><div class="th-detail-value" style="color:#10b981;">Rp ' + formatRupiah(data.total_payment) + '</div></div>';

                if (data.address) {
                    const addr = data.address;
                    html += '<div class="th-detail-info-item" style="grid-column: 1 / -1;"><div class="th-detail-label">Penerima</div><div class="th-detail-value">' + (addr.full_name || '-') + '</div></div>';
                    html += '<div class="th-detail-info-item" style="grid-column: 1 / -1;"><div class="th-detail-label">No. Telepon</div><div class="th-detail-value">' + (addr.phone || '-') + '</div></div>';
                    const addrText = [addr.full_address, addr.village, addr.district, addr.city, addr.province].filter(Boolean).join(', ');
                    html += '<div class="th-detail-info-item" style="grid-column: 1 / -1;"><div class="th-detail-label">Alamat Lengkap</div><div class="th-detail-value">' + (addrText || '-') + '</div></div>';
                }
            }

            html += '</div></div>';

            if (data.details && data.details.length > 0) {
                html += '<div class="mb-3">';
                html += '<div class="th-detail-section-title">Rincian Item</div>';
                data.details.forEach(item => {
                    const itemName = item.package?.product?.name || item.package?.name || 'Produk';
                    const unitName = item.package?.unit?.name || '';
                    const qty = item.quantity || 0;
                    const price = item.price || item.subtotal || 0;
                    html += '<div class="th-detail-item-row">';
                    html += '<div><div class="th-item-name">' + itemName + '</div>';
                    html += '<div class="th-item-qty">' + qty + ' ' + unitName + '</div></div>';
                    html += '<div class="th-item-price">Rp ' + formatRupiah(price) + '</div>';
                    html += '</div>';
                });
                html += '</div>';
            }

            const totalVal = type === 'offline' ? data.total_amount : data.total_payment;
            html += '<div class="th-detail-total-bar">';
            html += '<div class="th-total-label">Total Pembayaran</div>';
            html += '<div class="th-total-value">Rp ' + formatRupiah(totalVal) + '</div>';
            html += '</div>';

            modalDetailContent.innerHTML = html;
        })
        .catch(err => {
            modalDetailContent.innerHTML = '<div class="text-center text-danger py-4"><i class="material-symbols-outlined" style="font-size:48px;">error</i><p class="mt-2">Gagal memuat detail transaksi.</p></div>';
        });
});

// Handler cetak nota dari detail modal
document.getElementById('btn-print-from-modal')?.addEventListener('click', function() {
    const id = this.getAttribute('data-id');
    const type = this.getAttribute('data-type');
    if (id && type) {
        const width = type === 'offline' ? 450 : 850;
        const height = type === 'offline' ? 700 : 750;
        const routeTemplate = '{{ route('admin.history.receipt', ['type' => 'TYPE_PLACEHOLDER', 'id' => 'ID_PLACEHOLDER']) }}';
        const url = routeTemplate.replace('TYPE_PLACEHOLDER', type).replace('ID_PLACEHOLDER', id);
        window.open(url, '_blank', `width=${width},height=${height},top=100,left=100`);
    }
});

// ========== MODAL DELETE ==========
const modalDelete = document.getElementById('modalDelete');
const formDelete = document.getElementById('formDelete');
const deleteInfo = document.getElementById('deleteInfo');

modalDelete.addEventListener('show.bs.modal', function(event) {
    const button = event.relatedTarget;
    if (!button) return;
    const id = button.getAttribute('data-id');
    const type = button.getAttribute('data-type');
    const invoice = button.getAttribute('data-invoice');

    deleteInfo.innerText = invoice || ('ID: ' + id);
    formDelete.action = '/admin/transaction-history/{{ session('admin_route_code') }}/' + type + '/' + id;
});

// ========== TAB SWITCH ==========
document.querySelectorAll('#th-transactionTab .nav-link').forEach(tab => {
    tab.addEventListener('shown.bs.tab', function() {
        const target = this.getAttribute('data-bs-target');
        if (target === '#offline') {
            updateOfflinePagination();
        } else if (target === '#online') {
            updateOnlinePagination();
        }
    });
});
</script>
@endsection