{{>header}}
<title>Orders</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</b></h4>
            </div>
            <div class="card-body p-2">
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                            <table id="example444" 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 FirstName</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">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">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>
<script>
    $(document).ready(function () {
        $('#example444').DataTable({
            serverSide: true,
            ajax: {
                url: '/admin/v1/orders/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: 'receiverPhone', title: 'Receiver Phone', defaultContent: '' },
                { data: 'communityName', title: 'Community Name', defaultContent: '' },
                { data: 'vendorName', title: 'Vendor Name', defaultContent: '' },
                { data: 'vendorEmail', title: 'Vendor Email', 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: '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: '' },
                 {
          data: '_id',
          title: 'Action',
          orderable: false,
          render: function (id, type, row) {
            return `
              <div class="actions d-flex justify-content-start align-items-center">
                <a href="/admin/v1/singleOrder/${id}" class="btn btn-sm btn-info me-1" title="View">
                  <i class="fas fa-eye"></i>
                </a>
              </div>
            `;
          }
        }
            ]
        });

        // 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>
</body>
{{>footer}}

</html>