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

@section('body')
    @php
        // Helpers
        $currency = $data->currency->title_en ?? '';
        $supplierName = $data->supplier->name ?? 'N/A';

        $previousDue = (float) ($tbalance + $data->amount); // previous due before new payment
        $newPayment  = (float) ($data->amount);
        $balance     = (float) ($tbalance);

        $printDate = date('Y-m-d H:i');
        $receiptUrl = route('msupplier_payment.receipt', $data->id);

        // WhatsApp message (short + clear)
        $waText = "Supplier Payment Receipt\n"
                . "Payment #: {$data->invoice_number}\n"
                . "Supplier: {$supplierName}\n"
                . "New Payment: " . number_format($newPayment,2) . " {$currency}\n"
                . "Balance: " . number_format($balance,2) . " {$currency}\n"
                . "Receipt: {$receiptUrl}";
        $waLink = "https://wa.me/?text=" . urlencode($waText);
    @endphp

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

                {{-- TOP BAR --}}
                <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 align-items-center justify-content-between gap-2">
                        <div>
                            <h5 class="mb-0 fw-bold">
                                <i class="fa fa-receipt me-1"></i> Payment Receipt
                            </h5>
                            <small class="text-muted">Supplier payment slip (print & share)</small>
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ $waLink }}" target="_blank"
                               class="btn btn-sm btn-success" style="border-radius:10px;">
                                <i class="fab fa-whatsapp me-1"></i> WhatsApp
                            </a>

                            <button type="button" class="btn btn-sm btn-outline-dark" style="border-radius:10px;"
                                onclick="copyReceiptText()">
                                <i class="fa fa-copy me-1"></i> Copy
                            </button>

                            <a href="{{ $receiptUrl }}" class="btn btn-sm btn-primary" style="border-radius:10px;">
                                <i class="fa fa-print me-1"></i> Print
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body p-3 p-md-4">

                    {{-- RECEIPT --}}
                    <div id="receiptArea" class="mx-auto" style="max-width: 920px;">

                        {{-- Letter head (shows in print too) --}}
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                            <div class="d-flex align-items-center gap-3">
                                @if(!empty($blogo))
                                    <img src="{{ asset('storage/' . $blogo) }}" alt="Logo"
                                         style="width:64px;height:64px;object-fit:contain;border-radius:12px;border:1px solid rgba(0,0,0,.08);padding:6px;background:#fff;">
                                @endif
                                <div>
                                    <div class="fw-bold" style="font-size:18px;">{{ $bname ?? 'Business Name' }}</div>
                                    <div class="text-muted small">Supplier Payment Slip</div>
                                    <div class="text-muted small">Print Date: {{ $printDate }}</div>
                                </div>
                            </div>

                            <div class="text-end">
                                <span class="badge bg-dark p-2" style="border-radius:10px;">
                                    Payment # {{ $data->invoice_number }}
                                </span>
                                <div class="text-muted small mt-1">Receipt Link: <span class="text-break">{{ $receiptUrl }}</span></div>
                            </div>
                        </div>

                        {{-- Summary Cards --}}
                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <div class="border bg-white p-3" style="border-radius:14px;">
                                    <div class="text-muted small">Supplier</div>
                                    <div class="fw-bold">{{ $supplierName }}</div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="border bg-white p-3" style="border-radius:14px;">
                                    <div class="text-muted small">New Payment</div>
                                    <div class="fw-bold">{{ number_format($newPayment, 2) }} <span class="text-muted">{{ $currency }}</span></div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="border bg-white p-3" style="border-radius:14px;">
                                    <div class="text-muted small">Balance</div>
                                    <div class="fw-bold">{{ number_format($balance, 2) }} <span class="text-muted">{{ $currency }}</span></div>
                                </div>
                            </div>
                        </div>

                        {{-- Details Table --}}
                        <div class="border bg-white" style="border-radius:14px; overflow:hidden;">
                            <div class="p-3 border-bottom bg-light">
                                <div class="fw-bold"><i class="fa fa-info-circle me-1"></i> Details</div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm mb-0 align-middle">
                                    <tbody>
                                        <tr>
                                            <th style="width:240px;">Payment Number</th>
                                            <td class="fw-bold">#{{ $data->invoice_number }}</td>
                                        </tr>
                                        <tr>
                                            <th>Supplier Name</th>
                                            <td class="fw-bold">{{ $supplierName }}</td>
                                        </tr>
                                        <tr>
                                            <th>Date</th>
                                            <td>{{ $data->date ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Previous Due</th>
                                            <td>{{ number_format($previousDue, 2) }} <span class="text-muted">{{ $currency }}</span></td>
                                        </tr>
                                        <tr>
                                            <th>New Payment Amount</th>
                                            <td class="fw-bold text-success">{{ number_format($newPayment, 2) }} <span class="text-muted">{{ $currency }}</span></td>
                                        </tr>
                                        <tr>
                                            <th>Remaining Balance</th>
                                            <td class="fw-bold">{{ number_format($balance, 2) }} <span class="text-muted">{{ $currency }}</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="p-3 border-top">
                                <div class="alert alert-warning mb-0" style="border-radius:12px;">
                                    <i class="fa fa-exclamation-triangle me-1"></i>
                                    Note: The above balance is only related to <strong>{{ $currency }}</strong>.
                                </div>
                            </div>
                        </div>

                        {{-- Signature / Footer --}}
                        <div class="row g-3 mt-3">
                            <div class="col-md-6">
                                <div class="border bg-white p-3" style="border-radius:14px; min-height:120px;">
                                    <div class="text-muted small mb-2">Prepared By</div>
                                    <div style="height:55px;border-bottom:1px dashed rgba(0,0,0,.25);"></div>
                                    <div class="text-muted small mt-2">Signature</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border bg-white p-3" style="border-radius:14px; min-height:120px;">
                                    <div class="text-muted small mb-2">Received By</div>
                                    <div style="height:55px;border-bottom:1px dashed rgba(0,0,0,.25);"></div>
                                    <div class="text-muted small mt-2">Signature</div>
                                </div>
                            </div>
                        </div>

                    </div>

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

@section('pageJs')
    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#supplier_add").addClass("active");

        function copyReceiptText() {
            const text =
`Supplier Payment Receipt
Payment #: {{ $data->invoice_number }}
Supplier: {{ $supplierName }}
Previous Due: {{ number_format($previousDue,2) }} {{ $currency }}
New Payment: {{ number_format($newPayment,2) }} {{ $currency }}
Balance: {{ number_format($balance,2) }} {{ $currency }}
Receipt: {{ $receiptUrl }}`;

            navigator.clipboard.writeText(text).then(() => {
                alert('Receipt copied ✅');
            }).catch(() => {
                alert('Copy failed. Please copy manually.');
            });
        }
    </script>

    {{-- Print styling --}}
    <style>
        @media print {
            .app-sidebar, .app-header, .app-menu, .modal, .btn, .pagination, .app-footer { display: none !important; }
            .app-content { padding: 0 !important; }
            .card { border: 0 !important; box-shadow: none !important; }
            body { background: #fff !important; }
            #receiptArea { max-width: 100% !important; }
        }
    </style>
@endsection