@extends('layouts.app')
@section('customcss')
<style>
.table-warning {
    background-color: #fff3cd !important;
}
/* DataTables custom styling */
.dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
}
.dataTables_wrapper .dataTables_filter input {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
/* Quick filter active state */
.quick-filter.active {
    background-color: var(--bs-primary);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}
</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>{{ $fund->name }}</h2>
                    <p class="text-muted mb-0">{{ $fund->description }}</p>
                    <small class="text-muted">Custodian: {{ $fund->custodian->name }}</small>
                </div>
                <div>
                    <a href="{{ route('petty-cash.add-transaction', $fund) }}" class="btn btn-success">
                        <i class="fas fa-plus"></i> Add Transaction
                    </a>
                    @can('edit-petty-cash-fund')
                        <a href="{{ route('petty-cash.edit', $fund) }}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit Fund
                        </a>
                    @endcan
                    @can('reconcile-petty-cash')
                        <a href="{{ route('petty-cash.reconcile', $fund) }}" class="btn btn-warning">
                            <i class="fas fa-balance-scale"></i> Reconcile
                        </a>
                    @endcan
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-tools"></i> Tools
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('petty-cash.diagnostics', $fund) }}">Diagnostics</a></li>
                            <li><a class="dropdown-item" href="{{ route('petty-cash.verify-integrity', $fund) }}">Verify Integrity</a></li>
                            <li><a class="dropdown-item" href="{{ route('petty-cash.balance-history', $fund) }}">Balance History</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('petty-cash.auto-reconcile', $fund) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="dropdown-item" 
                                            onclick="return confirm('This will automatically fix the balance based on approved transactions. Continue?')">
                                        Auto-Fix Balance
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>
                    <a href="{{ route('petty-cash.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>
            </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($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Fund Summary Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Current Balance</h6>
                            <h2 class="mb-0 text-white">UGX {{ number_format($fund->current_balance, 2) }}</h2>
                            @if($fund->needsReconciliation())
                                <small class="text-white"><i class="fas fa-exclamation-triangle"></i> Needs reconciliation</small>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-secondary text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Initial Amount</h6>
                            <h2 class="mb-0 text-white">UGX {{ number_format($fund->initial_amount, 2) }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Total Expenses</h6>
                            <h2 class="mb-0 text-white">UGX {{ number_format($fund->total_expenses, 2) }}</h2>
                            <small>{{ $fund->expenses()->count() }} transactions</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <h6 class="text-white-50 mb-0">Replenishments</h6>
                            <h2 class="mb-0">UGX {{ number_format($fund->total_replenishments, 2) }}</h2>
                            <small>{{ $fund->replenishments()->count() }} transactions</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Stats -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <strong>Net Change:</strong> 
                                    <span class="badge bg-{{ $fund->net_change >= 0 ? 'success' : 'danger' }}">
                                        {{ $fund->net_change >= 0 ? '+' : '' }}UGX {{ number_format($fund->net_change, 2) }}
                                    </span>
                                </div>
                                <div class="col-md-3">
                                    <strong>Pending Approvals:</strong> 
                                    <span class="badge bg-warning">{{ $fund->pending_count }}</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>Approved:</strong> 
                                    <span class="badge bg-success">{{ $fund->approved_count }}</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>Utilization:</strong> 
                                    <span class="badge bg-info">{{ number_format($fund->utilization_percentage, 1) }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transactions Table -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-list"></i> Transactions
                        </h5>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filters Section -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="status-filter" class="form-label">
                                <i class="fas fa-filter"></i> Status
                            </label>
                            <select id="status-filter" class="form-select form-select-sm">
                                <option value="">All Statuses</option>
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="type-filter" class="form-label">
                                <i class="fas fa-filter"></i> Type
                            </label>
                            <select id="type-filter" class="form-select form-select-sm">
                                <option value="">All Types</option>
                                <option value="expense">Expense</option>
                                <option value="replenishment">Replenishment</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date-from-filter" class="form-label">
                                <i class="fas fa-calendar"></i> Date From
                            </label>
                            <input type="date" id="date-from-filter" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label for="date-to-filter" class="form-label">
                                <i class="fas fa-calendar"></i> Date To
                            </label>
                            <input type="date" id="date-to-filter" class="form-control form-control-sm">
                        </div>
                    </div>

                    <!-- Quick Filter Buttons -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-secondary quick-filter" data-filter="all">
                                    <i class="fas fa-list"></i> All
                                </button>
                                <button type="button" class="btn btn-outline-warning quick-filter" data-filter="pending">
                                    <i class="fas fa-clock"></i> Pending
                                </button>
                                <button type="button" class="btn btn-outline-success quick-filter" data-filter="approved">
                                    <i class="fas fa-check"></i> Approved
                                </button>
                                <button type="button" class="btn btn-outline-danger quick-filter" data-filter="rejected">
                                    <i class="fas fa-times"></i> Rejected
                                </button>
                                <button type="button" class="btn btn-outline-info quick-filter" data-filter="today">
                                    <i class="fas fa-calendar-day"></i> Today
                                </button>
                                <button type="button" class="btn btn-outline-info quick-filter" data-filter="this-week">
                                    <i class="fas fa-calendar-week"></i> This Week
                                </button>
                                <button type="button" class="btn btn-outline-info quick-filter" data-filter="this-month">
                                    <i class="fas fa-calendar-alt"></i> This Month
                                </button>
                                <button type="button" class="btn btn-outline-primary" id="clear-filters">
                                    <i class="fas fa-redo"></i> Clear Filters
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="transactions-table" class="table table-hover table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                    <th>Expense Item</th>
                                    <th>Supplier</th>
                                    <th>Amount</th>
                                    <th>Balance After</th>
                                    <th>Status</th>
                                    <th>Created By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden form for approve/delete actions -->
<form id="action-form" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="_method" id="form-method" value="">
</form>
@endsection

@section('customjs')

<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#transactions-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('petty-cash.show', $fund) }}',
            type: 'GET',
            data: function(d) {
                // Add custom filter parameters
                d.status_filter = $('#status-filter').val();
                d.type_filter = $('#type-filter').val();
                d.date_from = $('#date-from-filter').val();
                d.date_to = $('#date-to-filter').val();
            },
            error: function(xhr, error, code) {
                console.error('DataTables error:', error, code);
                alert('Error loading data. Please refresh the page.');
            }
        },
        columns: [
            { data: 'sequence', name: 'approval_sequence', orderable: true, searchable: false },
            { data: 'date', name: 'transaction_date', orderable: true, searchable: false },
            { data: 'type', name: 'type', orderable: true, searchable: true },
            { data: 'description', name: 'description', orderable: false, searchable: true },
            { data: 'expense_item', name: 'expense_item', orderable: false, searchable: true },
            { data: 'supplier', name: 'supplier', orderable: false, searchable: true },
            { data: 'amount', name: 'amount', orderable: true, searchable: false },
            { data: 'balance_after', name: 'balance_after', orderable: false, searchable: false },
            { data: 'status', name: 'status', orderable: true, searchable: true },
            { data: 'created_by', name: 'created_by', orderable: false, searchable: true },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'desc']], // Default sort by approval_sequence descending
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
             '<"row"<"col-sm-12 col-md-6"B>>' +
             '<"row"<"col-sm-12"tr>>' +
             '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
        buttons: [
            {
                extend: 'copy',
                className: 'btn btn-sm btn-secondary',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                }
            },
            {
                extend: 'excel',
                className: 'btn btn-sm btn-success',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                }
            },
            {
                extend: 'pdf',
                className: 'btn btn-sm btn-danger',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                }
            },
            {
                extend: 'print',
                className: 'btn btn-sm btn-info',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
                }
            }
        ],
        language: {
            processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
            search: "_INPUT_",
            searchPlaceholder: "Search transactions...",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ transactions",
            infoEmpty: "No transactions available",
            infoFiltered: "(filtered from _MAX_ total transactions)",
            zeroRecords: "No matching transactions found",
            emptyTable: "No transactions available. <a href='{{ route('petty-cash.add-transaction', $fund) }}' class='btn btn-sm btn-primary mt-2'><i class='fas fa-plus'></i> Add Transaction</a>"
        },
        createdRow: function(row, data, dataIndex) {
            $(row).find('[data-bs-toggle="tooltip"]').tooltip();
        },
        drawCallback: function(settings) {
            $('[data-bs-toggle="tooltip"]').tooltip();
        }
    });

    // Status filter
    $('#status-filter').on('change', function() {
        table.draw();
    });

    // Type filter
    $('#type-filter').on('change', function() {
        table.draw();
    });

    // Date filters
    $('#date-from-filter, #date-to-filter').on('change', function() {
        table.draw();
    });

    // Quick filter buttons
    $('.quick-filter').on('click', function() {
        var filter = $(this).data('filter');
        
        // Remove active class from all buttons
        $('.quick-filter').removeClass('active');
        // Add active class to clicked button
        $(this).addClass('active');
        
        var today = new Date();
        var dateFrom = '';
        var dateTo = '';
        
        switch(filter) {
            case 'all':
                $('#status-filter').val('');
                $('#type-filter').val('');
                $('#date-from-filter').val('');
                $('#date-to-filter').val('');
                break;
            
            case 'pending':
                $('#status-filter').val('pending');
                break;
            
            case 'approved':
                $('#status-filter').val('approved');
                break;
            
            case 'rejected':
                $('#status-filter').val('rejected');
                break;
            
            case 'today':
                dateFrom = today.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                $('#date-from-filter').val(dateFrom);
                $('#date-to-filter').val(dateTo);
                break;
            
            case 'this-week':
                var startOfWeek = new Date(today);
                startOfWeek.setDate(today.getDate() - today.getDay());
                dateFrom = startOfWeek.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                $('#date-from-filter').val(dateFrom);
                $('#date-to-filter').val(dateTo);
                break;
            
            case 'this-month':
                var startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
                dateFrom = startOfMonth.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                $('#date-from-filter').val(dateFrom);
                $('#date-to-filter').val(dateTo);
                break;
        }
        
        table.draw();
    });

    // Clear all filters
    $('#clear-filters').on('click', function() {
        $('#status-filter').val('');
        $('#type-filter').val('');
        $('#date-from-filter').val('');
        $('#date-to-filter').val('');
        $('.quick-filter').removeClass('active');
        table.draw();
    });

    // Approve button handler
    $(document).on('click', '.approve-btn', function(e) {
        e.preventDefault();
        
        if (confirm('Approve this transaction?')) {
            var url = $(this).data('url');
            var form = $('#action-form');
            
            form.attr('action', url);
            $('#form-method').val('PATCH');
            form.submit();
        }
    });

    // Delete button handler
    $(document).on('click', '.delete-btn', function(e) {
        e.preventDefault();
        
        if (confirm('Are you sure you want to delete this transaction? This action cannot be undone.')) {
            var url = $(this).data('url');
            var form = $('#action-form');
            
            form.attr('action', url);
            $('#form-method').val('DELETE');
            form.submit();
        }
    });

    // Refresh table function
    window.refreshTransactionsTable = function() {
        table.ajax.reload(null, false);
    };
});
</script>
@endsection