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

@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,.12), rgba(25,135,84,.08));">
                    <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 Balance Sheet
                            </h5>
                            <div class="text-muted small">
                                <i class="fa fa-info-circle me-1"></i>
                                Closing = Opening + Purchases − Payments − Advances − Returns
                            </div>
                        </div>
                        <div class="d-flex 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">

                    {{-- Filter --}}
                    <form method="GET" class="row g-2 align-items-end mb-3">
                        <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" {{ ($supplierId ?? 'all') == 'all' ? 'selected' : '' }}>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" required>
                                <option value="">Choose Currency</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">
                            <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-2 d-flex gap-2">
                            <button class="btn btn-primary w-100" style="border-radius:12px;">
                                <i class="fa fa-filter me-1"></i> Apply
                            </button>
                            <a href="{{ route('purchase.reports.supplier_balance_sheet') }}" class="btn btn-light border"
                                style="border-radius:12px;">
                                <i class="fa fa-undo"></i>
                            </a>
                        </div>

                        <div class="col-12 mt-2">
                            <label class="form-check form-switch m-0">
                                <input class="form-check-input" type="checkbox" name="show_zero" value="1"
                                    {{ (int) ($showZero ?? 0) === 1 ? 'checked' : '' }}>
                                <span class="form-check-label small text-muted">Show suppliers with zero balance</span>
                            </label>
                        </div>
                    </form>

                    {{-- Summary --}}
                    <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-flag me-1"></i> Total Opening</div>
                                    <div class="fw-bold fs-5">{{ number_format((float) ($totals['opening'] ?? 0), 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-shopping-cart me-1"></i> Total Purchases
                                    </div>
                                    <div class="fw-bold fs-5">{{ number_format((float) ($totals['purchase'] ?? 0), 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 Credits
                                    </div>
                                    <div class="fw-bold fs-5">
                                        {{ number_format((float) (($totals['payment'] ?? 0) + ($totals['advance'] ?? 0) + ($totals['return'] ?? 0)), 2) }}
                                    </div>
                                    <div class="small text-muted">Payments + Advances + Returns</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> Total Closing
                                    </div>
                                    <div
                                        class="fw-bold fs-5 {{ (float) ($totals['closing'] ?? 0) > 0 ? 'text-danger' : 'text-success' }}">
                                        {{ number_format((float) ($totals['closing'] ?? 0), 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 class="text-end" style="width:140px;">Opening</th>
                                    <th class="text-end" style="width:140px;">Purchases</th>
                                    <th class="text-end" style="width:140px;">Payments</th>
                                    <th class="text-end" style="width:140px;">Advances</th>
                                    <th class="text-end" style="width:140px;">Returns</th>
                                    <th class="text-end" style="width:160px;">Closing</th>
                                    <th class="text-end" style="width:120px;">Status</th>
                                    <th class="text-end" style="width:90px;">Ledger</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($rows as $i => $r)
                                    @php
                                        $statusText = 'Clear';
                                        $badge = 'secondary';
                                        if ($r->closing > 0) {
                                            $statusText = 'Payable (Due)';
                                            $badge = 'danger';
                                        } elseif ($r->closing < 0) {
                                            $statusText = 'Supplier Credit';
                                            $badge = 'success';
                                        }
                                    @endphp
                                    <tr>
                                        <td class="fw-bold">{{ $i + 1 }}</td>
                                        <td class="fw-bold">{{ $r->supplier }}</td>
                                        <td class="text-end">{{ number_format((float) $r->opening, 2) }}</td>
                                        <td class="text-end">{{ number_format((float) $r->purchase, 2) }}</td>
                                        <td class="text-end">{{ number_format((float) $r->payment, 2) }}</td>
                                        <td class="text-end">{{ number_format((float) $r->advance, 2) }}</td>
                                        <td class="text-end">{{ number_format((float) $r->return, 2) }}</td>
                                        <td
                                            class="text-end fw-bold {{ (float) $r->closing > 0 ? 'text-danger' : 'text-success' }}">
                                            {{ number_format((float) $r->closing, 2) }}
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-{{ $badge }}">
                                                <i class="fa fa-circle me-1"></i> {{ $statusText }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                href="{{ route('purchase.reports.supplier_ledger', ['supplier_id' => $r->supplier_id, 'currency_id' => $currencyId, 'from' => $from, 'to' => $to]) }}">
                                                <i class="fa fa-book"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted py-4">
                                            <i class="fa fa-info-circle me-1"></i> No data. Please select currency and
                                            apply filter.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>

                            @if ($rows->count() > 0)
                                <tfoot class="bg-light">
                                    <tr>
                                        <th colspan="2" class="text-end">Grand Total</th>
                                        <th class="text-end">{{ number_format((float) ($totals['opening'] ?? 0), 2) }}</th>
                                        <th class="text-end">{{ number_format((float) ($totals['purchase'] ?? 0), 2) }}</th>
                                        <th class="text-end">{{ number_format((float) ($totals['payment'] ?? 0), 2) }}</th>
                                        <th class="text-end">{{ number_format((float) ($totals['advance'] ?? 0), 2) }}</th>
                                        <th class="text-end">{{ number_format((float) ($totals['return'] ?? 0), 2) }}</th>
                                        <th class="text-end">{{ number_format((float) ($totals['closing'] ?? 0), 2) }}</th>
                                        <th colspan="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,
            form,
            .btn,
            .select2 {
                display: none !important;
            }

            main.app-content {
                margin: 0 !important;
                padding: 0 !important;
            }

            .card {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
            }

            table {
                font-size: 12px;
            }
        }
    </style>
@endsection