<template>
    <general-modal modal-id="messageDetailsModal" modal-size="modal-md">
        <template v-slot:title>
            <span>Details Information</span>
        </template>
        <template v-slot:body>
            <div class="mb-3" id="printMessageDetailsPrint">
                <div class="row">
                    <label class="col-md-6"><strong>a2pDeliveryStatus : </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'a2pDeliveryStatus')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>a2pSendSmsBusinessCode : </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'a2pSendSmsBusinessCode')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>ansSendSmsBusinessCode : </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'ansSendSmsBusinessCode')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>ansSendSmsHttpStatus: </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'ansSendSmsHttpStatus')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>mnoResponseCode: </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'mnoResponseCode')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>mnoResponseMessage: </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'mnoResponseMessage')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>serverResponseCode: </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'serverResponseCode')}}</label>
                </div>
                <div class="row">
                    <label class="col-md-6"><strong>serverTxnId: </strong></label>
                    <label class="col-md-6">{{showData(detailsData,'serverTxnId')}}</label>
                </div>
                <div class="row">
                    <div class="col-12">Delivery Status From Mobile Operator (SMS Parts)</div>
                    <hr>
                </div>
                <template v-for="(status, index) in detailsData.deliveryStatus">
                    <div class="row">
                        <div class="col-1">{{index+1}}</div>
                        <div class="col-9">{{status}}</div>
                    </div>
                </template>
            </div>
        </template>
        <template v-slot:buttons>
            <a @click="printData('printMessageDetailsPrint')" class="btn btn btn-outline-secondary fw-medium">
                <i class="fa fa-print"></i> Print
            </a>
        </template>
    </general-modal>
</template>

<script>
    import GeneralModal from "../../components/generalModal";
    export default {
        name: "checkMessageDetails",
        components: {GeneralModal},
    }
</script>

<style scoped>
    @media print {
        body, .card, .card-body, .main_component, .container, .main-content, #printMessageDetails {
            background-color: #FFF !important;
        }
    }
</style>
