@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/sales-invoices/show.pos_invoice') </b>
                        <div class="col-4 d-flex">
                            <b>  @lang('pos/sales-invoices/show.sales_invoice_number') : </b>
                            <p class="mx-1">{{ $overviewBond['bond']->bond_number }}</p>
                        </div>

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

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

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

                        <div class="col-4 d-flex">
                            <b>  @lang('pos/sales-invoices/show.receipt_date') : </b>
                            <p class="mx-1">{{ $overviewBond['bond']->created_at->format('Y-m-d')  }}</p>
                        </div>

                        <div class="col-4 d-flex">
                            <b> @lang('pos/sales-invoices/show.client'): </b>
                            <p class="mx-1">{{ $overviewBond['bond']->client?->name ?? 'نقدي' }}</p>
                        </div>

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

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

                    <h4 class="mt-3">@lang('pos/sales-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/sales-invoices/show.unit_code')</th>
                                <th class="{{ $overviewBond['print'] ? 'lg-td' : 'md-td' }}">@lang('pos/sales-invoices/show.item_description') </th>
                                <th class="xs-td">@lang('pos/sales-invoices/show.unit')</th>
                                <th class="sm-td">@lang('pos/sales-invoices/show.quantity')</th>
                                <th class="sm-td"> @lang('pos/sales-invoices/show.unit_price')</th>
                                <th class="sm-td"> @lang('pos/sales-invoices/show.discount_value')</th>
                                <th class="sm-td"> @lang('pos/sales-invoices/show.free_quantity')</th>
                                <th class="sm-td">  @lang('pos/sales-invoices/show.tax_rate')</th>
                                <th class="sm-td"> @lang('pos/sales-invoices/show.total')</th>
                                <th class="sm-td dsip"> @lang('pos/sales-invoices/show.notes')</th>
                            </tr>
                        </thead>

                        <tbody>
                            @php 
                                $totalQuantity = 0;
                                $totalPrice = 0;
                                $totalDiscount = 0;
                                $finalTotal = 0;
                            @endphp
                            @foreach ($overviewBond['bond']->items as $item)
                                @php 
                                     $totalQuantity += $item->quantity; 
                                     $totalPrice += $item->price;
                                     $totalDiscount += $item->total_discount_amount;                              
                                @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($item->quantity) }}</td>
                                    <td class="sm-td">{{ dn($item->price) }}</td>
                                    <td class="sm-td">{{ dn($item->total_discount_amount) }}</td>
                                    <td class="sm-td">{{ $item->free_quantity ?? '---' }}</td>
                                    <td class="sm-td"> {{ $overviewBond['bond']->with_tax ? ($item->tax_ratio . '%') : '---' }} </td>
                                    <td class="sm-td">
                                        @php
                                            $itemTotal = ($item->price * $item->quantity) - $item->total_discount_amount;
                                            $taxRatio = $overviewBond['bond']->with_tax ? ($item->tax_ratio ?? 0) : 0;
                                            $itemTotalWithTax = $itemTotal * (1 + $taxRatio / 100);
                                            $finalTotal += $itemTotalWithTax; 
                                        @endphp
                                        {{ dn($itemTotalWithTax) }}
                                    </td>
                                    <td class="sm-td dsip">{{ $overviewBond['bond']->note }}</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> </td>
                                <td> {{ dn($finalTotal) }} </td>
                            </tr>

                        </tfoot>
                    </table>
                </div>

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

                    <div class="col-4 my-3 sip">
                        <h4> @lang('pos/sales-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/pos_sales_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 = "فاتورة نقاط البيع ";
            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