@extends('admin.layouts.app')

@section('panel')
<style>
.order-card{
    border:1px solid #eee;
    border-radius:14px;
    overflow:hidden;
}
.order-head{
    padding:15px;
    background:#fff7f2;
    border-bottom:1px solid #ffd9c2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.order-title{
    margin:0;
    font-size:18px;
    font-weight:900;
    color:#222;
}
.filter-box{
    padding:14px;
    background:#fff;
    border-bottom:1px solid #eee;
}
.order-table{
    width:max-content!important;
    min-width:100%;
    margin:0;
}
.order-table th,
.order-table td{
    vertical-align:middle!important;
    text-align:left!important;
    white-space:nowrap;
    padding:8px 6px!important;
    font-size:13px;
}
.order-table th{
    font-weight:900;
    color:#555;
    background:#fafafa;
}

.col-order{width:128px;min-width:128px}
.col-product{width:225px;min-width:225px}
.col-customer{width:155px;min-width:155px}
.col-amount{width:138px;min-width:138px}
.col-status{width:145px;min-width:145px}
.col-action{width:82px;min-width:82px}

.order-no{
    font-weight:900;
    color:#ff5a00;
    line-height:1.35;
}
.order-date{
    font-size:11px;
    color:#777;
    line-height:1.35;
    margin-top:2px;
}

.product-box{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}
.product-img{
    width:46px;
    height:46px;
    border-radius:7px;
    object-fit:cover;
    border:1px solid #e5e7eb;
    background:#f8fafc;
    flex-shrink:0;
}
.product-info{
    min-width:0;
}
.product-name{
    font-size:12px;
    font-weight:900;
    color:#222;
    max-width:155px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.35;
}
.product-code{
    display:block;
    font-size:11px;
    color:#777;
    max-width:155px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.35;
    margin-top:2px;
}
.product-more{
    display:inline-block;
    margin-top:2px;
    font-size:10px;
    font-weight:900;
    color:#ff5a00;
    background:#fff7f2;
    border:1px solid #ffd9c2;
    padding:1px 6px;
    border-radius:999px;
}

