@extends('layouts.app')

@section('content')
<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>

<style>
.status-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;color:#fff;font-weight:bold;margin-right:4px;}
.status-paid{background:#6bc46b;}
.status-partial{background:#3fc7ec;}
.status-due{background:#f0a345;}
.status-credit{background:#6c5ce7;}
.sales-total-row{font-weight:700;background:var(--brand-soft);color:var(--text);}
.sales-total-row td{border-top:1px solid var(--card-border);}
.return-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid #16a34a;color:#065f46;background:#d1fae5;}
.return-pill small{font-weight:600;color:#0f5132;}
#bulk_delete_modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:9999;}
#bulk_delete_modal .modal-card{background:#fff;padding:20px;max-width:500px;width:90%;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,0.2);}
#bulk_delete_modal textarea{width:100%;min-height:140px;resize:vertical;}
#customer_suggestions{position:absolute;z-index:1050;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;display:none;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
#customer_suggestions .list-group-item{cursor:pointer;padding:8px 12px;border:none;border-bottom:1px solid #eee;}
#customer_suggestions .list-group-item:hover{background:#f8f9fa;}
</style>

<div class="container-fluid">
    <div class="row">
        <!-- Success/Error Messages -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show m-3 w-100" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show m-3 w-100" role="alert">
                {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        
        <!-- Combined Filters -->
        <div class="container-fluid mb-3">
            <div class="d-flex justify-content-end mb-2 px-1">
                <nav class="sales-subnav nav nav-pills alert alert-info p-1 mb-0" aria-label="Sales navigation">
                    <a href="{{ route('pos.credit-payments.index') }}"
                       class="nav-link {{ request()->routeIs('pos.credit-payments.index') ? 'active' : '' }}"
                       title="Payments applied to outstanding (due) invoices">
                        Payments For Due
                    </a>
                    @if(Auth::user()->hasPermission('pos.manage'))
                        <a href="{{ route('pos.payments.index') }}"
                           class="nav-link {{ request()->routeIs('pos.payments.index') ? 'active' : '' }}"
                           title="All payments (sale-time + due payments)">
                            All Payments
                        </a>
                    @endif
                    @if(Auth::user()->hasPermission('pos.manage'))
                        <a href="{{ route('pos.returns.index') }}"
                           class="nav-link {{ request()->routeIs('pos.returns.index') ? 'active' : '' }}"
                           title="Returns">
                            Return
                        </a>
                    @endif
                    @if(Auth::user()->hasPermission('pos.manage'))
                        <a href="{{ route('repairs.index') }}"
                           class="nav-link {{ request()->routeIs('repairs.*') ? 'active' : '' }}"
                           title="Repair Jobs">
                            Repairs
                        </a>
                    @endif
                </nav>
            </div>
            <style>
                .sales-subnav .nav-link {
                    padding: .35rem .85rem;
                    font-weight: 600;
                    white-space: nowrap;
                }
            </style>
            <form method="get" action="{{ route('pos.invoices.index') }}" autocomplete="off" id="sales_filter_form">
                <div class="row">
                    <div class="col-12 col-md-3 mb-2">
                        <div class="card">
                            <div class="card-header py-2 font-weight-bold">Store & Date</div>
                            <div class="card-body p-2">
                                <div class="form-group mb-2">
                                    <select name="ld_id" required class="form-control form-control-sm">
                                        <option value="all" {{ !Auth::user()->hasPermission('view_all_location') ? 'disabled' : '' }}>All Store</option>
                                        @foreach(\App\Models\Location::orderBy('name')->get() as $loc)
                                            <option value="{{ $loc->id }}" 
                                                {{ !Auth::user()->hasPermission('view_all_location') && session('current_location_id') != $loc->id ? 'disabled' : '' }}
                                                {{ old('ld_id', $filters['ld_id']) == $loc->id ? 'selected' : '' }}>
                                                {{ $loc->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group mb-2">
                                    <select name="quick_range" id="quick_range" class="form-control form-control-sm">
                                        <option value="today" {{ old('quick_range', $filters['quick_range']) == 'today' ? 'selected' : '' }}>Today</option>
                                        <option value="yesterday" {{ old('quick_range', $filters['quick_range']) == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                                        <option value="this_week" {{ old('quick_range', $filters['quick_range']) == 'this_week' ? 'selected' : '' }}>This Week</option>
                                        <option value="last_week" {{ old('quick_range', $filters['quick_range']) == 'last_week' ? 'selected' : '' }}>Last Week</option>
                                        <option value="this_month" {{ old('quick_range', $filters['quick_range']) == 'this_month' ? 'selected' : '' }}>This Month</option>
                                        <option value="last_month" {{ old('quick_range', $filters['quick_range']) == 'last_month' ? 'selected' : '' }}>Last Month</option>
                                        <option value="year_to_date" {{ old('quick_range', $filters['quick_range']) == 'year_to_date' ? 'selected' : '' }}>Year to Date</option>
                                        <option value="all" {{ old('quick_range', $filters['quick_range']) == 'all' ? 'selected' : '' }}>All</option>
                                        <option value="custom" {{ old('quick_range', $filters['quick_range']) == 'custom' ? 'selected' : '' }}>Custom Range</option>
                                    </select>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-6 mb-0">
                                        <input name="from_date" type="date" class="form-control form-control-sm" id="from_date" value="{{ old('from_date', $filters['from_date']) }}" max="{{ date('Y-m-d') }}">
                                    </div>
                                    <div class="form-group col-6 mb-0">
                                        <input name="to_date" type="date" class="form-control form-control-sm" id="to_date" value="{{ old('to_date', $filters['to_date']) }}" max="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12 col-md-3 mb-2">
                        <div class="card">
                            <div class="card-header py-2 font-weight-bold">Invoice & Customer</div>
                            <div class="card-body p-2">
                                <div class="form-group mb-2">
                                    <input name="invoice_search" type="text" class="form-control form-control-sm" placeholder="Invoice number" value="{{ old('invoice_search', $filters['invoice_search']) }}">
                                </div>
                                <div class="form-group mb-0 position-relative">
                                    <input name="customer_search" type="text" class="form-control form-control-sm" placeholder="Customer name/mobile/pin" value="{{ old('customer_search', $filters['customer_search']) }}" id="customer_search" autocomplete="off" onInput="lookupCustomer(this.value);">
                                    <div id="customer_suggestions" class="list-group"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12 col-md-3 mb-2">
                        <div class="card">
                            <div class="card-header py-2 font-weight-bold">Type & User</div>
                            <div class="card-body p-2">
                                <div class="form-group mb-2">
                                    <select name="pay_type" class="form-control form-control-sm">
                                        <option value="all" {{ old('pay_type', $filters['pay_type']) == 'all' ? 'selected' : '' }}>All Types</option>
                                        <option value="cash" {{ old('pay_type', $filters['pay_type']) == 'cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="card" {{ old('pay_type', $filters['pay_type']) == 'card' ? 'selected' : '' }}>Card</option>
                                        <option value="mixed" {{ old('pay_type', $filters['pay_type']) == 'mixed' ? 'selected' : '' }}>Mixed</option>
                                    </select>
                                </div>
                                <div class="form-group mb-0">
                                    <select name="user_filter" class="form-control form-control-sm">
                                        <option value="all" {{ old('user_filter', $filters['user_filter']) == 'all' ? 'selected' : '' }}>All Users</option>
                                        @foreach(\App\Models\User::orderBy('name')->get() as $u)
                                            <option value="{{ $u->id }}" {{ old('user_filter', $filters['user_filter']) == $u->id ? 'selected' : '' }}>
                                                {{ $u->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12 col-md-3 mb-2">
                        <div class="card">
                            <div class="card-header py-2 font-weight-bold">Status</div>
                            <div class="card-body p-2">
                                <div class="form-group mb-2">
                                    <select name="status_filter" class="form-control form-control-sm">
                                        <option value="all" {{ old('status_filter', $filters['status_filter']) == 'all' ? 'selected' : '' }}>All</option>
                                        <option value="paid" {{ old('status_filter', $filters['status_filter']) == 'paid' ? 'selected' : '' }}>Paid</option>
                                        <option value="partial" {{ old('status_filter', $filters['status_filter']) == 'partial' ? 'selected' : '' }}>Partial</option>
                                        <option value="due" {{ old('status_filter', $filters['status_filter']) == 'due' ? 'selected' : '' }}>Due</option>
                                    </select>
                                </div>
                                <button type="submit" name="apply_filter" class="btn btn-dark btn-block btn-sm">
                                    <i class="fa fa-filter"></i> Apply Filters
                                </button>
                            </div>
                        </div>
                    </div>
                </div><!-- row -->
            </form>
        </div>

        <div class="table-responsive px-3">
            <table class="table table-sm table-bordered" id="sales_table" style="width:100%; font-size: 14px; text-transform: capitalize;">
                <thead class="thead-light">
                    <tr>
                        <th>#</th>
                        <th>&nbsp;</th>
                        <th>Bill ID</th>
                        <th>Bill Amount</th>
                        <th>Cash</th>
                        <th>Card</th>
                        <th>Status</th>
                        <th>User</th>
                        <th>Customer</th>
                        <th>Sale Time</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $row_count = 0;
                        $total_amount = 0;
                        $total_cash = 0;
                        $total_card = 0;
                        $total_credit = 0;
                        $pay_type_filter = $filters['pay_type'] ?? 'all';
                        $status_filter = $filters['status_filter'] ?? 'all';
                    @endphp
                    
                    @foreach($invoices as $invoice)
                        @php
                            $bill_amount = (float) ($invoice->total ?? 0);
                            $bill_discount = (float) ($invoice->discount ?? 0);

                            // Some rows store total net already; keep both variants as fallback
                            $netA = $bill_amount;
                            $netB = max($bill_amount - $bill_discount, 0);
                            $net_amount = max($netA, $netB);

                            $pay_cash = (float) ($invoice->paid_cash ?? 0);
                            $pay_card = (float) ($invoice->paid_pos ?? 0);

                            // IMPORTANT: in this POS flow `paid_credit` is the outstanding (unpaid) portion (due), not a paid amount.
                            $outstanding_due = (float) ($invoice->paid_credit ?? 0);

                            $paid_now = $pay_cash + $pay_card;

                            // Derived due fallback for legacy/migrated rows
                            $derived_due_a = max($netA - $paid_now, 0);
                            $derived_due_b = max($netB - $paid_now, 0);
                            $current_due = max($outstanding_due, $derived_due_a, $derived_due_b);

                            // Sum of later customer-balance allocations applied to this invoice
                            $applied_later = (float) ($creditAppliedByInvoice[$invoice->id] ?? 0);

                            // Infer the pre-payment (previous) picture for the status transition display.
                            $previous_paid = max($paid_now - $applied_later, 0);
                            $previous_due = max($current_due + $applied_later, max($net_amount - $previous_paid, 0));
                            
                            // Determine payment type
                            if ($pay_cash > 0 && $pay_card > 0) {
                                $pay_type_row = 'mixed';
                            } elseif ($pay_cash > 0) {
                                $pay_type_row = 'cash';
                            } elseif ($pay_card > 0) {
                                $pay_type_row = 'card';
                            } else {
                                $pay_type_row = 'none';
                            }
                            
                            // Skip if doesn't match payment type filter
                            if ($pay_type_filter != 'all' && $pay_type_row != $pay_type_filter) {
                                continue;
                            }
                            
                            // Determine CURRENT status
                            if ($current_due <= 0.0001) {
                                $status = 'paid';
                            } elseif ($paid_now > 0.0001) {
                                $status = 'partial';
                            } else {
                                $status = 'due';
                            }

                            // Determine PREVIOUS status (for later payment transitions)
                            if ($previous_due <= 0.0001) {
                                $previous_status = 'paid';
                            } elseif ($previous_paid > 0.0001) {
                                $previous_status = 'partial';
                            } else {
                                $previous_status = 'due';
                            }
                            
                            // Skip if doesn't match status filter
                            if ($status_filter != 'all' && $status_filter != $status) {
                                continue;
                            }
                            
                            $row_count++;
                            $total_amount += $net_amount;
                            $total_cash += $pay_cash;
                            $total_card += $pay_card;
                            $total_credit += max(0, $current_due);
                        @endphp
                        
                        <tr>
                            <td>{{ $row_count }}</td>
                            <td style="white-space: nowrap; text-align: center">
                                @php
                                    $returnCount = $invoice->returns->count();
                                    $returnTotal = $invoice->returns->reduce(function($carry, $ret){
                                        return $carry + ((float) ($ret->qty ?? 0) * (float) ($ret->price ?? 0));
                                    }, 0);
                                @endphp
                                <div class="dropdown d-inline-block">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill px-3 font-weight-bold shadow-sm dropdown-toggle" type="button" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false">
                                        Actions
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right text-left">
                                        @if(Auth::user()->hasPermission('pos.manage'))
                                            <a href="{{ route('pos.invoices.edit', $invoice->id) }}" class="dropdown-item">✏️ Edit</a>
                                        @endif
                                        <a href="{{ route('pos.invoices.show', $invoice->id) }}" class="dropdown-item" target="_blank">🔍 View</a>
                                        <a href="{{ route('pos.invoices.print', $invoice->id) }}" class="dropdown-item" target="re_print_bill">🖨️ Print</a>
                                        @if($returnCount > 0)
                                            <a href="{{ route('pos.invoices.returns.print', $invoice->id) }}" class="dropdown-item" target="_blank">↩️ Return Note</a>
                                        @endif
                                        @if(Auth::user()->hasPermission('pos.manage'))
                                            <div class="dropdown-divider"></div>
                                            <a href="{{ route('pos.invoices.returns.form', $invoice->id) }}" class="dropdown-item" target="_blank">🔁 Return</a>
                                            <a href="javascript:void(0)" class="dropdown-item text-danger" onclick="confirmDelete('{{ $invoice->invoice_number }}')">❌ Remove Sale</a>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                {{ $invoice->invoice_number }}<br>
                                <i class="text-secondary">{{ $invoice->location->name ?? 'N/A' }}</i>
                                @if($returnCount > 0)
                                    <div style="margin-top:2px;font-size:12px;color:#065f46;">Return: -{{ number_format($returnTotal,2) }}</div>
                                @endif
                            </td>
                            <td style="text-align: left;">{{ number_format($net_amount, 2) }}</td>
                            <!-- Show only received amount for each payment type -->
                            <td style="text-align: left;">{{ number_format(min($net_amount, $pay_cash), 2) }}</td>
                            <td style="text-align: left;">{{ number_format(min($net_amount - min($net_amount, $pay_cash), $pay_card), 2) }}</td>
                            <td>
                                @php
                                    $showTransition = ($applied_later > 0.0001) && (isset($previous_status)) && ($previous_status !== $status);
                                @endphp
                                @if($showTransition)
                                    <span class="status-badge status-{{ $previous_status }}">{{ ucfirst($previous_status) }}</span>
                                    <span style="font-weight:700; color:#111; margin:0 4px;">&raquo;</span>
                                @endif
                                @if($status == 'paid')
                                    <span class="status-badge status-paid">Paid</span>
                                @elseif($status == 'partial')
                                    <span class="status-badge status-partial">Partial</span>
                                @elseif($status == 'due')
                                    <span class="status-badge status-due">Due</span>
                                @endif
                                @if($returnCount > 0)
                                    <div style="margin-top:4px;">
                                        <a href="{{ route('pos.invoices.returns.print', $invoice->id) }}" target="_blank" class="return-pill" title="Return note">
                                            Return <small>-{{ number_format($returnTotal,2) }}</small>
                                        </a>
                                    </div>
                                @endif
                            </td>
                            <td class="text-capitalize">{{ $invoice->user->name ?? 'N/A' }}</td>
                            <td class="text-capitalize">
                                @if($invoice->customer)
                                    {{ $invoice->customer->name }}
                                @elseif(empty($invoice->customer_id))
                                    Walk-in Customer
                                @else
                                    Unknown
                                @endif
                            </td>
                            <td>{{ $invoice->posted_at ? $invoice->posted_at->format('Y-m-d h:i A') : 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="sales-total-row">
                        <td colspan="3">Total Amount</td>
                        <td align="left">{{ number_format($total_amount, 2) }}</td>
                        <td align="left">-</td>
                        <td align="left">-</td>
                        <td align="left">{{ number_format($total_credit, 2) }}</td>
                        <td colspan="3"></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="text-right my-3 px-3">
            <button type="button" class="btn btn-danger btn-sm" onclick="openBulkDeleteModal();">
                <i class="fa fa-trash"></i> Bulk Delete
            </button>
        </div>
    </div>
</div>

<iframe name="re_print_bill" style="display: none;"></iframe>

<!-- Bulk Delete Modal -->
<div id="bulk_delete_modal">
    <div class="modal-card">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="m-0">Bulk Delete Invoices</h5>
            <button type="button" class="btn btn-sm btn-light" onclick="closeBulkDeleteModal();">&times;</button>
        </div>
        <form method="post" action="{{ route('pos.invoices.bulk-delete') }}" onsubmit="return confirm('Are you sure you want to delete these invoices? This action cannot be undone.');">
            @csrf
            <div class="form-group">
                <label for="bulk_invoice_numbers">Invoice numbers (comma or new line separated)</label>
                <textarea name="invoice_numbers" id="bulk_invoice_numbers" class="form-control form-control-sm" placeholder="123, 124, 125"></textarea>
            </div>
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-secondary btn-sm mr-2" onclick="closeBulkDeleteModal();">Cancel</button>
                <button type="submit" class="btn btn-danger btn-sm">Delete Selected</button>
            </div>
            <p class="text-muted mt-2" style="font-size: 12px;">This will remove matching sales along with their items and stock updates.</p>
        </form>
    </div>
</div>

<script>
// AJAX customer lookup
const customerSearchEndpoint = "{{ route('api.customers.search') }}";
function lookupCustomer(term) {
    const box = document.getElementById('customer_suggestions');
    if (!box) return;
    
    term = term.trim();
    if (term.length < 1) {
        box.style.display = 'none';
        box.innerHTML = '';
        return;
    }
    
    box.innerHTML = '<div class="list-group-item">Searching...</div>';
    box.style.display = 'block';
    
    fetch(customerSearchEndpoint + '?q=' + encodeURIComponent(term))
        .then(response => {
            const type = response.headers.get('content-type') || '';
            if (!response.ok || !type.includes('application/json')) {
                throw new Error('Unexpected response');
            }
            return response.json();
        })
        .then(data => {
            let html = '';
            if (Array.isArray(data) && data.length > 0) {
                data.forEach(item => {
                    const pin = item.pin || '';
                    const name = item.name || '';
                    const mobile = item.mobile ? ` (${item.mobile})` : '';
                    const displayText = `${pin} | ${name}${mobile}`.trim();
                    const searchValue = `${pin} | ${name}`.trim();
                    html += `<div class="list-group-item" onclick="setCustomerSearch('${searchValue.replace(/'/g, "\\'")}')">${displayText}</div>`;
                });
            } else {
                html = '<div class="list-group-item">No match</div>';
            }
            box.innerHTML = html;
        })
        .catch(e => {
            console.error('Customer search error:', e);
            box.innerHTML = '<div class="list-group-item">Error loading customers</div>';
        });
}

function setCustomerSearch(val) {
    document.getElementById('customer_search').value = val;
    const box = document.getElementById('customer_suggestions');
    if (box) {
        box.style.display = 'none';
        box.innerHTML = '';
    }
}

// Auto-update date fields when quick_range changes and submit the form
const salesForm = document.getElementById('sales_filter_form');
document.getElementById('quick_range')?.addEventListener('change', function() {
    const range = this.value;
    const today = new Date();
    let fromDate = '', toDate = '';
    
    function formatDate(date) {
        return date.toISOString().split('T')[0];
    }
    
    function getMonday(date) {
        const day = date.getDay();
        const diff = date.getDate() - day + (day == 0 ? -6 : 1);
        return new Date(date.setDate(diff));
    }
    
    switch(range) {
        case 'today':
            fromDate = toDate = formatDate(today);
            break;
        case 'yesterday':
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            fromDate = toDate = formatDate(yesterday);
            break;
        case 'this_week':
            const monday = getMonday(new Date(today));
            fromDate = formatDate(monday);
            toDate = formatDate(today);
            break;
        case 'last_week':
            const lastMonday = getMonday(new Date(today));
            lastMonday.setDate(lastMonday.getDate() - 7);
            const lastSunday = new Date(lastMonday);
            lastSunday.setDate(lastSunday.getDate() + 6);
            fromDate = formatDate(lastMonday);
            toDate = formatDate(lastSunday);
            break;
        case 'this_month':
            fromDate = formatDate(new Date(today.getFullYear(), today.getMonth(), 1));
            toDate = formatDate(today);
            break;
        case 'last_month':
            const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
            fromDate = formatDate(lastMonth);
            toDate = formatDate(new Date(today.getFullYear(), today.getMonth(), 0));
            break;
        case 'year_to_date':
            fromDate = formatDate(new Date(today.getFullYear(), 0, 1));
            toDate = formatDate(today);
            break;
        case 'all':
            fromDate = toDate = '';
            break;
    }
    
    if (range !== 'custom') {
        document.getElementById('from_date').value = fromDate;
        document.getElementById('to_date').value = toDate;
    }
    if (salesForm) salesForm.submit();
});

// Submit on date input change to avoid stale filters
['from_date','to_date'].forEach(id => {
    const el = document.getElementById(id);
    el?.addEventListener('change', () => salesForm?.submit());
});

function openBulkDeleteModal() {
    document.getElementById('bulk_delete_modal').style.display = 'flex';
}

function closeBulkDeleteModal() {
    document.getElementById('bulk_delete_modal').style.display = 'none';
}

function confirmDelete(invoiceNumber) {
    if (confirm('Are you sure you want to remove invoice ' + invoiceNumber + '?')) {
        window.location.href = '{{ route("pos.invoices.index") }}?remove=' + invoiceNumber;
    }
}

// Initialize DataTables
$(document).ready(function() {
    $('#sales_table').DataTable({
        "order": [[9, "desc"]],
        "pageLength": 25,
        "searching": false,
        "lengthChange": false,
        "info": true,
        "paging": true
    });
});
</script>
@endsection