@extends('master.app')
@section('title', 'Retail Invoice')

@section('pageCSS')
<style>
    :root{
        --radius: 16px;
        --shadow: 0 10px 28px rgba(2, 6, 23, .06);
        --muted: #6b7280;
        --dark: #0f172a;
        --primary: #0d6efd;
    }

    .card-soft { border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
    .fade-in { animation: fadeIn .25s ease-in-out; }
    @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    .hero {
        border-radius: var(--radius);
        background: linear-gradient(135deg, #0d6efd, #4f46e5);
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .hero:before{
        content:"";
        position:absolute;
        width:280px;height:280px;border-radius:999px;
        background: rgba(255,255,255,.12);
        top:-110px; right:-110px;
        pointer-events:none;
    }

    .pill{
        padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.14);
        display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;
        color:#fff;
    }

    .kv{
        display:flex;align-items:center;justify-content:space-between;
        padding:.65rem .75rem; border-radius:12px;
        background:#f8fafc; border:1px solid #eef2f7;
        gap:12px;
    }
    .kv .k{ color: var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.45rem; }
    .kv .v{ font-weight:700; color: var(--dark); }

    .btn-rounded{ border-radius:999px; }
    .btn-soft{
        background: rgba(13,110,253,.10);
        border:0;
        color:#0b5ed7;
    }
    .btn-soft:hover{ background: rgba(13,110,253,.16); }

    .table thead th{ white-space:nowrap; background:#fff; }
    .table td{ vertical-align: middle; }

    .money{ font-variant-numeric: tabular-nums; }

    /* Print areas hidden on screen */
    .print-area { display:none; }

</style>
@endsection

@section('body')
<main class="app-content fade-in">
    <div class="container-fluid">

        {{-- ✅ HEADER HERO --}}
        <div class="card card-soft hero mb-3">
            <div class="card-body p-4 position-relative">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h4 class="fw-bold mb-1">
                            <i class="fas fa-receipt me-2"></i> Retail Invoice
                        </h4>
                        <div class="text-white-50 small">
                            Invoice # <b>{{ $bill->invoice_number }}</b> • Date: <b>{{ $bill->invoice_date }}</b>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <span class="pill">
                            <i class="fas fa-user"></i> {{ $bill->customer_name }}
                        </span>
                        <span class="pill">
                            <i class="fas fa-phone"></i> {{ $bill->customer_phone }}
                        </span>

                        <a href="{{ route('customer_retail_bill.index') }}" class="btn btn-light btn-sm btn-rounded px-3">
                            <i class="fas fa-arrow-left me-1"></i> Back
                        </a>

                        {{-- A4 Print --}}
                        <button type="button" onclick="printInvoice('printA4')" class="btn btn-warning btn-sm btn-rounded px-3">
                            <i class="fas fa-print me-1"></i> Print A4
                        </button>

                        {{-- Small 80mm Print --}}
                        <button type="button" onclick="printInvoice('print80')" class="btn btn-dark btn-sm btn-rounded px-3">
                            <i class="fas fa-receipt me-1"></i> Small Printer
                        </button>
                    </div>
                </div>
            </div>
        </div>


        {{-- ✅ SUMMARY + TOTALS --}}
        @php
            $cur = $bill->currency->title_en ?? '';
            $itemsCount = ($bill->type_id == 1) ? $bill_items->sum('qty') : $bill_items->count();
            $balance = $bill->balance ?? max(($bill->final_amount ?? 0) - ($bill->received ?? 0), 0);
        @endphp

        <div class="row g-3 mb-3">
            <div class="col-lg-4">
                <div class="card card-soft">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h5 class="fw-bold mb-0"><i class="fas fa-clipboard-list me-2"></i> Summary</h5>
                            <span class="badge bg-primary">
                                {{ $bill->type_id == 1 ? 'From Stock' : 'Without Stock' }}
                            </span>
                        </div>

                        <div class="d-grid gap-2">
                            <div class="kv">
                                <div class="k"><i class="fas fa-user"></i> Customer</div>
                                <div class="v">{{ $bill->customer_name }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-phone"></i> Phone</div>
                                <div class="v">{{ $bill->customer_phone }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-hashtag"></i> Invoice No</div>
                                <div class="v">{{ $bill->invoice_number }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-calendar"></i> Date</div>
                                <div class="v">{{ $bill->invoice_date }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-user-check"></i> Received By</div>
                                <div class="v">{{ $bill->received_by ?? '-' }}</div>
                            </div>
                            <div class="kv">
                                <div class="k"><i class="fas fa-layer-group"></i> Items</div>
                                <div class="v">{{ $itemsCount }}</div>
                            </div>
                        </div>

                        @if(!empty($bill->details))
                            <hr>
                            <div class="small text-muted">
                                <i class="fas fa-note-sticky me-1"></i> {{ $bill->details }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card card-soft">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-bold mb-0"><i class="fas fa-calculator me-2"></i> Financial Overview</h5>
                            <span class="text-muted small">
                                <i class="fas fa-shield-alt me-1"></i> International invoice style
                            </span>
                        </div>

                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-sack-dollar"></i> Grand</div>
                                    <div class="v money">{{ $cur }} {{ number_format($bill->grand_total ?? 0, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-percent"></i> Discount</div>
                                    <div class="v money">{{ $cur }} {{ number_format($bill->discount ?? 0, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-coins"></i> Total</div>
                                    <div class="v money">{{ $cur }} {{ number_format($bill->final_amount ?? 0, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="kv">
                                    <div class="k"><i class="fas fa-hand-holding-dollar"></i> Received</div>
                                    <div class="v money">{{ $cur }} {{ number_format($bill->received ?? 0, 2) }}</div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="kv" style="background:#eef2ff;border-color:#dbeafe;">
                                    <div class="k" style="color:#1e40af;"><i class="fas fa-wallet"></i> Balance</div>
                                    <div class="v money" style="color:#1e40af;font-size:1.1rem;">
                                        {{ $cur }} {{ number_format($balance, 2) }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if(($bill->currency_id ?? 1) != 1 && !empty($bill->ex_rate))
                            <div class="mt-3 small text-muted">
                                <i class="fas fa-exchange-alt me-1"></i>
                                Exchange Rate: <b>{{ $bill->ex_rate }}</b>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>


        {{-- ✅ ITEMS TABLE --}}
        <div class="card card-soft">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold mb-0"><i class="fas fa-boxes-stacked me-2"></i> Items</h5>
                    <div class="text-muted small">
                        <i class="fas fa-circle-info me-1"></i>
                        Use print buttons for A4 or small thermal receipt.
                    </div>
                </div>

                <div class="table-responsive">
                    @if($bill->type_id == 1)
                        <table class="table table-striped table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Sub Category</th>
                                    <th>Weight</th>
                                    <th>Unit</th>
                                    <th>Qty</th>
                                    <th class="text-end">Price</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($bill_items as $row)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $row->category->title_en ?? '-' }}</td>
                                        <td>{{ $row->sub_category->title_en ?? '-' }}</td>
                                        <td>{{ $row->weight->title_en ?? '-' }}</td>
                                        <td>{{ $row->unit->title_en ?? '-' }}</td>
                                        <td>{{ $row->qty }}</td>
                                        <td class="text-end money">{{ number_format($row->sale_price ?? 0, 2) }}</td>
                                        <td class="text-end money fw-bold">{{ number_format($row->total ?? 0, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted py-4">
                                            <i class="fas fa-box-open me-1"></i> No items found
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    @else
                        <table class="table table-striped table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Item</th>
                                    <th class="text-end">Price</th>
                                    <th>Qty</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($bill_items as $row)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $row->name }}</td>
                                        <td class="text-end money">{{ number_format($row->price ?? 0, 2) }}</td>
                                        <td>{{ $row->qty }}</td>
                                        <td class="text-end money fw-bold">{{ number_format($row->total ?? 0, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-4">
                                            <i class="fas fa-box-open me-1"></i> No items found
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    @endif
                </div>

            </div>
        </div>

    </div>


    {{-- ===========================
        ✅ PRINT AREA: A4 INVOICE
    ============================ --}}
    <div id="printA4" class="print-area">
        <style>
            @page { size: A4; margin: 10mm; }
            body{ font-family: Arial, sans-serif; color:#111; }
            .p-wrap{ width:100%; }
            .p-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
            .p-title{ font-size:18px; font-weight:700; }
            .p-muted{ color:#555; font-size:12px; }
            .p-box{ border:1px solid #ddd; padding:10px; border-radius:8px; }
            table{ width:100%; border-collapse:collapse; margin-top:10px; }
            th,td{ border:1px solid #ddd; padding:6px; font-size:12px; }
            th{ background:#f3f4f6; text-align:left; }
            .text-end{ text-align:right; }
            .foot{ margin-top:12px; font-size:11px; color:#555; display:flex; justify-content:space-between; }
        </style>

        <div class="p-wrap">
            <div class="p-header">
                <div>
                    <div class="p-title">Retail Invoice</div>
                    <div class="p-muted">Invoice #: <b>{{ $bill->invoice_number }}</b> • Date: <b>{{ $bill->invoice_date }}</b></div>
                    <div class="p-muted">Customer: <b>{{ $bill->customer_name }}</b> • Phone: <b>{{ $bill->customer_phone }}</b></div>
                </div>
                <div class="p-box">
                    <div class="p-muted">Total: <b>{{ $cur }} {{ number_format($bill->final_amount ?? 0, 2) }}</b></div>
                    <div class="p-muted">Received: <b>{{ $cur }} {{ number_format($bill->received ?? 0, 2) }}</b></div>
                    <div class="p-muted">Balance: <b>{{ $cur }} {{ number_format($balance, 2) }}</b></div>
                </div>
            </div>

            {{-- items --}}
            <table>
                <thead>
                <tr>
                    <th style="width:40px;">#</th>
                    <th>Item</th>
                    <th style="width:70px;">Qty</th>
                    <th style="width:90px;" class="text-end">Price</th>
                    <th style="width:100px;" class="text-end">Total</th>
                </tr>
                </thead>
                <tbody>
                @if($bill->type_id == 1)
                    @foreach($bill_items as $row)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                {{ $row->category->title_en ?? '' }}
                                {{ $row->sub_category->title_en ? ' / '.$row->sub_category->title_en : '' }}
                                {{ $row->weight->title_en ? ' / '.$row->weight->title_en : '' }}
                                {{ $row->unit->title_en ? ' / '.$row->unit->title_en : '' }}
                            </td>
                            <td>{{ $row->qty }}</td>
                            <td class="text-end">{{ number_format($row->sale_price ?? 0, 2) }}</td>
                            <td class="text-end">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @else
                    @foreach($bill_items as $row)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $row->name }}</td>
                            <td>{{ $row->qty }}</td>
                            <td class="text-end">{{ number_format($row->price ?? 0, 2) }}</td>
                            <td class="text-end">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>

            <div class="foot">
                <div>Received By: <b>{{ $bill->received_by ?? '-' }}</b></div>
                <div>Powered by OomClick • www.oomclick.com</div>
            </div>
        </div>
    </div>


    {{-- ===================================
        ✅ PRINT AREA: SMALL THERMAL 80mm
    ==================================== --}}
    <div id="print80" class="print-area">
        <style>
            @page { size: 80mm auto; margin: 4mm; }
            body{ font-family: Arial, sans-serif; color:#111; }
            .r{ width: 72mm; }
            .c{ text-align:center; }
            .b{ font-weight:700; }
            .sm{ font-size:11px; }
            .xs{ font-size:10px; color:#333; }
            .line{ border-top:1px dashed #333; margin:6px 0; }
            table{ width:100%; border-collapse:collapse; }
            td{ font-size:11px; padding:2px 0; vertical-align:top; }
            .right{ text-align:right; }
        </style>

        <div class="r">
            <div class="c b">Retail Invoice</div>
            <div class="c xs">Invoice #: {{ $bill->invoice_number }}</div>
            <div class="c xs">Date: {{ $bill->invoice_date }}</div>
            <div class="line"></div>

            <div class="sm">
                <div><span class="b">Customer:</span> {{ $bill->customer_name }}</div>
                <div><span class="b">Phone:</span> {{ $bill->customer_phone }}</div>
            </div>

            <div class="line"></div>

            <table>
                @if($bill->type_id == 1)
                    @foreach($bill_items as $row)
                        <tr>
                            <td colspan="2" class="b">
                                {{ $row->category->title_en ?? '' }}
                                {{ $row->sub_category->title_en ? ' / '.$row->sub_category->title_en : '' }}
                            </td>
                        </tr>
                        <tr>
                            <td class="xs">{{ $row->qty }} x {{ number_format($row->sale_price ?? 0, 2) }}</td>
                            <td class="right xs">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @else
                    @foreach($bill_items as $row)
                        <tr>
                            <td colspan="2" class="b">{{ $row->name }}</td>
                        </tr>
                        <tr>
                            <td class="xs">{{ $row->qty }} x {{ number_format($row->price ?? 0, 2) }}</td>
                            <td class="right xs">{{ number_format($row->total ?? 0, 2) }}</td>
                        </tr>
                    @endforeach
                @endif
            </table>

            <div class="line"></div>

            <table>
                <tr><td class="b">Grand Total</td><td class="right b">{{ $cur }} {{ number_format($bill->grand_total ?? 0, 2) }}</td></tr>
                <tr><td class="b">Discount</td><td class="right b">{{ $cur }} {{ number_format($bill->discount ?? 0, 2) }}</td></tr>
                <tr><td class="b">Total</td><td class="right b">{{ $cur }} {{ number_format($bill->final_amount ?? 0, 2) }}</td></tr>
                <tr><td class="b">Received</td><td class="right b">{{ $cur }} {{ number_format($bill->received ?? 0, 2) }}</td></tr>
                <tr><td class="b">Balance</td><td class="right b">{{ $cur }} {{ number_format($balance, 2) }}</td></tr>
            </table>

            <div class="line"></div>
            <div class="xs">Received By: <b>{{ $bill->received_by ?? '-' }}</b></div>
            <div class="c xs" style="margin-top:6px;">Powered by OomClick</div>
        </div>
    </div>

</main>
@endsection


@section('pageJs')
<script>
    $(".app-menu").removeClass("active");
    $("#nav_salei").addClass("active");
    $("#salei").addClass("is-expanded");
    $("#customer_retail_bill").addClass("active");

    function printInvoice(divId){
        const html = document.getElementById(divId).innerHTML;

        const w = window.open('', '_blank', 'width=900,height=650');
        w.document.open();
        w.document.write(`
            <html>
            <head>
                <title>Print</title>
                <meta charset="utf-8" />
            </head>
            <body>${html}</body>
            </html>
        `);
        w.document.close();

        w.focus();
        w.onload = function(){
            w.print();
            w.close();
        }
    }
</script>
@endsection