@if ($overviewBond['bond'])
    <div class="preview-popup shadow">
        <div class="preview-container">
            <div class="row align-items-start justify-content-between my-1">
                <div class="col">
                    <button class="btn orange-btn btn-sm print-bond-btn mx-1">
                        @lang('general.print') <i class="fas fa-print"></i>
                    </button>
                </div>
                <div class="col text-start">
                    <button id="closeShowPage" type="button" class="btn btn-danger btn-sm close-viewer-btn">x</button>
                </div>
            </div>

            <div id="printable-section" class="printable-section">
                <div class="mb-2 bond-as-bond">
                    <div class="row border border-dark pb-3 mx-auto">
                        <b class="text-center my-0">@lang('pos/aggregation-invoices/show.aggregation_invoice')</b>

                        <div class="col-4 d-flex">
                            <b>@lang('pos/aggregation-invoices/show.bond_number')</b>
                            <p class="mx-1">{{ $overviewBond['bond']->bond_number }}</p>
                        </div>

                        <div class="col-4 d-flex">
                            <b>@lang('pos/aggregation-invoices/show.branch')</b>
                            <p class="mx-1">{{ $overviewBond['bond']->branch?->name }}</p>
                        </div>

                        <div class="col-4 d-flex">
                            <b> @lang('pos/aggregation-invoices/show.invoice_date') : </b>
                            <p class="mx-1">{{ $overviewBond['bond']->date }}</p>
                        </div>

                        <div class="col-4 d-flex">
                            <b> @lang('pos/aggregation-invoices/show.total_before_tax') : </b>
                            <p class="mx-1">{{ dn($overviewBond['bond']->price - ($overviewBond['bond']->discount ?? 0)) }}</p>
                        </div>

                        <div class="col-4 d-flex">
                            <b> @lang('pos/aggregation-invoices/show.total_tax') : </b>
                            <p class="mx-1">{{ dn($overviewBond['bond']->tax_amount ?? 0) }}</p>
                        </div>

                        <div class="col-4 d-flex">
                            <b> @lang('pos/aggregation-invoices/show.total_after_tax') : </b>
                            <p class="mx-1">{{ dn($overviewBond['bond']->total) }}</p>
                        </div>
                    </div>

                    <h4 class="mt-3">@lang('pos/aggregation-invoices/show.items')</h4>
                    <table class="table table-bordered without-herotable h-auto w-full {{ $overviewBond['print'] ? 'd-block' : '' }}">
                        <thead>
                            <tr>
                                <th class="sm-td"> @lang('pos/aggregation-invoices/show.unit_code') </th>
                                <th class="{{ $overviewBond['print'] ? 'lg-td' : 'md-td' }}">@lang('pos/aggregation-invoices/show.item_description') </th>
                                <th class="xs-td">@lang('pos/aggregation-invoices/show.unit')</th>
                                <th class="sm-td">@lang('pos/aggregation-invoices/show.quantity')</th>
                                <th class="sm-td">@lang('pos/aggregation-invoices/show.unit_price')</th>
                                <th class="sm-td">@lang('pos/aggregation-invoices/show.discount_value')</th>
                                <th class="sm-td">@lang('pos/aggregation-invoices/show.tax_rate')</th>
                                <th class="sm-td">@lang('pos/aggregation-invoices/show.total')</th>
                            </tr>
                        </thead>

                        <tbody>
                            @php 
                                $totalQuantity = 0;
                                $totalPrice    = 0;
                                $totalDiscount = 0;
                                $finalTotal    = 0;
                            @endphp

                            @foreach ($overviewBond['bond']->items as $item)
                                @php 
                                    $quantity   = (float) $item->quantity;
                                    $price   = (float) $item->price;
                                    $discount = (float) ($item->discount ?? 0);
                                    $tax = (float) ($item->tax_ratio ?? 0);

                                    $totalQuantity += $quantity;
                                    $totalPrice    += $price;
                                    $totalDiscount += $discount;

                                    $itemTotal        = ($price * $quantity) - $discount;
                                    $itemTotalWithTax = $itemTotal * (1 + $tax / 100);
                                    $finalTotal      += $itemTotalWithTax; 
                                @endphp
                                <tr>
                                    <td class="sm-td">{{ $item->barcode?->number }}</td>
                                    <td class="{{ $overviewBond['print'] ? 'lg-td' : 'md-td' }}">{{ $item->barcode?->ar_name }}</td>
                                    <td class="xs-td">{{ $item->barcode?->unit?->name }}</td>
                                    <td class="sm-td">{{ dn($quantity) }}</td>
                                    <td class="sm-td">{{ dn($price) }}</td>
                                    <td class="sm-td">{{ dn($discount) }}</td>
                                    <td class="sm-td">{{ $tax ? ($tax . '%') : '---' }}</td>
                                    <td class="sm-td">{{ dn($itemTotalWithTax) }}</td>
                                </tr>
                            @endforeach
                        </tbody>

                        <tfoot>
                            <tr>
                                <td></td><td></td><td></td>
                                <td>{{ dn($totalQuantity) }}</td>
                                <td>{{ dn($totalPrice) }}</td>
                                <td>{{ dn($totalDiscount) }}</td>
                                <td></td>
                                <td>{{ dn($finalTotal) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <div class="row">
                    <div class="col-4 my-3 sip">
                        <h4>@lang('pos/aggregation-invoices/show.recipient_name')</h4>
                    </div>

                    <div class="col-4 my-3 sip">
                        <h4> @lang('pos/aggregation-invoices/show.recipient_signature')</h4>
                    </div>
                </div>

                <div class="row">
                    @php
                        function arabicTafqeet($value) {
                            return \Tafqeet::inArabic(
                                number_format((float) str_replace(',', '', $value), 3, '.', ''),
                                'jod'
                            );
                        }
                    @endphp
                    <div class="col-4">
                        <b>{{ arabicTafqeet(dn($finalTotal)) }}</b>
                    </div>
                    @php
                        $svgPath = storage_path(
                            'app/fotara/images/aggregation_invoice_' . $overviewBond['bond']->id . '_qr.svg',
                        );
                    @endphp
                    <div style="display:flex !important; width:100%; justify-content:center; margin-top:8px;">
                        @if (file_exists($svgPath))
                            <div style="display:flex; flex-direction:column; align-items:center; margin:20px 0 5px; gap:8px;">
                                <div class="qr-svg" style="display:block;">
                                    {!! file_get_contents($svgPath) !!}
                                </div>
                                <img src="{{ asset('images/fotara-logo.png') }}" alt="Posted To Fotara" style="width:90px; height:auto; display:block;">
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>
@endif

@push('script')
<script type="module">
    import printSection from "/tenancy/assets/js/print.js";
    $('body').on('click', '.print-bond-btn', function() {
        let target = $('#printable-section').clone();
        let title = "فاتورة تجميعية (POS)";
        const print_data = @json(Session::get('print_data'));
        let css_link = "/tenancy/assets/css/accounting/printing/bonds.css";
        printSection.print(target, print_data, title, css_link, true, {});
    });
</script>
@endpush