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

@section('body')
<main class="app-content">
    <section>
        <div class="card shadow-sm border-0" style="border-radius:18px; overflow:hidden;">

            {{-- Header --}}
            <div class="p-3 p-md-4 border-bottom"
                 style="background:linear-gradient(135deg, rgba(13,110,253,.10), rgba(25,135,84,.06));">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h5 class="mb-1 fw-bold">
                            <i class="fa fa-balance-scale me-1"></i> Supplier Outstanding Report
                        </h5>
                        <div class="text-muted small">
                            <i class="fa fa-info-circle me-1"></i>
                            Outstanding = Purchases - Payments - Advances
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('msupplier_bill.index') }}" class="btn btn-sm btn-light border" style="border-radius:10px;">
                            <i class="fa fa-arrow-left me-1"></i> Back
                        </a>
                        <button onclick="window.print()" class="btn btn-sm btn-dark" style="border-radius:10px;">
                            <i class="fa fa-print me-1"></i> Print
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body p-3 p-md-4">
                {{-- Filters --}}
                <form class="row g-2 align-items-end mb-3">
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1"><i class="fa fa-calendar me-1"></i> From</label>
                        <input type="date" name="from" value="{{ $from ?? '' }}" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1"><i class="fa fa-calendar-check me-1"></i> To</label>
                        <input type="date" name="to" value="{{ $to ?? '' }}" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-muted mb-1"><i class="fa fa-user-tie me-1"></i> Supplier</label>
                        <select name="supplier_id" class="form-control select2">
                            <option value="">All Suppliers</option>
                            @foreach($suppliers as $s)
                                <option value="{{ $s->id }}" {{ (string)($supplierId ?? '')===(string)$s->id?'selected':'' }}>
                                    {{ $s->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted mb-1"><i class="fa fa-money me-1"></i> Currency</label>
                        <select name="currency_id" class="form-control select2">
                            <option value="">All Currencies</option>
                            @foreach($currencies as $c)
                                <option value="{{ $c->id }}" {{ (string)($currencyId ?? '')===(string)$c->id?'selected':'' }}>
                                    {{ $c->title_en ?? $c->title_ps ?? $c->title_dr }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3 d-flex gap-2">
                        <button class="btn btn-primary w-100" style="border-radius:12px;">
                            <i class="fa fa-filter me-1"></i> Apply Filter
                        </button>
                        <a href="{{ route('purchase.reports.supplier_outstanding') }}" class="btn btn-light border" style="border-radius:12px;">
                            <i class="fa fa-undo me-1"></i>
                        </a>
                    </div>
                </form>

                @php
                    $sumPurchase = 0; $sumPay=0; $sumAdv=0; $sumOut=0;
                    foreach($rows as $r){
                        $sumPurchase += (float)$r->total_purchase;
                        $sumPay += (float)$r->total_payment;
                        $sumAdv += (float)$r->total_advance;
                        $sumOut += (float)$r->outstanding;
                    }
                @endphp

                {{-- KPI Cards --}}
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-body">
                                <div class="text-muted small"><i class="fa fa-shopping-cart me-1"></i> Total Purchases</div>
                                <div class="fw-bold fs-5">{{ number_format($sumPurchase,2) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-body">
                                <div class="text-muted small"><i class="fa fa-hand-holding-usd me-1"></i> Total Payments</div>
                                <div class="fw-bold fs-5">{{ number_format($sumPay,2) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-body">
                                <div class="text-muted small"><i class="fa fa-arrow-circle-up me-1"></i> Total Advances</div>
                                <div class="fw-bold fs-5">{{ number_format($sumAdv,2) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm" style="border-radius:16px;">
                            <div class="card-body">
                                <div class="text-muted small"><i class="fa fa-balance-scale me-1"></i> Outstanding</div>
                                <div class="fw-bold fs-5">{{ number_format($sumOut,2) }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="bg-light">
                            <tr>
                                <th style="width:60px;">#</th>
                                <th>Supplier</th>
                                <th style="width:130px;">Currency</th>
                                <th class="text-end">Purchases</th>
                                <th class="text-end">Payments</th>
                                <th class="text-end">Advances</th>
                                <th class="text-end">Outstanding</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($rows as $i=>$r)
                                <tr>
                                    <td class="fw-bold">{{ $i+1 }}</td>
                                    <td>
                                        <div class="fw-bold">{{ $r->supplier_name }}</div>
                                        <div class="small text-muted">Supplier ID: {{ $r->supplier_id }}</div>
                                    </td>
                                    <td><span class="badge bg-secondary">{{ $r->currency_title }}</span></td>
                                    <td class="text-end">{{ number_format((float)$r->total_purchase,2) }}</td>
                                    <td class="text-end">{{ number_format((float)$r->total_payment,2) }}</td>
                                    <td class="text-end">{{ number_format((float)$r->total_advance,2) }}</td>
                                    <td class="text-end fw-bold {{ ((float)$r->outstanding)>0 ? 'text-danger' : 'text-success' }}">
                                        {{ number_format((float)$r->outstanding,2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="fa fa-info-circle me-1"></i> No data found for selected filters.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if(count($rows)>0)
                        <tfoot class="bg-light">
                            <tr>
                                <th colspan="3" class="text-end">Total</th>
                                <th class="text-end">{{ number_format($sumPurchase,2) }}</th>
                                <th class="text-end">{{ number_format($sumPay,2) }}</th>
                                <th class="text-end">{{ number_format($sumAdv,2) }}</th>
                                <th class="text-end">{{ number_format($sumOut,2) }}</th>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                </div>

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

@section('pageJs')
<script>
    $(".app-menu").removeClass("active");
    $("#nav_purchase1").addClass("active");
    $("#purchasei").addClass("is-expanded");
</script>

<style>
@media print{
    .app-header, .app-sidebar, .app-nav, .btn, form, .select2, .modal { display:none !important; }
    main.app-content{ margin:0 !important; padding:0 !important; }
    .card{ box-shadow:none !important; border:1px solid #ddd !important; }
}
</style>
@endsection