@extends('layouts.app')
@section('title', 'Pending Payments Report')
@section('page_title', 'Pending Payments')
@section('content')
<div class="page-heading">
    <div class="mobile-page-title"><h2>Pending Payments</h2><small>{{ number_format($sales->total()) }} outstanding sale{{ $sales->total() === 1 ? '' : 's' }}</small></div>
    <div class="heading-actions">
        <x-export-choice route-name="sales.export.csv"
            :current="['report_context'=>'pending','payment_status'=>'pending','search'=>$search,'date_from'=>$dateFrom,'date_to'=>$dateTo]"
            :full="['report_context'=>'pending','payment_status'=>'pending']" />
        <a class="btn btn-secondary" href="{{ route('reports.index') }}">Back to Reports</a>
    </div>
</div>

<div class="card filter-card mobile-collapsible-filter">
    <button class="mobile-filter-toggle" type="button" data-mobile-filter-toggle aria-controls="pendingPaymentsFilter" aria-expanded="false"><span><strong>Filters</strong><small>Customer, invoice and optional dates</small></span><b aria-hidden="true">+</b></button>
    <form method="GET" action="{{ route('reports.pending-payments') }}" class="report-filter-form pending-payment-filter" id="pendingPaymentsFilter">
        <div><label>Search</label><input name="search" value="{{ $search }}" placeholder="Invoice, customer or phone..."></div>
        <div><label>Date From <small>(Optional)</small></label><input type="date" name="date_from" value="{{ $dateFrom }}"></div>
        <div><label>Date To <small>(Optional)</small></label><input type="date" name="date_to" value="{{ $dateTo }}"></div>
        <div class="report-filter-action"><button class="btn" type="submit">View Report</button><a class="btn-tertiary" href="{{ route('reports.pending-payments') }}">Clear</a></div>
    </form>
</div>

<div class="dashboard-top three pending-report-stats">
    <x-stat-card label="Pending Sales" :value="number_format($sales->total())" tone="orange" icon="sales" />
    <x-stat-card label="Balance Due" :value="'TZS '.tzs_amount($metrics['balance'])" tone="red" icon="expense" />
    <x-stat-card label="Partially Paid" :value="number_format($metrics['partial'])" tone="blue" icon="report" />
</div>

<div class="card table-card pending-report-card">
    <div class="table-scroll desktop-record-table"><table class="data-table pending-payments-table">
        <thead><tr><th>Sale</th><th>Customer</th><th>Date</th><th>Cashier</th><th>Total</th><th>Paid</th><th>Balance Due</th><th>Action</th></tr></thead>
        <tbody>
        @forelse($sales as $sale)
            <tr>
                <td><strong>#{{ $sale->sale_number }}</strong><small class="payment-customer-inline">{{ $sale->paymentProgressLabel() }}</small></td>
                <td><strong>{{ $sale->customer_name ?: 'Not provided' }}</strong><small class="payment-customer-inline">{{ $sale->customer_phone ?: 'No phone number' }}</small></td>
                <td>{{ $sale->completed_at?->format('d M Y') }}<small class="payment-customer-inline">{{ $sale->completed_at?->format('H:i') }}</small></td>
                <td>{{ $sale->user?->displayName() ?? 'Unknown' }}</td>
                <td>TZS {{ tzs_amount($sale->netTotal()) }}</td>
                <td>TZS {{ tzs_amount($sale->paidAmount()) }}</td>
                <td><strong class="pending-balance-value">TZS {{ tzs_amount($sale->balanceDue()) }}</strong></td>
                <td><a class="btn btn-small" href="{{ route('sales.show', $sale) }}#payment-collection">View</a></td>
            </tr>
        @empty
            <tr><td colspan="8" class="empty-cell">No pending payments match these filters.</td></tr>
        @endforelse
        </tbody>
    </table></div>

    <div class="mobile-record-list">
        @forelse($sales as $sale)
            <article class="mobile-record-card mobile-data-card pending-payment-record">
                <div class="mobile-data-visual mobile-data-visual--sale" aria-hidden="true">P</div>
                <div class="mobile-record-head mobile-data-head"><div><h3>#{{ $sale->sale_number }}</h3><small>{{ $sale->completed_at?->format('d M Y, H:i') }}</small></div><span class="status-pill status-warning">{{ $sale->paymentProgressLabel() }}</span></div>
                <div class="mobile-data-body">
                    <div class="mobile-data-keyline"><span>Balance Due</span><strong class="pending-balance-value">TZS {{ tzs_amount($sale->balanceDue()) }}</strong></div>
                    <div class="mobile-data-support"><span><b>Customer:</b> {{ $sale->customer_name ?: 'Not provided' }}</span>@if($sale->customer_phone)<span><b>Phone:</b> {{ $sale->customer_phone }}</span>@endif<span><b>Paid:</b> TZS {{ tzs_amount($sale->paidAmount()) }}</span><span><b>Total:</b> TZS {{ tzs_amount($sale->netTotal()) }}</span></div>
                </div>
                <div class="mobile-data-actions"><a class="btn btn-small mobile-primary-action" href="{{ route('sales.show', $sale) }}#payment-collection">View</a></div>
            </article>
        @empty
            <div class="empty-state-professional"><div class="empty-icon">✓</div><h3>No pending payments</h3><p>Every recorded sale is currently settled.</p></div>
        @endforelse
    </div>
    <div class="table-footer"><span>Showing {{ $sales->firstItem() ?? 0 }} to {{ $sales->lastItem() ?? 0 }} of {{ $sales->total() }}</span>{{ $sales->links() }}</div>
</div>
@endsection