<template :key="$route.meta.name">
    <div class="main_component">
        <!-- Active User Package Card Banner -->
        <div class="row mb-3" v-if="activePackageData">
            <div class="col-12">
                <div class="card border-0 shadow-sm" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #ffffff; border-radius: 14px;">
                    <div class="card-body p-3 p-md-4">
                        <div class="row align-items-center">
                            <div class="col-md-6 mb-2 mb-md-0">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <span class="badge bg-primary px-2 py-1 rounded-pill text-uppercase fs-11 fw-bold">Active Package</span>
                                    <h4 class="mb-0 text-white font-weight-bold">{{ activePackageData.package_name }}</h4>
                                </div>
                                <p class="text-white-50 fs-13 mb-0">
                                    Billing Type: <strong class="text-white text-capitalize">{{ activePackageData.billing_type }}</strong> |
                                    Expires: <strong class="text-white">{{ activePackageData.expire_date ? formatDate(activePackageData.expire_date) : 'Unlimited Lifetime' }}</strong>
                                    <span v-if="activePackageData.days_remaining !== null" class="badge bg-warning text-dark ms-1">({{ activePackageData.days_remaining }} days left)</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <div class="row text-center g-2">
                                    <div class="col-4">
                                        <div class="p-2 rounded bg-white bg-opacity-10">
                                            <div class="fs-12 text-white-50">Remaining SMS</div>
                                            <div class="fs-16 fw-bold text-white">{{ activePackageData.remaining_sms >= 0 ? activePackageData.remaining_sms : 'Unlimited' }}</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="p-2 rounded bg-white bg-opacity-10">
                                            <div class="fs-12 text-white-50">Used SMS</div>
                                            <div class="fs-16 fw-bold text-white">{{ activePackageData.used_sms }}</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="p-2 rounded bg-white bg-opacity-10">
                                            <div class="fs-12 text-white-50">Today Sent</div>
                                            <div class="fs-16 fw-bold text-white">
                                                {{ activePackageData.daily_sent }}
                                                <span v-if="activePackageData.daily_limit > 0" class="fs-11 text-white-50">/ {{ activePackageData.daily_limit }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :default-filter="false" :table-responsive="false" :default-object="{start_date:'',end_date:''}">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Buy SMS & Packages" :default-object="{user_id:'',package_id:'',sender_types:1,request_amount:'',date:'',payement_method:1,payement_type:1}">
                            <button @click="printData()" class="btn btn-success me-2"><i class="fa-sharp fa-solid fa-print"></i> Print</button>
                        </page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <input type="text" class="form-control" v-model="formFilter.name" placeholder="search by name" name="search">
                        </div>
                        <div class="col-md-2">
                            <datepicker input_class="form-control" v-model="formFilter.start_date" name="start_date" placeholder="Start Date"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <datepicker input_class="form-control" v-model="formFilter.end_date" name="end_date" placeholder="End Date"></datepicker>
                        </div>
                    </template>
                    <template v-slot:reportHeader>
                        <div class="row mb-3 mt-3 report_header">
                            <div class="col-12 text-center"><h4>Buy SMS History Request</h4></div>
                            <div class="col-12 text-start">
                                <strong>Date : {{requiredData.date}}</strong>
                            </div>
                        </div>
                    </template>
                    <template v-slot:data>
                        <tr v-for="(data,index) in dataList.data" :key="index">
                            <td class="fw-medium">{{parseInt(dataList.from)+index}}</td>
                            <td>
                                <div><b>{{ showData(data.users, 'name') }}</b></div>
                                <small v-if="data.package" class="text-primary font-weight-bold"><i class="fa fa-box me-1"></i> {{ data.package.title }}</small>
                            </td>
                            <td>{{ data.phone}}</td>
                            <td><code class="text-dark">{{ data.transaction_id }}</code></td>
                            <td><b>৳{{ data.request_amount }}</b></td>
                            <td>{{ data.date }}</td>
                            <td>
                                <span class="badge badge-soft-info" v-if="data.payement_type == 1">Regular Recharge</span>
                                <span class="badge badge-soft-warning" v-else-if="data.payement_type == 2">Due Advanced</span>
                                <span class="badge badge-soft-primary" v-else-if="data.payement_type == 3">Due Adjustment</span>
                                <span class="badge badge-soft-success" v-else-if="data.payement_type == 4">Package Purchase</span>
                                <span class="badge badge-soft-secondary" v-else>Other</span>
                            </td>
                            <td>
                                <a v-if="parseInt(data.status) === 0">
                                    <span class="badge badge-soft-warning">Pending Approval</span>
                                </a>
                                <a v-if="parseInt(data.status) === 2">
                                    <span class="badge badge-soft-danger">Declined</span>
                                </a>
                                <a v-if="parseInt(data.status) === 1">
                                    <span class="badge badge-soft-success">Approved & Active</span>
                                    <div class="text-warning fs-11" v-if="data.payement_type == 2 && data.due_amount > 0">Due: ৳{{ data.due_amount }}</div>
                                </a>
                            </td>
                            <td>
                                <a class="link-info" @click="viewData(data)"><i class="fa fa-eye"></i></a>
                            </td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>

        <!-- Buy SMS & Package Purchase Form Modal -->
        <formModal modal-size="modal-md" @submit="buySubmitSMS(formObject)">
            <div class="row">
                <!-- Package Selector -->
                <div class="col-md-12 mb-3">
                    <label class="control-label fw-bold">Select SMS Package :</label>
                    <select class="form-control" v-model="formObject.package_id" @change="onPackageSelected()">
                        <option value="">Custom Recharge / Pay As You Go</option>
                        <option v-for="(pkg, idx) in availablePackages" :key="idx" :value="pkg.id">
                            {{ pkg.title }} (৳{{ pkg.price }} - {{ pkg.billing_type === 'daily' ? 'Daily' : (pkg.billing_type === 'monthly' ? 'Monthly' : 'Per SMS') }}) - {{ pkg.sms_limit > 0 ? pkg.sms_limit + ' SMS' : 'Pay As You Go' }}
                        </option>
                    </select>
                </div>

                <div class="col-md-12 mb-2" v-if="requiredData.users !== undefined && requiredData.users.length > 1">
                    <label class="control-label">User <span class="text-danger">*</span></label>
                    <select class="form-control" v-model="formObject.user_id" v-validate="'required'" name="user_id">
                        <option value="">Select User</option>
                        <template v-for="(data, index) in requiredData.users">
                            <option :value="data.id" :key="index">{{data.name}}</option>
                        </template>
                    </select>
                </div>

                <div class="col-md-12 mb-2">
                    <label class="control-label">SMS Type <span class="text-danger">*</span></label>
                    <select v-model="formObject.sender_types" v-validate="'required'" name="sender_id_type" class="form-control">
                        <option value="1">Masking (Brand Name Sender)</option>
                        <option value="2">Non Masking</option>
                    </select>
                </div>

                <div class="col-md-6 mb-2">
                    <label class="control-label">Amount (৳) :<span class="text-danger">*</span></label>
                    <input type="number" step="0.01" class="form-control" v-model="formObject.request_amount" placeholder="Request Amount" v-validate="'required'" name="request_amount">
                </div>

                <div class="col-md-6 mb-2">
                    <label class="control-label">Total SMS Quota :</label>
                    <input type="number" class="form-control" v-model="formObject.totalSMS" name="count_sms" placeholder="Estimated SMS">
                </div>

                <div class="col-md-12 mb-2">
                    <label class="control-label">Payment Mode :<span class="text-danger">*</span></label>
                    <select class="form-control" v-model="formObject.payment_mode">
                        <option value="manual">Manual Payment (bKash / Nagad / Bank Transfer)</option>
                        <option value="automatic">Pay Online (Instant Automatic Package Activation)</option>
                    </select>
                </div>

                <template v-if="formObject.payment_mode !== 'automatic'">
                    <div class="col-md-12 mb-2">
                        <label class="control-label fw-bold">Payment Method :<span class="text-danger">*</span></label>
                        <select class="form-control" v-model="formObject.payement_method" v-validate="'required'" name="payement_method">
                            <option value="2">bKash (Personal / Merchant: 01725785256)</option>
                            <option value="4">Nagad (Personal / Merchant: 01725785256)</option>
                            <option value="5">Rocket (Personal: 01725785256-8)</option>
                            <option value="3">Bank Transfer (Islami Bank BD Ltd)</option>
                            <option value="1">Cash Payment</option>
                        </select>
                    </div>

                    <!-- QR Code & Account Box in Modal -->
                    <div class="col-md-12 mb-3" v-if="formObject.payement_method != 1">
                        <div class="p-3 bg-light rounded border text-center">
                            <div class="d-flex align-items-center justify-content-center gap-3">
                                <img :src="'https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=' + (formObject.payement_method == 3 ? '20501450200874100' : '01725785256')" alt="QR Code" class="rounded border p-1 bg-white" style="width: 90px; height: 90px;">
                                <div class="text-start">
                                    <div class="fw-bold fs-14 text-dark">
                                        <i class="fa fa-qrcode text-primary me-1"></i> Scan &amp; Pay ৳{{ formObject.request_amount || '0.00' }}
                                    </div>
                                    <div class="font-monospace fs-13 fw-bold text-primary">
                                        {{ formObject.payement_method == 3 ? 'A/C: 20501450200874100 (IBBL)' : (formObject.payement_method == 5 ? 'Rocket: 01725785256-8' : 'Account: 01725785256') }}
                                    </div>
                                    <small class="text-muted d-block mt-1">Pay via App or USSD, then enter TrxID below.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-2">
                        <label class="control-label">Your Sender Phone Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" v-model="formObject.phone" placeholder="e.g. 017XXXXXXXX" v-validate="'required'" name="phone">
                    </div>

                    <div class="col-md-6 mb-2">
                        <label class="control-label">Transaction ID (TrxID) :<span class="text-danger">*</span></label>
                        <input type="text" class="form-control font-monospace" v-model="formObject.transaction_id" placeholder="e.g. BK7893X92" v-validate="'required'" name="transaction_id">
                    </div>

                    <div class="col-md-12 mb-2">
                        <label class="control-label">Date :<span class="text-danger">*</span></label>
                        <datepicker input_class="form-control" validate="required" v-model="formObject.date" name="date" placeholder="Transaction Date"></datepicker>
                    </div>
                </template>

                <div class="col-md-12 mb-2" v-else>
                    <div class="alert alert-info py-2">
                        <i class="fa fa-info-circle me-1"></i> Instant Automatic Payment will verify in real-time and immediately activate your package with full SMS quota!
                    </div>
                </div>
            </div>
        </formModal>

        <!-- Invoice Modal -->
        <general-modal modal-id="paymentModal" :is-enable-footer="false">
            <template v-slot:title>
                <div class="d-flex align-items-center gap-2">
                    <i class="fa fa-file-invoice text-primary"></i>
                    <span class="fw-bold">Payment Receipt &amp; Invoice</span>
                </div>
            </template>
            <template v-slot:body>
                <div class="row" id="print">
                    <div class="col-12">
                        <div class="gw-invoice-container">
                            <!-- Invoice Top Bar -->
                            <div class="gw-invoice-header d-flex justify-content-between align-items-start border-bottom pb-4 mb-4">
                                <div class="d-flex align-items-center gap-3">
                                    <img style="max-height: 52px;" :src="getImage(null, 'images/logo.png')" alt="Logo" class="gw-invoice-logo">
                                    <div>
                                        <h4 class="mb-0 fw-bold text-dark">SMS GATEWAY PORTAL</h4>
                                        <p class="text-muted fs-12 mb-0">Carrier-Grade Multi-Channel SMS Service Provider</p>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="gw-invoice-badge-status mb-2">
                                        <span v-if="invoiceData.status == 1" class="badge bg-success fs-13 px-3 py-2 text-uppercase fw-bold"><i class="fa fa-check-circle me-1"></i> PAID / APPROVED</span>
                                        <span v-else-if="invoiceData.status == 0" class="badge bg-warning text-dark fs-13 px-3 py-2 text-uppercase fw-bold"><i class="fa fa-clock-o me-1"></i> PENDING VERIFICATION</span>
                                        <span v-else class="badge bg-danger fs-13 px-3 py-2 text-uppercase fw-bold"><i class="fa fa-times-circle me-1"></i> DECLINED</span>
                                    </div>
                                    <div class="fs-12 text-muted"><strong>Invoice #:</strong> <span class="font-monospace text-dark fw-bold">INV-{{ invoiceData.id ? ('2026' + String(invoiceData.id).padStart(4, '0')) : '0001' }}</span></div>
                                    <div class="fs-12 text-muted"><strong>Issue Date:</strong> <span class="text-dark">{{ invoiceData.date || 'N/A' }}</span></div>
                                </div>
                            </div>

                            <!-- Client & Payment Meta Cards -->
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <div class="p-3 bg-light rounded-3 border h-100">
                                        <span class="text-uppercase text-muted fs-11 fw-bold tracking-wider d-block mb-2">Billed To (Client Details)</span>
                                        <h5 class="fw-bold text-dark mb-1">{{ showData(invoiceData.users, 'name') }}</h5>
                                        <div class="text-muted fs-13" v-if="showData(invoiceData.users, 'company_name')"><i class="fa fa-building me-1 text-secondary"></i> {{ showData(invoiceData.users, 'company_name') }}</div>
                                        <div class="text-muted fs-13"><i class="fa fa-envelope me-1 text-secondary"></i> {{ showData(invoiceData.users, 'email') }}</div>
                                        <div class="text-muted fs-13"><i class="fa fa-phone me-1 text-secondary"></i> {{ showData(invoiceData.users, 'contact_number') }}</div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="p-3 bg-light rounded-3 border h-100">
                                        <span class="text-uppercase text-muted fs-11 fw-bold tracking-wider d-block mb-2">Payment Details</span>
                                        <div class="d-flex justify-content-between mb-1 fs-13">
                                            <span class="text-muted">Payment Method:</span>
                                            <span class="fw-bold text-dark">
                                                <i class="fa fa-money-bill-wave text-success me-1"></i>
                                                {{ invoiceData.payement_method == 1 ? 'Cash' : (invoiceData.payement_method == 2 ? 'bKash' : (invoiceData.payement_method == 3 ? 'Bank Transfer' : (invoiceData.payement_method == 4 ? 'Nagad' : (invoiceData.payement_method == 5 ? 'Rocket' : 'Automatic Online Gateway')))) }}
                                            </span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-1 fs-13" v-if="invoiceData.transaction_id">
                                            <span class="text-muted">Transaction ID:</span>
                                            <span class="font-monospace fw-bold text-primary">{{ invoiceData.transaction_id }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-1 fs-13">
                                            <span class="text-muted">Payment Type:</span>
                                            <span class="text-dark fw-medium">{{ invoiceData.payement_type == 2 ? 'Postpaid / Bill' : 'Prepaid Recharge' }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between fs-13" v-if="invoiceData.package">
                                            <span class="text-muted">Package Model:</span>
                                            <span class="badge bg-primary text-capitalize">{{ invoiceData.package.billing_type }} ({{ invoiceData.package.duration_days }} Days)</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Itemized Services Table -->
                            <div class="table-responsive mb-4">
                                <table class="table table-bordered align-middle gw-invoice-table">
                                    <thead class="table-dark">
                                        <tr>
                                            <th style="width: 50px;" class="text-center">#</th>
                                            <th>Item &amp; Package Description</th>
                                            <th>Routing Type</th>
                                            <th class="text-center">SMS Limit / Quota</th>
                                            <th class="text-end">Billing Cycle / Rate</th>
                                            <th class="text-end">Amount (BDT)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-center fw-bold">1</td>
                                            <td>
                                                <div class="fw-bold text-dark">{{ invoiceData.package ? invoiceData.package.title : 'Account Balance Recharge' }}</div>
                                                <div class="text-muted fs-12" v-if="invoiceData.package">{{ invoiceData.package.description || 'SMS Broadcast & Gateway Access Package' }}</div>
                                                <div class="text-muted fs-12" v-else>Instant Balance Credit to User Account</div>
                                            </td>
                                            <td>
                                                <span class="badge" :class="invoiceData.sender_types == 1 ? 'bg-info text-dark' : 'bg-secondary'">
                                                    {{ invoiceData.sender_types == 1 ? 'Masking (Brand CLI)' : 'Non-Masking' }}
                                                </span>
                                            </td>
                                            <td class="text-center fw-bold text-primary">
                                                {{ invoiceData.package ? (invoiceData.package.sms_limit >= 0 ? invoiceData.package.sms_limit.toLocaleString() + ' SMS' : 'Unlimited') : (invoiceData.totalSMS || 'Balance Mode') }}
                                            </td>
                                            <td class="text-end text-muted">
                                                {{ invoiceData.package ? (invoiceData.package.billing_type.toUpperCase() + ' / ' + invoiceData.package.duration_days + 'd') : 'One-time' }}
                                            </td>
                                            <td class="text-end fw-bold fs-15 text-dark">
                                                ৳{{ Number(invoiceData.request_amount || 0).toLocaleString('en-IN', {minimumFractionDigits: 2}) }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- Invoice Summary & Amount Details -->
                            <div class="row g-3 justify-content-end mb-4">
                                <div class="col-md-5">
                                    <div class="p-3 bg-light rounded-3 border">
                                        <div class="d-flex justify-content-between mb-2 fs-13 text-muted">
                                            <span>Subtotal:</span>
                                            <span class="fw-medium text-dark">৳{{ Number(invoiceData.request_amount || 0).toLocaleString('en-IN', {minimumFractionDigits: 2}) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2 fs-13 text-muted">
                                            <span>Taxes &amp; Fees (0%):</span>
                                            <span class="fw-medium text-dark">৳0.00</span>
                                        </div>
                                        <hr class="my-2 border-secondary opacity-25">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold text-dark fs-15">Grand Total Paid:</span>
                                            <span class="fw-bolder text-primary fs-18">৳{{ Number(invoiceData.request_amount || 0).toLocaleString('en-IN', {minimumFractionDigits: 2}) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Invoice Footer Notice & Stamp -->
                            <div class="border-top pt-3 text-center text-muted fs-12">
                                <div class="fw-semibold text-dark"><i class="fa fa-shield text-success me-1"></i> Authorized Computer-Generated Receipt</div>
                                <p class="mb-0">This document serves as an official electronic payment receipt. No physical signature is required. For inquiries, contact support@smsgateway.com.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-slot:buttons>
                <a @click="printData('print')" class="btn btn-primary fw-bold px-4">
                    <i class="fa-solid fa-print me-1"></i> Print Invoice
                </a>
                <a @click="closeModal('paymentModal')" class="btn btn-outline-secondary fw-bold px-4">
                    <i class="fa fa-close me-1"></i> Close
                </a>
            </template>
        </general-modal>
    </div>
</template>

<script>
import DataTable from "../../components/dataTable";
import Pagination from "../../plugins/pagination/pagination";
import PageTop from "../../components/pageTop";
import formModal from "../../components/formModal";
import GeneralModal from "../../components/generalModal";
import axios from 'axios';

export default {
    name: "BuySMS",
    components: { PageTop, Pagination, DataTable, formModal, GeneralModal },
    data() {
        return {
            tableHeading: ['Sl', 'Name & Package', 'Phone', 'Transaction ID', 'Request Amount', 'Date', 'Payment Type', 'Status', 'Invoice'],
            totalSMS: 0,
            status: '1',
            invoiceData: {},
            activePackageData: null,
            availablePackages: [],
        }
    },
    methods: {
        loadActivePackage() {
            const _this = this;
            axios.get('/api/user_active_package').then(response => {
                if (response.data && response.data.data) {
                    _this.activePackageData = response.data.data.package;
                }
            }).catch(e => console.error(e));
        },
        loadAvailablePackages() {
            const _this = this;
            axios.get('/api/packages_active_list').then(response => {
                if (response.data && response.data.data) {
                    _this.availablePackages = response.data.data;
                }
            }).catch(e => console.error(e));
        },
        onPackageSelected() {
            const selectedId = this.formObject.package_id;
            if (selectedId) {
                const pkg = this.availablePackages.find(p => p.id == selectedId);
                if (pkg) {
                    this.$set(this.formObject, 'request_amount', pkg.price);
                    this.$set(this.formObject, 'sender_types', pkg.type == 2 ? 2 : 1);
                    this.$set(this.formObject, 'totalSMS', pkg.sms_limit || 0);
                    this.$set(this.formObject, 'payement_type', 4); // Package purchase
                }
            }
        },
        buySubmitSMS(formObject) {
            const _this = this;
            if (formObject.payment_mode === 'automatic') {
                // Online automatic gateway flow
                axios.post('/api/payment/automatic/initiate', {
                    amount: formObject.request_amount,
                    package_id: formObject.package_id || null,
                    sender_types: formObject.sender_types || 1,
                    gateway: 'automatic',
                }).then(res => {
                    if (res.data && res.data.data) {
                        const trxId = res.data.data.transaction_id;
                        // Auto-verify simulated instant checkout
                        return axios.post('/api/payment/automatic/verify', {
                            transaction_id: trxId,
                            gateway_trx_id: 'GW_' + trxId,
                        });
                    }
                }).then(verifyRes => {
                    _this.$toastr('success', 'Automatic Payment Verified & Package Activated Successfully!', 'Success');
                    _this.closeModal('formModal');
                    _this.getDataList();
                    _this.loadActivePackage();
                }).catch(err => {
                    _this.$toastr('error', err.response?.data?.message || 'Payment initiation failed', 'Error');
                });
            } else {
                // Manual workflow
                _this.$store.state.activeFormType = 1;
                _this.submitForm(_this.formObject, false, function (retData) {
                    _this.getDataList();
                    _this.loadActivePackage();
                    _this.closeModal('formModal');
                }, true);
            }
        },
        viewData(data) {
            this.invoiceData = data;
            this.openModal('paymentModal', false);
        },
        formatDate(dateStr) {
            if (!dateStr) return '';
            const d = new Date(dateStr);
            return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
        },
        getAssign() {
            this.$set(this.formObject, 'package_id', '');
            this.$set(this.formObject, 'payment_mode', 'manual');
            this.$set(this.formObject, 'sender_id', '');
            this.$set(this.formObject, 'request_amount', 0);
            this.$set(this.formObject, 'sender_types', 1);
            this.$set(this.formObject, 'payement_method', 1);
            this.$set(this.formObject, 'payement_type', 1);
            this.$set(this.formObject, 'date', new Date().toISOString().slice(0, 10));
        }
    },
    mounted() {
        this.getAssign();
        this.getDataList();
        this.loadActivePackage();
        this.loadAvailablePackages();
        this.getGeneralData(['users', 'SenderId', 'date', 'sender_types']);
    }
}
</script>

<style scoped>
.gw-invoice-container {
    background: #ffffff;
    padding: 24px 28px;
    border-radius: 12px;
    color: #1e293b;
    font-family: inherit;
}
.gw-invoice-table thead th {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #1e293b;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
}
.gw-invoice-table tbody td {
    padding: 12px 14px;
    border-color: #e2e8f0;
}
.tracking-wider {
    letter-spacing: 0.05em;
}

@media print {
    body * {
        visibility: hidden;
    }
    #print, #print * {
        visibility: visible;
    }
    #print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
    }
    .gw-invoice-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}
</style>
