<div>
    <x-layouts.app title="{{ __('Payment Collection Report') }}">
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Payment Collection Report') }}</h1>
                <p class="text-muted mb-0">{{ __('Sales payments and collections summary') }}</p>
            </div>
            <div class="d-flex gap-2">
                <button wire:click="export" class="btn btn-outline-success">
                    <i class="fas fa-file-excel me-2"></i>{{ __('Export') }}
                </button>
                <a href="{{ route('pdf.report.payment-collection', ['date_from' => $dateFrom, 'date_to' => $dateTo, 'payment_method_id' => $paymentMethodFilter]) }}" class="btn btn-outline-info">
                    <i class="fas fa-download me-2"></i>{{ __('Download PDF') }}
                </a>
                <a href="{{ route('pdf.report.payment-collection', ['date_from' => $dateFrom, 'date_to' => $dateTo, 'payment_method_id' => $paymentMethodFilter, 'preview' => true]) }}" target="_blank" class="btn btn-outline-secondary">
                    <i class="fas fa-print me-2"></i>{{ __('Print') }}
                </a>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="row g-3 mb-3">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body text-center">
                        <h6>{{ __('Total Sales') }}</h6>
                        <h3>{{ number_format($summary->total_sales) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body text-center">
                        <h6>{{ __('Total Collected') }}</h6>
                        <h3>{{ number_format($summary->total_collected, 2) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body text-center">
                        <h6>{{ __('Total Paid') }}</h6>
                        <h3>{{ number_format($summary->total_paid, 2) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-dark">
                    <div class="card-body text-center">
                        <h6>{{ __('Remaining') }}</h6>
                        <h3>{{ number_format($summary->total_remaining, 2) }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <!-- By Payment Method -->
        @if($byMethod->count() > 0)
            <div class="card mb-3">
                <div class="card-header"><h6 class="mb-0">{{ __('By Payment Method') }}</h6></div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach($byMethod as $method)
                            <div class="col-md-3">
                                <div class="border rounded p-3 text-center">
                                    <h6 class="text-muted">{{ $method->name }}</h6>
                                    <h4>{{ number_format($method->amount, 2) }} {{ $currency }}</h4>
                                    <small class="text-muted">{{ $method->count }} {{ __('transactions') }}</small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- Filters -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <input type="date" class="form-control" wire:model.live="dateFrom">
                    </div>
                    <div class="col-md-4">
                        <input type="date" class="form-control" wire:model.live="dateTo">
                    </div>
                    <div class="col-md-4">
                        <select class="form-select" wire:model.live="paymentMethodFilter">
                            <option value="">{{ __('All Methods') }}</option>
                            @foreach($paymentMethods as $pm)
                                <option value="{{ $pm->id }}">{{ $pm->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Invoice #') }}</th>
                                <th>{{ __('Customer') }}</th>
                                <th>{{ __('Payment Method') }}</th>
                                <th class="text-end">{{ __('Total') }}</th>
                                <th class="text-end">{{ __('Paid') }}</th>
                                <th class="text-end">{{ __('Remaining') }}</th>
                                <th>{{ __('Cashier') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($payments as $sale)
                                <tr>
                                    <td>{{ $sale->created_at->format('Y-m-d H:i') }}</td>
                                    <td><strong>{{ $sale->sale_number }}</strong></td>
                                    <td>{{ $sale->partner?->name ?? __('Walk-in') }}</td>
                                    <td>{{ $sale->paymentMethod?->name ?? '-' }}</td>
                                    <td class="text-end">{{ number_format($sale->total, 2) }}</td>
                                    <td class="text-end">{{ number_format($sale->paid, 2) }}</td>
                                    <td class="text-end">
                                        @if(($sale->total - $sale->paid) > 0)
                                            <span class="text-danger">{{ number_format($sale->total - $sale->paid, 2) }}</span>
                                        @else
                                            <span class="text-success">0.00</span>
                                        @endif
                                    </td>
                                    <td>{{ $sale->user?->name }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="8" class="text-center py-4 text-muted">{{ __('No payments found.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($payments->hasPages())
                <div class="card-footer">{{ $payments->links() }}</div>
            @endif
        </div>
    </x-layouts.app>
</div>
