@extends('tenant.representatives.representative-tabs')
@php
    $activeTab = 'shipment-bonds';
@endphp
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.representatives') => '#',
            __('breadcrumb.shipments') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'representatives.bonds.shipment-bonds'])
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('css/accounting/show-popups/index.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
@endsection

@section('content-field')
    <div>
        @php
            $data = [
                'shipment_bonds' => $shipment_bonds,
                'print_data' => Session::get('print_data'),
            ];
        @endphp

        <shipment-bonds
            data="{{ json_encode($data) }}">
        </shipment-bonds>
    </div>
@endsection

@push('script')
    @scriptag('build/js/vue-components/shipment-bonds.js')
@endpush

@prepend('script')
    <script type="module">
        import printSection from "/tenancy/assets/js/print.js";

        $("body").on("click", ".print-table-view-btn", function() {
            let target = $("#printable-shipment-bonds-table").clone();
            let title = "الشحنات";
            const print_data = @json(Session::get('print_data'));
            printSection.print(target, print_data, title, null, true);
        });
    </script>
@endprepend