@extends('layouts.app')

@section('content')
<style>
    .table thead th i {
        color: #28a745;
        font-size: 1rem;
        margin-right: 5px;
    }
    .table thead th {
        font-weight: 600;
        color: #495057;
    }
</style>
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">All Payment Received</h4>
        <div>
            <button type="button" class="btn btn-success mr-2" data-toggle="modal" data-target="#companySearchModal">
                <i class="fas fa-plus-circle"></i> Payment
            </button>
            <a href="{{ route('reseller.users.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <div class="modal fade" id="companySearchModal" tabindex="-1" role="dialog" aria-labelledby="companySearchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="companySearchModalLabel">Start a Bill Payment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="companySearchInput" class="small font-weight-bold text-uppercase text-muted">Search company</label>
                        <input type="text" id="companySearchInput" class="form-control" placeholder="Type company or customer name">
                        <small class="form-text text-muted mt-2">
                            Showing <span id="companySearchVisibleCount">{{ $customers->count() }}</span> of {{ $customers->count() }} companies
                        </small>
                    </div>
                    <div class="list-group" id="companySearchResults" style="max-height: 320px; overflow-y: auto;">
                        @forelse($customers as $customer)
                            @php
                                $displayName = $customer->company_name ?: $customer->name;
                                $secondaryName = ($customer->company_name && $customer->name && $customer->company_name !== $customer->name)
                                    ? $customer->name
                                    : null;
                                $searchIndex = strtolower(trim(($customer->company_name ?? '') . ' ' . ($customer->name ?? '')));
                            @endphp
                            <a href="{{ route('reseller.payments.create', ['customer_id' => $customer->id]) }}"
                               class="list-group-item list-group-item-action"
                               data-search="{{ $searchIndex }}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>{{ $displayName }}</span>
                                    @if($secondaryName)
                                        <small class="text-muted">{{ $secondaryName }}</small>
                                    @endif
                                </div>
                            </a>
                        @empty
                            <div class="list-group-item d-flex justify-content-between align-items-center text-muted">
                                No customers found.
                            </div>
                        @endforelse
                    </div>
                    <div id="companySearchEmpty" class="text-center text-muted py-4 d-none">
                        No matching company found. Try a different name.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <form method="get" class="card mb-3 p-2">
        <div class="form-row align-items-end">
            <div class="col-md-2 mb-1">
                <label class="small mb-1">Customer</label>
                <select name="customer" class="form-control">
                    <option value="">All</option>
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}" {{ request('customer')==$c->id?'selected':'' }}>{{ $c->company_name ?? $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 mb-1">
                <label class="small mb-1">Account Holder</label>
                <select name="account_holder" class="form-control">
                    <option value="">All</option>
                    @foreach($accountHolders as $ah)
                        <option value="{{ $ah->id }}" {{ request('account_holder')==$ah->id?'selected':'' }}>{{ $ah->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 mb-1">
                <label class="small mb-1">Bank Name</label>
                <select name="bank_name" class="form-control">
                    <option value="">All</option>
                    @foreach($bankNames as $bn)
                        <option value="{{ $bn }}" {{ request('bank_name')==$bn?'selected':'' }}>{{ $bn }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 mb-1">
                <label class="small mb-1">Account Name</label>
                <select name="account_name" class="form-control">
                    <option value="">All</option>
                    @foreach($accountNames as $an)
                        <option value="{{ $an }}" {{ request('account_name')==$an?'selected':'' }}>{{ $an }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 mb-1">
                <label class="small mb-1">From</label>
                <input type="date" name="from" value="{{ request('from', now()->startOfMonth()->format('Y-m-d')) }}" class="form-control" />
            </div>
            <div class="col-md-2 mb-1">
                <label class="small mb-1">To</label>
                <input type="date" name="to" value="{{ request('to', now()->endOfMonth()->format('Y-m-d')) }}" class="form-control" />
            </div>
            <div class="col-md-12 mb-1">
                <button class="btn btn-primary btn-sm mr-1" type="submit">
                    <i class="fas fa-filter"></i> Filter
                </button>
                <a class="btn btn-secondary btn-sm" href="{{ route('reseller.payments.index') }}">
                    <i class="fas fa-undo"></i> Reset
                </a>
            </div>
        </div>
    </form>

    <!-- Summary Card -->
    <div class="card mb-3" style="border: 2px solid #28a745; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);">
        <div class="card-header py-2" style="background-color: #28a745; color: white;">
            <h6 class="mb-0">
                <i class="fas fa-chart-bar"></i>
                @if(request()->hasAny(['customer', 'account_holder', 'bank_name', 'account_name']) || request('from') !== now()->startOfMonth()->format('Y-m-d') || request('to') !== now()->endOfMonth()->format('Y-m-d'))
                    Filtered Summary
                @else
                    Current Month Summary
                @endif
            </h6>
        </div>
        <div class="card-body py-2" style="background-color: #f8f9fa;">
            <div class="row text-center">
                <div class="col-md-6">
                    <div class="py-1" style="border-right: 1px solid #dee2e6;">
                        <h6 class="text-muted mb-1" style="font-size: 0.85rem;">Total Payments</h6>
                        <h4 class="mb-0" style="color: #17a2b8; font-size: 1.5rem;">
                            <i class="fas fa-list-ol"></i>
                            @if(request()->hasAny(['customer', 'account_holder', 'bank_name', 'account_name']) || request('from') !== now()->startOfMonth()->format('Y-m-d') || request('to') !== now()->endOfMonth()->format('Y-m-d'))
                                {{ $filteredStats['filtered_payments_count'] }}
                            @else
                                {{ $overallStats['total_payments_count'] }}
                            @endif
                        </h4>
                        <small class="text-muted" style="font-size: 0.75rem;">Records</small>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="py-1">
                        <h6 class="text-muted mb-1" style="font-size: 0.85rem;">Total Amount</h6>
                        <h4 class="mb-0" style="color: #28a745; font-size: 1.5rem;">
                            @if(request()->hasAny(['customer', 'account_holder', 'bank_name', 'account_name']) || request('from') !== now()->startOfMonth()->format('Y-m-d') || request('to') !== now()->endOfMonth()->format('Y-m-d'))
                                {{ number_format($filteredStats['filtered_total_amount'], 2) }}
                            @else
                                {{ number_format($overallStats['total_amount'], 2) }}
                            @endif
                        </h4>
                        <small class="text-muted" style="font-size: 0.75rem;">BDT</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="fas fa-list mr-1"></i>Payments List</h6>
            <div class="d-flex align-items-center">
                <label class="mb-0 mr-2" style="font-size: 0.9rem; color: #6c757d;">Show</label>
                <select id="perPageSelect" class="form-control form-control-sm" style="width: auto; min-width: 70px;">
                    <option value="10" {{ request('per_page', 25) == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ request('per_page', 25) == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ request('per_page', 25) == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page', 25) == 100 ? 'selected' : '' }}>100</option>
                    <option value="200" {{ request('per_page', 25) == 200 ? 'selected' : '' }}>200</option>
                </select>
                <label class="mb-0 ml-2" style="font-size: 0.9rem; color: #6c757d;">Entries</label>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped mb-0">
                <thead>
                    <tr>
                        <th><i class="fas fa-hashtag mr-1"></i>#</th>
                        <th><i class="fas fa-calendar-alt mr-1"></i>Transaction Date</th>
                        <th><i class="fas fa-file-invoice mr-1"></i>Invoice #</th>
                        <th><i class="fas fa-users mr-1"></i>Customer</th>
                        <th><i class="fas fa-user-tie mr-1"></i>Account Holder</th>
                        <th><i class="fas fa-university mr-1"></i>Bank Name</th>
                        <th><i class="fas fa-id-card mr-1"></i>Account Name</th>
                        <th><i class="fas fa-credit-card mr-1"></i>Account Number</th>
                        <th class="text-right"><i class="fas fa-money-bill-wave mr-1"></i>Amount</th>
                        <th><i class="fas fa-user-check mr-1"></i>Received By</th>
                        <th><i class="fas fa-cogs mr-1"></i>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments as $idx => $p)
                    <tr>
                        <td>{{ $payments->firstItem() + $idx }}</td>
                        <td>{{ optional($p->transaction_date)->format('Y-m-d') }}</td>
                        <td>{{ $p->salesInvoice->invoice_no ?? 'N/A' }}</td>
                        <td>{{ optional($p->salesInvoice->customer)->company_name ?? optional($p->salesInvoice->customer)->name }}</td>
                        <td>{{ optional($p->accountHolderInfo)->name ?? 'N/A' }}</td>
                        <td>{{ optional($p->bankAccountInfo)->bank_name }}</td>
                        <td>{{ optional($p->bankAccountInfo)->account_name }}</td>
                        <td>{{ optional($p->bankAccountInfo)->account_number }}</td>
                        <td class="text-right">BDT {{ number_format($p->amount, 2) }}</td>
                        <td>{{ $p->received_by }}</td>
                        <td>
                            <a href="{{ route('reseller.payments.show', $p) }}" class="btn btn-sm btn-outline-info">View</a>
                            <a href="{{ route('reseller.payments.edit', $p) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                            <form action="{{ route('reseller.payments.destroy', $p) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this payment?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="11" class="text-center text-muted">No payments found.</td></tr>
                    @endforelse
                </tbody>
                @if($payments->count() > 0)
                <tfoot class="bg-light font-weight-bold">
                    <tr>
                        <td colspan="8" class="text-right"><strong>Total (Current Page):</strong></td>
                        <td class="text-right">
                            <strong class="text-success" style="font-size: 1.1em;">
                                BDT {{ number_format($payments->sum('amount'), 2) }}
                            </strong>
                        </td>
                        <td colspan="2"></td>
                    </tr>
                    @if(request()->hasAny(['customer', 'account_holder', 'bank_name', 'account_name']) || request('from') !== now()->startOfMonth()->format('Y-m-d') || request('to') !== now()->endOfMonth()->format('Y-m-d'))
                    <tr class="bg-success text-white">
                        <td colspan="8" class="text-right"><strong>Grand Total (All Filtered):</strong></td>
                        <td class="text-right">
                            <strong style="font-size: 1.1em;">
                                BDT {{ number_format($filteredStats['filtered_total_amount'], 2) }}
                            </strong>
                        </td>
                        <td colspan="2"></td>
                    </tr>
                    @endif
                </tfoot>
                @endif
            </table>
        </div>
        <div class="card-body py-2">
            {{ $payments->withQueryString()->links() }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Handle per page change
    var perPageSelect = document.getElementById('perPageSelect');
    if (perPageSelect) {
        perPageSelect.addEventListener('change', function() {
            var perPage = this.value;
            var url = new URL(window.location.href);
            url.searchParams.set('per_page', perPage);
            // Reset to page 1 when changing per page
            url.searchParams.set('page', '1');
            window.location.href = url.toString();
        });
    }

    var searchInput = document.getElementById('companySearchInput');
    var resultsWrapper = document.getElementById('companySearchResults');
    if (!searchInput || !resultsWrapper) {
        return;
    }

    var items = Array.prototype.slice.call(resultsWrapper.querySelectorAll('[data-search]'));
    var emptyState = document.getElementById('companySearchEmpty');
    var visibleCountEl = document.getElementById('companySearchVisibleCount');

    function updateVisibility() {
        var term = searchInput.value.trim().toLowerCase();
        var visible = 0;

        items.forEach(function (item) {
            var searchIndex = (item.getAttribute('data-search') || '').toLowerCase();
            if (!term || searchIndex.indexOf(term) !== -1) {
                item.classList.remove('d-none');
                visible += 1;
            } else {
                item.classList.add('d-none');
            }
        });

        if (emptyState) {
            emptyState.classList.toggle('d-none', visible > 0);
        }

        if (visibleCountEl) {
            visibleCountEl.textContent = visible;
        }
    }

    updateVisibility();

    searchInput.addEventListener('input', updateVisibility);

    var modalEl = document.getElementById('companySearchModal');
    if (modalEl) {
        modalEl.addEventListener('shown.bs.modal', function () {
            searchInput.focus();
            searchInput.select();
        });

        modalEl.addEventListener('hidden.bs.modal', function () {
            searchInput.value = '';
            updateVisibility();
        });
    }
});
</script>
@endpush