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

@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-book me-1"></i> Supplier Ledger
                            </h5>
                            <div class="text-muted small">
                                <i class="fa fa-info-circle me-1"></i>
                                Debit = Purchases | Credit = Payments + Advances + Returns
                            </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">

                    {{-- Filter --}}
                    <form method="GET" 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-user-tie me-1"></i>
                                Supplier</label>
                            <select name="supplier_id" class="form-control select2" required>
                                <option value="">Choose Supplier</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-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
                            </button>
                            <a href="{{ route('purchase.reports.supplier_ledger') }}" class="btn btn-light border"
                                style="border-radius:12px;">
                                <i class="fa fa-undo me-1"></i>
                            </a>
                        </div>
                    </form>

                    {{-- Summary 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-flag me-1"></i> Opening Balance</div>
                                    <div class="fw-bold fs-5">{{ number_format((float) $openingBalance, 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-plus-circle me-1"></i> Period Debit
                                        (Purchases)</div>
                                    <div class="fw-bold fs-5">{{ number_format((float) $periodDebit, 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-minus-circle me-1"></i> Period Credit
                                    </div>
                                    <div class="fw-bold fs-5">{{ number_format((float) $periodCredit, 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> Closing Balance
                                    </div>
                                    <div
                                        class="fw-bold fs-5 {{ (float) $closingBalance > 0 ? 'text-danger' : 'text-success' }}">
                                        {{ number_format((float) $closingBalance, 2) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Ledger table --}}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="bg-light">
                                <tr>
                                    <th style="width:60px;">#</th>
                                    <th style="width:120px;">Date</th>
                                    <th style="width:130px;">Type</th>
                                    <th style="width:150px;">Number</th>
                                    <th>Title / Details</th>
                                    <th class="text-end" style="width:140px;">Debit</th>
                                    <th class="text-end" style="width:140px;">Credit</th>
                                    <th class="text-end" style="width:160px;">Running Balance</th>
                                    <th class="text-end" style="width:90px;">View</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Opening row --}}
                                @if (($supplierId ?? null) && ($currencyId ?? null))
                                    <tr class="table-secondary">
                                        <td class="fw-bold">—</td>
                                        <td>{{ $from ?? '—' }}</td>
                                        <td class="fw-bold"><i class="fa fa-flag me-1"></i> OPENING</td>
                                        <td>—</td>
                                        <td class="text-muted">Opening balance before selected period</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end fw-bold">{{ number_format((float) $openingBalance, 2) }}</td>
                                        <td class="text-end">—</td>
                                    </tr>
                                @endif

                                @forelse($rows as $i=>$r)
                                    @php
                                        $badge = 'secondary';
                                        $icon = 'fa-file';
                                        if ($r->t_type === 'PURCHASE') {
                                            $badge = 'primary';
                                            $icon = 'fa-shopping-cart';
                                        }
                                        if ($r->t_type === 'PAYMENT') {
                                            $badge = 'success';
                                            $icon = 'fa-hand-holding-usd';
                                        }
                                        if ($r->t_type === 'ADVANCE') {
                                            $badge = 'info';
                                            $icon = 'fa-arrow-circle-up';
                                        }
                                        if ($r->t_type === 'RETURN') {
                                            $badge = 'danger';
                                            $icon = 'fa-undo';
                                        }
                                    @endphp

                                    <tr>
                                        <td class="fw-bold">{{ $i + 1 }}</td>
                                        <td>{{ $r->t_date }}</td>
                                        <td>
                                            <span class="badge bg-{{ $badge }}">
                                                <i class="fa {{ $icon }} me-1"></i> {{ $r->t_type }}
                                            </span>
                                        </td>
                                        <td class="fw-bold">{{ $r->t_number }}</td>
                                        <td>{{ $r->t_title }}</td>
                                        <td class="text-end">{{ number_format((float) $r->debit, 2) }}</td>
                                        <td class="text-end">{{ number_format((float) $r->credit, 2) }}</td>
                                        <td
                                            class="text-end fw-bold {{ (float) $r->run_balance > 0 ? 'text-danger' : 'text-success' }}">
                                            {{ number_format((float) $r->run_balance, 2) }}
                                        </td>
                                        <td class="text-end">
                                            @if ($r->t_type === 'PURCHASE')
                                                <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                    href="{{ route('msupplier_bill.show', $r->ref_id) }}">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                            @elseif($r->t_type === 'PAYMENT')
                                                <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                    href="{{ route('msupplier_payment.show', $r->ref_id) }}">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                            @elseif($r->t_type === 'ADVANCE')
                                                <a class="btn btn-sm btn-light border" style="border-radius:10px;"
                                                    href="{{ route('msupplier_advance.edit', $r->ref_id) }}">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center text-muted py-4">
                                            <i class="fa fa-info-circle me-1"></i> No ledger rows found. Please apply
                                            filters.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>

                            @if ($rows->count() > 0)
                                <tfoot class="bg-light">
                                    <tr>
                                        <th colspan="5" class="text-end">Period Total</th>
                                        <th class="text-end">{{ number_format((float) $periodDebit, 2) }}</th>
                                        <th class="text-end">{{ number_format((float) $periodCredit, 2) }}</th>
                                        <th class="text-end">{{ number_format((float) $closingBalance, 2) }}</th>
                                        <th></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;
            }

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