{"id":8592,"date":"2026-05-16T18:49:44","date_gmt":"2026-05-16T18:49:44","guid":{"rendered":"https:\/\/inovadigisolutions.com\/?page_id=8592"},"modified":"2026-05-16T18:49:46","modified_gmt":"2026-05-16T18:49:46","slug":"invoices","status":"publish","type":"page","link":"https:\/\/inovadigisolutions.com\/?page_id=8592","title":{"rendered":"Invoices"},"content":{"rendered":"<div id=\"invd_8882-container\" class=\"invd-print-container\" style=\"font-family:'DM Sans',sans-serif;\">\n\n<style>\n\/* Base styles *\/\n#invd_8882-container * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n}\n\n#invd_8882-container {\n    font-family: 'DM Sans', sans-serif;\n    background: #f4f5f7;\n    padding: 24px 16px;\n}\n\n.invd_8882-wrap {\n    max-width: 1000px;\n    margin: 0 auto;\n    width: 100%;\n}\n\n\/* Toolbar *\/\n.invd_8882-toolbar {\n    background: #fff;\n    border: 1px solid #e2e8f0;\n    border-radius: 12px 12px 0 0;\n    padding: 12px 20px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    border-bottom: none;\n}\n\n.invd_8882-toolbar-label {\n    font-size: 11px;\n    color: #94a3b8;\n    margin-left: auto;\n    font-weight: 500;\n}\n\n.invd_8882-btn {\n    background: #2d6cdf;\n    color: #fff;\n    border: none;\n    padding: 8px 16px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    font-family: 'DM Sans', sans-serif;\n    cursor: pointer;\n    transition: opacity 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.invd_8882-btn:hover {\n    opacity: 0.85;\n}\n\n.invd_8882-btn-outline {\n    background: #fff;\n    color: #2d6cdf;\n    border: 1px solid #2d6cdf;\n    padding: 7px 14px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: 'DM Sans', sans-serif;\n    transition: all 0.2s;\n}\n\n.invd_8882-btn-outline:hover {\n    background: #eef3ff;\n}\n\n.invd_8882-select {\n    border: 1px solid #e2e8f0;\n    border-radius: 8px;\n    padding: 7px 12px;\n    font-size: 12px;\n    font-family: 'DM Sans', sans-serif;\n    color: #374151;\n    background: #fff;\n    cursor: pointer;\n}\n\n\/* Invoice card *\/\n.invd_8882-invoice {\n    background: #fff;\n    border-radius: 0 0 12px 12px;\n    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);\n    overflow: hidden;\n}\n\n\/* Header *\/\n.invd_8882-header {\n    background: #0d1b2a;\n    color: #fff;\n    padding: 1.5rem 2rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 20px;\n}\n\n.invd_8882-brand-name {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #fff;\n    letter-spacing: -0.3px;\n}\n\n.invd_8882-brand-url {\n    font-size: 11px;\n    color: rgba(255, 255, 255, 0.6);\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    margin-top: 4px;\n}\n\n.invd_8882-brand-addr {\n    margin-top: 12px;\n    font-size: 12px;\n    color: rgba(255, 255, 255, 0.7);\n    line-height: 1.6;\n}\n\n.invd_8882-inv-label {\n    font-size: 11px;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    color: rgba(255, 255, 255, 0.6);\n    margin-bottom: 4px;\n}\n\n.invd_8882-inv-number {\n    font-size: 1.5rem;\n    font-weight: 500;\n    color: #fff;\n    letter-spacing: 1px;\n}\n\n.invd_8882-accent-bar {\n    height: 4px;\n    background: linear-gradient(90deg, #2d6cdf, #4fc3f7);\n}\n\n\/* Meta row - Responsive grid *\/\n.invd_8882-meta {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    border-bottom: 1px solid #eaecf0;\n}\n\n.invd_8882-meta-cell {\n    padding: 1rem 1.5rem;\n    border-right: 1px solid #eaecf0;\n}\n\n.invd_8882-meta-cell:last-child {\n    border-right: none;\n}\n\n@media (max-width: 640px) {\n    .invd_8882-meta-cell {\n        border-right: none;\n        border-bottom: 1px solid #eaecf0;\n    }\n    .invd_8882-meta-cell:last-child {\n        border-bottom: none;\n    }\n}\n\n.invd_8882-meta-label {\n    font-size: 10px;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    color: #94a3b8;\n    margin-bottom: 5px;\n    font-weight: 600;\n}\n\n.invd_8882-meta-value {\n    font-size: 13px;\n    color: #1e293b;\n    font-weight: 500;\n}\n\n\/* Parties section - Responsive *\/\n.invd_8882-parties {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    padding: 1.5rem 2rem;\n    gap: 2rem;\n    border-bottom: 1px solid #eaecf0;\n}\n\n.invd_8882-party-label {\n    font-size: 10px;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    color: #2d6cdf;\n    margin-bottom: 8px;\n    font-weight: 700;\n}\n\n.invd_8882-party-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: #1e293b;\n    margin-bottom: 4px;\n}\n\n.invd_8882-party-detail {\n    font-size: 12px;\n    color: #64748b;\n    line-height: 1.6;\n    white-space: pre-line;\n}\n\n\/* Items section - Responsive table *\/\n.invd_8882-items {\n    padding: 1.5rem 2rem;\n}\n\n.invd_8882-items-header {\n    display: grid;\n    grid-template-columns: 3fr 0.8fr 1.2fr 1.2fr 40px;\n    gap: 8px;\n    padding-bottom: 12px;\n    border-bottom: 2px solid #0d1b2a;\n    margin-bottom: 8px;\n}\n\n@media (max-width: 640px) {\n    .invd_8882-items-header {\n        display: none;\n    }\n}\n\n.invd_8882-col-head {\n    font-size: 11px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: #94a3b8;\n    font-weight: 600;\n}\n\n.invd_8882-col-head.right {\n    text-align: right;\n}\n\n.invd_8882-item-row {\n    display: grid;\n    grid-template-columns: 3fr 0.8fr 1.2fr 1.2fr 40px;\n    gap: 8px;\n    padding: 12px 4px;\n    border-bottom: 1px solid #f1f5f9;\n    align-items: center;\n}\n\n@media (max-width: 640px) {\n    .invd_8882-item-row {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        padding: 15px;\n        background: #f8fafc;\n        border-radius: 10px;\n        margin-bottom: 12px;\n        border-bottom: none;\n        position: relative;\n    }\n    \n    .invd_8882-item-row > div {\n        width: 100%;\n    }\n    \n    .invd_8882-item-row .invd_8882-item-amount {\n        font-size: 16px;\n    }\n    \n    .invd_8882-del-btn {\n        position: absolute;\n        top: 10px;\n        right: 10px;\n    }\n    \n    \/* Add labels for mobile *\/\n    .invd_8882-item-row .invd_8882-item-qty::before {\n        content: \"Qty: \";\n        font-weight: 600;\n        color: #64748b;\n        font-size: 11px;\n    }\n    \n    .invd_8882-item-row .invd_8882-item-rate::before {\n        content: \"Rate: \";\n        font-weight: 600;\n        color: #64748b;\n        font-size: 11px;\n    }\n}\n\n.invd_8882-item-row:hover {\n    background: #f8fafc;\n}\n\n@media (min-width: 641px) {\n    .invd_8882-item-row:hover {\n        background: #f8fafc;\n    }\n}\n\n.invd_8882-svc-name {\n    font-size: 14px;\n    color: #1e293b;\n    font-weight: 600;\n}\n\n.invd_8882-svc-desc {\n    font-size: 11px;\n    color: #94a3b8;\n    margin-top: 2px;\n}\n\n.invd_8882-item-qty,\n.invd_8882-item-rate {\n    font-size: 13px;\n    color: #475569;\n}\n\n.invd_8882-item-amount {\n    font-size: 14px;\n    color: #1e293b;\n    font-weight: 700;\n    text-align: right;\n}\n\n@media (max-width: 640px) {\n    .invd_8882-item-amount {\n        text-align: left;\n    }\n}\n\n.invd_8882-del-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #cbd5e1;\n    font-size: 16px;\n    padding: 6px;\n    border-radius: 6px;\n    transition: all 0.2s;\n}\n\n.invd_8882-del-btn:hover {\n    color: #ef4444;\n    background: #fef2f2;\n}\n\n\/* Editable fields *\/\n[contenteditable] {\n    outline: none;\n    border-bottom: 1px dashed transparent;\n    transition: border-color 0.2s;\n    padding: 2px 4px;\n    border-radius: 4px;\n}\n\n[contenteditable]:focus {\n    border-bottom-color: #2d6cdf;\n    background: #f0f6ff;\n}\n\n\/* Quick pick *\/\n.invd_8882-quick-pick {\n    background: #f8fafc;\n    border: 1px solid #e8eaf0;\n    border-radius: 12px;\n    padding: 16px 20px;\n    margin-top: 16px;\n}\n\n.invd_8882-quick-title {\n    font-size: 11px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: #94a3b8;\n    margin-bottom: 12px;\n    font-weight: 700;\n}\n\n.invd_8882-svc-pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n}\n\n.invd_8882-svc-pill {\n    background: #fff;\n    border: 1px solid #e2e8f0;\n    border-radius: 30px;\n    padding: 6px 16px;\n    font-size: 12px;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s;\n    font-family: 'DM Sans', sans-serif;\n}\n\n.invd_8882-svc-pill:hover {\n    border-color: #2d6cdf;\n    color: #2d6cdf;\n    background: #eef3ff;\n    transform: translateY(-1px);\n}\n\n\/* Totals - Responsive *\/\n.invd_8882-totals {\n    padding: 1rem 2rem 1.5rem;\n    display: flex;\n    justify-content: flex-end;\n}\n\n@media (max-width: 640px) {\n    .invd_8882-totals {\n        justify-content: stretch;\n    }\n    .invd_8882-totals-box {\n        width: 100%;\n    }\n}\n\n.invd_8882-totals-box {\n    width: 300px;\n}\n\n@media (max-width: 640px) {\n    .invd_8882-totals-box {\n        width: 100%;\n    }\n}\n\n.invd_8882-total-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    font-size: 13px;\n    color: #64748b;\n    align-items: center;\n}\n\n.invd_8882-total-row.grand {\n    border-top: 2px solid #0d1b2a;\n    margin-top: 8px;\n    padding-top: 12px;\n}\n\n.invd_8882-total-row.grand .t-label {\n    font-size: 14px;\n    font-weight: 700;\n    color: #0d1b2a;\n}\n\n.invd_8882-total-row.grand .t-value {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: #0d1b2a;\n}\n\n.invd_8882-tax-input {\n    width: 55px;\n    text-align: center;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 3px 5px;\n    font-size: 12px;\n    font-family: 'DM Sans', sans-serif;\n    color: #475569;\n}\n\n\/* Notes *\/\n.invd_8882-notes {\n    padding: 0 2rem 1.5rem;\n}\n\n.invd_8882-notes-label {\n    font-size: 10px;\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n    color: #94a3b8;\n    margin-bottom: 8px;\n    font-weight: 700;\n}\n\n.invd_8882-notes-area {\n    border: 1px dashed #e2e8f0;\n    border-radius: 10px;\n    padding: 12px 16px;\n    font-size: 13px;\n    color: #475569;\n    min-height: 70px;\n    font-family: 'DM Sans', sans-serif;\n    line-height: 1.6;\n    background: #fafbfd;\n}\n\n.invd_8882-notes-area[contenteditable]:focus {\n    border-color: #2d6cdf;\n    background: #fff;\n    outline: none;\n}\n\n\/* Status badge *\/\n.invd_8882-status {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 16px;\n    border-radius: 30px;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n    cursor: pointer;\n}\n\n.status-UNPAID {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.status-PAID {\n    background: #d1fae5;\n    color: #065f46;\n}\n\n.status-DRAFT {\n    background: #e0e7ff;\n    color: #3730a3;\n}\n\n.status-OVERDUE {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n\/* Footer *\/\n.invd_8882-footer {\n    background: #f8fafc;\n    border-top: 1px solid #eaecf0;\n    padding: 1.2rem 2rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    gap: 20px;\n}\n\n.invd_8882-footer-label {\n    font-size: 10px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: #94a3b8;\n    margin-bottom: 6px;\n    font-weight: 700;\n}\n\n.invd_8882-footer-text {\n    font-size: 12px;\n    color: #64748b;\n    line-height: 1.6;\n}\n\n\/* Support box - Responsive *\/\n.invd_8882-support {\n    background: #f0f6ff;\n    border: 1px solid #bfdbfe;\n    border-radius: 12px;\n    margin: 0 2rem 1.5rem;\n    padding: 16px 20px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: center;\n}\n\n@media (max-width: 768px) {\n    .invd_8882-support {\n        flex-direction: column;\n        align-items: stretch;\n    }\n}\n\n.invd_8882-sup-label {\n    font-size: 11px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: #2d6cdf;\n    font-weight: 700;\n    margin-bottom: 4px;\n}\n\n.invd_8882-sup-item {\n    font-size: 12px;\n    color: #374151;\n}\n\n.invd_8882-sup-item a {\n    color: #2d6cdf;\n    text-decoration: none;\n}\n\n.invd_8882-sup-item a:hover {\n    text-decoration: underline;\n}\n\n\/* Print styles - Hide toolbar only *\/\n@media print {\n    .invd_8882-toolbar {\n        display: none !important;\n    }\n    \n    #invd_8882-container {\n        background: #fff !important;\n        padding: 0 !important;\n        margin: 0 !important;\n    }\n    \n    .invd_8882-invoice {\n        box-shadow: none !important;\n        border-radius: 0 !important;\n    }\n    \n    .invd_8882-btn-outline,\n    .invd_8882-btn,\n    .invd_8882-del-btn,\n    .invd_8882-svc-pill {\n        display: none !important;\n    }\n    \n    [contenteditable] {\n        border-bottom: none !important;\n    }\n    \n    .invd_8882-status {\n        cursor: default;\n    }\n}\n\n\/* Responsive container padding *\/\n@media (max-width: 768px) {\n    .invd_8882-header,\n    .invd_8882-parties,\n    .invd_8882-items,\n    .invd_8882-footer,\n    .invd_8882-notes {\n        padding-left: 1rem;\n        padding-right: 1rem;\n    }\n    \n    .invd_8882-support {\n        margin-left: 1rem;\n        margin-right: 1rem;\n    }\n    \n    #invd_8882-container {\n        padding: 16px 12px;\n    }\n    \n    .invd_8882-wrap {\n        max-width: 100%;\n    }\n}\n\n@media (max-width: 480px) {\n    .invd_8882-brand-name {\n        font-size: 1.25rem;\n    }\n    \n    .invd_8882-inv-number {\n        font-size: 1.25rem;\n    }\n    \n    .invd_8882-toolbar {\n        padding: 12px;\n    }\n    \n    .invd_8882-btn,\n    .invd_8882-btn-outline {\n        padding: 6px 12px;\n        font-size: 11px;\n    }\n}\n<\/style>\n\n<div class=\"invd_8882-wrap\">\n\n  <!-- Toolbar -->\n  <div class=\"invd_8882-toolbar\">\n    <button class=\"invd_8882-btn\" onclick=\"invd_8882_addItem()\">+ Add Service<\/button>\n    <select class=\"invd_8882-select\" id=\"invd_8882-status-sel\" onchange=\"invd_8882_setStatus(this.value)\">\n      <option>UNPAID<\/option><option>PAID<\/option><option>DRAFT<\/option><option>OVERDUE<\/option>\n    <\/select>\n    <button class=\"invd_8882-btn-outline\" onclick=\"invd_8882_toggleQuick()\">\ud83d\udccb Quick Services<\/button>\n    <button class=\"invd_8882-btn-outline\" onclick=\"window.print()\">\ud83d\udda8 Print \/ PDF<\/button>\n    <span class=\"invd_8882-toolbar-label\">\u270f\ufe0f Click any field to edit<\/span>\n  <\/div>\n\n  <!-- Invoice -->\n  <div class=\"invd_8882-invoice\">\n\n    <!-- Header -->\n    <div class=\"invd_8882-header\">\n      <div>\n                  <div class=\"invd_8882-brand-name\" contenteditable=\"true\">InovaDigi Solutions<\/div>\n          <div class=\"invd_8882-brand-url\" contenteditable=\"true\">inovadigisolutions.com<\/div>\n                <div class=\"invd_8882-brand-addr\" contenteditable=\"true\">Lahore, Punjab, Pakistan<br>info@inovadigisolutions.com<br>+92 300 0000000<\/div>\n      <\/div>\n      <div style=\"text-align: right;\">\n        <div class=\"invd_8882-inv-label\">Invoice<\/div>\n        <div class=\"invd_8882-inv-number\" contenteditable=\"true\">#INV-2026-376<\/div>\n        <div id=\"invd_8882-badge\" class=\"invd_8882-status status-UNPAID\" onclick=\"invd_8882_cycleStatus()\">\u25cf UNPAID<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"invd_8882-accent-bar\"><\/div>\n\n    <!-- Meta row -->\n    <div class=\"invd_8882-meta\">\n      <div class=\"invd_8882-meta-cell\">\n        <div class=\"invd_8882-meta-label\">Issue Date<\/div>\n        <div class=\"invd_8882-meta-value\" contenteditable=\"true\">June 13, 2026<\/div>\n      <\/div>\n      <div class=\"invd_8882-meta-cell\">\n        <div class=\"invd_8882-meta-label\">Due Date<\/div>\n        <div class=\"invd_8882-meta-value\" contenteditable=\"true\">July 13, 2026<\/div>\n      <\/div>\n      <div class=\"invd_8882-meta-cell\">\n        <div class=\"invd_8882-meta-label\">Project Ref<\/div>\n        <div class=\"invd_8882-meta-value\" contenteditable=\"true\">PRJ-2026-001<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- From \/ To -->\n    <div class=\"invd_8882-parties\">\n      <div>\n        <div class=\"invd_8882-party-label\">Billed From<\/div>\n        <div class=\"invd_8882-party-name\" contenteditable=\"true\">InovaDigi Solutions<\/div>\n        <div class=\"invd_8882-party-detail\" contenteditable=\"true\">Lahore, Punjab, Pakistan<br>info@inovadigisolutions.com<\/div>\n      <\/div>\n      <div>\n        <div class=\"invd_8882-party-label\">Billed To<\/div>\n        <div class=\"invd_8882-party-name\" contenteditable=\"true\">Client Company Name<\/div>\n        <div class=\"invd_8882-party-detail\" contenteditable=\"true\">Client Address Line 1\nCity, Country\nclient@email.com<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Line items -->\n    <div class=\"invd_8882-items\">\n      <div class=\"invd_8882-items-header\">\n        <div class=\"invd_8882-col-head\">Service \/ Description<\/div>\n        <div class=\"invd_8882-col-head\">Qty<\/div>\n        <div class=\"invd_8882-col-head\">Rate (PKR)<\/div>\n        <div class=\"invd_8882-col-head right\">Amount<\/div>\n        <div><\/div>\n      <\/div>\n      <div id=\"invd_8882-items-list\"><\/div>\n\n      <!-- Quick pick panel -->\n      <div id=\"invd_8882-quick\" class=\"invd_8882-quick-pick\" style=\"display:none;\">\n        <div class=\"invd_8882-quick-title\">Quick Add from Services Library<\/div>\n        <div class=\"invd_8882-svc-pills\" id=\"invd_8882-pills\"><\/div>\n      <\/div>\n\n      <button class=\"invd_8882-btn-outline\" style=\"margin-top:16px;\" onclick=\"invd_8882_addItem()\">+ Add Custom Line<\/button>\n    <\/div>\n\n    <!-- Totals -->\n    <div class=\"invd_8882-totals\">\n      <div class=\"invd_8882-totals-box\">\n        <div class=\"invd_8882-total-row\">\n          <span class=\"t-label\">Subtotal<\/span>\n          <span class=\"t-value\" id=\"invd_8882-subtotal\">PKR 0<\/span>\n        <\/div>\n        <div class=\"invd_8882-total-row\">\n          <span class=\"t-label\">Tax \/ GST (<input type=\"number\" class=\"invd_8882-tax-input\" id=\"invd_8882-tax-rate\" value=\"0\" min=\"0\" max=\"100\" step=\"1\" oninput=\"invd_8882_recalc()\">%)<\/span>\n          <span class=\"t-value\" id=\"invd_8882-tax-amt\">PKR 0<\/span>\n        <\/div>\n        <div class=\"invd_8882-total-row\">\n          <span class=\"t-label\">Discount (<input type=\"number\" class=\"invd_8882-tax-input\" id=\"invd_8882-disc-rate\" value=\"0\" min=\"0\" max=\"100\" step=\"1\" oninput=\"invd_8882_recalc()\">%)<\/span>\n          <span class=\"t-value\" id=\"invd_8882-disc-amt\">-PKR 0<\/span>\n        <\/div>\n        <div class=\"invd_8882-total-row grand\">\n          <span class=\"t-label\">Total Due<\/span>\n          <span class=\"t-value\" id=\"invd_8882-grand\">PKR 0<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Custom Notes -->\n    <div class=\"invd_8882-notes\">\n      <div class=\"invd_8882-notes-label\">Notes & Terms<\/div>\n      <div class=\"invd_8882-notes-area\" contenteditable=\"true\" id=\"invd_8882-notes\">Thank you for your business. Payment is due within 30 days of invoice date.<\/div>\n    <\/div>\n\n    <!-- Support Box -->\n        <div class=\"invd_8882-support\">\n      <div style=\"min-width:160px;\">\n        <div class=\"invd_8882-sup-label\">Need Support?<\/div>\n        <div class=\"invd_8882-sup-item\">We're here to help you at every step.<\/div>\n      <\/div>\n            <div>\n        <div class=\"invd_8882-sup-label\">Email<\/div>\n        <div class=\"invd_8882-sup-item\"><a href=\"mailto:support@inovadigisolutions.com\">support@inovadigisolutions.com<\/a><\/div>\n      <\/div>\n                  <div>\n        <div class=\"invd_8882-sup-label\">Phone<\/div>\n        <div class=\"invd_8882-sup-item\">+92 300 0000000<\/div>\n        <div class=\"invd_8882-sup-item\" style=\"color:#94a3b8;font-size:11px;\">Mon\u2013Fri, 9am\u20136pm PKT<\/div>      <\/div>\n                        <div>\n        <div class=\"invd_8882-sup-label\">Support Portal<\/div>\n        <div class=\"invd_8882-sup-item\"><a href=\"https:\/\/inovadigisolutions.com\/support\" target=\"_blank\">Visit Support Centre \u2197<\/a><\/div>\n      <\/div>\n          <\/div>\n    \n    <!-- Footer -->\n    <div class=\"invd_8882-footer\">\n      <div>\n        <div class=\"invd_8882-footer-label\">Payment Instructions<\/div>\n        <div class=\"invd_8882-footer-text\" contenteditable=\"true\">Bank: HBL | Account: 0000-0000000-03 | Title: InovaDigi Solutions<\/div>\n      <\/div>\n      <div style=\"text-align: right;\">\n        <div class=\"invd_8882-footer-label\">Authorised By<\/div>\n        <div class=\"invd_8882-footer-text\" contenteditable=\"true\">InovaDigi Solutions<br>Digital Solutions, Real Results<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/invoice -->\n<\/div><!-- \/wrap -->\n\n<script>\n(function(){\nvar UID = 'invd_8882';\nvar CUR = 'PKR ';\nvar SVCS = [{\"name\":\"Web Development\",\"desc\":\"Custom website design & development\",\"rate\":150000,\"unit\":\"project\"},{\"name\":\"Digital Marketing\",\"desc\":\"SEO, social media & paid ad campaigns\",\"rate\":50000,\"unit\":\"month\"},{\"name\":\"Brand Identity\",\"desc\":\"Logo, color palette & brand guidelines\",\"rate\":75000,\"unit\":\"project\"},{\"name\":\"App Development\",\"desc\":\"iOS \\\/ Android mobile app development\",\"rate\":250000,\"unit\":\"project\"},{\"name\":\"SaaS Development\",\"desc\":\"Custom SaaS platform development\",\"rate\":350000,\"unit\":\"project\"},{\"name\":\"UI\\\/UX Design\",\"desc\":\"User interface & experience design\",\"rate\":60000,\"unit\":\"project\"},{\"name\":\"Content Writing\",\"desc\":\"Website copy, blogs & marketing content\",\"rate\":15000,\"unit\":\"month\"},{\"name\":\"Social Media Mgmt\",\"desc\":\"Full social media management & growth\",\"rate\":35000,\"unit\":\"month\"}];\nvar items = [\n  {name:'Web Development',  desc:'Custom website design & development', qty:1, rate:150000},\n  {name:'Digital Marketing',desc:'SEO, social media & paid campaigns',  qty:1, rate:50000},\n];\nvar statuses = ['UNPAID','PAID','DRAFT','OVERDUE'];\nvar curStatus = 0;\n\nfunction fmt(n){ return CUR + Math.round(n).toLocaleString(); }\n\nfunction render(){\n  var list = document.getElementById(UID+'-items-list');\n  if(!list) return;\n  list.innerHTML = '';\n  items.forEach(function(item,i){\n    var amt = (parseFloat(item.qty)||0)*(parseFloat(item.rate)||0);\n    var tr = document.createElement('div');\n    tr.className = UID+'-item-row';\n    tr.innerHTML =\n      '<div>'\n        +'<div class=\"'+UID+'-svc-name\" contenteditable=\"true\" data-i=\"'+i+'\" data-f=\"name\" onblur=\"window[\\''+UID+'_sf\\'](this)\">'+escH(item.name)+'<\/div>'\n        +'<div class=\"'+UID+'-svc-desc\" contenteditable=\"true\" data-i=\"'+i+'\" data-f=\"desc\" onblur=\"window[\\''+UID+'_sf\\'](this)\">'+escH(item.desc)+'<\/div>'\n      +'<\/div>'\n      +'<div class=\"'+UID+'-item-qty\" contenteditable=\"true\" data-i=\"'+i+'\" data-f=\"qty\" onblur=\"window[\\''+UID+'_sn\\'](this)\" oninput=\"window[\\''+UID+'_ln\\'](this)\">'+item.qty+'<\/div>'\n      +'<div class=\"'+UID+'-item-rate\" contenteditable=\"true\" data-i=\"'+i+'\" data-f=\"rate\" onblur=\"window[\\''+UID+'_sn\\'](this)\" oninput=\"window[\\''+UID+'_ln\\'](this)\">'+item.rate+'<\/div>'\n      +'<div class=\"'+UID+'-item-amount\" id=\"'+UID+'-amt-'+i+'\">'+fmt(amt)+'<\/div>'\n      +'<button class=\"'+UID+'-del-btn\" onclick=\"window[\\''+UID+'_del\\']('+i+')\" title=\"Remove\">\u2715<\/button>';\n    list.appendChild(tr);\n  });\n  recalc();\n  buildPills();\n}\n\nfunction escH(s){ var d=document.createElement('div');d.appendChild(document.createTextNode(s));return d.innerHTML; }\n\nwindow[UID+'_sf'] = function(el){ if(items[el.dataset.i]) items[el.dataset.i][el.dataset.f] = el.innerText.trim(); };\nwindow[UID+'_sn'] = function(el){ if(items[el.dataset.i]){ items[el.dataset.i][el.dataset.f] = parseFloat(el.innerText)||0; recalc(); } };\nwindow[UID+'_ln'] = function(el){\n  var i=parseInt(el.dataset.i); \n  if(items[i]) items[i][el.dataset.f]=parseFloat(el.innerText)||0;\n  var amt=(items[i].qty||0)*(items[i].rate||0);\n  var amtEl=document.getElementById(UID+'-amt-'+i);\n  if(amtEl) amtEl.innerText=fmt(amt);\n  recalc();\n};\nwindow[UID+'_del'] = function(i){ if(items.length>1){items.splice(i,1);render();} };\n\nfunction recalc(){\n  var sub=0;\n  items.forEach(function(item,i){\n    var amt=(parseFloat(item.qty)||0)*(parseFloat(item.rate)||0);\n    var el=document.getElementById(UID+'-amt-'+i);\n    if(el) el.innerText=fmt(amt);\n    sub+=amt;\n  });\n  var taxRate=parseFloat(document.getElementById(UID+'-tax-rate')?.value)||0;\n  var discRate=parseFloat(document.getElementById(UID+'-disc-rate')?.value)||0;\n  var tax=sub*taxRate\/100; var disc=sub*discRate\/100; var grand=sub+tax-disc;\n  var subtotalEl=document.getElementById(UID+'-subtotal');\n  var taxAmtEl=document.getElementById(UID+'-tax-amt');\n  var discAmtEl=document.getElementById(UID+'-disc-amt');\n  var grandEl=document.getElementById(UID+'-grand');\n  if(subtotalEl) subtotalEl.innerText=fmt(sub);\n  if(taxAmtEl) taxAmtEl.innerText=fmt(tax);\n  if(discAmtEl) discAmtEl.innerText='-'+fmt(disc);\n  if(grandEl) grandEl.innerText=fmt(grand);\n}\n\nwindow[UID+'_recalc'] = recalc;\n\nwindow[UID+'_addItem'] = function(){\n  items.push({name:'New Service',desc:'Click to describe',qty:1,rate:0});\n  render();\n  var quickEl = document.getElementById(UID+'-quick');\n  if(quickEl) quickEl.style.display='none';\n};\n\nwindow[UID+'_toggleQuick'] = function(){\n  var q=document.getElementById(UID+'-quick');\n  if(q) q.style.display = q.style.display==='none' ? 'block' : 'none';\n};\n\nfunction buildPills(){\n  var wrap=document.getElementById(UID+'-pills');\n  if(!wrap) return;\n  wrap.innerHTML='';\n  if(SVCS && SVCS.length){\n    SVCS.forEach(function(s){\n      var btn=document.createElement('button');\n      btn.className=UID+'-svc-pill';\n      btn.textContent=s.name+' \u2014 '+CUR+Math.round(s.rate).toLocaleString();\n      btn.onclick=function(){\n        items.push({name:s.name,desc:s.desc,qty:1,rate:s.rate});\n        render();\n        var quickEl = document.getElementById(UID+'-quick');\n        if(quickEl) quickEl.style.display='none';\n      };\n      wrap.appendChild(btn);\n    });\n  }\n}\n\nwindow[UID+'_setStatus'] = function(s){\n  curStatus=statuses.indexOf(s); updateBadge();\n};\nwindow[UID+'_cycleStatus'] = function(){\n  curStatus=(curStatus+1)%statuses.length;\n  var statusSel = document.getElementById(UID+'-status-sel');\n  if(statusSel) statusSel.value=statuses[curStatus];\n  updateBadge();\n};\nfunction updateBadge(){\n  var s=statuses[curStatus];\n  var dot=s==='PAID'?'\u25cf':s==='OVERDUE'?'\u25b2':s==='DRAFT'?'\u25cc':'\u25cf';\n  var b=document.getElementById(UID+'-badge');\n  if(b){\n    b.className=UID+'-status status-'+s;\n    b.style.justifyContent='flex-end';\n    b.innerText=dot+' '+s;\n  }\n}\n\n\/\/ Initialize\nrender();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8592","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=\/wp\/v2\/pages\/8592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8592"}],"version-history":[{"count":1,"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=\/wp\/v2\/pages\/8592\/revisions"}],"predecessor-version":[{"id":8593,"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=\/wp\/v2\/pages\/8592\/revisions\/8593"}],"wp:attachment":[{"href":"https:\/\/inovadigisolutions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}