{{>header}}
<title>Orders Transactions</title>
<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2">
            <div class="card-header" style="background-color:white; color:#4B0F77;">
                <h4><b>Orders Transactions</b></h4>
            </div>
            <div class="card-body p-2">
                {{!-- <div class="row mb-2">
                    <div class="col-12 d-flex justify-content-end">
                        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#filterModal">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                    </div>
                </div> --}}
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table id="example12345" class="table table-bordered table-striped"
                                    aria-describedby="example1_info">
                                    <thead>
                                        <tr>
                                            <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">User First Name
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">User Last Name
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">User Email</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">User Phone</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">address</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">address</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Receiver Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Receiver Phone
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Community Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Vendor Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Vendor Email</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Vendor Phone</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Price</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">order Id</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Razorpay Order Id
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Razorpay Payment
                                                Id</th>
                                            {{!-- <th class="sorting" tabindex="0" aria-controls="example1">Payment Type
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Date</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Status</th> --}}
                                            {{!-- <th class="sorting" tabindex="0" aria-controls="example1">Action</th>
                                            --}}
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="filterForm" method="GET" action="/admin/v1/filteredOrderTransactions">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">Filter Orders</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">x</button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="fromDate" class="form-label">From Date</label>
                        <input type="date" name="fromDate" class="form-control" id="fromDate" required>
                    </div>
                    <div class="mb-3">
                        <label for="toDate" class="form-label">To Date</label>
                        <input type="date" name="toDate" class="form-control" id="toDate">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" style="background-color:#4D6C1F; color: white;" class="btn btn-primary">Apply
                        Filter</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#example12345').DataTable({
            serverSide: true,
            ajax: {
                url: '/admin/v1/transactions/data',  // 👈 your new route
                type: 'GET',
                data: function(d) {
            return {
                start: d.start,
                length: d.length,
                draw: d.draw,
                searchText: d.search.value // rename for CloudFront safety
            };
            }
            },
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1; // S.No across pages
                    }
                },
                { data: 'firstName', title: 'User First Name', defaultContent: '' },
                { data: 'lastName', title: 'User Last Name', defaultContent: '' },
                { data: 'userEmail', title: 'User Email', defaultContent: '' },
                { data: 'userPhone', title: 'User Phone', defaultContent: '0' },
                {
                    data: null,
                    title: 'Address',
                    defaultContent: '',
                    render: function (data, type, row) {
                        return `
                            ${row.buildingName || ''}<br>
                            ${row.blockNameOrNumber || ''}<br>
                            ${row.flatNameOrNumber || ''}
                        `;
                    }
                },
                { data: 'receiverName', title: 'Receiver Name', defaultContent: '' },
                { data: 'communityName', title: 'Community Name', defaultContent: '' },
                { data: 'vendorName', title: 'Vendor Name', defaultContent: '' },
                { data: 'vendorPhone', title: 'Vendor Phone', defaultContent: '' },
                { data: 'orderId', title: 'Order Id', defaultContent: '' },
                { data: 'razorpayOrderId', title: 'Razorpay Order Id', defaultContent: '' },
                { data: 'razorpayPaymentId', title: 'Razorpay Payment Id', defaultContent: '' },
                { data: 'paymentType', title: 'Payment Type', defaultContent: '' },
                { 
                    data: 'amount', 
                    title: 'Amount',
                    render: function (data, type, row) {
                        if (data == null || data === "") return "0.00";
                        return parseFloat(data).toFixed(2);
                    }
                },
                {
                    data: 'createdAt',
                    title: 'Date',
                    defaultContent: '',
                    render: function (data, type, row) {
                        if (!data) return '';
                        // Convert to Date object
                        const date = new Date(data);
                        // Return YYYY-MM-DD
                        return date.toISOString().split('T')[0];
                    }
                },
                { data: 'status', title: 'Status', defaultContent: '' }
            ]
        });

        // Optional: enhance fuzzy search
        $.fn.dataTable.ext.search.push(function (settings, data) {
            const searchValue = table.search().trim().toLowerCase().replace(/\s+/g, '');
            if (!searchValue) return true;
            return data.some(cell =>
                cell.toString().toLowerCase().replace(/\s+/g, '').includes(searchValue)
            );
        });

        // Redraw table on input
        $('#example22_filter input').on('input', function () {
            table.draw();
        });
    });
</script>
<script>
    const fromDateInput = document.getElementById('fromDate');
    const toDateInput = document.getElementById('toDate');

    fromDateInput.addEventListener('change', function () {
        const selectedFromDate = this.value;
        toDateInput.min = selectedFromDate;
    });
</script>


</body>
{{>footer}}

</html>