{{-- resources/views/sale/bills/print-invoice-smart.blade.php --}}
@extends('master.app')
@section('title', 'Invoice Print')

@section('pageCSS')
    <style>
        /* ====== PRINT SAFE + PROFESSIONAL LAYOUT ====== */
        :root{
            --ink:#0f172a;
            --muted:#64748b;
            --line:#e5e7eb;
            --soft:#f8fafc;
            --brand:#0ea5e9;
        }

        .invoice-wrap{
            max-width: 920px;
            margin: 0 auto;
        }

        .no-print{ display:block; }
        @media print{
            .no-print{ display:none !important; }
            .app-content{ padding:0 !important; }
            .invoice-card{ box-shadow:none !important; border:1px solid #111827 !important; }
            body{ background:#fff !important; }
            a[href]:after{ content:""; } /* prevent printing links */
        }

        .invoice-card{
            border:2px solid #0f172a;
            border-radius:18px;
            background:#fff;
            box-shadow:0 12px 30px rgba(2,6,23,.08);
            overflow:hidden;
            position:relative;
        }

        .watermark{
            position:absolute;
            inset:0;
            display:flex;
            align-items:center;
            justify-content:center;
            pointer-events:none;
            opacity:.04;
            font-size:80px;
            font-weight:800;
            transform:rotate(-18deg);
            color:#0f172a;
        }

        .topbar{
            padding:18px 18px 12px;
            background:linear-gradient(135deg,#0b1220,#111827);
            color:#fff;
            border-bottom:3px solid #0ea5e9;
        }

        .topbar .brandline{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }

        .brand-left{
            display:flex;
            align-items:center;
            gap:12px;
        }

        .brand-logo{
            width:56px;height:56px;
            border-radius:14px;
            background:#fff;
            padding:6px;
            object-fit:contain;
        }

        .brand-title{
            line-height:1.1;
        }
        .brand-title h4{
            margin:0;
            font-weight:800;
            letter-spacing:.2px;
        }
        .brand-title small{
            color:rgba(255,255,255,.8);
        }

        .actions{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }

        .btn-soft{
            border:1px solid rgba(255,255,255,.22);
            background:rgba(255,255,255,.08);
            color:#fff;
            padding:.45rem .75rem;
            border-radius:999px;
            font-size:.9rem;
            transition:.15s ease;
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            text-decoration:none;
        }
        .btn-soft:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); color:#fff; }

        .content{
            padding:18px;
        }

        .pill{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.25rem .6rem;
            border-radius:999px;
            background:rgba(15,23,42,.06);
            color:var(--ink);
            font-size:.88rem;
        }

        .meta-row{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:14px;
            flex-wrap:wrap;
            margin-top:10px;
        }

        .box{
            border:1px solid var(--line);
            border-radius:14px;
            background:var(--soft);
            padding:12px;
        }

        .box h6{
            font-weight:800;
            margin:0 0 8px;
            color:var(--ink);
        }

        .kv{
            display:flex;
            justify-content:space-between;
            gap:10px;
            padding:.35rem 0;
            border-bottom:1px dashed #e2e8f0;
            font-size:.95rem;
        }
        .kv:last-child{ border-bottom:none; }
        .k{ color:var(--muted); }
        .v{ color:var(--ink); font-weight:700; }

        .barcode-box{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }

        .barcode-wrap{
            background:#fff;
            border:1px solid var(--line);
            border-radius:14px;
            padding:10px 12px;
        }

        .table-wrap{
            margin-top:14px;
            border:1px solid var(--line);
            border-radius:14px;
            overflow:hidden;
        }

        table.invoice-table{
            width:100%;
            border-collapse:collapse;
            font-size:.93rem;
        }

        table.invoice-table thead th{
            background:#0f172a;
            color:#fff;
            padding:10px;
            font-weight:800;
            text-align:left;
            white-space:nowrap;
        }

        table.invoice-table tbody td{
            padding:9px 10px;
            border-bottom:1px solid #eef2f7;
            vertical-align:top;
        }

        table.invoice-table tbody tr:nth-child(even){
            background:#fafafa;
        }

        .right{ text-align:right; }
        .center{ text-align:center; }

        .totals{
            margin-top:14px;
            display:grid;
            grid-template-columns: 1.2fr .8fr;
            gap:12px;
        }

        @media (max-width: 768px){
            .totals{ grid-template-columns: 1fr; }
        }

        .total-line{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            padding:.45rem 0;
            border-bottom:1px dashed #e2e8f0;
        }
        .total-line:last-child{ border-bottom:none; }

        .grand{
            font-size:1.05rem;
            font-weight:900;
            color:#0f172a;
        }

        .badge-pay{
            padding:.2rem .55rem;
            border-radius:999px;
            font-weight:800;
            font-size:.82rem;
            background:rgba(14,165,233,.12);
            color:#0369a1;
            border:1px solid rgba(14,165,233,.25);
        }

        .footer{
            padding:14px 18px;
            border-top:1px solid var(--line);
            background:#fff;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
        }

        .oomclick{
            font-size:.9rem;
            color:var(--muted);
        }
        .oomclick b{ color:var(--ink); }

        .graphic-bar{
            height:6px;
            background:linear-gradient(90deg,#0ea5e9,#22c55e,#f59e0b,#ef4444);
            border-radius:999px;
            width:220px;
        }

        /* small note */
        .note{
            margin-top:10px;
            font-size:.86rem;
            color:var(--muted);
        }
    </style>
@endsection

@section('body')
@php
    // ===== Safe defaults (no bugs if controller forgets) =====
    $currencyTitle = optional($bill->currency)->title_en ?? '';
    $invoiceBalance = (float)($bill->final_amount ?? 0) - (float)($bill->received ?? 0);

    // previous_balance + current_balance (recommended to be calculated in controller)
    $previous_balance = $previous_balance ?? 0;
    $current_balance  = $current_balance  ?? ($previous_balance + $invoiceBalance);

    // Payment label fixed (your old view had cash/bank swapped)
    $payLabel = 'Other';
    if(($bill->transaction_id ?? null) == 1) $payLabel = 'Cash';
    elseif(($bill->transaction_id ?? null) == 2) $payLabel = 'Bank';
    elseif(($bill->transaction_id ?? null) == 3) $payLabel = 'Sarafi';
    elseif(($bill->transaction_id ?? null) == 4) $payLabel = 'Other';

    // Pacha Logo (change path to your real logo)
    // Option A: If you have a stored logo in DB like $blogo, use it:
    // $pachaLogo = isset($blogo) ? asset('storage/'.$blogo) : asset('images/pacha-logo.png');
    $pachaLogo = asset('images/pacha-logo.png'); // <-- ✅ replace if your path is different

    // OomClick info
    $oomPhone = '0704172665';
    $oomWhats = '0702172665';
    $oomEmail = 'info@oomclick.com';
    $oomAddr  = 'Kart-e-now, First Street';
@endphp

<main class="app-content">
    <div class="invoice-wrap">

        {{-- ACTION BUTTONS --}}
        <div class="no-print mb-3 d-flex justify-content-end gap-2 flex-wrap">
            <a class="btn btn-sm btn-secondary btn-rounded" href="javascript:void(0)" onclick="history.back()">
                <i class="fa fa-arrow-left me-1"></i> Back
            </a>

            <a class="btn btn-sm btn-info btn-rounded" href="{{ route('customer_bill.show', $bill->id) }}">
                <i class="fa fa-eye me-1"></i> Check
            </a>

            <a class="btn btn-sm btn-success btn-rounded" href="javascript:void(0)" onclick="window.print()">
                <i class="fa fa-print me-1"></i> Print
            </a>

            {{-- WhatsApp Share --}}
            <a class="btn btn-sm btn-outline-success btn-rounded" href="javascript:void(0)" id="waShareBtn">
                <i class="fa fa-whatsapp me-1"></i> Share WhatsApp
            </a>
        </div>

        <div class="invoice-card">
            <div class="watermark">PACHA</div>

            {{-- HEADER --}}
            <div class="topbar">
                <div class="brandline">
                    <div class="brand-left">
                        <img class="brand-logo" src="{{ $pachaLogo }}" alt="Pacha Logo"
                             onerror="this.style.display='none'">
                        <div class="brand-title">
                            <h4>Pacha Invoice</h4>
                            <small>Professional Invoice • International Style</small>
                        </div>
                    </div>

                    <div class="actions">
                        <span class="btn-soft">
                            <i class="fa fa-hashtag"></i> {{ $bill->invoice_number }}
                        </span>
                        <span class="btn-soft">
                            <i class="fa fa-calendar"></i> {{ $bill->invoice_date }}
                        </span>
                        <span class="btn-soft">
                            <i class="fa fa-credit-card"></i> <span class="badge-pay">{{ $payLabel }}</span>
                        </span>
                    </div>
                </div>
            </div>

            {{-- BODY --}}
            <div class="content">

                {{-- META --}}
                <div class="meta-row">
                    <div class="box" style="flex:1; min-width: 280px;">
                        <h6><i class="fa fa-user me-1"></i> Customer</h6>
                        <div class="kv"><span class="k">Name</span><span class="v">{{ $bill->customer->name ?? '-' }}</span></div>
                        <div class="kv"><span class="k">Phone</span><span class="v">{{ $bill->customer->phone ?? '-' }}</span></div>
                        <div class="kv"><span class="k">Address</span><span class="v">{{ $bill->customer->address ?? '-' }}</span></div>
                        <div class="kv"><span class="k">Received By</span><span class="v">{{ $bill->received_by ?? '-' }}</span></div>
                    </div>

                    <div class="box" style="flex:.9; min-width: 280px;">
                        <div class="barcode-box">
                            <div>
                                <h6><i class="fa fa-barcode me-1"></i> Invoice Barcode</h6>
                                <div class="pill">
                                    <i class="fa fa-file-text-o"></i>
                                    <span>{{ $bill->title ?? 'Invoice' }}</span>
                                </div>
                                <div class="note">Scan for quick reference (Invoice No).</div>
                            </div>

                            <div class="barcode-wrap">
                                <svg id="barcode"></svg>
                            </div>
                        </div>

                        <div class="mt-2 d-flex gap-2 flex-wrap">
                            <span class="pill"><i class="fa fa-money"></i> Currency: <b>{{ $currencyTitle }}</b></span>
                            @if(!empty($bill->ex_rate))
                                <span class="pill"><i class="fa fa-exchange"></i> ExRate: <b>{{ $bill->ex_rate }}</b></span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- ITEMS TABLE --}}
                <div class="table-wrap">
                    <table class="invoice-table">
                        <thead>
                        <tr>
                            <th style="width:55px;" class="center">#</th>
                            <th>Item</th>
                            @if($bill->type_id == 1)
                                <th>Sub/Cat</th>
                                <th>Weight</th>
                            @endif
                            <th>Unit</th>
                            <th class="right" style="width:90px;">Qty</th>
                            <th class="right" style="width:110px;">Price</th>
                            <th class="right" style="width:130px;">Total</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($items as $row)
                            <tr>
                                <td class="center">{{ $loop->iteration }}</td>

                                {{-- Item name / category --}}
                                <td>
                                    <div style="font-weight:800; color:#0f172a;">
                                        {{ optional($row->category)->title_en ?? '-' }}
                                    </div>
                                    @if(!empty($row->stock_id))
                                        <div style="font-size:.82rem; color:#64748b;">
                                            Stock ID: {{ $row->stock_id }}
                                        </div>
                                    @endif
                                </td>

                                @if($bill->type_id == 1)
                                    <td>{{ optional($row->sub_category)->title_en ?? '-' }}</td>
                                    <td>{{ optional($row->weight)->title_en ?? '-' }}</td>
                                @endif

                                <td>{{ optional($row->unit)->title_en ?? '-' }}</td>
                                <td class="right">{{ $row->qty ?? 0 }}</td>

                                <td class="right">
                                    @if($bill->type_id == 1)
                                        {{ number_format((float)($row->sale_price ?? 0), 2) }}
                                    @else
                                        {{ number_format((float)($row->spi ?? 0), 2) }}
                                    @endif
                                </td>

                                <td class="right"><b>{{ number_format((float)($row->total ?? 0), 2) }}</b></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="12" class="center" style="padding:18px;color:#64748b;">
                                    No items found.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- TOTALS + BALANCE --}}
                <div class="totals">
                    <div class="box">
                        <h6><i class="fa fa-info-circle me-1"></i> Balance Overview</h6>
                        <div class="total-line">
                            <span class="k">Previous Balance</span>
                            <span class="v">{{ $currencyTitle }} {{ number_format((float)$previous_balance, 2) }}</span>
                        </div>
                        <div class="total-line">
                            <span class="k">Current Invoice Balance</span>
                            <span class="v">{{ $currencyTitle }} {{ number_format((float)$invoiceBalance, 2) }}</span>
                        </div>
                        <div class="total-line">
                            <span class="k"><b>Current Total Balance</b></span>
                            <span class="v grand">{{ $currencyTitle }} {{ number_format((float)$current_balance, 2) }}</span>
                        </div>

                        <div class="note">
                            * Current Total Balance = Previous Balance + (Final Amount - Received)
                        </div>
                    </div>

                    <div class="box">
                        <h6><i class="fa fa-calculator me-1"></i> Invoice Totals</h6>
                        <div class="total-line">
                            <span class="k">Grand Total</span>
                            <span class="v">{{ $currencyTitle }} {{ number_format((float)($bill->grand_total ?? 0), 2) }}</span>
                        </div>
                        <div class="total-line">
                            <span class="k">Discount</span>
                            <span class="v">{{ $currencyTitle }} {{ number_format((float)($bill->discount ?? 0), 2) }}</span>
                        </div>
                        <div class="total-line">
                            <span class="k">Final Amount</span>
                            <span class="v grand">{{ $currencyTitle }} {{ number_format((float)($bill->final_amount ?? 0), 2) }}</span>
                        </div>
                        <div class="total-line">
                            <span class="k">Received</span>
                            <span class="v">{{ $currencyTitle }} {{ number_format((float)($bill->received ?? 0), 2) }}</span>
                        </div>
                        <div class="total-line">
                            <span class="k">Invoice Balance</span>
                            <span class="v">{{ $currencyTitle }} {{ number_format((float)$invoiceBalance, 2) }}</span>
                        </div>
                    </div>
                </div>

                <div class="note">
                    <b>Note:</b> Please verify this invoice before payment. Thanks for your business.
                </div>
            </div>

            {{-- FOOTER --}}
            <div class="footer">
                <div>
                    <div class="graphic-bar"></div>
                    <div class="oomclick mt-2">
                        Powered by <b>OOMCLICK Software Company</b><br>
                        Phone: <b>{{ $oomPhone }}</b> | WhatsApp: <b>{{ $oomWhats }}</b> | Email: <b>{{ $oomEmail }}</b><br>
                        Address: <b>{{ $oomAddr }}</b>
                    </div>
                </div>

                <div class="oomclick text-end">
                    <b>Thank You ✅</b><br>
                    <span style="color:#0f172a;font-weight:800;">Pacha</span> • Professional Invoice
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('pageJs')
    {{-- JsBarcode --}}
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    {{-- SweetAlert2 (optional but nice for share errors) --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // sidebar active
        $(".app-menu").removeClass("active");
        $("#nav_salei").addClass("active");
        $("#salei").addClass("is-expanded");
        $("#customer_bill").addClass("active");

        // ===== Barcode =====
        (function(){
            const inv = @json((string)($bill->invoice_number ?? ''));
            try{
                JsBarcode("#barcode", inv || "000000", {
                    format: "CODE128",
                    lineColor: "#0f172a",
                    width: 2,
                    height: 50,
                    displayValue: true,
                    fontSize: 12,
                    margin: 0
                });
            }catch(e){
                // ignore
            }
        })();

        // ===== WhatsApp Share =====
        const customerPhoneRaw = @json($bill->customer->phone ?? '');
        const invoiceNo = @json((string)($bill->invoice_number ?? ''));
        const invoiceDate = @json((string)($bill->invoice_date ?? ''));
        const currency = @json((string)(optional($bill->currency)->title_en ?? ''));
        const previousBalance = @json((float)($previous_balance ?? 0));
        const invoiceFinal = @json((float)($bill->final_amount ?? 0));
        const invoiceReceived = @json((float)($bill->received ?? 0));
        const invoiceBalance = @json((float)((($bill->final_amount ?? 0) - ($bill->received ?? 0))));
        const currentBalance = @json((float)($current_balance ?? 0));

        function onlyDigits(str){ return String(str || '').replace(/[^\d]/g,''); }

        // Afghanistan default normalize (07xxxxxxxx -> 93xxxxxxxxx)
        function normalizeWhatsAppPhone(raw){
            let p = String(raw || '').trim().replace(/\s+/g,'');
            p = p.replace(/^\+/, '');
            let d = onlyDigits(p);
            if(!d) return '';

            // 07xxxxxxxx
            if(d.startsWith('0') && d.length >= 10){
                d = '93' + d.substring(1);
            }

            // 7xxxxxxxx (9 digits)
            if(d.length === 9 && d.startsWith('7')){
                d = '93' + d;
            }

            return d;
        }

        function money(n){
            const x = Number(n || 0);
            return (isNaN(x) ? 0 : x).toFixed(2);
        }

        function buildWhatsAppMessage(){
            // ✅ As you asked: previous + current invoice amount is enough,
            // but I also add very useful details (still short & professional).
            let msg = '';
            msg += `Invoice Summary\n`;
            msg += `Invoice No: ${invoiceNo}\n`;
            msg += `Date: ${invoiceDate}\n\n`;
            msg += `Previous Balance: ${currency} ${money(previousBalance)}\n`;
            msg += `Invoice Amount: ${currency} ${money(invoiceFinal)}\n`;
            msg += `Received: ${currency} ${money(invoiceReceived)}\n`;
            msg += `Invoice Balance: ${currency} ${money(invoiceBalance)}\n`;
            msg += `Current Balance: ${currency} ${money(currentBalance)}\n\n`;
            msg += `Thanks.`;
            return msg;
        }

        document.getElementById('waShareBtn')?.addEventListener('click', function(){
            const phone = normalizeWhatsAppPhone(customerPhoneRaw);

            if(!phone){
                Swal.fire({
                    icon: 'warning',
                    title: 'Phone Missing',
                    text: 'Customer phone is empty or invalid. Please update customer phone number.'
                });
                return;
            }

            const text = encodeURIComponent(buildWhatsAppMessage());
            const url = `https://wa.me/${phone}?text=${text}`;
            window.open(url, '_blank');
        });
    </script>
@endsection