.customer-name{
    font-weight:900;
    color:#222;
    max-width:135px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.35;
}
.customer-phone{
    font-size:11px;
    color:#777;
    line-height:1.35;
    margin-top:2px;
}
.type-badge{
    display:inline-block;
    margin-top:3px;
    padding:2px 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
}
.type-reseller{background:#dcfce7;color:#15803d}
.type-customer{background:#dbeafe;color:#1d4ed8}

.amount-compact{
    line-height:1.5;
    font-size:12px;
}
.amount-compact span{
    display:inline-block;
    color:#64748b;
    font-weight:800;
    min-width:46px;
}
.amount-compact strong{
    color:#111827;
    font-weight:900;
}
.advance-status{
    display:inline-block;
    margin-top:2px;
    font-size:10px;
    font-weight:900;
    color:#777;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    padding:1px 6px;
    border-radius:999px;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    text-transform:capitalize;
}
.st-pending{background:#fff7ed;color:#ea580c}
.st-processing{background:#e0f2fe;color:#0369a1}
.st-shipped{background:#ede9fe;color:#6d28d9}
.st-completed{background:#dcfce7;color:#15803d}
.st-cancelled{background:#fee2e2;color:#b91c1c}

.track-mini-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin-top:5px;
    height:25px;
    padding:0 8px;
    border-radius:999px;
    background:#ff5a00;
    color:#fff!important;
    text-decoration:none!important;
    font-size:10px;
    font-weight:900;
    line-height:1;
    width:max-content;
}
.track-mini-btn:hover{
    opacity:.9;
    color:#fff!important;
    text-decoration:none!important;
}

.return-mini{
    display:block;
    width:max-content;
    max-width:125px;
    margin-top:4px;
    padding:2px 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
    line-height:1.3;
}
.return-mini.customer{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa}
.return-mini.admin{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.return-mini.settled{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.return-mini.warn{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa}
.return-mini.danger{background:#fff1f2;color:#b91c1c;border:1px solid #fecaca}

.view-btn{
    border-radius:7px;
    padding:6px 9px;
    font-size:12px;
    font-weight:900;
}
.empty-box{
    padding:35px 10px;
    text-align:center;
    color:#777;
    font-weight:800;
}
.load-more-box{
    padding:16px;
    text-align:center;
    color:#777;
    font-size:13px;
    font-weight:800;
}
.load-spinner{display:none}
.load-spinner.active{
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.no-more-orders{display:none}
.no-more-orders.active{display:block}

@media(max-width:575px){
    .order-head{
        flex-direction:column;
        align-items:flex-start;
        padding:13px;
    }
    .filter-box{padding:12px}
    .order-table th,
    .order-table td{
        padding:7px 5px!important;
    }
    .col-order{width:118px;min-width:118px}
    .col-product{width:205px;min-width:205px}
    .col-customer{width:140px;min-width:140px}
    .col-amount{width:128px;min-width:128px}
    .col-status{width:130px;min-width:130px}
    .col-action{width:75px;min-width:75px}
    .product-name,.product-code{max-width:138px}
    .customer-name{max-width:120px}
}
</style>

@php
    $adminStatuses = [
        'pending' => 'Pending',
        'processing' => 'Processing',
        'shipped' => 'Shipped',
        'completed' => 'Completed',
        'cancelled' => 'Cancelled',
    ];

    $normalizeStatus = function ($status) {
        if ($status === 'payment_pending') {
            return 'pending';
        }

        if ($status === 'payment_failed') {
            return 'cancelled';
        }

        return in_array($status, ['pending','processing','shipped','completed','cancelled'], true)
            ? $status
            : 'pending';
    };

    $hiddenMiniValues = [
        '',
        'none',
        'null',
        'n/a',
        'na',
        '-',
        '--',
        '0',
        'false',
        'no',
        'not_settled',
        'not settled',
        'not-settled',
    ];

    $cleanMiniValue = function ($value) use ($hiddenMiniValues) {
        $value = strtolower(trim((string)($value ?? '')));

        return in_array($value, $hiddenMiniValues, true) ? null : $value;
    };

    $settlementLabels = [
        'recovered' => [
            'text' => 'Recovered',
            'class' => 'settled',
        ],
        'refunded' => [
            'text' => 'Refunded',
            'class' => 'settled',
        ],
        'waived' => [
            'text' => 'Waived',
            'class' => 'settled',
        ],
        'pending_due' => [
            'text' => 'Pending Due',
            'class' => 'warn',
        ],
        'refund_required' => [
            'text' => 'Refund Required',
            'class' => 'danger',
        ],
    ];

    $extractTrackingUrl = function ($order) {
        $url = $order->courier_tracking_url ?: $order->public_tracking_url;

        $courierResponse = $order->courier_response ?? [];
        $steadfastResponse = $order->steadfast_response ?? [];

        if (is_string($courierResponse)) {
            $courierResponse = json_decode($courierResponse, true) ?: [];
        }

        if (is_string($steadfastResponse)) {
            $steadfastResponse = json_decode($steadfastResponse, true) ?: [];
        }

        if (!is_array($courierResponse)) {
            $courierResponse = [];
        }

        if (!is_array($steadfastResponse)) {
            $steadfastResponse = [];
        }

        if (!$url) {
            $url =
                data_get($courierResponse, 'tracking_link')
                ?: data_get($courierResponse, 'tracking_url')
                ?: data_get($courierResponse, 'public_tracking_url')
                ?: data_get($courierResponse, 'consignment.tracking_link')
                ?: data_get($courierResponse, 'consignment.tracking_url')
                ?: data_get($courierResponse, 'consignment.public_tracking_url')
                ?: data_get($courierResponse, 'data.tracking_link')
                ?: data_get($courierResponse, 'data.tracking_url')
                ?: data_get($courierResponse, 'data.public_tracking_url')
                ?: data_get($courierResponse, 'data.consignment.tracking_link')
                ?: data_get($courierResponse, 'data.consignment.tracking_url')
                ?: data_get($steadfastResponse, 'tracking_link')
                ?: data_get($steadfastResponse, 'tracking_url')
                ?: data_get($steadfastResponse, 'public_tracking_url')
                ?: data_get($steadfastResponse, 'consignment.tracking_link')
                ?: data_get($steadfastResponse, 'consignment.tracking_url')
                ?: data_get($steadfastResponse, 'consignment.public_tracking_url')
                ?: data_get($steadfastResponse, 'last_status_response.tracking_link')
                ?: data_get($steadfastResponse, 'last_status_response.tracking_url')
                ?: data_get($steadfastResponse, 'last_status_response.public_tracking_url');
        }

        $url = trim((string)($url ?? ''));

        if ($url && !\Illuminate\Support\Str::startsWith($url, ['http://', 'https://'])) {
            if (\Illuminate\Support\Str::startsWith($url, '/')) {
                $url = 'https://steadfast.com.bd' . $url;
            } elseif (($order->courier_driver ?: (!empty($order->steadfast_tracking_code) ? 'steadfast' : null)) === 'steadfast') {
                $url = 'https://steadfast.com.bd/tl/' . $url;
            }
        }

        return $url;
    };
@endphp

<div class="card order-card">

    <div class="order-head">
        <h5 class="order-title">
            <i class="las la-shopping-bag"></i>
            অর্ডার লিস্ট
        </h5>

        <div class="text-muted small">
            মোট: {{ $orders->total() ?? 0 }} টি
        </div>
    </div>

    <div class="filter-box">
        <form method="GET" class="row align-items-end">
            <div class="col-md-5 mb-2">
                <label class="font-weight-bold">সার্চ</label>
                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    class="form-control"
                    placeholder="Order no / product / name / phone"
                >
            </div>

            <div class="col-md-3 mb-2">
                <label class="font-weight-bold">স্ট্যাটাস</label>
                <select name="status" class="form-control">
                    <option value="">সব স্ট্যাটাস</option>
                    @foreach($adminStatuses as $st => $label)
                        <option value="{{ $st }}" @selected(request('status') == $st)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2 mb-2">
                <button class="btn btn--primary w-100">
                    <i class="las la-search"></i>
                    সার্চ
                </button>
            </div>

            <div class="col-md-2 mb-2">
                <a href="{{ route('admin.orders.index') }}" class="btn btn--dark w-100">
                    রিসেট
                </a>
            </div>
        </form>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table--light order-table">
                <thead>
                    <tr>
                        <th class="col-order">অর্ডার</th>
                        <th class="col-product">প্রোডাক্ট</th>
                        <th class="col-customer">কাস্টমার</th>
                        <th class="col-amount">টাকা</th>
                        <th class="col-status">স্ট্যাটাস</th>
                        <th class="col-action">অ্যাকশন</th>
                    </tr>
                </thead>

                <tbody id="ordersTbody">
                    @forelse($orders as $order)
                        @php
                            $safeStatus = $normalizeStatus($order->status);
                            $statusClass = 'st-' . $safeStatus;
                            $statusText = $adminStatuses[$safeStatus] ?? ucwords(str_replace('_',' ', $safeStatus));

                            $firstItem = $order->items->first();
                            $productImage = $firstItem && $firstItem->product_image
                                ? $firstItem->product_image
                                : asset('images/default-product.png');

                            $productName = $firstItem->product_name ?? 'প্রোডাক্ট পাওয়া যায়নি';
                            $productCode = $firstItem->product_code ?? null;
                            $extraItems = max(0, $order->items->count() - 1);

                            $activeTrackingUrl = $extractTrackingUrl($order);

                            $returnMiniClass = null;
                            $returnMiniText = null;

                            $courierReturnStatus = $cleanMiniValue($order->courier_return_status ?? null);
                            $settlementStatus = $cleanMiniValue($order->delivery_charge_settlement_status ?? null);

                            if ($courierReturnStatus === 'customer_fault') {
                                $returnMiniClass = 'customer';
                                $returnMiniText = 'Customer Fault';
                            } elseif ($courierReturnStatus === 'admin_fault') {
                                $returnMiniClass = 'admin';
                                $returnMiniText = 'Admin Fault';
                            } elseif ($settlementStatus && isset($settlementLabels[$settlementStatus])) {
                                $returnMiniClass = $settlementLabels[$settlementStatus]['class'];
                                $returnMiniText = $settlementLabels[$settlementStatus]['text'];
                            }
                        @endphp

                        <tr>
                            <td class="col-order">
                                <div class="order-no">{{ $order->order_no }}</div>
                                <div class="order-date">
                                    {{ $order->created_at ? $order->created_at->format('d M Y h:i A') : '-' }}
                                </div>
                            </td>

                            <td class="col-product">
                                <div class="product-box">
                                    <img
                                        src="{{ $productImage }}"
                                        alt="{{ $productName }}"
                                        class="product-img"
                                    >

                                    <div class="product-info">
                                        <div class="product-name" title="{{ $productName }}">
                                            {{ $productName }}
                                        </div>

                                        @if($productCode)
                                            <div class="product-code">
                                                {{ $productCode }}
                                            </div>
                                        @endif

                                        @if($extraItems > 0)
                                            <span class="product-more">
                                                +{{ $extraItems }} আরো
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <td class="col-customer">
                                <div class="customer-name" title="{{ $order->customer_name }}">
                                    {{ $order->customer_name }}
                                </div>

                                <div class="customer-phone">{{ $order->phone }}</div>

                                <span class="type-badge {{ $order->buyer_type == 'reseller' ? 'type-reseller' : 'type-customer' }}">
                                    {{ $order->buyer_type == 'reseller' ? 'Reseller' : 'Customer' }}
                                </span>
                            </td>

                            <td class="col-amount">
                                <div class="amount-compact">
                                    <div>
                                        <span>মোট</span>
                                        <strong>৳{{ number_format($order->total_amount,0) }}</strong>
                                    </div>

                                    <div>
                                        <span>অগ্রিম</span>
                                        <strong>৳{{ number_format($order->advance_amount,0) }}</strong>
                                    </div>

                                    <div>
                                        <span>COD</span>
                                        <strong>৳{{ number_format($order->cod_amount,0) }}</strong>
                                    </div>

                                    <div class="advance-status">
                                        {{ ucfirst($order->advance_payment_status ?? 'unpaid') }}
                                    </div>
                                </div>
                            </td>

                            <td class="col-status">
                                <span class="status-badge {{ $statusClass }}">
                                    {{ $statusText }}
                                </span>

                                @if($activeTrackingUrl)
                                    <a href="{{ $activeTrackingUrl }}" target="_blank" class="track-mini-btn">
                                        <i class="las la-map-marker-alt"></i>
                                        Track
                                    </a>
                                @endif

                                @if($returnMiniText)
                                    <span class="return-mini {{ $returnMiniClass }}">
                                        {{ $returnMiniText }}
                                    </span>
                                @endif
                            </td>

                            <td class="col-action">
                                <a href="{{ route('admin.orders.show',$order->id) }}" class="btn btn-sm btn--primary view-btn">
                                    <i class="las la-eye"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr id="emptyOrderRow">
                            <td colspan="6">
                                <div class="empty-box">
                                    কোনো অর্ডার পাওয়া যায়নি
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="load-more-box">
            <div id="loadSpinner" class="load-spinner">
                <i class="las la-spinner la-spin"></i>
                অর্ডার লোড হচ্ছে...
            </div>

            <div id="noMoreOrders" class="no-more-orders">
                আর কোনো অর্ডার নেই
            </div>

            <div id="loadTrigger"></div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
(function(){
    let nextPageUrl = @json($orders->nextPageUrl());
    let isLoading = false;

    const tbody = document.getElementById('ordersTbody');
    const trigger = document.getElementById('loadTrigger');
    const spinner = document.getElementById('loadSpinner');
    const noMore = document.getElementById('noMoreOrders');

    const statusLabels = {
        pending: 'Pending',
        processing: 'Processing',
        shipped: 'Shipped',
        completed: 'Completed',
        cancelled: 'Cancelled'
    };

    const hiddenMiniValues = [
        '',
        'none',
        'null',
        'n/a',
        'na',
        '-',
        '--',
        '0',
        'false',
        'no',
        'not_settled',
        'not settled',
        'not-settled'
    ];

    const settlementLabels = {
        recovered: {
            text: 'Recovered',
            className: 'settled'
        },
        refunded: {
            text: 'Refunded',
            className: 'settled'
        },
        waived: {
            text: 'Waived',
            className: 'settled'
        },
        pending_due: {
            text: 'Pending Due',
            className: 'warn'
        },
        refund_required: {
            text: 'Refund Required',
            className: 'danger'
        }
    };

    function normalizeStatus(status){
        if(status === 'payment_pending') return 'pending';
        if(status === 'payment_failed') return 'cancelled';

        return Object.prototype.hasOwnProperty.call(statusLabels, status) ? status : 'pending';
    }

    function cleanMiniValue(value){
        value = String(value === null || value === undefined ? '' : value).trim().toLowerCase();

        if(hiddenMiniValues.indexOf(value) !== -1){
            return '';
        }

        return value;
    }

    function escapeHtml(value){
        if(value === null || value === undefined) return '';

        return String(value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function showSpinner(){
        if(spinner) spinner.classList.add('active');
    }

    function hideSpinner(){
        if(spinner) spinner.classList.remove('active');
    }

    function showNoMore(){
        if(noMore) noMore.classList.add('active');
    }

    function returnMiniHtml(order){
        let cls = '';
        let text = '';

        const courierReturnStatus = cleanMiniValue(order.courier_return_status);
        const settlementStatus = cleanMiniValue(order.delivery_charge_settlement_status);

        if(courierReturnStatus === 'customer_fault'){
            cls = 'customer';
            text = 'Customer Fault';
        }else if(courierReturnStatus === 'admin_fault'){
            cls = 'admin';
            text = 'Admin Fault';
        }else if(settlementStatus && Object.prototype.hasOwnProperty.call(settlementLabels, settlementStatus)){
            cls = settlementLabels[settlementStatus].className;
            text = settlementLabels[settlementStatus].text;
        }

        if(!text) return '';

        return `<span class="return-mini ${escapeHtml(cls)}">${escapeHtml(text)}</span>`;
    }

    function trackingUrl(order){
        let url = order.active_tracking_url
            || order.courier_tracking_url
            || order.public_tracking_url
            || order.tracking_url
            || '';

        url = String(url || '').trim();

        if(!url) return '';

        if(url.indexOf('http://') === 0 || url.indexOf('https://') === 0){
            return url;
        }

        if(url.indexOf('/') === 0){
            return 'https://steadfast.com.bd' + url;
        }

        if((order.courier_driver || order.driver || '') === 'steadfast' || order.steadfast_tracking_code){
            return 'https://steadfast.com.bd/tl/' + url;
        }

        return url;
    }

    function trackButtonHtml(order){
        const url = trackingUrl(order);

        if(!url) return '';

        return `
            <a href="${escapeHtml(url)}" target="_blank" class="track-mini-btn">
                <i class="las la-map-marker-alt"></i>
                Track
            </a>
        `;
    }

    function orderRow(order){
        const buyerClass = order.buyer_type === 'reseller' ? 'type-reseller' : 'type-customer';
        const buyerText = order.buyer_type === 'reseller' ? 'Reseller' : 'Customer';

        const safeStatus = normalizeStatus(order.status);
        const statusClass = 'st-' + safeStatus;
        const statusText = statusLabels[safeStatus] || safeStatus;

        const productCodeHtml = order.product_code
            ? `<div class="product-code">${escapeHtml(order.product_code)}</div>`
            : '';

        const extraItemsHtml = Number(order.extra_items) > 0
            ? `<span class="product-more">+${escapeHtml(order.extra_items)} আরো</span>`
            : '';

        return `
            <tr>
                <td class="col-order">
                    <div class="order-no">${escapeHtml(order.order_no)}</div>
                    <div class="order-date">${escapeHtml(order.created_at)}</div>
                </td>

                <td class="col-product">
                    <div class="product-box">
                        <img
                            src="${escapeHtml(order.product_image)}"
                            alt="${escapeHtml(order.product_name)}"
                            class="product-img"
                        >

                        <div class="product-info">
                            <div class="product-name" title="${escapeHtml(order.product_name)}">
                                ${escapeHtml(order.product_name)}
                            </div>

                            ${productCodeHtml}
                            ${extraItemsHtml}
                        </div>
                    </div>
                </td>

                <td class="col-customer">
                    <div class="customer-name" title="${escapeHtml(order.customer_name)}">
                        ${escapeHtml(order.customer_name)}
                    </div>

                    <div class="customer-phone">${escapeHtml(order.phone)}</div>

                    <span class="type-badge ${buyerClass}">
                        ${buyerText}
                    </span>
                </td>

                <td class="col-amount">
                    <div class="amount-compact">
                        <div>
                            <span>মোট</span>
                            <strong>৳${escapeHtml(order.total_amount)}</strong>
                        </div>

                        <div>
                            <span>অগ্রিম</span>
                            <strong>৳${escapeHtml(order.advance_amount)}</strong>
                        </div>

                        <div>
                            <span>COD</span>
                            <strong>৳${escapeHtml(order.cod_amount)}</strong>
                        </div>

                        <div class="advance-status">
                            ${escapeHtml(order.advance_payment_status)}
                        </div>
                    </div>
                </td>

                <td class="col-status">
                    <span class="status-badge ${escapeHtml(statusClass)}">
                        ${escapeHtml(statusText)}
                    </span>

                    ${trackButtonHtml(order)}
                    ${returnMiniHtml(order)}
                </td>

                <td class="col-action">
                    <a href="${escapeHtml(order.show_url)}" class="btn btn-sm btn--primary view-btn">
                        <i class="las la-eye"></i>
                    </a>
                </td>
            </tr>
        `;
    }

    async function loadMoreOrders(){
        if(isLoading || !nextPageUrl) return;

        isLoading = true;
        showSpinner();

        try{
            const response = await fetch(nextPageUrl, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            });

            const data = await response.json();

            if(data.success && Array.isArray(data.orders)){
                data.orders.forEach(function(order){
                    tbody.insertAdjacentHTML('beforeend', orderRow(order));
                });

                nextPageUrl = data.next_page_url;

                if(!nextPageUrl){
                    showNoMore();
                }
            }else{
                nextPageUrl = null;
                showNoMore();
            }
        }catch(e){
            console.error(e);
        }finally{
            hideSpinner();
            isLoading = false;
        }
    }

    if(!nextPageUrl){
        showNoMore();
        return;
    }

    if('IntersectionObserver' in window){
        const observer = new IntersectionObserver(function(entries){
            entries.forEach(function(entry){
                if(entry.isIntersecting){
                    loadMoreOrders();
                }
            });
        }, {
            root: null,
            rootMargin: '350px',
            threshold: 0
        });

        observer.observe(trigger);
    }else{
        window.addEventListener('scroll', function(){
            if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500){
                loadMoreOrders();
            }
        });
    }
})();
</script>
@endpush