@if ($overviewInvoice['invoice'] != null)
    <div class="{{ ($overviewInvoice['mode'] != 'print')? 'overview-layout shadow' : '' }}">
        <div class="overview-container {{ ($overviewInvoice['mode'] == 'print')? 'd-none' : '' }}">
            <div class="row align-items-start justify-content-between my-1">
                <div class="col">
                    <button id="printEntry" class="btn orange-btn btn-sm print-entry-btn mx-1">
                        @lang('general.print')
                    </button>
                </div>

                <div class="col text-start">
                    <button class="btn btn-danger btn-sm" type="button" id="closeShowPage" >x</button>
                </div>
            </div>

            <div id="printable-section">
                <div class="row my-2">
                    <div class="d-flex justify-content-center text-black"
                        style="background: #EBEBEC; margin-bottom: 20px; padding: 10px; font-weight: bold; font-size: 16px;">
                        @lang('rentals/contract-invoices/show.tenant_information')
                    </div>
                    <div class="col-4 d-flex">
                        <b> @lang('rentals/contract-invoices/show.tenant') : </b>
                        <p class="mx-1 w-50">{{ $overviewInvoice['invoice']->contract->tenant->name }}</p>
                    </div>
                    <div class="col-4 d-flex">
                        <b>@lang('rentals/contract-invoices/show.tenant') : </b>
                        <p class="mx-1 w-50">{{ $overviewInvoice['invoice']->contract->tenant->email }}</p>
                    </div>
                    <div class="col-4 d-flex">
                        <b>@lang('rentals/contract-invoices/show.phone_number')  : </b>
                        <p class="mx-1 w-50">{{ $overviewInvoice['invoice']->contract->tenant->phone_1}}</p>
                    </div>
                </div>

                <div class="row my-2">
                    <div class="d-flex justify-content-center text-black"
                        style="background:#EBEBEC; margin-bottom: 20px; padding: 10px;  font-weight: bold; font-size: 16px;">
                        @lang('rentals/contract-invoices/show.rented_place_information')
                    </div>

                    <div class="col-4 d-flex">
                        <b>@lang('rentals/contract-invoices/show.type_of_rented_place') : </b>
                        <p class="mx-1">{{ $overviewInvoice['invoice']->contract->rented_place_type == "shop"? 'محل' : 'بوث' }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b>@lang('rentals/contract-invoices/show.location') : </b>
                        <p class="mx-1">{{ $overviewInvoice['invoice']->contract->rented_place->title }}</p>
                    </div>
                </div>

                <div class="row">
                    <div class="d-flex justify-content-center text-black"
                        style="background: #EBEBEC; margin-bottom: 20px; padding: 10px;  font-weight: bold; font-size: 16px;">
                        @lang('rentals/contract-invoices/show.invoice_information')
                    </div>

                    <div class="col-4 d-flex">
                        <b> @lang('rentals/contract-invoices/show.date'):</b>
                        <p class="mx-1">{{ $overviewInvoice['invoice']->accrued_date_starting }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b> @lang('rentals/contract-invoices/show.invoice_number') : </b>
                        <p class="mx-1">{{ $overviewInvoice['invoice']->id }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b>@lang('rentals/contract-invoices/show.invoice_status') : </b>
                        <p class="mx-1">{{ ($overviewInvoice['invoice']->post_status)? 'مصدّرة' : 'غير مصدّرة' }}</p>
                    </div>
                </div>

                <div class="mt-3 row">
                    <div class="col-4 d-flex">
                        <b>@lang('rentals/contract-invoices/show.invoice_value')  : </b>
                        <p class="mx-1">{{ $overviewInvoice['invoice']->amount }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b> @lang('rentals/contract-invoices/show.remaining_value') : </b>
                        <p class="mx-1">{{ $overviewInvoice['invoice']->accrued_amount }}</p>
                    </div>
                </div>

                <div class="d-flex justify-content-center text-black"
                    style="background: #EBEBEC; margin-bottom: 20px; padding: 10px; font-weight: bold; font-size: 16px;">
                    @lang('rentals/contract-invoices/show.account_information')
                </div>

                <div class="row mt-3">

                    <div class="col-4 d-flex">
                        <b>  @lang('rentals/contract-invoices/show.from_account') : </b>
                        <p class="mx-1 w-50">{{ $overviewInvoice['invoice']->contract->tenant->name }}</p>
                    </div>

                    <div class="col-4 d-flex">
                        <b> @lang('rentals/contract-invoices/show.to_account')  : </b>
                        <p class="mx-1">   @lang('rentals/contract-invoices/show.accrued_revenue_current_liabilities')</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 d-flex">
                    <b> @lang('general.description') : </b>
                    <p class="mx-1" style="width: 290px">{{ ($overviewInvoice['invoice']->notice)?? '---' }}</p>
                </div>
            </div>
            <hr>

            <div>
                {!!
                    QrCode::size(100)->generate(route('tenant.show-document', ['type' => 'rentals-invoice', 'id' => $overviewInvoice['invoice']->id]))
                !!}
            </div>
        </div>
    </div>
@endif

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

        $("body").on("click", ".print-entry-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