@extends('master.app')
@section('title', 'Customer Outstanding List')

@section('pageCSS')
<style>
    .kpi-card{
        border:1px solid #e9ecef;
        border-radius:14px;
        padding:12px 14px;
        background:#fff;
        box-shadow:0 2px 8px rgba(0,0,0,.06);
    }
    .kpi-label{ font-size:12px; color:#6c757d; }
    .kpi-value{ font-size:18px; font-weight:900; }

    .chip{
        display:inline-flex; align-items:center; gap:6px;
        padding:4px 10px; border-radius:999px;
        border:1px solid #e9ecef; background:#f8f9fa;
        font-size:12px;
    }

    a.sort-link{ text-decoration:none; color:inherit; }
    a.sort-link:hover{ text-decoration:underline; }

    @media print{
        .no-print{ display:none !important; }
        .card{ box-shadow:none !important; border:none !important; }
        body{ background:#fff !important; }
        table{ font-size:12px !important; }
        .table thead th{ background:#f2f2f2 !important; -webkit-print-color-adjust:exact; }
    }
</style>
@endsection

@section('body')
<main class="app-content">
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0">
                    <i class="fa fa-file-invoice-dollar me-1"></i>
                    Customer Outstanding List
                </h5>
                <small class="text-muted">Unpaid Invoices (Balance &gt; 0) | As of: <b>{{ $asOf }}</b></small>
            </div>

            <div class="no-print d-flex gap-2">
                <a href="{{ route('customer_outstanding.index') }}" class="btn btn-sm btn-secondary">
                    <i class="fa fa-rotate-left me-1"></i> Reset
                </a>

                <a href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['print'=>1])) }}"
                   class="btn btn-sm btn-outline-primary">
                    <i class="fa fa-print me-1"></i> Print View
                </a>

                <button type="button" onclick="window.print()" class="btn btn-sm btn-outline-dark">
                    <i class="fa fa-print me-1"></i> Print
                </button>
            </div>
        </div>

        <div class="card-body">

            {{-- Header for print --}}
            @if($isPrint)
                <div class="mb-3 text-center">
                    <h5 class="mb-0">{{ $info->business_name ?? 'Business' }}</h5>
                    <div class="text-muted">Customer Outstanding List</div>
                    <div class="text-muted">Print Date: {{ date('Y-m-d') }}</div>
                </div>
            @endif

            {{-- Filters --}}
            <form method="GET" action="{{ route('customer_outstanding.index') }}" class="row g-2 mb-3 no-print">
                <div class="col-md-3">
                    <label class="form-label">Customer</label>
                    <select name="customer_id" class="form-select">
                        <option value="all">All</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}" {{ request('customer_id') == $c->id ? 'selected' : '' }}>
                                {{ $c->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Currency</label>
                    <select name="currency_id" class="form-select">
                        <option value="all">All</option>
                        @foreach($currencies as $cur)
                            <option value="{{ $cur->id }}" {{ request('currency_id') == $cur->id ? 'selected' : '' }}>
                                {{ $cur->title_en }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">As Of Date</label>
                    <input type="date" name="as_of_date" value="{{ request('as_of_date', $asOf) }}" class="form-control">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Min Balance</label>
                    <input type="number" step="0.01" name="min_balance" value="{{ request('min_balance') }}" class="form-control" placeholder="0">
                </div>

                <div class="col-md-1">
                    <label class="form-label">Search By</label>
                    <select name="search_by" class="form-select">
                        <option value="invoice_number" {{ request('search_by')=='invoice_number'?'selected':'' }}>Inv No</option>
                        <option value="title" {{ request('search_by')=='title'?'selected':'' }}>Title</option>
                        <option value="customer" {{ request('search_by')=='customer'?'selected':'' }}>Customer</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="...">
                </div>

                <div class="col-md-12 d-flex gap-2 mt-2">
                    <button class="btn btn-primary">
                        <i class="fa fa-magnifying-glass me-1"></i> Search
                    </button>

                    <input type="hidden" name="sort" value="{{ request('sort', $sort) }}">
                    <input type="hidden" name="dir" value="{{ request('dir', $dir) }}">

                    <div class="ms-auto d-flex gap-2 flex-wrap">
                        <span class="chip"><i class="fa fa-list-check"></i> Count: <b>{{ $kpi->count }}</b></span>
                        <span class="chip"><i class="fa fa-money-bill-wave"></i> Invoice: <b>{{ number_format($kpi->invoice,2) }}</b></span>
                        <span class="chip"><i class="fa fa-hand-holding-dollar"></i> Paid: <b>{{ number_format($kpi->paid,2) }}</b></span>
                        <span class="chip"><i class="fa fa-triangle-exclamation"></i> Outstanding: <b>{{ number_format($kpi->total,2) }}</b></span>
                    </div>
                </div>
            </form>

            {{-- Totals by Currency --}}
            <div class="row g-2 mb-3">
                @foreach($totalsByCurrency as $t)
                    <div class="col-md-3">
                        <div class="kpi-card">
                            <div class="kpi-label">
                                <i class="fa fa-coins me-1"></i>{{ $t['currency'] }}
                                <span class="text-muted">({{ $t['count'] }})</span>
                            </div>
                            <div class="kpi-value">{{ number_format($t['total'],2) }}</div>
                        </div>
                    </div>
                @endforeach
            </div>

            @php
                $toggleDir = function($col) {
                    $currentSort = request('sort');
                    $currentDir  = request('dir','asc');
                    if($currentSort === $col){
                        return $currentDir === 'asc' ? 'desc' : 'asc';
                    }
                    return 'asc';
                };

                $sortIcon = function($col) use ($sort, $dir){
                    if($sort !== $col) return 'fa-sort text-muted';
                    return $dir === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
                };
            @endphp

            {{-- Table --}}
            <div class="table-responsive">
                <table class="table table-bordered table-sm align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width:60px;">#</th>

                            <th>
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'invoice_date','dir'=>$toggleDir('invoice_date')])) }}">
                                    Date <i class="fa {{ $sortIcon('invoice_date') }}"></i>
                                </a>
                            </th>

                            <th>
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'invoice_number','dir'=>$toggleDir('invoice_number')])) }}">
                                    Invoice # <i class="fa {{ $sortIcon('invoice_number') }}"></i>
                                </a>
                            </th>

                            <th>Title</th>

                            <th>
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'customer','dir'=>$toggleDir('customer')])) }}">
                                    Customer <i class="fa {{ $sortIcon('customer') }}"></i>
                                </a>
                            </th>

                            <th style="width:90px;">
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'currency','dir'=>$toggleDir('currency')])) }}">
                                    CUR <i class="fa {{ $sortIcon('currency') }}"></i>
                                </a>
                            </th>

                            <th class="text-end">
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'final_amount','dir'=>$toggleDir('final_amount')])) }}">
                                    Invoice <i class="fa {{ $sortIcon('final_amount') }}"></i>
                                </a>
                            </th>

                            <th class="text-end">
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'received','dir'=>$toggleDir('received')])) }}">
                                    Paid <i class="fa {{ $sortIcon('received') }}"></i>
                                </a>
                            </th>

                            <th class="text-end">
                                <a class="sort-link" href="{{ route('customer_outstanding.index', array_merge(request()->query(), ['sort'=>'balance','dir'=>$toggleDir('balance')])) }}">
                                    Balance <i class="fa {{ $sortIcon('balance') }}"></i>
                                </a>
                            </th>

                            <th class="text-center no-print" style="width:120px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rows as $i => $r)
                            <tr>
                                <td>
                                    @if(method_exists($rows,'firstItem'))
                                        {{ $rows->firstItem() + $i }}
                                    @else
                                        {{ $i + 1 }}
                                    @endif
                                </td>
                                <td>{{ $r->invoice_date }}</td>
                                <td class="fw-bold">{{ $r->invoice_number }}</td>
                                <td>{{ $r->title }}</td>
                                <td>{{ $r->customer->name ?? '-' }}</td>
                                <td>{{ $r->currency->title_en ?? '-' }}</td>

                                <td class="text-end text-success fw-bold">{{ number_format((float)$r->final_amount,2) }}</td>
                                <td class="text-end text-primary fw-bold">{{ number_format((float)$r->received,2) }}</td>
                                <td class="text-end text-danger fw-bold">{{ number_format((float)$r->balance,2) }}</td>

                                <td class="text-center no-print">
                                    <a href="{{ route('customer_bill.show', $r->id) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fa fa-eye me-1"></i> View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted">No outstanding invoices found</td>
                            </tr>
                        @endforelse
                    </tbody>

                    {{-- Footer totals --}}
                    <tfoot>
                        <tr>
                            <th colspan="6" class="text-end">Total</th>
                            <th class="text-end">{{ number_format((float)$rows->sum('final_amount'),2) }}</th>
                            <th class="text-end">{{ number_format((float)$rows->sum('received'),2) }}</th>
                            <th class="text-end">{{ number_format((float)$rows->sum('balance'),2) }}</th>
                            <th class="no-print"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

            {{-- Pagination --}}
            @if(! $isPrint)
                <div class="mt-2 no-print">
                   {{ $rows->links('pagination::bootstrap-4') }}
                </div>
            @endif

        </div>
    </div>
</main>
@endsection