@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2>Pending Approvals</h2>
                <div>
                    <a href="{{ route('approvals.processed') }}" class="btn btn-info">
                        <i class="fas fa-history"></i> View Processed Transactions
                    </a>
                    <a href="{{ route('approvals.summary') }}" class="btn btn-secondary">
                        <i class="fas fa-chart-bar"></i> Summary
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-clock"></i> Awaiting Approval (<span id="totalCount">{{ $approvals->count() }}</span>)
                        </h3>
                        <div class="input-group" style="width: 300px;">
                            <input type="text" id="searchInput" class="form-control" placeholder="Search transactions...">
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle"></i> {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle"></i>
                            @foreach($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover" id="approvalsTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th style="width: 120px;">Type</th>
                                    <th style="width: 110px;">Date</th>
                                    <th style="width: 100px;">Reference</th>
                                    <th>Party</th>
                                    <th>Description</th>
                                    <th style="width: 130px;" class="text-end">Amount</th>
                                    <th style="width: 180px;" class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($approvals as $index => $approval)
                                    <tr class="approval-row">
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            @if($approval instanceof \App\Models\GeneralExpense)
                                                <span class="badge bg-info">
                                                    <i class="fas fa-receipt"></i> Expense
                                                </span>
                                            @elseif($approval instanceof \App\Models\Payment)
                                                @if($approval->disbursement_id)
                                                    <span class="badge bg-warning">
                                                        <i class="fas fa-hand-holding-usd"></i> Disbursement
                                                    </span>
                                                @elseif($approval->recovery_id)
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-undo"></i> Recovery
                                                    </span>
                                                @else
                                                    <span class="badge bg-primary">
                                                        <i class="fas fa-money-bill"></i> Payment
                                                    </span>
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            @if($approval instanceof \App\Models\GeneralExpense)
                                                {{ \Carbon\Carbon::parse($approval->expense_date)->format('d M Y') }}
                                            @else
                                                @if($approval->disbursement_id && $approval->disbursement)
                                                    {{ \Carbon\Carbon::parse($approval->disbursement->date)->format('d M Y') }}
                                                @elseif($approval->recovery_id && $approval->recovery)
                                                    {{ \Carbon\Carbon::parse($approval->recovery->date)->format('d M Y') }}
                                                @else
                                                    {{ \Carbon\Carbon::parse($approval->date)->format('d M Y') }}
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            <strong>
                                                @if($approval instanceof \App\Models\GeneralExpense)
                                                    {{ $approval->reference ?? 'EXP-' . $approval->id }}
                                                @else
                                                    @if($approval->disbursement_id)
                                                        DIS-{{ $approval->disbursement_id }}
                                                    @elseif($approval->recovery_id)
                                                        REC-{{ $approval->recovery_id }}
                                                    @else
                                                        {{ $approval->reference ?? 'PAY-' . $approval->id }}
                                                    @endif
                                                @endif
                                            </strong>
                                        </td>
                                        <td>
                                            @if($approval instanceof \App\Models\GeneralExpense)
                                                <i class="fas fa-truck"></i> {{ $approval->supplier->name ?? 'N/A' }}
                                            @else
                                                @if($approval->customer_id)
                                                    <i class="fas fa-user"></i> {{ $approval->customer->name ?? 'N/A' }}
                                                @elseif($approval->supplier_id)
                                                    <i class="fas fa-truck"></i> {{ $approval->supplier->name ?? 'N/A' }}
                                                @elseif($approval->disbursement_id && $approval->disbursement && $approval->disbursement->supplier)
                                                    <i class="fas fa-truck"></i> {{ $approval->disbursement->supplier->name }}
                                                @elseif($approval->recovery_id && $approval->recovery && $approval->recovery->customer)
                                                    <i class="fas fa-user"></i> {{ $approval->recovery->customer->name }}
                                                @else
                                                    <i class="fas fa-question"></i> N/A
                                                @endif
                                            @endif
                                        </td>
                                        <td>
                                            @if($approval instanceof \App\Models\GeneralExpense)
                                                <strong>{{ $approval->expenseItem->name ?? 'N/A' }}</strong>
                                                @if($approval->narration)
                                                    <br><small class="text-muted">{{ $approval->narration }}</small>
                                                @endif
                                            @else
                                                @if($approval->disbursement_id && $approval->disbursement)
                                                    {{ $approval->disbursement->reason ?? 'Disbursement' }}
                                                @elseif($approval->recovery_id && $approval->recovery)
                                                    Recovery Payment
                                                @else
                                                    {{ $approval->reference ?? 'Payment' }}
                                                @endif
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <strong>
                                                @if($approval instanceof \App\Models\GeneralExpense)
                                                    {{ number_format($approval->amount, 2) }}
                                                @else
                                                    @if($approval->disbursement_id && $approval->disbursement)
                                                        {{ number_format($approval->disbursement->amount, 2) }}
                                                    @elseif($approval->recovery_id && $approval->recovery)
                                                        {{ number_format($approval->recovery->amount, 2) }}
                                                    @else
                                                        {{ number_format($approval->amount, 2) }}
                                                    @endif
                                                @endif
                                            </strong>
                                        </td>
                                        <td class="text-center">
                                            @can('process approvals')
                                            <div class="btn-group" role="group">
                                                <form action="{{ route('approvals.approve') }}" method="POST" style="display:inline;">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $approval->id }}">
                                                    <input type="hidden" name="type" value="{{ $approval instanceof \App\Models\Payment ? 'Payment' : 'Expense' }}">
                                                    <button type="submit" class="btn btn-success btn-sm" 
                                                            onclick="return confirm('Are you sure you want to APPROVE this record?')"
                                                            title="Approve">
                                                        <i class="fas fa-check"></i> Approve
                                                    </button>
                                                </form>

                                                <form action="{{ route('approvals.reject') }}" method="POST" style="display:inline;">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $approval->id }}">
                                                    <input type="hidden" name="type" value="{{ $approval instanceof \App\Models\Payment ? 'Payment' : 'Expense' }}">
                                                    <button type="submit" class="btn btn-danger btn-sm" 
                                                            onclick="return confirm('Are you sure you want to REJECT this record?')"
                                                            title="Reject">
                                                        <i class="fas fa-times"></i> Reject
                                                    </button>
                                                </form>
                                            </div>
                                            @endcan
                                        </td>
                                    </tr>
                                @empty
                                    <tr id="noRecords">
                                        <td colspan="9" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                            <h5>No pending approvals found</h5>
                                            <p>All transactions have been processed</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                            @if($approvals->count() > 0)
                                <tfoot class="bg-light">
                                    <tr class="font-weight-bold">
                                        <td class="text-center">
                                            <b>Grand Total: </b>
                                            {{ number_format($approvals->sum(function($approval) {
                                                if($approval instanceof \App\Models\GeneralExpense) {
                                                    return $approval->amount;
                                                } else {
                                                    if($approval->disbursement_id && $approval->disbursement) {
                                                        return $approval->disbursement->amount ?? 0;
                                                    } elseif($approval->recovery_id && $approval->recovery) {
                                                        return $approval->recovery->amount ?? 0;
                                                    } else {
                                                        return $approval->amount;
                                                    }
                                                }
                                            }), 2) }}
                                        </td>
                                        <td colspan="6" class="text-end">{{ number_format($approvals->sum(function($approval) {
                                                if($approval instanceof \App\Models\GeneralExpense) {
                                                    return $approval->amount;
                                                } else {
                                                    if($approval->disbursement_id && $approval->disbursement) {
                                                        return $approval->disbursement->amount ?? 0;
                                                    } elseif($approval->recovery_id && $approval->recovery) {
                                                        return $approval->recovery->amount ?? 0;
                                                    } else {
                                                        return $approval->amount;
                                                    }
                                                }
                                            }), 2) }}</td>
                                        <td colspan="1"></td>
                                        
                                    </tr>
                                </tfoot>
                            @endif
                        </table>
                    </div>
                    
                    <div id="noSearchResults" style="display: none;" class="text-center text-muted py-4">
                        <i class="fas fa-search fa-3x mb-3 d-block"></i>
                        <h5>No matching transactions found</h5>
                        <p>Try adjusting your search terms</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
