<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :default-filter="false" :default-object="{api_status:'',sender_id:'',start_date:'',end_date:'',type:''}" :table-responsive="false">
                    <template v-slot:page_top>
                        <page-top topPageTitle="SMS Delivery Report" :default-add-button="false">
                            <div @click="printData('printDiv')">
                                <button class="btn btn-outline-primary"><i class="fa-sharp fa-solid fa-print"></i> Print</button>
                            </div>
                        </page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.user_id" @change="getGeneralData({SenderId:{user_id:formFilter.user_id}})">
                                <option value="">Select User </option>
                                <template v-for="(eachData, index) in requiredData.users">
                                    <option :value="eachData.id">{{ eachData.name }}</option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.sender_id" >
                                <option value="">All Sender</option>
                                <template v-for="(eachData, index) in requiredData.SenderId">
                                    <option :value="eachData.id">{{eachData.name}} ({{ eachData.title }})</option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.start_date" input_class="form-control" validate="required" placeholder="Start Date"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.end_date" input_class="form-control" validate="required" placeholder="End Date"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.filter_column" >
                                <option value="created_at">Exact Sent Date</option>
                                <option value="filter_date">Custom Date Field</option>
                            </select>
                        </div>
                    </template>
                    <template v-slot:reportHeader>
                        <div class="row mb-3 mt-3 report_header">
                            <div class="col-12 text-center"><h3>TMSS ICT LTD.</h3></div>
                            <div class="col-12 text-center"><h4>SMS Delivery Report</h4></div>
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>Print Date : {{currentDate}}</strong>
                                </div>
                                <div class="col-md-6 text-end">
                                    <strong>From Date : {{ formattedStartDate }}</strong><br>
                                    <strong>To Date : {{ formattedEndDate }}</strong>
                                </div>
                            </div>

                        </div>
                    </template>
                    <template v-slot:data>
                        <template v-for="(user, index) in dataList">
                            <template v-for="(data, dataIndex) in user.date">
                                <template v-if="dataIndex === 0">
                                    <tr>
                                        <td :rowspan="user.row_count" class="fw-medium">{{index+1}}</td>
                                        <td :rowspan="user.row_count" >{{user.user_name}}</td>
                                        <td>{{data.operator}} ({{data.cli}})</td>
                                        <td>{{data.total_request}}</td>
                                        <td>{{data.success_count}}</td>
                                        <td>{{data.fail_count}}</td>
                                        <td>{{data.rate}}</td>
                                        <td>{{data.total_cost}}</td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td>{{data.operator}} ({{data.cli}})</td>
                                        <td>{{data.total_request}}</td>
                                        <td>{{data.success_count}}</td>
                                        <td>{{data.fail_count}}</td>
                                        <td>{{data.rate}}</td>
                                        <td>{{data.total_cost}}</td>
                                    </tr>
                                </template>
                            </template>
                            <tr class="sub_total">
                                <th colspan="3" class="text-center">TOTAL</th>
                                <td>{{user.total_sms}}</td>
                                <td>{{user.total_success}}</td>
                                <td>{{user.total_failed}}</td>
                                <td>-</td>
                                <td>{{user.total_cost}}</td>
                            </tr>
                        </template>
                    </template>
                </data-table>
            </div>
        </div>
    </div>
</template>

<script>
    import DataTable from "../../components/dataTable";
    import Pagination from "../../plugins/pagination/pagination";
    import PageTop from "../../components/pageTop";
    import axios from "axios";
    export default {
        name: "smsDeliveryReport",
        components: {PageTop, Pagination, DataTable},
        data() {
            const today = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return {
                tableHeading: ['Sl','User','Operator','Total Request','Success','Failed','Per SMS','Total cost'],
                currentDate: today.toLocaleDateString('en-US', options),
            }
        },
        computed: {
            formattedStartDate() {
                return this.formatDate(this.formFilter.start_date);
            },
            formattedEndDate() {
                return this.formatDate(this.formFilter.end_date);
            }
        },
        methods:{
            formatDate(dateStr) {
                if (!dateStr) return '';
                const options = { year: 'numeric', month: 'long', day: 'numeric' };
                const date = new Date(dateStr);
                return date.toLocaleDateString('en-US', options);
            },
        },
        mounted(){
            this.$set(this.formFilter, 'user_id', '');
            this.$set(this.formFilter, 'filter_column', 'created_at');
            this.getDataList();
            this.getGeneralData(['date', 'users', 'SenderId']);
        }
    }
</script>

<style scoped>

</style>
