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

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

                {{-- TOP BAR (Screen only) --}}
                <div class="p-3 p-md-4 border-bottom no-print"
                    style="background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(102,16,242,.06));">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <div>
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <span class="badge bg-{{ $type == 1 ? 'primary' : 'success' }}">
                                    <i class="fa fa-tag me-1"></i>
                                    {{ $type == 1 ? 'Raw Materials' : 'Finished Goods' }}
                                </span>
                                <span class="badge bg-dark">
                                    <i class="fa fa-hashtag me-1"></i> Invoice #{{ $bill->invoice_number }}
                                </span>
                                <span class="badge bg-secondary">
                                    <i class="fa fa-calendar-alt me-1"></i> {{ $bill->invoice_date }}
                                </span>
                            </div>

                            <h5 class="mb-0 mt-2 fw-bold">
                                <i class="fa fa-file-invoice me-1"></i> Purchase Invoice Details
                            </h5>
                            <small class="text-muted">Professional invoice + print + WhatsApp share</small>
                        </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 data-mdb-toggle="modal" data-mdb-target="#bill_modal" class="btn btn-sm btn-primary"
                                style="border-radius:10px;">
                                <i class="fa fa-book me-1"></i> View Modal
                            </button>

                            <button type="button" onclick="shareWhatsApp()" class="btn btn-sm btn-success"
                                style="border-radius:10px;">
                                <i class="fa fa-whatsapp me-1"></i> Share WhatsApp
                            </button>

                            <button type="button" onclick="printInvoice()" 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">
                    @include('general.valert')

                    @php
                        $cur =
                            $bill->currency->title_en ??
                            ($bill->currency->title_ps ?? ($bill->currency->title_dr ?? ''));
                        $totalQty = $bill_items->sum('qty');

                        // Optional company info if you have $info from controller, otherwise fallback
                        $companyName = $info->name ?? config('app.name', 'Company Name');
                        $companyPhone = $info->phone ?? '';
                        $companyEmail = $info->email ?? '';
                        $companyAddress = $info->address ?? '';
                        $companyLogo = isset($info->logo) ? asset('storage/' . $info->logo) : null; // adjust if needed
                    @endphp

                    {{-- =========================
                    PRINT AREA (Only this prints)
                ========================== --}}
                    <div id="printArea" class="invoice-paper">

                        {{-- HEADER --}}
                        <div class="invoice-header">
                            <div class="row g-3 align-items-center">
                                <div class="col-md-7">
                                    <div class="d-flex align-items-center gap-3">
                                        @if ($companyLogo)
                                            <img src="{{ $companyLogo }}" alt="logo"
                                                style="height:54px; width:auto; object-fit:contain;">
                                        @else
                                            <div class="logo-fallback">
                                                <i class="fa fa-building"></i>
                                            </div>
                                        @endif

                                        <div>
                                            <h4 class="mb-0 fw-bold">{{ $companyName }}</h4>
                                            <div class="small text-muted">
                                                @if ($companyAddress)
                                                    <div><i class="fa fa-map-marker-alt me-1"></i>{{ $companyAddress }}
                                                    </div>
                                                @endif
                                                <div class="d-flex gap-3 flex-wrap">
                                                    @if ($companyPhone)
                                                        <span><i class="fa fa-phone me-1"></i>{{ $companyPhone }}</span>
                                                    @endif
                                                    @if ($companyEmail)
                                                        <span><i class="fa fa-envelope me-1"></i>{{ $companyEmail }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-5 text-md-end">
                                    <div class="invoice-title">
                                        PURCHASE INVOICE
                                    </div>
                                    <div class="invoice-meta">
                                        <div><span>Invoice No:</span> <b>#{{ $bill->invoice_number }}</b></div>
                                        <div><span>Date:</span> <b>{{ $bill->invoice_date }}</b></div>
                                        <div><span>Type:</span> <b>{{ $type == 1 ? 'Raw Materials' : 'Finished Goods' }}</b>
                                        </div>
                                        <div><span>Currency:</span> <b>{{ $cur }}</b></div>
                                        <div><span>Ex. Rate:</span> <b>{{ $bill->ex_rate ?? 1 }}</b></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- SUPPLIER + PAYMENT INFO --}}
                        <div class="row g-3 mt-2">
                            <div class="col-md-6">
                                <div class="info-box">
                                    <div class="box-title"><i class="fa fa-user-tie me-1"></i> Supplier</div>
                                    <div class="box-body">
                                        <div><b>Name:</b> {{ $bill->supplier->name ?? 'N/A' }}</div>
                                        @if (!empty($bill->supplier->phone))
                                            <div><b>Phone:</b> {{ $bill->supplier->phone }}</div>
                                        @endif
                                        @if (!empty($bill->supplier->address))
                                            <div><b>Address:</b> {{ $bill->supplier->address }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="info-box">
                                    <div class="box-title"><i class="fa fa-wallet me-1"></i> Payment & Summary</div>
                                    <div class="box-body">
                                        <div class="d-flex justify-content-between">
                                            <span><b>Title:</b> {{ $bill->title ?? 'N/A' }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Total Qty</span>
                                            <b>{{ number_format((float) $totalQty, 2) }}</b>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Grand Total</span>
                                            <b>{{ number_format((float) $bill->grand_total, 2) }} {{ $cur }}</b>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Payment</span>
                                            <b>{{ number_format((float) $bill->payment, 2) }} {{ $cur }}</b>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Balance</span>
                                            <b>{{ number_format((float) $bill->balance, 2) }} {{ $cur }}</b>
                                        </div>

                                        <div class="mt-2 small text-muted">
                                            <i class="fa fa-exchange-alt me-1"></i>
                                            Payment Type:
                                            @if ($bill->transaction_id == 1)
                                                <b>Cash</b>
                                            @elseif ($bill->transaction_id == 2)
                                                <b>Bank</b>
                                            @else
                                                <b>Sarafi</b>
                                            @endif
                                            @if ($bill->payment_by)
                                                <span class="ms-2">| By: <b>{{ $bill->payment_by }}</b></span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ITEMS TABLE --}}
                        <div class="mt-3">
                            <div class="section-title">
                                <i class="fa fa-list me-1"></i> Items List
                            </div>

                            <div class="table-responsive">
                                <table class="table invoice-table align-middle">
                                    <thead>
                                        <tr>
                                            <th style="width:60px;">#</th>

                                            @if ($type == 1)
                                                <th>Category</th>
                                                <th>Sub Category</th>
                                                <th>Unit</th>
                                                <th class="text-end">Qty</th>
                                                <th class="text-end">CPI</th>
                                                <th class="text-end">SPI</th>
                                                <th class="text-end">Total</th>
                                            @else
                                                <th>Category</th>
                                                <th>Sub Category</th>
                                                <th>Unit</th>
                                                <th>Weight</th>
                                                <th>Location</th>
                                                <th class="text-end">Qty</th>
                                                <th class="text-end">Price</th>
                                                <th class="text-end">SPI</th>
                                                <th class="text-end">Total</th>
                                            @endif
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @forelse($bill_items as $row)
                                            <tr>
                                                <td class="fw-bold">{{ $loop->iteration }}</td>

                                                @if ($type == 1)
                                                    <td>{{ $row->category->title_en ?? ($row->category->name ?? 'N/A') }}
                                                    </td>
                                                    <td>{{ $row->sub_category->title_en ?? ($row->sub_category->name ?? '-') }}
                                                    </td>
                                                    <td>{{ $row->unit->title_en ?? ($row->unit->title_ps ?? ($row->unit->name ?? 'N/A')) }}
                                                    </td>
                                                    <td class="text-end">{{ number_format((float) $row->qty, 2) }}</td>
                                                    <td class="text-end">{{ number_format((float) $row->cpi, 2) }}</td>
                                                    <td class="text-end">{{ number_format((float) $row->spi, 2) }}</td>
                                                    <td class="text-end fw-bold">{{ number_format((float) $row->total, 2) }}
                                                    </td>
                                                @else
                                                    <td>{{ $row->category->title_en ?? ($row->category->name ?? 'N/A') }}
                                                    </td>
                                                    <td>{{ $row->sub_category->title_en ?? ($row->sub_category->name ?? 'N/A') }}
                                                    </td>
                                                    <td>{{ $row->unit->title_en ?? ($row->unit->title_ps ?? ($row->unit->name ?? 'N/A')) }}
                                                    </td>
                                                    <td>{{ $row->weight->title_en ?? ($row->weight->title_ps ?? ($row->weight->name ?? '-')) }}
                                                    </td>
                                                    <td>{{ $row->location->title ?? ($row->location->name ?? '-') }}</td>
                                                    <td class="text-end">{{ number_format((float) $row->qty, 2) }}</td>
                                                    <td class="text-end">{{ number_format((float) $row->price, 2) }}</td>
                                                    <td class="text-end">{{ number_format((float) ($row->spi ?? 0), 2) }}
                                                    </td>
                                                    <td class="text-end fw-bold">{{ number_format((float) $row->total, 2) }}
                                                    </td>
                                                @endif
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="20" class="text-center text-muted py-4">
                                                    <i class="fa fa-info-circle me-1"></i> No items found.
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>

                                    @if ($bill_items->count() > 0)
                                        <tfoot>
                                            <tr>
                                                <th colspan="{{ $type == 1 ? 7 : 9 }}" class="text-end">Grand Total</th>
                                                <th class="text-end">
                                                    {{ number_format((float) $bill->grand_total, 2) }} {{ $cur }}
                                                </th>
                                            </tr>
                                        </tfoot>
                                    @endif
                                </table>
                            </div>
                        </div>

                        {{-- FOOTER / TERMS / SIGNATURE --}}
                        <div class="row g-3 mt-3">
                            <div class="col-md-7">
                                <div class="info-box">
                                    <div class="box-title"><i class="fa fa-clipboard-list me-1"></i> Notes / Terms</div>
                                    <div class="box-body small">
                                        <ul class="mb-0">
                                            <li>All amounts are in <b>{{ $cur }}</b>. Exchange rate applied where
                                                required.</li>
                                            <li>Please verify items and quantities upon receipt.</li>
                                            <li>This invoice is system-generated and valid without signature, unless
                                                required by policy.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div class="signature-box">
                                    <div class="sig-line"></div>
                                    <div class="sig-label">Authorized Signature</div>

                                    <div class="sig-line mt-3"></div>
                                    <div class="sig-label">Supplier Signature</div>
                                </div>
                            </div>
                        </div>

                        <div class="print-footer mt-3">
                            <div class="small text-muted">
                                Generated on: {{ date('Y-m-d H:i') }}
                            </div>
                        </div>
                    </div>
                    {{-- /printArea --}}

                </div>
            </div>
        </section>
    </main>

    @include('purchase.bills.bill-modal')
