@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

<div class="mb-3">
    <h4>All Orders</h4>
</div>

<div class="card p-4">

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4 gap-2">

        <div class="mb-3">

            <select id="pageLength" class="form-select w-auto">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>

            </select>

        </div>

        <div class="search-box flex-grow-1 mb-3">

            <input type="search"
                id="searchBox"
                class="form-control"
                placeholder="Search Order ID / Customer / Phone">

        </div>

        <div class="mb-3">

            <select id="dateFilter" class="form-select">

                <option value="">Date</option>
                <option value="Today">Today</option>
                <option value="This Week">This Week</option>
                <option value="This Month">This Month</option>
                <option value="This Year">This Year</option>

            </select>

        </div>

        <div class="mb-3">

            <select id="orderStatusFilter" class="form-select">

                <option value="">Order Status</option>
                <option value="New">New</option>
                <option value="Confirmed">Confirmed</option>
                <option value="Processing">Processing</option>
                <option value="Shipped">Shipped</option>
                <option value="Delivered">Delivered</option>
                <option value="Cancelled">Cancelled</option>
                <option value="Returned">Returned</option>

            </select>

        </div>

        <div class="mb-3">

            <select id="paymentMethodFilter" class="form-select">

                <option value="">Payment Method</option>
                <option value="UPI">UPI</option>
                <option value="Card">Card</option>
                <option value="Gpay">Gpay</option>
                <option value="COD">COD</option>
                <option value="Phone Pe">Phone Pe</option>

            </select>

        </div>

        <div class="mb-3">

            <select id="paymentStatusFilter" class="form-select">

                <option value="">Payment Status</option>
                <option value="Pending">Pending</option>
                <option value="Paid">Paid</option>
                <option value="Failed">Failed</option>
                <option value="Refunded">Refunded</option>

            </select>

        </div>


        <button type="button"
            class="btn btn-primary border flex-shrink-0 mb-3"
            id="exportBtn">

            <i class="ti tabler-download me-2"></i>

            Export

        </button>

    </div>

    <div class="table-responsive p-2">
        <table id="table" class="table">

            <thead class="bg-primary-subtle">

                <tr>

                    <th>SNO</th>
                    <th>ORDER ID</th>
                    <th>DATE</th>
                    <th>CUSTOMER</th>
                    <th>PHONE NUMBER</th>
                    <th>ITEMS</th>
                    <th>TOTAL AMOUNT</th>
                    <th>PAYMENT METHOD</th>
                    <th>PAYMENT STATUS</th>
                    <th>ORDER STATUS</th>
                    <th>ACTION</th>

                </tr>

            </thead>

            <tbody>
            </tbody>

        </table>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {

        const orderData = [

            {
                sno: 1,
                order_id: 'ORD001',
                date: '17/6/2026',
                customer: 'Aurela',
                phone_number: '8978907890',
                items: 2,
                total_amount: '₹80000',
                payment_method: 'UPI',
                payment_status: 'Paid',
                order_status: 'New'


            },

            {
                sno: 1,
                order_id: 'ORD001',
                date: '17/6/2026',
                customer: 'Aurela',
                phone_number: '8978907890',
                items: 2,
                total_amount: '₹80000',
                payment_method: 'Card',
                payment_status: 'Paid',
                order_status: 'Confirmed'

            },

            {
                sno: 1,
                order_id: 'ORD001',
                date: '17/6/2026',
                customer: 'Aurela',
                phone_number: '8978907890',
                items: 2,
                total_amount: '₹80000',
                payment_method: 'COD',
                payment_status: 'Pending',
                order_status: 'Shipped'

            },
            {
                sno: 1,
                order_id: 'ORD001',
                date: '17/6/2026',
                customer: 'Aurela',
                phone_number: '8978907890',
                items: 2,
                total_amount: '₹80000',
                payment_method: 'Phone Pe',
                payment_status: 'Refunded',
                order_status: 'Returned'

            },
            {
                sno: 1,
                order_id: 'ORD001',
                date: '17/6/2026',
                customer: 'Aurela',
                phone_number: '8978907890',
                items: 2,
                total_amount: '₹80000',
                payment_method: 'COD',
                payment_status: 'Pending',
                order_status: 'Cancelled'

            },

        ];

        const table = $('#table').DataTable({

            data: orderData,

            pageLength: 10,

            searching: true,

            lengthChange: false,

            ordering: true,

            columnDefs: [

                {
                    targets: '_all',
                    className: 'text-nowrap'
                }

            ],
            createdRow: function(row, data, dataIndex) {

                if (dataIndex % 2 != 0) {
                    $(row).addClass('bg-primary-subtle');
                }

            },

            buttons: [

                {

                    extend: 'pdfHtml5',
                    title: 'newOrder_Report',
                    filename: 'newOrder_Report',
                    exportOptions: {
                        columns: [
                            0,
                            1,
                            2,
                            3,
                            4,
                            5,
                            6,
                            7,
                            8,
                            9,

                        ]

                    }

                }

            ],

            columns: [

                {
                    data: 'sno'
                },

                {
                    data: 'order_id'
                },
                {
                    data: 'date'
                },

                {
                    data: 'customer'
                },
                {
                    data: 'phone_number'
                },
                {
                    data: 'items'
                },
                {
                    data: 'total_amount'
                },
                {
                    data: 'payment_method'
                },

                {
                    data: 'payment_status',

                    render: function(data) {

                        if (data === 'Paid') {

                            return `
                <span class="badge bg-success">
                    Paid
                </span>
            `;

                        } else if (data === 'Pending') {

                            return `
                <span class="badge bg-warning text-dark">
                    Pending
                </span>
            `;

                        } else if (data === 'Failed') {

                            return `
                <span class="badge bg-danger">
                    Failed
                </span>
            `;

                        } else if (data === 'Refunded') {

                            return `
                <span class="badge bg-secondary">
                    Refunded
                </span>
            `;

                        }

                    }
                },

                {
                    data: 'order_status',

                    render: function(data) {

                        if (data === 'New') {

                            return `
                <span class="badge bg-warning text-dark">
                    New
                </span>
            `;

                        } else if (data === 'Confirmed') {

                            return `
                <span class="badge bg-primary">
                    Confirmed
                </span>
            `;

                        } else if (data === 'Processing') {

                            return `
                <span class="badge bg-info text-dark">
                    Processing
                </span>
            `;

                        } else if (data === 'Shipped') {

                            return `
                <span class="badge bg-primary">
                    Shipped
                </span>
            `;

                        } else if (data === 'Delivered') {

                            return `
                <span class="badge bg-success">
                    Delivered
                </span>
            `;

                        } else if (data === 'Cancelled') {

                            return `
                <span class="badge bg-danger">
                    Cancelled
                </span>
            `;

                        } else if (data === 'Returned') {

                            return `
                <span class="badge bg-secondary">
                    Returned
                </span>
            `;

                        }

                        return `
            <span class="badge bg-light text-dark">
                ${data ?? '-'}
            </span>
        `;
                    }
                },


                {

                    data: null,

                    orderable: false,

                    searchable: false,

                    render: function() {

                        return `

                        <a href="{{route('admin.view_order')}}"
                           class="btn btn-primary btn-sm me-1">

                            <i class="ti tabler-eye"></i>

                        </a>

                    `;

                    }

                }

            ]

        });


        $('#searchBox').on('keyup', function() {

            table.search(this.value).draw();

        });

        $('#orderStatusFilter').on('change', function() {

            table
                .column(9)
                .search(this.value)
                .draw();

        });

        $('#paymentMethodFilter').on('change', function() {

            table
                .column(7)
                .search(this.value)
                .draw();

        });
        $('#paymentStatusFilter').on('change', function() {

    table
        .column(8)
        .search(this.value)
        .draw();

});
        $('#pageLength').on('change', function() {

            const length = $(this).val();

            table.page.len(length).draw();

        });

        $('#exportBtn').on('click', function() {

            table.button('.buttons-pdf').trigger();

        });


    });
</script>
@endsection