@include('layouts.header')
@include('layouts.tostMessage')

<div class="container" style="margin-top: 100px;">
    <div class="d-flex justify-content-center row">
        <div class="col-md-10">
            <div class="rounded">
                <div class="table-responsive table-borderless">
                    <table class="table table-hover ">
                        <thead>
                            <tr>
                                <th># Orders</th>
                                <th>Date Purchased</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="order-table-body">
                            <!-- Initial Orders Loaded Here by JS -->
                        </tbody>
                    </table>
                </div>
                <div class="text-center mt-3" id="load-more-container">
                    <button id="load-more" class="btn btn-outline-primary">Load More</button>
                </div>
            </div>
        </div>
    </div>
</div>

@include('layouts.footer')

<style>
    .table th,
    .table td {
        text-transform: uppercase;
        font-weight: bold;
    }

    /* Custom status colors */
    .status-pending {
        background-color: #ffc107; /* Yellow */
        color: #343a40; /* Dark */
    }

    .status-shipped {
        background-color: #17a2b8; /* Cyan */
        color: #fff; /* Light */
    }

    .status-delivered {
        background-color: #28a745; /* Green */
        color: #fff; /* Light */
    }

    .status-order_cancel {
        background-color: #dc3545; /* Red */
        color: #fff; /* Light */
    }

    .status-return_pending {
        background-color: #6c757d; /* Gray */
        color: #fff; /* Light */
    }

    .status-replacement_pending {
        background-color: #007bff; /* Blue */
        color: #fff; /* Light */
    }

    .status-return_approve {
        background-color: #28a745; /* Green */
        color: #fff; /* Light */
    }

    .status-replacement_approve {
        background-color: #28a745; /* Green */
        color: #fff; /* Light */
    }

    .status-pickup {
        background-color: #17a2b8; /* Cyan */
        color: #fff; /* Light */
    }

    .status-replaced {
        background-color: #28a745; /* Green */
        color: #fff; /* Light */
    }

    .status-refund {
        background-color: #ffc107; /* Yellow */
        color: #343a40; /* Dark */
    }

    .status-return_rejected {
        background-color: #dc3545; /* Red */
        color: #fff; /* Light */
    }

    .status-replacement_rejected {
        background-color: #dc3545; /* Red */
        color: #fff; /* Light */
    }
</style>

<script>
    let offset = 4;
    const allOrders = @json($allOrders);

    function limitWords(text, limit) {
        const words = text.split(' ');
        if (words.length > limit) {
            return words.slice(0, limit).join(' ') + '...';
        }
        return text;
    }

    function loadInitialOrders() {
        const tbody = document.getElementById('order-table-body');
        allOrders.slice(0, 4).forEach((order, index) => {
            const tr = document.createElement('tr');
            tr.classList.add('cell-1');

            const statusClass = getStatusClass(order.delivery_status);

            tr.innerHTML = `
                <td onclick="redirectToOrderDetails(${index + 1})" style="cursor: pointer;">
                    <div class="d-flex align-items-center">
                        <img src="{{ asset('product/') }}/${order.order_details[0].images.split(',')[0]}" alt="${order.order_details[0].name}" class="img-thumbnail" style="max-width: 100px;">
                        <div class="ml-3">
                            <div>#${order.order_no}</div>
                            <div>${limitWords(order.order_details[0].name, 3)}</div>
                        </div>
                    </div>
                </td>
                <td onclick="redirectToOrderDetails(${index + 1})" style="cursor: pointer;">${new Date(order.created_at).toLocaleDateString()}</td>
                <td onclick="redirectToOrderDetails(${index + 1})" style="cursor: pointer;"><span class="badge badge-pill ${statusClass}">${order.delivery_status.replace('_', ' ')}</span></td>
                <td onclick="redirectToOrderDetails(${index + 1})" style="cursor: pointer;">
                    <a href="/orders?page=${index + 1}" class="btn btn-outline-warning btn-sm"> <i class="fas fa-arrow-right"></i></a>
                </td>
            `;
            tbody.appendChild(tr);
        });

        // Hide load more button if initial orders are 4 or fewer
        if (allOrders.length <= 4) {
            document.getElementById('load-more-container').style.display = 'none';
        }
    }

    function getStatusClass(status) {
        switch (status) {
            case 'pending':
                return 'status-pending';
            case 'shipped':
                return 'status-shipped';
            case 'delivered':
                return 'status-delivered';
            case 'order_cancel':
                return 'status-order_cancel';
            case 'return_pending':
                return 'status-return_pending';
            case 'replacement_pending':
                return 'status-replacement_pending';
            case 'return_approve':
                return 'status-return_approve';
            case 'replacement_approve':
                return 'status-replacement_approve';
            case 'pickup':
                return 'status-pickup';
            case 'replaced':
                return 'status-replaced';
            case 'refund':
                return 'status-refund';
            case 'return_rejected':
                return 'status-return_rejected';
            case 'replacement_rejected':
                return 'status-replacement_rejected';
            default:
                return '';
        }
    }

    document.getElementById('load-more').addEventListener('click', function() {
        fetch(`/my-orders/load-more?offset=${offset}`)
            .then(response => response.json())
            .then(data => {
                const tbody = document.getElementById('order-table-body');
                data.orders.forEach((order, index) => {
                    const tr = document.createElement('tr');
                    tr.classList.add('cell-1');

                    const statusClass = getStatusClass(order.delivery_status);

                    tr.innerHTML = `
                        <td onclick="redirectToOrderDetails(${offset + index + 1})" style="cursor: pointer;">
                            <div class="d-flex align-items-center">
                                <img src="{{ asset('product/') }}/${order.order_details[0].images.split(',')[0]}" alt="${order.order_details[0].name}" class="img-thumbnail" style="max-width: 100px;">
                                <div class="ml-3">
                                    <div>#${order.order_no}</div>
                                    <div>${limitWords(order.order_details[0].name, 3)}</div>
                                </div>
                            </div>
                        </td>
                        <td onclick="redirectToOrderDetails(${offset + index + 1})" style="cursor: pointer;">${new Date(order.created_at).toLocaleDateString()}</td>
                        <td onclick="redirectToOrderDetails(${offset + index + 1})" style="cursor: pointer;"><span class="badge badge-pill ${statusClass}">${order.delivery_status.replace('_', ' ')}</span></td>
                        <td onclick="redirectToOrderDetails(${offset + index + 1})" style="cursor: pointer;">
                            <a href="/orders?page=${offset + index + 1}" class="btn btn-outline-warning btn-sm"> <i class="fas fa-arrow-right"></i></a>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
                offset += 4;

                // Hide load more button if no more orders to load
                if (offset >= allOrders.length) {
                    document.getElementById('load-more-container').style.display = 'none';
                }
            })
            .catch(error => console.error('Error loading more orders:', error));
    });

    function redirectToOrderDetails(orderIndex) {
        window.location.href = `/orders?page=${orderIndex}`;
    }

    // Load initial orders on page load
    document.addEventListener('DOMContentLoaded', loadInitialOrders);
</script>