@extends('layouts.layout-horizontal')

@section('title', 'Invoice ' . $sale->bill_no)

@section('css')
<style>
    /* Page tint — sales (light green) */
    body, .pc-container, .pc-content { background: #c8ecd2 !important; }

    .inv-wrap { --inv-accent: var(--s-accent, #4361ee); --inv-muted: #697386; --inv-border: #e3e8ee; --inv-bg: #fafbfc; }

    /* Top bar */
    .inv-topbar {
        display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
        padding: .65rem 1rem; background: #fff; border: 1px solid var(--inv-border);
        border-radius: 8px; margin-bottom: .75rem;
    }
    .inv-topbar .inv-billno { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
    .inv-topbar .inv-date { color: var(--inv-muted); font-size: .82rem; white-space: nowrap; }
    .inv-topbar .inv-badges { display: flex; gap: .35rem; align-items: center; }
    .inv-topbar .inv-actions { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
    .inv-topbar .inv-actions .btn { font-size: .78rem; padding: .3rem .65rem; }

    /* Compact info panels */
    .inv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
    @media (max-width: 768px) { .inv-info-grid { grid-template-columns: 1fr; } }
    .inv-panel {
        background: #fff; border: 1px solid var(--inv-border); border-radius: 8px;
        padding: .6rem .85rem; font-size: .82rem;
    }
    .inv-panel-title {
        font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
        color: var(--inv-muted); margin-bottom: .4rem; display: flex; align-items: center; gap: .35rem;
    }
    .inv-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; }
    .inv-panel dt { color: var(--inv-muted); font-weight: 500; white-space: nowrap; }
    .inv-panel dd { margin: 0; font-weight: 600; color: var(--s-text, #1a1f36); }
    .inv-panel dd a { color: var(--inv-accent); text-decoration: none; }
    .inv-panel dd a:hover { text-decoration: underline; }

    /* Delivery strip */
    .inv-delivery-strip {
        background: #fff; border: 1px solid var(--inv-border); border-radius: 8px;
        padding: .5rem .85rem; margin-bottom: .75rem; font-size: .8rem;
        display: flex; flex-wrap: wrap; gap: .15rem 1.5rem;
    }
    .inv-delivery-strip .inv-ditem { display: flex; gap: .3rem; }
    .inv-delivery-strip .inv-ditem span:first-child { color: var(--inv-muted); font-weight: 500; }
    .inv-delivery-strip .inv-ditem span:last-child { font-weight: 600; }

    /* Items + Summary composite */
    .inv-body { display: grid; grid-template-columns: 1fr 260px; gap: .75rem; }
    @media (max-width: 992px) { .inv-body { grid-template-columns: 1fr; } }

    .inv-items-panel {
        background: #fff; border: 1px solid var(--inv-border); border-radius: 12px;
        overflow: hidden;
    }
    .inv-items-panel table { margin: 0; font-size: .8rem; }
    .inv-items-panel thead th {
        background: var(--inv-bg); font-size: .72rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: .04em; color: var(--inv-muted);
        padding: .45rem .5rem; border-bottom: 2px solid var(--inv-border); border-top: none;
    }
    .inv-items-panel tbody td { padding: .4rem .5rem; vertical-align: middle; border-color: var(--inv-border); }
    .inv-items-panel tbody tr:last-child td { border-bottom: none; }
    .inv-items-panel .product-name { font-weight: 600; color: var(--s-text, #1a1f36); }
    .inv-items-panel .product-sku { font-size: .72rem; color: var(--inv-muted); }

    /* Summary sidebar */
    .inv-summary {
        background: #fff; border: 1px solid var(--inv-border); border-radius: 12px;
        padding: 0; display: flex; flex-direction: column;
    }
    .inv-summary-title {
        font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
        color: var(--inv-muted); padding: .55rem .75rem; border-bottom: 1px solid var(--inv-border);
    }
    .inv-summary-rows { flex: 1; padding: .4rem 0; }
    .inv-summary-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: .25rem .75rem; font-size: .82rem;
    }
    .inv-summary-row .label { color: var(--inv-muted); font-weight: 500; }
    .inv-summary-row .value { font-weight: 600; font-variant-numeric: tabular-nums; }
    .inv-summary-grand {
        display: flex; justify-content: space-between; align-items: center;
        padding: .6rem .75rem; font-size: 1rem; font-weight: 700;
        background: var(--inv-accent); color: #fff; border-radius: 0 0 12px 12px;
        margin-top: auto;
    }

    /* Remarks + SEZ */
    .inv-remarks {
        background: #fff; border: 1px solid var(--inv-border); border-radius: 8px;
        padding: .5rem .85rem; margin-top: .75rem; font-size: .82rem;
    }
    .inv-remarks .inv-panel-title { margin-bottom: .25rem; }

    /* Badge tweaks — use Stripe-aligned palette */
    .inv-badge { font-size: .7rem; padding: .2rem .5rem; border-radius: 3rem; font-weight: 600; }
    .inv-badge-cash { background: rgba(26, 31, 54, .08); color: var(--s-text, #1a1f36); }
    .inv-badge-bill { background: rgba(var(--s-accent-rgb, 67,97,238), .1); color: var(--inv-accent); }
    .inv-badge-cashmemo { background: rgba(84, 105, 212, .1); color: var(--s-blue, #5469d4); }
    .inv-badge-sez { background: rgba(205, 61, 100, .1); color: var(--s-red, #cd3d64); }
</style>
@endsection

@section('content')
@php
    $showPdfScaleModal = $sale->mode === 'bill' && $sale->bill_type === 'bill' && $sale->items->count() > 10;
@endphp
<div class="inv-wrap">

    {{-- Top Bar --}}
    <div class="inv-topbar">
        <span class="inv-billno">{{ $sale->bill_no }}</span>
        <span class="inv-date">{{ $sale->invoice_date->format('d M, Y') }}</span>
        <div class="inv-badges">
            @if($sale->bill_type == 'cash')
                <span class="inv-badge inv-badge-cash">Cash</span>
            @elseif($sale->bill_type == 'cash memo')
                <span class="inv-badge inv-badge-cashmemo">Cash Memo</span>
            @else
                <span class="inv-badge inv-badge-bill">Tax Invoice</span>
            @endif
            @if($sale->mode == 'cash')
                <span class="inv-badge inv-badge-cash">Cash Mode</span>
            @endif
            @if($sale->party && $sale->party->is_sez)
                <span class="inv-badge inv-badge-sez">SEZ</span>
            @endif
        </div>
        <div class="inv-actions">
            @if($sale->party && $sale->party->mobile)
                <button type="button" class="btn btn-success btn-sm" id="whatsappShareBtn" title="Send WhatsApp message">
                    <i class="ph-duotone ph-whatsapp-logo"></i> WhatsApp
                </button>
            @endif
            @if($showPdfScaleModal)
                <button type="button" class="btn btn-danger btn-sm invoice-pdf-action"
                    data-pdf-action="download" data-pdf-url="{{ route('sale.pdf', ['id' => $sale->id, 'download' => 1]) }}"
                    data-needs-scale-modal="true">
                    <i class="ph-duotone ph-download-simple"></i> Download
                </button>
            @else
                <a href="{{ route('sale.pdf', ['id' => $sale->id, 'download' => 1]) }}" class="btn btn-danger btn-sm">
                    <i class="ph-duotone ph-download-simple"></i> Download
                </a>
            @endif
            <button type="button" class="btn btn-warning btn-sm print-pdf-btn {{ $showPdfScaleModal ? 'invoice-pdf-action' : '' }}"
                data-pdf-url="{{ route('sale.pdf', $sale->id) }}"
                @if($showPdfScaleModal) data-pdf-action="print" data-needs-scale-modal="true" @endif title="Print Invoice">
                <i class="ph-duotone ph-printer"></i> Print
            </button>
            @if($sale->mode === 'cash' && $sale->items->count() > 0)
                <button type="button" class="btn btn-info btn-sm" id="transferBtn" title="Transfer to Bill Company">
                    <i class="ph-duotone ph-arrow-square-right"></i> Transfer
                </button>
            @endif
            @if($sale->mode !== 'cash' && $sale->items->count() > 0)
                <button type="button" class="btn btn-dark btn-sm ewb-trigger"
                    data-sale-id="{{ $sale->id }}"
                    data-bill-no="{{ $sale->bill_no }}"
                    data-data-url="{{ route('sale.ewb.data', $sale->id) }}"
                    data-generate-url="{{ route('sale.ewb.generate', $sale->id) }}"
                    data-save-number-url="{{ route('sale.ewb.saveNumber', $sale->id) }}"
                    title="Generate E-way Bill JSON">
                    <i class="ph-duotone ph-truck"></i> E-way Bill
                </button>
            @endif
            <a href="{{ route('sale.edit', $sale->id) }}" class="btn btn-outline-primary btn-sm">
                <i class="ph-duotone ph-pencil-simple"></i> Edit
            </a>
            <a href="{{ route('sale.index') }}" class="btn btn-secondary btn-sm">
                <i class="ph-duotone ph-arrow-left"></i> Back
            </a>
        </div>
    </div>

    {{-- Info Grid: Invoice Details + Party --}}
    <div class="inv-info-grid">
        <div class="inv-panel">
            <div class="inv-panel-title"><i class="ph-duotone ph-file-text"></i> Invoice Details</div>
            <dl>
                <dt>Bill No</dt>
                <dd>{{ $sale->bill_no }}</dd>

                <dt>Invoice Date</dt>
                <dd>{{ $sale->invoice_date->format('d M, Y') }}</dd>

                <dt>Bill Type</dt>
                <dd>
                    @if($sale->bill_type == 'cash')
                        Cash
                    @elseif($sale->bill_type == 'cash memo')
                        Cash Memo
                    @else
                        Tax Invoice
                    @endif
                </dd>

                <dt>Mode</dt>
                <dd>{{ ucfirst($sale->mode) }}</dd>

                <dt>Company</dt>
                <dd>{{ $company->name }}</dd>

                @if($sale->mode !== 'cash' && $sale->eway_bill_no)
                <dt>E-Way Bill No</dt>
                <dd>{{ $sale->eway_bill_no }}</dd>
                @endif

                @if($sale->mode !== 'cash' && $sale->eway_bill_date)
                <dt>E-Way Bill Date</dt>
                <dd>{{ $sale->eway_bill_date->format('d M, Y') }}</dd>
                @endif

                <dt>Remarks</dt>
                <dd>{{ $sale->remarks ?: '-' }}</dd>
            </dl>
        </div>

        <div class="inv-panel">
            <div class="inv-panel-title"><i class="ph-duotone ph-user"></i> Party</div>
            @if($sale->party)
            <dl>
                <dt>Name</dt>
                <dd><a href="{{ route('customers.show', $sale->party) }}">{{ $sale->party->name }}</a></dd>

                @if($sale->party->mobile)
                <dt>Mobile</dt>
                <dd>{{ $sale->party->mobile }}</dd>
                @endif

                @if($sale->party->gst_number)
                <dt>GSTIN</dt>
                <dd>{{ $sale->party->gst_number }}</dd>
                @endif

                @if($sale->party->billing_address)
                <dt>Billing Address</dt>
                <dd>{{ $sale->party->billing_address }}</dd>
                @endif

                @if($sale->party->state)
                <dt>State / Pincode</dt>
                <dd>{{ $sale->party->state }} {{ $sale->party->pincode ? '/ ' . $sale->party->pincode : '' }}</dd>
                @endif

                @if($sale->party->contact_person)
                <dt>Contact Person</dt>
                <dd>{{ $sale->party->contact_person }}</dd>
                @endif

                <dt>Transportation</dt>
                <dd>{{ $sale->party->transportation_name ?: '-' }}</dd>

                @if($sale->party->is_sez)
                <dt>SEZ</dt>
                <dd><span class="inv-badge inv-badge-sez">SEZ Customer</span></dd>

                <dt>ARN No</dt>
                <dd>
                    <span id="arnDisplay">
                        @if($sale->arn_no)
                            {{ $sale->arn_no }} <button type="button" class="btn btn-sm btn-outline-primary py-0 px-1 ms-1 arn-edit-btn" title="Edit"><i class="ph-duotone ph-pencil-simple"></i></button>
                        @else
                            <span class="text-danger">Pending</span> <button type="button" class="btn btn-sm btn-outline-primary py-0 px-1 ms-1 arn-edit-btn" title="Add ARN"><i class="ph-duotone ph-plus"></i></button>
                        @endif
                    </span>
                    <span id="arnEdit" class="d-none">
                        <div class="input-group input-group-sm">
                            <input type="text" id="arnInput" class="form-control form-control-sm" value="{{ $sale->arn_no }}" placeholder="Enter ARN No">
                            <button class="btn btn-success btn-sm" id="arnSaveBtn" type="button"><i class="ph-duotone ph-check"></i></button>
                            <button class="btn btn-outline-secondary btn-sm" id="arnCancelBtn" type="button"><i class="ph-duotone ph-x"></i></button>
                        </div>
                    </span>
                </dd>
                @endif

                @if($sale->party->msme_number)
                <dt>MSME/Udyam</dt>
                <dd>{{ $sale->party->msme_number }}</dd>
                @endif
            </dl>
            @else
                <span class="text-muted">Party not found</span>
            @endif
        </div>
    </div>

    @if(isset($transferHistory) && $transferHistory->isNotEmpty())
    <div class="inv-panel mb-3">
        <div class="inv-panel-title"><i class="ph-duotone ph-arrows-left-right"></i> Transfer Record</div>
        <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead class="table-light">
                    <tr>
                        <th>From</th>
                        <th>To</th>
                        <th>Items</th>
                        <th class="text-end">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transferHistory as $tr)
                        <tr>
                            <td>{{ $tr->sourceCompany?->name }} / {{ $tr->sourceSale?->bill_no }}</td>
                            <td>{{ $tr->targetCompany?->name }} / {{ $tr->targetSale?->bill_no }}</td>
                            <td class="small">
                                @foreach(($tr->items ?? []) as $item)
                                    <span class="me-2">{{ $item['product_name'] ?? ('Product #' . ($item['product_id'] ?? '')) }} x {{ $item['qty'] ?? '' }}</span>
                                @endforeach
                            </td>
                            <td class="text-end">{{ indian_number($tr->transferred_amount, 2) }}</td>
                        </tr>
                    @endforeach
                    <tr class="table-light">
                        <td colspan="{{ $sale->mode !== 'cash' ? 10 : 8 }}" class="text-center text-muted fw-semibold">Table End</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Delivery strip (bill mode only, if data exists) --}}
    @if($sale->mode !== 'cash')
        @php
            $deliveryItems = collect([
                ['Delivery Note', $sale->delivery_note],
                ['Delivery Date', $sale->delivery_note_date ? $sale->delivery_note_date->format('d M, Y') : null],
                ['Buyer Order No', $sale->buyer_order_no],
                ['Buyer Order Date', $sale->buyer_order_date ? $sale->buyer_order_date->format('d M, Y') : null],
                ['Dispatched Through', $sale->dispatched_through ?? $sale->party->transportation_name ?? null],
                ['Destination', $sale->destination ?? $sale->party->state ?? null],
                ['Terms of Delivery', $sale->terms_of_delivery],
                ['Shipping Address', $sale->shippingAddress
                    ? implode(' | ', array_filter([
                        $sale->shippingAddress->address,
                        $sale->shippingAddress->pincode,
                        $sale->shippingAddress->contact_person,
                        $sale->shippingAddress->mobile,
                    ]))
                    : null],
            ])->filter(fn($i) => !empty($i[1]));
        @endphp

        @if($deliveryItems->isNotEmpty())
        <div class="inv-delivery-strip">
            <span class="inv-panel-title mb-0 me-1">
                <i class="ph-duotone ph-truck"></i> Dispatch
            </span>
            @foreach($deliveryItems as $di)
            <div class="inv-ditem">
                <span>{{ $di[0] }}:</span>
                <span>{{ $di[1] }}</span>
            </div>
            @endforeach
        </div>
        @endif

        {{-- SEZ LUT --}}
        @if(isset($activeLut) && $activeLut)
        <div class="inv-delivery-strip" style="border-color: rgba(205,61,100,.15); background: rgba(205,61,100,.04);">
            <span class="inv-panel-title mb-0 me-1" style="color: var(--s-red, #cd3d64);">
                <i class="ph-duotone ph-certificate"></i> LUT
            </span>
            <div class="inv-ditem"><span>Bond No:</span><span>{{ $activeLut->lut_number }}</span></div>
            <div class="inv-ditem"><span>From:</span><span>{{ $activeLut->valid_from->format('d M, Y') }}</span></div>
            <div class="inv-ditem"><span>To:</span><span>{{ $activeLut->valid_to->format('d M, Y') }}</span></div>
            <div class="inv-ditem">
                <span>Status:</span>
                <span>
                    @if(now()->between($activeLut->valid_from, $activeLut->valid_to))
                        <span class="badge bg-success">Active</span>
                    @else
                        <span class="badge bg-secondary">Expired</span>
                    @endif
                </span>
            </div>
        </div>
        @endif
    @endif

    {{-- Items Table + Summary --}}
    <div class="inv-body">
        <div class="inv-items-panel">
            <table class="table table-hover table-sm mb-0 no-datatable">
                <thead class="table-light">
                    <tr>
                        <th style="width:36px;" class="text-center">#</th>
                        <th>Product</th>
                        <th class="text-center" style="width:75px;">HSN</th>
                        <th class="text-center" style="width:50px;">Unit</th>
                        <th class="text-center" style="width:55px;">Qty</th>
                        <th class="text-end" style="width:75px;">Rate</th>
                        <th class="text-end" style="width:85px;">Amount</th>
                        @if($sale->mode !== 'cash')
                        <th class="text-center" style="width:50px;">Tax%</th>
                        <th class="text-end" style="width:75px;">Tax Amt</th>
                        @endif
                        <th class="text-end" style="width:90px;">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sale->items as $item)
                    <tr>
                        <td class="text-center text-muted">{{ $loop->iteration }}</td>
                        <td>
                            <span class="product-name">{{ $item->product->name ?? 'Item Removed' }}</span>
                            @if($item->product && $item->product->sku)
                                <br><span class="product-sku">SKU: {{ $item->product->sku }}</span>
                            @endif
                        </td>
                        <td class="text-center">{{ $item->hsn ?: '-' }}</td>
                        <td class="text-center">{{ $item->unit ?: '-' }}</td>
                        <td class="text-center">{{ indian_number($item->qty, 3) }}</td>
                        <td class="text-end">{{ indian_number($item->rate, 2) }}</td>
                        <td class="text-end">{{ indian_number($item->line_amount, 2) }}</td>
                        @if($sale->mode !== 'cash')
                        <td class="text-center">{{ indian_number($item->tax_percent, 2) }}%</td>
                        <td class="text-end">{{ indian_number($item->line_tax_amount, 2) }}</td>
                        @endif
                        <td class="text-end fw-semibold">{{ indian_number($item->line_total, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="inv-summary">
            <div class="inv-summary-title"><i class="ph-duotone ph-calculator"></i> Summary</div>
            <div class="inv-summary-rows">
                <div class="inv-summary-row">
                    <span class="label">Sub Total</span>
                    <span class="value">{{ indian_number($sale->amount_total, 2) }}</span>
                </div>
                @if($sale->mode !== 'cash')
                <div class="inv-summary-row">
                    <span class="label">Tax</span>
                    <span class="value">{{ indian_number($sale->tax_total, 2) }}</span>
                </div>
                @endif
                @if($sale->pf_amount > 0)
                <div class="inv-summary-row">
                    <span class="label">P&F</span>
                    <span class="value">{{ indian_number($sale->pf_amount, 2) }}</span>
                </div>
                @if($sale->mode !== 'cash' && $sale->pf_tax_amount > 0)
                <div class="inv-summary-row">
                    <span class="label">P&F Tax ({{ indian_number($sale->pf_tax_percent, 0) }}%)</span>
                    <span class="value">{{ indian_number($sale->pf_tax_amount, 2) }}</span>
                </div>
                @endif
                @endif
                @if(($sale->discount ?? 0) != 0)
                <div class="inv-summary-row">
                    <span class="label">Discount</span>
                    <span class="value">{{ $sale->discount > 0 ? '(' : '' }}{{ indian_number(abs($sale->discount), 2) }}{{ $sale->discount > 0 ? ')' : '' }}</span>
                </div>
                @endif
                @if($sale->roundoff != 0)
                <div class="inv-summary-row">
                    <span class="label">Roundoff</span>
                    <span class="value">{{ $sale->roundoff < 0 ? '(' : '' }}{{ indian_number(abs($sale->roundoff), 2) }}{{ $sale->roundoff < 0 ? ')' : '' }}</span>
                </div>
                @endif
            </div>
            <div class="inv-summary-grand">
                <span>Grand Total</span>
                <span>&#8377; {{ indian_number($sale->grand_total, 2) }}</span>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ARN inline edit
    const arnEditBtn = document.querySelector('.arn-edit-btn');
    const arnDisplay = document.getElementById('arnDisplay');
    const arnEdit = document.getElementById('arnEdit');
    const arnInput = document.getElementById('arnInput');
    const arnSaveBtn = document.getElementById('arnSaveBtn');
    const arnCancelBtn = document.getElementById('arnCancelBtn');

    if (arnEditBtn) {
        arnEditBtn.addEventListener('click', function() {
            arnDisplay.classList.add('d-none');
            arnEdit.classList.remove('d-none');
            arnInput.focus();
        });
    }

    if (arnCancelBtn) {
        arnCancelBtn.addEventListener('click', function() {
            arnEdit.classList.add('d-none');
            arnDisplay.classList.remove('d-none');
        });
    }

    if (arnSaveBtn) {
        arnSaveBtn.addEventListener('click', async function() {
            const val = arnInput.value.trim();
            arnSaveBtn.disabled = true;
            try {
                const res = await fetch(@json(route('sale.update-arn', $sale->id)), {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content, 'Accept': 'application/json' },
                    body: JSON.stringify({ arn_no: val })
                });
                const data = await res.json();
                if (data.success) {
                    arnDisplay.innerHTML = val
                        ? `${val} <button type="button" class="btn btn-sm btn-outline-primary py-0 px-1 ms-1 arn-edit-btn" title="Edit"><i class="ph-duotone ph-pencil-simple"></i></button>`
                        : `<span class="text-danger">Pending</span> <button type="button" class="btn btn-sm btn-outline-primary py-0 px-1 ms-1 arn-edit-btn" title="Add ARN"><i class="ph-duotone ph-plus"></i></button>`;
                    arnEdit.classList.add('d-none');
                    arnDisplay.classList.remove('d-none');
                    // Re-bind edit button
                    arnDisplay.querySelector('.arn-edit-btn')?.addEventListener('click', function() {
                        arnDisplay.classList.add('d-none');
                        arnEdit.classList.remove('d-none');
                        arnInput.focus();
                    });
                }
            } catch (err) { console.error(err); }
            arnSaveBtn.disabled = false;
        });
    }

    if (arnInput) {
        arnInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') { e.preventDefault(); arnSaveBtn.click(); }
            if (e.key === 'Escape') arnCancelBtn.click();
        });
    }

    const btn = document.getElementById('whatsappShareBtn');
    if (!btn) return;

    btn.addEventListener('click', function() {
        const mobile = @json($sale->party->mobile ?? '');
        if (!mobile) { alert('No mobile number found for this party.'); return; }

        let phone = mobile.replace(/[\s\-\+\(\)]/g, '');
        if (phone.length === 10) phone = '91' + phone;

        const company = @json($company->name);
        const billNo = @json($sale->bill_no);
        const date = @json($sale->invoice_date->format('d-M-Y'));
        const amount = @json(indian_number($sale->grand_total, 2));

        const msg = `*${company}*\nInvoice: *${billNo}*\nDate: ${date}\nTotal: ₹${amount}`;
        window.open('https://api.whatsapp.com/send?phone=' + phone + '&text=' + encodeURIComponent(msg + '\n\nPlease attach the invoice PDF/document manually before sending.'), '_blank');
    });
});
</script>
<style>.spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }</style>

<script>
function printSalesPdfInPage(pdfUrl, btn) {
    let frame = document.getElementById('sales-print-pdf-frame');
    if (!frame) {
        frame = document.createElement('iframe');
        frame.id = 'sales-print-pdf-frame';
        frame.style.display = 'none';
        document.body.appendChild(frame);
    }

    const origHtml = btn ? btn.innerHTML : null;
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<i class="ph-duotone ph-spinner spin"></i> Loading...';
    }

    const resetButton = function() {
        if (!btn) return;
        btn.disabled = false;
        btn.innerHTML = origHtml;
    };

    frame.onload = function() {
        try {
            frame.contentWindow.focus();
            frame.contentWindow.print();
        } catch (err) {
            window.location.href = pdfUrl;
        }
        resetButton();
    };

    const separator = pdfUrl.includes('?') ? '&' : '?';
    frame.src = pdfUrl + separator + 'print_ts=' + Date.now();
}

function downloadSalesPdf(pdfUrl) {
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.download = '';
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    setTimeout(function() { link.remove(); }, 1000);
}

document.addEventListener('click', function(e) {
    const btn = e.target.closest('.print-pdf-btn');
    if (!btn) return;
    if (btn.dataset.needsScaleModal === 'true') return;

    const pdfUrl = btn.dataset.pdfUrl;
    printSalesPdfInPage(pdfUrl, btn);
});
</script>
@if($showPdfScaleModal)
    @include('sales.partials.pdf_scale_modal')
@endif
@if($sale->mode === 'cash' && $sale->items->count() > 0)
<!-- Transfer Modal -->
<div class="modal fade" id="transferModal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header py-2 px-3">
                <h6 class="modal-title mb-0">Transfer — {{ $sale->bill_no }}</h6>
                <div class="d-flex align-items-center gap-2">
                    <select id="tf_company" class="form-select form-select-sm" style="width:220px">
                        <option value="">Loading...</option>
                    </select>
                    <button type="button" class="btn btn-primary btn-sm" id="tf_submit">
                        <i class="ph-duotone ph-arrow-square-right me-1"></i> Transfer
                    </button>
                    <span id="tf_status" class="small"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            </div>
            <div class="modal-body p-0" style="overflow-y:auto">
                <table class="table table-striped table-hover align-middle mb-0" style="font-size:.8rem;--bs-table-cell-padding-y:2px;--bs-table-cell-padding-x:6px">
                    <thead class="table-light" style="position:sticky;top:0;z-index:1">
                        <tr style="line-height:1">
                            <th style="width:35px;padding:6px 8px" class="ps-3"><input type="checkbox" id="tf_check_all" style="width:14px;height:14px" checked></th>
                            <th class="text-center" style="width:45px;padding:6px 8px">Sr</th>
                            <th style="padding:6px 8px">Product</th>
                            <th class="text-end" style="width:80px;padding:6px 8px">Avl</th>
                            <th style="width:100px;padding:6px 8px">Qty</th>
                            <th class="text-end" style="width:80px;padding:6px 8px">Rate</th>
                        </tr>
                    </thead>
                    <tbody id="tf_items"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
(function() {
    const createUrl  = @json(route('sale.transfer.create', $sale->id));
    const prefillUrl = @json(route('sale.transfer.prefill', $sale->id));
    const csrf       = document.querySelector('meta[name="csrf-token"]').content;
    const btn       = document.getElementById('transferBtn');
    if (!btn) return;

    const modal     = new bootstrap.Modal(document.getElementById('transferModal'));
    const compSel   = document.getElementById('tf_company');
    const tbody     = document.getElementById('tf_items');
    const submitBtn = document.getElementById('tf_submit');
    const statusEl  = document.getElementById('tf_status');
    const checkAll  = document.getElementById('tf_check_all');

    let items = [];

    btn.addEventListener('click', async function() {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Loading...</td></tr>';
        modal.show();

        const res = await fetch(createUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
        const data = await res.json();
        items = data.items;

        // Fill companies
        compSel.innerHTML = '<option value="">-- Select Company --</option>';
        data.companies.forEach(c => {
            compSel.innerHTML += `<option value="${c.id}">${c.name}</option>`;
        });

        // Fill items
        tbody.innerHTML = '';
        items.forEach((item, index) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="ps-3" style="padding:3px 8px"><input type="checkbox" class="tf-check" style="width:14px;height:14px" data-id="${item.id}" checked></td>
                <td class="text-center text-muted" style="padding:3px 8px;font-size:.8rem">${index + 1}</td>
                <td style="padding:3px 8px;font-size:.8rem"><strong>${item.name}</strong> <span class="text-muted" style="font-size:.72rem">${item.product_code}</span></td>
                <td class="text-end" style="padding:3px 8px;font-size:.8rem">${item.qty}</td>
                <td style="padding:3px 8px"><input type="number" step="0.001" min="0.001" max="${item.qty}" value="${item.qty}" class="form-control form-control-sm tf-qty" style="font-size:.78rem;padding:1px 4px;height:22px" data-id="${item.id}"></td>
                <td class="text-end" style="padding:3px 8px;font-size:.8rem">${item.rate}</td>
            `;
            tbody.appendChild(tr);
        });
        tbody.insertAdjacentHTML('beforeend', '<tr class="table-light"><td colspan="6" class="text-center text-muted fw-semibold">Table End</td></tr>');
    });

    checkAll.addEventListener('change', function() {
        tbody.querySelectorAll('.tf-check').forEach(c => c.checked = this.checked);
    });

    submitBtn.addEventListener('click', function() {
        const targetCompany = compSel.value;
        if (!targetCompany) { statusEl.textContent = 'Select a company'; statusEl.className = 'me-auto small text-danger'; return; }

        const selected = [];
        tbody.querySelectorAll('.tf-check:checked').forEach(cb => {
            const id = cb.dataset.id;
            const qty = parseFloat(tbody.querySelector(`.tf-qty[data-id="${id}"]`).value);
            if (qty > 0) selected.push({ sale_item_id: id, qty });
        });

        if (!selected.length) { statusEl.textContent = 'Select at least one item'; statusEl.className = 'me-auto small text-danger'; return; }

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="ph-duotone ph-spinner spin"></i> Opening...';
        statusEl.textContent = '';

        // Build a regular form and submit — redirects to sale.create with prefill session data
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = prefillUrl;

        const csrfIn = document.createElement('input');
        csrfIn.type = 'hidden'; csrfIn.name = '_token'; csrfIn.value = csrf;
        form.appendChild(csrfIn);

        const targetIn = document.createElement('input');
        targetIn.type = 'hidden'; targetIn.name = 'target_company_id'; targetIn.value = targetCompany;
        form.appendChild(targetIn);

        selected.forEach((it, i) => {
            const idIn = document.createElement('input');
            idIn.type = 'hidden';
            idIn.name = `items[${i}][sale_item_id]`;
            idIn.value = it.sale_item_id;
            form.appendChild(idIn);

            const qtyIn = document.createElement('input');
            qtyIn.type = 'hidden';
            qtyIn.name = `items[${i}][qty]`;
            qtyIn.value = it.qty;
            form.appendChild(qtyIn);
        });

        document.body.appendChild(form);
        form.submit();
    });

    // Auto-open modal if URL has #transfer
    if (window.location.hash === '#transfer') btn.click();
})();
</script>
@endif

@if($sale->mode !== 'cash' && $sale->items->count() > 0)
    @include('sales._ewb-modal')
@endif
@endpush