<script setup>
const firstName = ref('')
const email = ref('')
const mobile = ref()
const password = ref()
const checkbox = ref(false)
const getPrintData = ref([]);

const props = defineProps({
    itemProps: {
        type: Array,
        required: false,
    },
})


const calculateAge = (dob) => {
    const birthDate = new Date(dob);
    const today = new Date();

    let years = today.getFullYear() - birthDate.getFullYear();
    let months = today.getMonth() - birthDate.getMonth();
    let days = today.getDate() - birthDate.getDate();

    // Adjust the days and months if negative
    if (days < 0) {
        months -= 1;
        let previousMonth = today.getMonth() - 1;
        if (previousMonth < 0) {
            previousMonth = 11; // December
        }
        const daysInPreviousMonth = new Date(today.getFullYear(), previousMonth + 1, 0).getDate();
        days += daysInPreviousMonth;
    }

    if (months < 0) {
        years -= 1;
        months += 12;
    }

    // Return the largest unit that is non-zero
    if (years > 0) {
        return `${years} year${years !== 1 ? 's' : ''}`;
    } else if (months > 0) {
        return `${months} month${months !== 1 ? 's' : ''}`;
    } else {
        return `${days} day${days !== 1 ? 's' : ''}`;
    }
};

const changeDateFormat = (dateFormat) => {
    const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
    const year = parseInt(dateParts[0]);
    const month = parseInt(dateParts[1]); // No need for padding
    const day = parseInt(dateParts[2]); // No need for padding

    // Create a new Date object with the parsed values
    const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

    // Format the date as mm-dd-yyyy
    const formattedDate = month + '-' + day + '-' + date.getFullYear();

    return formattedDate;
}

// const changeDateFormat = (dateFormat) => {
//     const dateObject = new Date(dateFormat);
//     const month = String(dateObject.getMonth() + 1).padStart(2, '0'); // Adding 1 because getMonth() returns zero-based month index
//     const day = String(dateObject.getDate()).padStart(2, '0');
//     const year = dateObject.getFullYear();
//     return `${month}-${day}-${year}`;
// }
</script>
<template>

    <!-- <VCard class="px-3"> -->
    <div class="data pb-0">
        <div style="line-height:25px;">
            <v-row class="px-3 ">

                <v-col cols="12" md="12" class="d-flex   align-items-center pb-0 pl-0 pr-0">
                    <label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info"
                        for="mobile">Name: </label>
                    <div class="border-bottom font-style"><span class="bottomlined_value">

                            {{ props.itemProps.first_name }} {{ props.itemProps.last_name }}</span></div>
                    <!-- <v-text-field class="cross text-primary" variant="underlined"></v-text-field> -->
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="12" md="12" class="cross d-flex   align-items-center pb-0">
                    <label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info"
                        for="mobile">Address:
                    </label>
                    <div class="border-bottom font-style">
                        <span class="bottomlined_value">{{ props.itemProps.patient_address }}</span>
                    </div>
                    <!-- <v-text-field class="field-laypout text-primary" variant="underlined"></v-text-field> -->
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="4" md="4" sm="4" class="cross d-flex   align-items-center pb-0">
                    <label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info" for="mobile">Age:
                    </label>
                    <div class="border-bottom fs-0 font-style"><span class="bottomlined_value"> {{
                                calculateAge(props.itemProps.dob)
                            }}</span>
                    </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>

                <v-col cols="4" md="4" sm="4" class="cross d-flex w-100   align-items-center pb-0">
                    <label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info" for="mobile">Sex:
                    </label>
                    <div class="border-bottom font-style"><span class="bottomlined_value"> {{ props.itemProps.gender
                            }}</span> </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>

                <v-col cols="4" md="4" sm="4" class="cross d-flex   align-items-center pb-0 pl-0">
                    <label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info"
                        for="mobile">Date: </label>
                    <div class="border-bottom font-style pl-2"><span class="bottomlined_value"> {{
                                changeDateFormat(props.itemProps.date) }}</span> </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
            </v-row>
        </div>
        <v-row class="px-3 py-5 mt-5 pb-5 mb-5">
            <div class="w-100 ml-5">
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">Name:
                        </label> -->
                    <div class="prescription fs-0 W-100 ml-5 mt-3 text-prescriptin-color">
                        <span class="bottomlined_value">{{ props.itemProps.name
                            }}</span>
                    </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">Brand:
                        </label> -->
                    <div class="prescription ml-5 mt-3 text-prescriptin-color"> <span class="bottomlined_value">{{
                                props.itemProps.brand }}</span> </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
                        </label> -->

                    <div class="prescription font-style ml-5 mt-3 text-prescriptin-color"><span
                            class="bottomlined_value">{{ props.itemProps.from
                            }}</span>
                    </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
                        </label> -->

                    <div class="prescription font-style ml-5 mt-3 text-prescriptin-color">
                        <span class="bottomlined_value">{{ props.itemProps.direction_quantity }} </span>
                    </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
                        </label> -->

                    <div class="prescription font-style ml-5 mt-3 text-prescriptin-color">
                        <span class="bottomlined_value"> {{ props.itemProps.dosage }}</span>
                    </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
                        </label> -->

                    <div class="prescription font-style ml-5 mt-3 text-prescriptin-color">
                        <span class="bottomlined_value"> {{ props.itemProps.quantity }}</span>
                    </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>
                <v-col cols="12" md="12" sm="12" class="cross d-flex   align-items-center pb-0">
                    <!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
                        </label> -->

                    <div class="prescription font-style ml-5 mt-3"> <span class="bottomlined_value">{{
                                props.itemProps.refill_quantity }} </span> </div>
                    <!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
                </v-col>

            </div>
        </v-row>
        <v-row class="p-0 py-0 m-0 pt-1">
            <v-col cols="6" offset="6" class="cross bottom-input d-flex align-items-center">
                <label class=" text-body-2 text-primary-color mb-0 physician-sign" for="physician-sign">Physician
                    sign's:</label>
                <div class="border-bottom font-style"> <span class="bottomlined_value"> {{ props.itemProps.agent_sign }}
                    </span></div>
                <!-- <div class="border-bottom"> Physician
                    sign's </div> -->
                <!-- <v-text-field class="cross text-primary" variant="underlined" id="physician-sign"></v-text-field> -->
            </v-col>
        </v-row>
        <v-row class="p-0 py-0 m-0 pt-1">
            <v-col cols="6" offset="6" class="cross w-50 pt-0 d-flex align-items-center">
                <label class="text-body-2 text-primary-color mr-0 lic-no" for="lic-no">Lic No.</label>
                <div class="border-bottom text-left font-style"> <span class="bottomlined_value">{{
                                props.itemProps.medical_license_number }} </span> </div>
                <!-- <v-text-field class="cross text-primary" variant="underlined" id="lic-no"></v-text-field> -->
            </v-col>
        </v-row>
        <v-row class="p-0 py-0 m-0 pt-1">
            <v-col cols="6" offset="6" class="cross w-50 pt-0 d-flex align-items-center">
                <label class="text-body-2 text-high-emphasis text-primary-color mr-0 ptr-no" for="ptr-no">
                    PTR
                    No.</label>
                <div class="border-bottom text-left font-style"> <span class="bottomlined_value"></span></div>
                <!-- <v-text-field class="cross" variant="underlined" id="ptr-no"></v-text-field> -->
            </v-col>
        </v-row>
        <v-row class="p-0 py-0 m-0 pt-0">
            <v-col cols="6" offset="6" class="cross w-50 pt-0 d-flex align-items-center mb-1">
                <label class="v-label text-high-emphasis text-primary-color mr-0 sr-no" for="sr-no">S2 No.
                    :</label>
                <div class="border-bottom text-left font-style"><span class="bottomlined_value"></span> </div>
                <!-- <v-text-field class="cross" variant="underlined" id="sr-no"></v-text-field> -->
            </v-col>
        </v-row>


    </div>
    <!-- </VCard> -->
