<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card">
            <div class="card-body py-20">

                <div class="mw-lg-950px mx-auto w-100">

                    <div id="printable-content">

                        <div class="d-flex justify-content-between flex-column flex-sm-row mb-19">
                            <h4 class="fw-bolder text-gray-800 fs-2qx pe-5 pb-7">بيانات الوثيقة</h4>
                            <div class="text-sm-end">
                                <a href="#">
                                    <img alt="<?= (!empty($settings->site_title)) ? $settings->site_title : 'نظام السندات' ?>"
                                        src="<?= (!empty($settings->logo)) ? base_url('uploads/logo/' . $settings->logo) : base_url('uploads/logo/logo.svg') ?>" />
                                </a>
                                <div class="text-sm-end fw-semibold fs-4 text-muted mt-7">
                                    <div>
                                        <?= (!empty($settings->site_title)) ? $settings->site_title : 'نظام السندات' ?>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="landing-dark-separator"></div>

                        <div class="border-bottom pb-12">
                            <div class="d-flex justify-content-between flex-column flex-md-row">

                                <div class="flex-grow-1 pt-8 mb-13">
                                    <div class="d-flex flex-column mw-md-300px w-100">

                                        <div class="fw-semibold fs-5 mb-3 text-dark00">بيانات الوثيقة</div>

                                        <div class="d-flex flex-stack text-gray-800 mb-3 fs-6">
                                            <div class="fw-semibold pe-5">العنوان:</div>
                                            <div class="text-end fw-norma">
                                                <?= esc($voucher['title']); ?>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-stack text-gray-800 mb-3 fs-6">
                                            <div class="fw-semibold pe-5">الاسم:</div>
                                            <div class="text-end fw-norma">****** ***** ******</div>
                                        </div>

                                        <div class="d-flex flex-stack text-gray-800 fs-6">
                                            <div class="fw-semibold pe-5">رقم الوثيقة:</div>
                                            <div class="text-end fw-norma">
                                                <?= esc($searchParams['serial_number']); ?>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div class="border-end d-none d-md-block mh-450px mx-9"></div>

                                <div class="text-start pt-10">
                                    <div class="fs-3 fw-bold text-muted mb-3">المبلغ</div>
                                    <div class="fs-xl-2x fs-2 fw-bolder">
                                        <?= esc($voucher['amount_number']); ?>
                                    </div>
                                    <div class="text-muted fw-semibold">ريال سعودي</div>

                                    <div class="border-bottom w-100 my-7 my-lg-16"></div>

                                    <div class="text-gray-600 fs-6 fw-semibold mb-3">رقم التحقق</div>
                                    <div class="fs-6 text-gray-800 fw-semibold mb-8">
                                        <?= esc($searchParams['verify_code']); ?>
                                    </div>
                                    <div class="text-gray-600 fs-6 fw-semibold mb-3">تاريخ الإنشاء</div>
                                    <div class="fs-6 text-gray-800 fw-semibold">
                                        <?= esc($voucher['created_at']); ?>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="d-flex flex-stack flex-wrap mt-lg-20 pt-13">
                        <div class="my-1 me-5">
                            <button type="button" class="btn btn-success my-1 me-12" onclick="printDiv()">
                                طباعة الوثيقة
                            </button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function printDiv() {
        var printContents = document.getElementById("printable-content").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }

</script>