@extends('layouts.app')
@section('customcss')
<style>
/* ONLY TYPE COLUMN IS COLORED */

/* Type cell background colors */
.type-cell-expense {
    background-color: #ffe5e5 !important; /* Light red background */
}

.type-cell-replenishment {
    background-color: #e5ffe5 !important; /* Light green background */
}

/* Type badges - smaller and more compact */
.badge-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.badge-expense {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white !important;
}

.badge-replenishment {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white !important;
}

/* Icon styling */
.badge-type i {
    margin-right: 3px;
    font-size: 0.8em;
}

/* Hover effects for type badges */
.badge-expense:hover {
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    transform: scale(1.03);
    transition: all 0.2s ease;
}

.badge-replenishment:hover {
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
    transform: scale(1.03);
    transition: all 0.2s ease;
}

/* Regular table styling - no row colors */
.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05) !important;
}

.transaction-row {
    transition: opacity 0.3s ease;
}

/* FIXED: More specific hiding for filtered rows */
.transaction-row.filtered-out {
    display: none !important;
}

/* Search input styling */
#searchInput:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Checkbox styling */
.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

/* Button group spacing */
.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Make sure type column stands out */
td.type-cell-expense,
td.type-cell-replenishment {
    font-weight: bold;
    vertical-align: middle;
}
</style>
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2><i class="fas fa-clock"></i> Pending Approvals</h2>
                    <p class="text-muted mb-0">Review and approve pending transactions</p>
                </div>
                <a href="{{ route('petty-cash.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Funds
                </a>
            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show">
                    <i class="fas fa-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">
                    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if($pendingTransactions->count() > 0)
                <div class="card">
                    <div class="card-header bg-warning">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-list"></i> Pending Transactions
                                <span class="badge bg-dark ms-2">{{ $pendingTransactions->count() }}</span>
                            </h5>
                            
                            <!-- Search & Filters -->
                            <div class="d-flex gap-2">
                                <input type="text" 
                                       id="searchInput" 
                                       class="form-control form-control-sm" 
                                       placeholder="🔍 Search transactions..."
                                       style="width: 250px;">
                                
                                <select id="typeFilter" class="form-select form-select-sm" style="width: 150px;">
                                    <option value="">All Types</option>
                                    <option value="expense">Expenses</option>
                                    <option value="replenishment">Replenishments</option>
                                </select>

                                <select id="fundFilter" class="form-select form-select-sm" style="width: 200px;">
                                    <option value="">All Funds</option>
                                    @foreach($pendingTransactions->unique('fund_id') as $trans)
                                        <option value="{{ $trans->fund->id }}">{{ $trans->fund->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Bulk Actions -->
                        <div class="mb-3 d-flex justify-content-between align-items-center">
                            <div>
                                <button type="button" class="btn btn-sm btn-success" id="bulkApproveBtn" disabled>
                                    <i class="fas fa-check"></i> Approve Selected (<span id="selectedCount">0</span>)
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="selectAllBtn">
                                    <i class="fas fa-check-square"></i> Select All Visible
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAllBtn">
                                    <i class="fas fa-square"></i> Clear Selection
                                </button>
                            </div>
                            
                            <!-- Results Counter -->
                            <div>
                                <span class="badge bg-info" id="resultsCount">
                                    Showing {{ $pendingTransactions->count() }} transactions
                                </span>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover table-bordered" id="transactionsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 40px;">
                                            <input type="checkbox" id="selectAllCheckbox" class="form-check-input">
                                        </th>
                                        <th>Date</th>
                                        <th>Fund</th>
                                        <th style="width: 150px;">Type</th>
                                        <th>Description</th>
                                        <th>Amount</th>
                                        <th>Created By</th>
                                        <th>Days Pending</th>
                                        <th style="width: 120px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($pendingTransactions as $transaction)
                                        @php
                                            $daysPending = (int) round($transaction->created_at->diffInDays(now()));
                                        @endphp
                                        <tr class="transaction-row" 
                                            data-fund-id="{{ $transaction->fund->id }}"
                                            data-type="{{ $transaction->type }}"
                                            data-search-text="{{ strtolower(
                                                    $transaction->description . ' ' . 
                                                    $transaction->fund->name . ' ' . 
                                                    ($transaction->creator ? $transaction->creator->name : '') . ' ' . 
                                                    ($transaction->expenseItem ? $transaction->expenseItem->name : '') . ' ' . 
                                                    ($transaction->supplier ? $transaction->supplier->name : '') . ' ' .
                                                    $transaction->transaction_date->format('M d, Y') . ' ' .
                                                    number_format($transaction->amount, 2) . ' ' .
                                                    ($transaction->notes ? $transaction->notes : '') . ' ' .
                                                    $transaction->type . ' ' .
                                                    ($transaction->type === 'expense' ? 'expense out payment' : 'replenishment in deposit top-up topup')
                                                ) }}">
                                            <td>
                                                <input type="checkbox" 
                                                       class="form-check-input transaction-checkbox" 
                                                       value="{{ $transaction->id }}"
                                                       data-amount="{{ $transaction->amount }}"
                                                       data-fund-balance="{{ $transaction->fund->current_balance }}"
                                                       data-type="{{ $transaction->type }}">
                                            </td>
                                            <td>
                                                {{ $transaction->transaction_date->format('M d, Y') }}
                                                @if($transaction->receipt_image)
                                                    <a href="{{ Storage::url($transaction->receipt_image) }}" 
                                                       target="_blank" 
                                                       title="View Receipt"
                                                       class="ms-1">
                                                        <i class="fas fa-paperclip text-info"></i>
                                                    </a>
                                                @endif
                                            </td>
                                            <td>
                                                <strong>{{ $transaction->fund->name }}</strong>
                                                <br>
                                                <small class="text-muted">
                                                    Balance: UGX {{ number_format($transaction->fund->current_balance, 2) }}
                                                </small>
                                            </td>
                                            <!-- ONLY THIS COLUMN IS COLORED -->
                                            <td class="text-center">
                                                @if($transaction->type === 'expense')
                                                    <span class="badge-type badge-expense">
                                                        <i class="fas fa-arrow-down"></i> Expense
                                                    </span>
                                                @else
                                                    <span class="badge-type badge-replenishment">
                                                        <i class="fas fa-arrow-up"></i> Replenishment
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <strong>{{ $transaction->description }}</strong>
                                                @if($transaction->expenseItem)
                                                    <br><small class="text-muted">
                                                        <i class="fas fa-tag"></i> {{ $transaction->expenseItem->name }}
                                                    </small>
                                                @endif
                                                @if($transaction->supplier)
                                                    <br><small class="text-muted">
                                                        <i class="fas fa-building"></i> {{ $transaction->supplier->name }}
                                                    </small>
                                                @endif
                                                @if($transaction->notes)
                                                    <br><small class="text-info">
                                                        <i class="fas fa-sticky-note"></i> {{ Str::limit($transaction->notes, 50) }}
                                                    </small>
                                                @endif
                                            </td>
                                            <td>
                                                <strong>UGX {{ number_format($transaction->amount, 2) }}</strong>
                                                @if($transaction->type === 'expense' && $transaction->amount > $transaction->fund->current_balance)
                                                    <br><small class="text-danger">
                                                        <i class="fas fa-exclamation-triangle"></i> Insufficient balance
                                                    </small>
                                                @endif
                                            </td>
                                            <td>{{ $transaction->creator->name }}</td>
                                            <td>
                                                @if($daysPending > 7)
                                                    <span class="badge bg-danger">
                                                        {{ $daysPending }} days
                                                        <i class="fas fa-exclamation-triangle"></i>
                                                    </span>
                                                @elseif($daysPending > 3)
                                                    <span class="badge bg-warning text-dark">
                                                        {{ $daysPending }} days
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary">
                                                        {{ $daysPending }} days
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <form method="POST" 
                                                          action="{{ route('petty-cash.approve-transaction', $transaction) }}" 
                                                          class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" 
                                                                class="btn btn-success btn-sm" 
                                                                title="Approve"
                                                                onclick="return confirm('Approve this transaction?')">
                                                            <i class="fas fa-check"></i>
                                                        </button>
                                                    </form>
                                                    
                                                    <button type="button" 
                                                            class="btn btn-danger btn-sm" 
                                                            title="Reject"
                                                            data-bs-toggle="modal" 
                                                            data-bs-target="#rejectModal{{ $transaction->id }}">
                                                        <i class="fas fa-times"></i>
                                                    </button>

                                                    <a href="{{ route('petty-cash.edit-transaction', $transaction) }}" 
                                                       class="btn btn-info btn-sm"
                                                       title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                </div>
                                                
                                                <!-- Reject Modal -->
                                                <div class="modal fade" id="rejectModal{{ $transaction->id }}" tabindex="-1">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <form method="POST" action="{{ route('petty-cash.reject-transaction', $transaction) }}">
                                                                @csrf
                                                                @method('PATCH')
                                                                <div class="modal-header bg-danger text-white">
                                                                    <h5 class="modal-title">
                                                                        <i class="fas fa-times-circle"></i> Reject Transaction
                                                                    </h5>
                                                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <div class="alert alert-warning">
                                                                        <strong>Transaction Details:</strong><br>
                                                                        {{ $transaction->description }}<br>
                                                                        Amount: UGX {{ number_format($transaction->amount, 2) }}
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="approval_notes">Reason for rejection: <span class="text-danger">*</span></label>
                                                                        <textarea class="form-control" 
                                                                                  name="approval_notes" 
                                                                                  required 
                                                                                  rows="3"
                                                                                  placeholder="Please provide a reason for rejecting this transaction..."></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                                        Cancel
                                                                    </button>
                                                                    <button type="submit" class="btn btn-danger">
                                                                        <i class="fas fa-times"></i> Reject Transaction
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- No Results Message -->
                        <div id="noResults" class="alert alert-info text-center" style="display: none;">
                            <i class="fas fa-search"></i> No transactions match your search criteria.
                        </div>
                    </div>
                </div>
            @else
                <div class="alert alert-success text-center py-5">
                    <i class="fas fa-check-circle fa-4x mb-3 text-success"></i>
                    <h4>No Pending Approvals</h4>
                    <p class="text-muted">All transactions have been processed. Great job!</p>
                    <a href="{{ route('petty-cash.index') }}" class="btn btn-primary">
                        <i class="fas fa-arrow-left"></i> Back to Funds
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Bulk Approve Form -->
<form id="bulkApproveForm" action="{{ route('petty-cash.bulk-approve') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="transaction_ids" id="bulkTransactionIds">
</form>

