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

@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(255,193,7,.12), rgba(13,110,253,.07));">
                <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-hourglass-half me-1"></i> Supplier Aging Report
                        </h5>
                        <div class="text-muted small">
                            <i class="fa fa-info-circle me-1"></i>
                            Based on unpaid bills (balance &gt; 0) grouped by age as of selected date.
                        </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-3">
                        <label class="form-label small text-muted mb-1"><i class="fa fa-calendar me-1"></i> As Of Date</label>
                        <input type="date" name="as_of" value="{{ $asOf ?? date('Y-m-d') }}" class="form-control">
                    </div>

                    <div class="col-md-4">
                        <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-3">
                        <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-2 d-grid">
                        <button class="btn btn-warning" style="border-radius:12px;">
                            <i class="fa fa-filter me-1"></i> Apply
                        </button>
                    </div>
                </form>

                {{-- 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:140px;">Currency</th>
                                <th class="text-end">0 - 30</th>
                                <th class="text-end">31 - 60</th>
                                <th class="text-end">61 - 90</th>
                                <th class="text-end">90+</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $t1=0;$t2=0;$t3=0;$t4=0;$tAll=0;
                            @endphp

                            @forelse($rows as $i=>$r)
                                @php
                                    $t1 += (float)$r->d0_30;
                                    $t2 += (float)$r->d31_60;
                                    $t3 += (float)$r->d61_90;
                                    $t4 += (float)$r->d90_plus;
                                    $tAll += (float)$r->total_outstanding;
                                @endphp
                                <tr>
                                    <td class="fw-bold">{{ $i+1 }}</td>
                                    <td class="fw-bold">{{ $r->supplier_name }}</td>
                                    <td><span class="badge bg-secondary">{{ $r->currency_title }}</span></td>
                                    <td class="text-end">{{ number_format((float)$r->d0_30,2) }}</td>
                                    <td class="text-end">{{ number_format((float)$r->d31_60,2) }}</td>
                                    <td class="text-end">{{ number_format((float)$r->d61_90,2) }}</td>
                                    <td class="text-end text-danger fw-bold">{{ number_format((float)$r->d90_plus,2) }}</td>
                                    <td class="text-end fw-bold">{{ number_format((float)$r->total_outstanding,2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        <i class="fa fa-info-circle me-1"></i> No unpaid bills found.
                                    </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($t1,2) }}</th>
                                <th class="text-end">{{ number_format($t2,2) }}</th>
                                <th class="text-end">{{ number_format($t3,2) }}</th>
                                <th class="text-end">{{ number_format($t4,2) }}</th>
                                <th class="text-end">{{ number_format($tAll,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