<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/customer-ledger" class="btn btn-ghost btn-sm mb-3" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Customer Ledger
        </a>
        <h1><?= $pageTitle ?></h1>
        <div class="page-subtitle">Transaction history and balance tracking</div>
    </div>
    <div class="flex gap-2">
        <div style="position:relative;">
            <button type="button" class="btn btn-outline" onclick="togglePrintDropdown(event)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
                Print Ledger
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-left:4px;"><polyline points="6 9 12 15 18 9"></polyline></svg>
            </button>
            <div id="printDropdown" class="print-dropdown" style="position:absolute; top:100%; right:0; background:var(--bg-raised); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); min-width:200px; z-index:100; display:none;">
                <a href="<?= APP_URL ?>/customer-ledger/<?= $customer['id'] ?>/print/a4?date_from=<?= urlencode($filters['date_from']) ?>&date_to=<?= urlencode($filters['date_to']) ?>&transaction_type=<?= urlencode($filters['transaction_type']) ?>" class="dropdown-item" style="display:block; padding:10px 16px; text-decoration:none; color:var(--text-primary); border-bottom:1px solid var(--border);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px; vertical-align:text-bottom;"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>
                    A4 Format
                </a>
                <a href="javascript:void(0);" onclick="printLedgerWindow(); return false;" class="dropdown-item" style="display:block; padding:10px 16px; text-decoration:none; color:var(--text-primary);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px; vertical-align:text-bottom;"><printer></printer></svg>
                    Direct Print
                </a>
            </div>
        </div>
        <a href="<?= APP_URL ?>/customers/store-customer" class="btn btn-secondary">Edit Customer</a>
        <a href="<?= APP_URL ?>/sales/create?customer_id=<?= $customer['id'] ?>" class="btn btn-primary">New Sale</a>
    </div>
</div>

<style>
.print-dropdown.show { display: block !important; }

.print-dropdown .dropdown-item {
    transition: background 0.2s;
}

.print-dropdown .dropdown-item:hover {
    background: var(--bg-hover);
}