<script>
    // Auto-hide alerts
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 5000);

    // Wait for DOM to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');
        
        // Check if search input exists before adding event listener
        if(!searchInput) return;

        // Client-side search functionality
        searchInput.addEventListener('keyup', function() {
            const searchTerm = this.value.toLowerCase().trim();
            const rows = document.querySelectorAll('.approval-row');
            let visibleCount = 0;
            let totalAmount = 0;

            rows.forEach(function(row) {
                // Get text content from all cells except the last one (actions)
                const cells = row.querySelectorAll('td');
                let rowText = '';
                
                for(let i = 0; i < cells.length - 1; i++) {
                    rowText += cells[i].textContent.toLowerCase() + ' ';
                }

                // Show/hide row based on search match
                if(rowText.includes(searchTerm)) {
                    row.style.display = '';
                    visibleCount++;
                    
                    // Get amount from the 7th column (index 6) and parse it
                    const amountCell = cells[6];
                    if(amountCell) {
                        const amountText = amountCell.textContent.trim().replace(/,/g, '');
                        const amount = parseFloat(amountText) || 0;
                        totalAmount += amount;
                    }
                } else {
                    row.style.display = 'none';
                }
            });

            // Update count
            const totalCountEl = document.getElementById('totalCount');
            if(totalCountEl) {
                totalCountEl.textContent = visibleCount;
            }

            // Update total amount in footer
            const totalAmountCell = document.querySelector('#approvalsTable tfoot td.text-end');
            if(totalAmountCell) {
                totalAmountCell.textContent = totalAmount.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            // Show/hide no results message
            const noRecords = document.getElementById('noRecords');
            const noSearchResults = document.getElementById('noSearchResults');
            const tfoot = document.querySelector('#approvalsTable tfoot');

            if(visibleCount === 0 && searchTerm !== '') {
                if(noRecords) noRecords.style.display = 'none';
                if(tfoot) tfoot.style.display = 'none';
                if(noSearchResults) noSearchResults.style.display = 'block';
            } else {
                if(noSearchResults) noSearchResults.style.display = 'none';
                if(tfoot) tfoot.style.display = visibleCount > 0 ? '' : 'none';
            }
        });

        // Clear search on ESC key
        searchInput.addEventListener('keydown', function(e) {
            if(e.key === 'Escape') {
                this.value = '';
                this.dispatchEvent(new Event('keyup'));
            }
        });
    });
</script>
@endsection