@extends('master.app')
@section('title', 'Suppliers')

@section('body')
<main class="app-content">
    <section>
        <div class="card shadow-sm">
            <div class="card-body p-0">

                {{-- TOP HEADER --}}
                <div class="p-4 border-bottom" style="background:#fff; color:#111;">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div>
                            <h4 class="mb-1" style="color:#111;">
                                {{ $supplier->name ?? 'Supplier' }}
                            </h4>
                            <div class="text-muted small">
                                <span class="me-3"><i class="bi bi-telephone"></i> {{ $supplier->phone ?? '-' }}</span>
                                <span class="me-3"><i class="bi bi-envelope"></i> {{ $supplier->email ?? '-' }}</span>
                                <span><i class="bi bi-geo-alt"></i> {{ $supplier->address ?? '-' }}</span>
                            </div>
                        </div>

                        {{-- QUICK ACTION --}}

                    </div>
                </div>

                {{-- REPORT AREA (ONLY THIS WILL PRINT) --}}
                <div id="printArea" class="p-4" style="color:#111;">

                    {{-- LETTER HEAD (PRINT ONLY) --}}
                    <div id="letter_head" class="text-center mb-4 d-none-print">
                        <h4 class="mb-2">{{ $bname ?? config('app.name') }}</h4>

                        @if (!empty($blogo))
                            <img src="{{ asset('storage/'.$blogo) }}" alt="Logo" style="max-height:80px;">
                        @endif

                        <hr>
                    </div>

                    {{-- SUMMARY TABLE --}}
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="card border">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                    <div class="fw-bold" style="color:#111;">
                                        <i class="bi bi-graph-up"></i> Supplier Summary (By Currency)
                                    </div>
                                    <span class="badge bg-secondary">Auto Calculated</span>
                                </div>

                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm align-middle">
                                            <thead>
                                                <tr>
                                                    <th>Currency</th>
                                                    <th class="text-end">Total Purchase</th>
                                                    <th class="text-end">Payments</th>
                                                    <th class="text-end">Advance</th>
                                                    <th class="text-end">Paid (Pay+Adv)</th>
                                                    <th class="text-end">Balance</th>
                                                    <th class="text-end">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($currencies as $c)
                                                    @php
                                                        $s = $summary[$c->id] ?? ['purchase'=>0,'payment'=>0,'advance'=>0,'paid'=>0,'balance'=>0];
                                                        $bal = (float) $s['balance'];

                                                        // supplier logic:
                                                        // balance > 0 => Payable (we owe supplier)
                                                        // balance < 0 => Credit (supplier has extra/prepaid)
                                                        // balance == 0 => Settled
                                                        $statusText = $bal > 0 ? 'PAYABLE' : ($bal < 0 ? 'CREDIT' : 'SETTLED');
                                                        $badge = $bal > 0 ? 'bg-danger' : ($bal < 0 ? 'bg-success' : 'bg-secondary');
                                                    @endphp
                                                    <tr>
                                                        <td class="fw-semibold">{{ $c->title_ps ?? $c->title_en }}</td>

                                                        <td class="text-end">
                                                            <span class="badge bg-light text-dark border">
                                                                {{ number_format($s['purchase'], 2) }}
                                                            </span>
                                                        </td>

                                                        <td class="text-end">
                                                            <span class="badge bg-light text-dark border">
                                                                {{ number_format($s['payment'], 2) }}
                                                            </span>
                                                        </td>

                                                        <td class="text-end">
                                                            <span class="badge bg-light text-dark border">
                                                                {{ number_format($s['advance'], 2) }}
                                                            </span>
                                                        </td>

                                                        <td class="text-end">
                                                            <span class="badge bg-primary">
                                                                {{ number_format($s['paid'], 2) }}
                                                            </span>
                                                        </td>

                                                        <td class="text-end">
                                                            <span class="badge {{ $badge }}">
                                                                {{ number_format($bal, 2) }}
                                                            </span>
                                                        </td>

                                                        <td class="text-end">
                                                            <span class="badge {{ $badge }}">{{ $statusText }}</span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="small text-muted">
                                        Note: Balance = Purchase - (Payments + Advance)
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- CHARTS --}}
                        <div class="col-lg-7">
                            <div class="card border h-100">
                                <div class="card-header bg-white fw-bold" style="color:#111;">
                                    <i class="bi bi-bar-chart"></i> Purchases vs Paid (Per Currency)
                                </div>
                                <div class="card-body">
                                    <canvas id="barChart" height="120"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5">
                            <div class="card border h-100">
                                <div class="card-header bg-white fw-bold" style="color:#111;">
                                    <i class="bi bi-activity"></i> Balance (Per Currency)
                                </div>
                                <div class="card-body">
                                    <canvas id="balanceChart" height="120"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- FOOTER (PRINT ONLY) --}}
                    <div class="mt-4 d-none-print">
                        <hr>
                        <div class="d-flex justify-content-between small text-muted">
                            <div>Generated: {{ date('Y-m-d H:i') }}</div>
                            <div>Powered by OomClick Software Company</div>
                        </div>
                    </div>
                </div>

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

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

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<script>
    const labels = @json($chartLabels);
    const purchases = @json($chartPurchase);
    const paid = @json($chartPaid);
    const balances = @json($chartBalance);

    // Bar chart: Purchase vs Paid
    new Chart(document.getElementById('barChart'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                { label: 'Purchase', data: purchases },
                { label: 'Paid (Pay+Adv)', data: paid }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'top' } },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    // Balance chart
    new Chart(document.getElementById('balanceChart'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                { label: 'Balance', data: balances, tension: 0.25 }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'top' } },
            scales: {
                y: { beginAtZero: false }
            }
        }
    });

    // Print only report area
    function printSupplierReport() {
        const printContents = document.getElementById('printArea').innerHTML;

        const win = window.open('', '', 'height=900,width=1200');
        win.document.write(`
            <html>
            <head>
                <title>Supplier Report</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
                <style>
                    body { color:#111; }
                    .d-none-print { display:block; }
                    @media print {
                        .d-none-print { display:block; } /* keep letter head */
                        .btn, .app-sidebar, .app-header { display:none !important; }
                        .card { border:1px solid #ddd !important; }
                        .badge { border:1px solid #ddd !important; }
                    }
                </style>
            </head>
            <body class="p-4">
                ${printContents}
            </body>
            </html>
        `);

        win.document.close();
        win.focus();
        win.print();
        win.close();
    }
</script>

{{-- Print behavior inside main page (optional) --}}
<style>
    /* Only show letterhead when printing from the route/window if you ever use window.print() directly */
    #letter_head { display:none; }
    @media print {
        #letter_head { display:block !important; }
    }
</style>
@endsection