@media print {
    .page-header { display: none !important; }
    body { background: white !important; color: black !important; padding: 0 !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; background: transparent !important; }
    .app-wrapper { display: block !important; }
    .sidebar, .topbar { display: none !important; }
    .page-content { padding: 0 !important; }
    
    /* Direct print - show only customer info and transaction history */
    body.direct-print .card:not(#customer-info):not(#transaction-history) { display: none !important; }
    body.direct-print .responsive-grid { display: none !important; }
}
</style>

<script>
function togglePrintDropdown(event) {
    event.stopPropagation();
    document.getElementById('printDropdown').classList.toggle('show');
}

function printLedgerWindow() {
    document.body.classList.add('direct-print');
    window.print();
    document.body.classList.remove('direct-print');
}

document.addEventListener('click', function(event) {
    if (!event.target.closest('#printDropdown') && !event.target.closest('[onclick*="togglePrintDropdown"]')) {
        document.getElementById('printDropdown').classList.remove('show');
    }
});
</script>

<!-- Customer Info Card -->
<div class="card mb-4" id="customer-info">
    <div class="card-header">
        <h3 class="card-title">Customer Information</h3>
    </div>
    <div class="p-4 grid-4 gap-3">
        <div>
            <div class="text-xs text-muted">Name</div>
            <div class="font-bold"><?= e($customer['name']) ?></div>
        </div>
        <div>
            <div class="text-xs text-muted">Phone</div>
            <div><?= e($customer['phone']) ?></div>
        </div>
        <div>
            <div class="text-xs text-muted">Email</div>
            <div><?= e($customer['email']) ?></div>
        </div>
        <div>
            <div class="text-xs text-muted">Current Balance</div>
            <div class="font-bold text-red-600"><?= money($summary['current_balance']) ?></div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Filters</h3>
    </div>
    <form method="GET" class="p-3">
        <input type="hidden" name="page" value="1">
        <div class="responsive-grid gap-3">
            <div class="form-group">
                <label class="form-label">Date From</label>
                <input type="date" name="date_from" class="form-control" value="<?= e($filters['date_from']) ?>">
            </div>
            <div class="form-group">
                <label class="form-label">Date To</label>
                <input type="date" name="date_to" class="form-control" value="<?= e($filters['date_to']) ?>">
            </div>
            <div class="form-group">
                <label class="form-label">Transaction Type</label>
                <select name="transaction_type" class="form-control">
                    <option value="">All Types</option>
                    <option value="sale" <?= $filters['transaction_type'] === 'sale' ? 'selected' : '' ?>>Sale</option>
                    <option value="payment" <?= $filters['transaction_type'] === 'payment' ? 'selected' : '' ?>>Payment</option>
                    <option value="return" <?= $filters['transaction_type'] === 'return' ? 'selected' : '' ?>>Return</option>
                    <option value="adjustment" <?= $filters['transaction_type'] === 'adjustment' ? 'selected' : '' ?>>Adjustment</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary w-full">Apply Filters</button>
            </div>
            <div class="form-group">
                <label class="form-label">&nbsp;</label>
                <a href="<?= APP_URL ?>/customer-ledger/<?= $customer['id'] ?>" class="btn btn-outline w-full">Clear</a>
            </div>
        </div>
    </form>
</div>

<!-- Summary Cards -->
<div class="grid-4 gap-3 mb-4">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Opening Balance</h3>
        </div>
        <div class="p-4">
            <div class="text-2xl font-bold"><?= money($ledger['opening_balance']) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Total Debit</h3>
        </div>
        <div class="p-4">
            <div class="text-2xl font-bold text-red-600"><?= money($summary['total_debit']) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Total Credit</h3>
        </div>
        <div class="p-4">
            <div class="text-2xl font-bold text-green-600"><?= money($summary['total_credit']) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Current Balance</h3>
        </div>
        <div class="p-4">
            <div class="text-2xl font-bold <?= $summary['current_balance'] > 0 ? 'text-red-600' : 'text-green-600' ?>"><?= money($summary['current_balance']) ?></div>
        </div>
    </div>
</div>

<!-- Ledger Table -->
<div class="card" id="transaction-history">
    <div class="card-header">
        <h3 class="card-title">Transaction History</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th class="text-left">Date</th>
                    <th class="text-left">Type</th>
                    <th class="text-left">Reference</th>
                    <th class="text-left">Description</th>
                    <th class="text-center">Debit</th>
                    <th class="text-center">Credit</th>
                    <th class="text-center">Balance</th>
                    <th class="text-left">User</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($ledger['data'])): ?>
                <tr>
                    <td colspan="8" class="text-center" style="padding: 24px 10px;">No transactions found.</td>
                </tr>
                <?php else: foreach ($ledger['data'] as $entry): ?>
                <tr>
                    <td class="text-left"><?= date('M j, Y', strtotime($entry['transaction_date'])) ?></td>
                    <td class="text-left">
                        <span class="badge <?= $entry['transaction_type'] === 'sale' ? 'bg-red-100 text-red-800' : ($entry['transaction_type'] === 'payment' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') ?>">
                            <?= ucfirst(e($entry['transaction_type'])) ?>
                        </span>
                    </td>
                    <td class="text-left"><?= e($entry['reference_no'] ?? '-') ?></td>
                    <td class="text-left"><?= e($entry['description'] ?? '-') ?></td>
                    <td class="text-center"><?= $entry['debit'] > 0 ? money($entry['debit']) : '-' ?></td>
                    <td class="text-center"><?= $entry['credit'] > 0 ? money($entry['credit']) : '-' ?></td>
                    <td class="text-center font-bold <?= $entry['balance'] > 0 ? 'text-red-600' : 'text-green-600' ?>"><?= money($entry['balance']) ?></td>
                    <td class="text-left"><?= e($entry['user_name'] ?? '-') ?></td>
                </tr>
                <?php endforeach; endif; ?>
            </tbody>
        </table>
    </div>
    
    <?= paginationLinks($ledger, APP_URL . '/customer-ledger/' . $customer['id'], $filters) ?>
</div>

<style>
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
}
</style>
