<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="{start_date:'',end_date:'',user_id:''}">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Payment Log" :default-add-button="false" :default-object="{user_id:''}"></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">
                            <select class="form-control" v-model="formFilter.user_id" name="user_id">
                                <option value="">All User</option>
                                <template v-for="(data, index) in requiredData.users">
                                    <option :value="data.id">{{data.name}}</option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <datepicker input_class="form-control"  v-model="formFilter.start_date" placeholder="Start Date"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <datepicker input_class="form-control" v-model="formFilter.end_date" placeholder="End Date"></datepicker>
                        </div>
                    </template>
                    <template v-slot:data>
                        <tr  v-for="(data,index) in dataList.data">
                            <td class="fw-medium">{{parseInt(dataList.from)+index}}</td>
                            <td>{{ showData(data.users, 'name') }}</td>
                            <td>{{ data.comment}}</td>
                            <td>{{ data.request_amount}}</td>
                            <td>{{ data.date }}</td>
                            <td>
                                <a class="link-info" @click="viewData(data)"><i class="fa fa-eye"></i></a>
                                 <a @click="openFile(`${urlGenerate('invoice_generate')}?id=${data.id}`)" class="btn btn-outline-primary"><i class="fa fa-file-pdf"></i></a>
                            </td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>
        <general-modal modal-id="paymentModal" :is-enable-footer="false">
            <template v-slot:title>
                <span class="text-center">Payment History</span>
            </template>
            <template v-slot:body>
                <div class="row" id="print">
                    <div class="row mb-3 mt-3 report_header">
                        <div class="col-12 text-center"><h4>Payment Log History</h4></div>
                        <div class="col-md-6 text-start">
                            <strong>User Name : {{showData(Config.user, 'company_name')}}</strong>
                        </div>
                        <div class="col-md-6 text-end">
                            <strong>Date : {{requiredData.date}}</strong>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="profile-view-tab">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>SL.</th>
                                    <th>Name</th>
                                    <th>Phone Number</th>
                                    <th>Transaction ID</th>
                                    <th>Requested Amount</th>
                                    <th>Date</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr  v-for="(data,index) in allData">
                                        <td class="fw-medium">{{index+1}}</td>
                                        <td>{{ showData(data.users, 'name') }}</td>
                                        <td>{{ showData(data.payments, 'phone') }}</td>
                                        <td>{{ showData(data.payments, 'transaction_id') }}</td>
                                        <td>{{ showData(data.payments, 'request_amount') }}</td>
                                        <td>{{ data.date }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </template>
            <template v-slot:buttons>
                <a @click="printData('print')" class="btn btn btn-outline-primary fw-medium">
                    <i class="fa-sharp fa-solid fa-print"></i> Print
                </a>
                <a @click="closeModal('paymentModal')" class="btn btn btn-outline-secondary fw-medium">
                    <i class="fa fa-close"></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 GeneralModal from "../../components/generalModal";
    export default {
        name: "smsRate",
        components: {PageTop, Pagination, DataTable,GeneralModal},
        data() {
            return {
                tableHeading: ['Sl','Name','Comments','Approved Amount','Date','Action'],
                allData:{}
            }
        },
        methods : {
            viewData: function (data) {
                const _this = this;
                var detailUrl = `${_this.urlGenerate()}/${data.user_id}`;
                _this.getData(detailUrl, "get", {}, {}, function (retData) {
                    _this.allData = retData;
                    _this.openModal('paymentModal', false);
                });
            },
        },
        mounted(){
            this.getDataList();
            this.getGeneralData(['users','date']);
        }
    }
</script>

<style scoped>

</style>