@endsection

@section('pageJs')
    <style>
        /* Screen look */
        .invoice-paper {
            background: #fff;
            border-radius: 16px;
            padding: 18px;
            border: 1px solid rgba(0, 0, 0, .06);
        }

        .logo-fallback {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            background: rgba(13, 110, 253, .12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #0d6efd;
        }

        .invoice-header {
            border-bottom: 1px dashed rgba(0, 0, 0, .18);
            padding-bottom: 12px;
            margin-bottom: 10px;
        }

        .invoice-title {
            font-weight: 800;
            letter-spacing: .5px;
            font-size: 18px;
            text-transform: uppercase;
        }

        .invoice-meta {
            font-size: 13px;
            color: #444;
            margin-top: 6px;
            line-height: 1.6;
        }

        .invoice-meta span {
            color: #666;
            width: 95px;
            display: inline-block;
        }

        .info-box {
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 14px;
            padding: 12px 14px;
            background: #fff;
        }

        .box-title {
            font-weight: 700;
            margin-bottom: 8px;
            color: #111;
        }

        .box-body {
            color: #333;
            font-size: 14px;
        }

        .section-title {
            font-weight: 800;
            font-size: 14px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(13, 110, 253, .06);
            border: 1px solid rgba(13, 110, 253, .12);
            margin-bottom: 10px;
        }

        .invoice-table {
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 12px;
            overflow: hidden;
        }

        .invoice-table thead th {
            background: rgba(0, 0, 0, .04);
            font-weight: 800;
            font-size: 13px;
            white-space: nowrap;
        }

        .invoice-table td {
            font-size: 13.5px;
            vertical-align: middle;
        }

        .invoice-table tfoot th {
            background: rgba(0, 0, 0, .04);
            font-weight: 900;
        }

        .signature-box {
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 14px;
            padding: 14px;
            background: #fff;
        }

        .sig-line {
            border-bottom: 1px solid #111;
            height: 22px;
        }

        .sig-label {
            font-size: 12px;
            color: #555;
            margin-top: 6px;
        }

        .print-footer {
            border-top: 1px dashed rgba(0, 0, 0, .18);
            padding-top: 10px;
            text-align: center;
        }

        /* Print rules (International A4) */
        @media print {
            @page {
                size: A4;
                margin: 12mm;
            }

            body {
                background: #fff !important;
            }

            .no-print,
            .app-menu,
            .app-sidebar,
            .navbar,
            .footer,
            .modal {
                display: none !important;
            }

            .app-content {
                padding: 0 !important;
                margin: 0 !important;
            }

            .card {
                box-shadow: none !important;
                border: none !important;
            }

            .invoice-paper {
                border: none !important;
                padding: 0 !important;
            }

            .invoice-table {
                border: 1px solid #000 !important;
            }

            .invoice-table th,
            .invoice-table td {
                border: 1px solid #000 !important;
            }

            .invoice-table thead th {
                background: #f2f2f2 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .info-box,
            .signature-box {
                border: 1px solid #000 !important;
            }
        }
    </style>

    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_purchase1").addClass("active");
        $("#purchasei").addClass("is-expanded");
        $("#purchase_invoices").addClass("active");

        function printInvoice() {
            // Print only #printArea with current page styling
            window.print();
        }

        function shareWhatsApp() {
            // Build clean international message
            const supplier = @json($bill->supplier->name ?? 'Supplier');
            const invNo = @json($bill->invoice_number ?? '');
            const date = @json($bill->invoice_date ?? '');
            const cur = @json($cur ?? '');
            const total = @json(number_format((float) $bill->grand_total, 2));
            const pay = @json(number_format((float) $bill->payment, 2));
            const bal = @json(number_format((float) $bill->balance, 2));

            const msg =
                `Purchase Invoice
Invoice No: #${invNo}
Date: ${date}
Supplier: ${supplier}

Grand Total: ${total} ${cur}
Payment: ${pay} ${cur}
Balance: ${bal} ${cur}`;

            const url = "https://wa.me/?text=" + encodeURIComponent(msg);
            window.open(url, "_blank");
        }
    </script>
@endsection