@endsection



@section('customjs')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // All elements
    const searchInput = document.getElementById('searchInput');
    const typeFilter = document.getElementById('typeFilter');
    const fundFilter = document.getElementById('fundFilter');
    const rows = document.querySelectorAll('.transaction-row');
    const noResults = document.getElementById('noResults');
    const resultsCount = document.getElementById('resultsCount');
    const checkboxes = document.querySelectorAll('.transaction-checkbox');
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    const bulkApproveBtn = document.getElementById('bulkApproveBtn');
    const selectedCount = document.getElementById('selectedCount');
    const selectAllBtn = document.getElementById('selectAllBtn');
    const deselectAllBtn = document.getElementById('deselectAllBtn');
    const totalTransactions = rows.length;

    // PURE JAVASCRIPT SEARCH & FILTER - NO BACKEND NEEDED
    function filterTransactions() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        const selectedType = typeFilter.value.toLowerCase();
        const selectedFund = fundFilter.value;
        let visibleCount = 0;

        rows.forEach(row => {
            // Get row data
            const searchText = row.getAttribute('data-search-text') || '';
            const type = row.getAttribute('data-type') || '';
            const fundId = row.getAttribute('data-fund-id') || '';

            // Check all filter conditions
            const matchesSearch = !searchTerm || searchText.includes(searchTerm);
            const matchesType = !selectedType || type === selectedType;
            const matchesFund = !selectedFund || fundId === selectedFund;

            // Show or hide row
            if (matchesSearch && matchesType && matchesFund) {
                row.classList.remove('filtered-out');
                row.style.display = ''; // Ensure display is reset
                visibleCount++;
            } else {
                row.classList.add('filtered-out');
                row.style.display = 'none'; // Force hide
                // Uncheck hidden rows
                const checkbox = row.querySelector('.transaction-checkbox');
                if (checkbox) checkbox.checked = false;
            }
        });

        // Show/hide no results message
        noResults.style.display = visibleCount === 0 ? 'block' : 'none';

        // Update results count
        resultsCount.textContent = `Showing ${visibleCount} of ${totalTransactions} transactions`;
        
        // Update bulk actions
        updateBulkActions();
    }

    // Update bulk approve button state
    function updateBulkActions() {
        const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
        const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
            return !cb.closest('.transaction-row').classList.contains('filtered-out');
        });
        
        const count = checkedBoxes.length;
        selectedCount.textContent = count;
        bulkApproveBtn.disabled = count === 0;
        
        // Update select all checkbox
        const allVisibleChecked = visibleCheckboxes.length > 0 && 
                                  visibleCheckboxes.every(cb => cb.checked);
        
        selectAllCheckbox.checked = allVisibleChecked;
        selectAllCheckbox.indeterminate = !allVisibleChecked && count > 0;
    }

    // Event listeners for search and filters
    searchInput.addEventListener('input', filterTransactions);
    searchInput.addEventListener('keyup', filterTransactions); // Extra responsiveness
    typeFilter.addEventListener('change', filterTransactions);
    fundFilter.addEventListener('change', filterTransactions);

    // Checkbox event listeners
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });

    // Select all checkbox
    selectAllCheckbox.addEventListener('change', function() {
        const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
            return !cb.closest('.transaction-row').classList.contains('filtered-out');
        });
        
        visibleCheckboxes.forEach(cb => cb.checked = this.checked);
        updateBulkActions();
    });

    // Select all visible button
    selectAllBtn.addEventListener('click', function() {
        const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
            return !cb.closest('.transaction-row').classList.contains('filtered-out');
        });
        
        visibleCheckboxes.forEach(cb => cb.checked = true);
        updateBulkActions();
    });

    // Deselect all button
    deselectAllBtn.addEventListener('click', function() {
        checkboxes.forEach(cb => cb.checked = false);
        updateBulkActions();
    });

    // Bulk approve
    bulkApproveBtn.addEventListener('click', function() {
        const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
        const ids = Array.from(checkedBoxes).map(cb => cb.value);
        
        if (ids.length === 0) {
            alert('Please select at least one transaction to approve.');
            return;
        }

        // Check for insufficient balance
        let insufficientBalanceWarnings = [];
        checkedBoxes.forEach(cb => {
            const amount = parseFloat(cb.dataset.amount);
            const balance = parseFloat(cb.dataset.fundBalance);
            const type = cb.dataset.type;
            
            if (type === 'expense' && amount > balance) {
                const row = cb.closest('tr');
                const description = row.querySelector('td:nth-child(5) strong').textContent;
                insufficientBalanceWarnings.push(description);
            }
        });

        if (insufficientBalanceWarnings.length > 0) {
            const warningMsg = 'Warning: The following expenses exceed fund balance:\n\n' + 
                             insufficientBalanceWarnings.join('\n') + 
                             '\n\nDo you want to continue?';
            if (!confirm(warningMsg)) {
                return;
            }
        }

        if (confirm(`Approve ${ids.length} selected transaction(s)?`)) {
            document.getElementById('bulkTransactionIds').value = JSON.stringify(ids);
            document.getElementById('bulkApproveForm').submit();
        }
    });

    // Initialize on page load
    updateBulkActions();
    
    // Optional: Add keyboard shortcut for search (Ctrl+F or Cmd+F)
    document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
            e.preventDefault();
            searchInput.focus();
            searchInput.select();
        }
    });
});
</script>
@endsection