@if ($overviewBond['shipment_bond'])
    <div class="{{ !$overviewBond['print'] ? 'overview-layout shadow' : '' }}">
        <div class="overview-container {{ $overviewBond['print'] ? 'd-none hidden-overview' : '' }}">
            <div class="row align-items-start justify-content-between my-1">
                <div class="col">
                    @if ($overviewBond['shipment_bond']->post_status == 0)
                        @can('representatives-shipmentBonds-edit')
                            <a href="{{ route('tenant.representatives.shipment-bonds.edit', ['shipment_bond' => $overviewBond['shipment_bond']->id]) }}"
                                class="btn orange-btn btn-sm mx-1">
                                @lang('general.edit')
                            </a>
                        @endcan
                    @endif

                    <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 class="btn btn-danger btn-sm" id="closeShowPage" type="button">x</button>
                </div>
            </div>

            <div class="printable-section">
                <input type="hidden" id="bond_employee" value="{{ json_encode($overviewBond['shipment_bond']->employee) }}">

                <div class="row my-0">
                    <div class="col-4 d-flex">
                        <b>  @lang('representatives/shipment-bonds/show.from_date') </b>
                        <p class="mx-1">{{ $overviewBond['shipment_bond']->from_date }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b>@lang('representatives/shipment-bonds/show.to_date') </b>
                        <p class="mx-1">{{ $overviewBond['shipment_bond']->to_date }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b>@lang('representatives/shipment-bonds/show.document_number')</b>
                        <p class="mx-1">{{ $overviewBond['shipment_bond']->bond_number }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b>@lang('representatives/shipment-bonds/show.document_status')</b>
                        <p class="mx-1">{{ $overviewBond['shipment_bond']->post_status ? 'مرحّل' : 'غير مرحّل' }}</p>
                    </div>
                </div>


                <div class="my-2 bond-as-bond">
                    <table class="table table-bordered without-herotable">
                        <thead>
                            <tr>
                                <th class="md-td">@lang('representatives/shipment-bonds/show.invoice_number') </th>
                                <th class="md-td">@lang('representatives/shipment-bonds/show.client')</th>
                                <th class="sm-td">@lang('representatives/shipment-bonds/show.address')</th>
                                <th class="md-td">@lang('representatives/shipment-bonds/show.status')</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($overviewBond['shipment_bond']->items as $item)
                                <tr>
                                    <td class="md-td">{{ $item->sales_invoice->bond_number }}</td>
                                    <td class="md-td">{{ $item->sales_invoice->client?->name }}</td>
                                    <td class="md-td">{{ json_encode($item->sales_invoice->client?->address?? []) }}</td>
                                    <td class="sm-td">---</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </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();
            target.find('.bond-as-bond').css('display', 'block');
            let title = "الشحنة";
            const print_data = @json(Session::get('print_data'));
            const css_link = '/tenancy/assets/css/accounting/printing/bonds.css';
            printSection.print(target, print_data, title, css_link, true, {});
        });
    </script>
@endpush