</template>
<style>
.physician-sign {
    width: 162px;

}

.sr-no {
    width: 60px;
}

.ptr-no {
    width: 67px;
}

.lic-no {
    width: 56px;
}

.print_info {
    position: relative;
    top: 7px;
}

.border-bottom1 {
    border-bottom: 1px solid black;
    /* Adjust thickness and color as needed */
    width: 100%;
    /* font-weight: 800; */
    /* Ensure the underline spans the entire width */
}

.data {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;


}

.data::after {
    content: "";
    background: url('@images/pages/watermark.png') no-repeat;
    opacity: 0.1;
    top: 30%;
    left: 30%;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    height: 50%;
    width: 50%;
}

@media screen and (max-width:567px) {
    .data::after {
        content: "";
        background: url('@images/pages/watermark.png') no-repeat;
        opacity: 0.1;
        top: 30%;
        left: 20%;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        height: 50%;
        width: 100%;
    }
}

.font-style {
    font-size: 12px;
}

h1::after {

    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
}

@font-face {
    font-family: 'ReceiptDemo';
    src: url('@vendor/fonts/fontawesome/ReceiptDemo.ttf') format('truetype');
}

@font-face {
    font-family: 'Shatomi-PKrrg';
    src: url('@vendor/fonts/fontawesome/Shatomi-PKrrg.ttf') format('truetype');
}

@font-face {
    font-family: 'doctor-signature';
    src: url('@vendor/fonts/fontawesome/doctor-signature.ttf') format('truetype');
}


.bottomlined_value {
    position: relative;
    top: 5px;
    left: 10px;
}

.cross {
    padding-top: 0px;
    padding-bottom: 0px
}

label.v-label.text-body-2.text-high-emphasis.text-primary {
    position: relative;
    top: 18px;
    right: 5px;
}

.text-primary-color {
    position: relative;
    top: 5px;
    /* right: 0px; */
    /* left: 10px; */
    color: #909fea !important;
    font-family: 'ui-serif !important' !important;
    /* font-size: 15px !important; */
}

.text-primary-sign {
    position: relative;
    top: 8px;
    /* right: 0px; */
    /* left: 10px; */
    color: #909fea !important;
    font-family: 'ui-serif !important' !important;
}

.text-prescriptin-color {
    position: relative;
    top: 7px;
    /* right: 0px; */
    /* left: 10px; */
    color: #060606 !important;
    font-family: 'ReceiptDemo' !important;
}

.border-bottom {
    border-bottom: 1px solid #909fea !important;
    width: 100%;
    /* margin-left: 3px; */
    /* margin-top: 5px; */
    font-weight: 800;
    color: #060606 !important;
    font-family: 'Shatomi-PKrrg' !important;
    /* font-size: 15px; */
}

.prescription {
    /* border-bottom: 1px solid #7680AD !important; */
    width: 100%;
    margin-left: 10px;
    margin-top: 5px;
    font-weight: 800;
    font-family: 'Shatomi-PKrrg' !important;
}

.field-laypout {
    padding-top: 0px
}

.v-text-field--underlined .v-input__control::before {
    border-bottom-width: 100px;
    /* Adjust the thickness as needed */
}
</style>
