@extends('backend.layouts.app')
@section('content')
<style>
/* Responsive improvements */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem 0.75rem;
    }
    
    .table-responsive {
        font-size: 14px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }
    
    .badge {
        font-size: 0.7rem;
    }
    
    .form-control, .form-select {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .aiz-titlebar h1 {
        font-size: 1.5rem;
    }
    
    .table-responsive {
        font-size: 13px;
    }
    
    .btn {
        padding: 0.375rem 0.5rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
}
.aiz-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
</style>
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
            <h1 class="h3 mb-2 mb-sm-0">All Sales Orders</h1>
            @if (Auth::user()->hasPermission('sales.orders.create'))
                <a href="{{ route('sales.orders.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> <span class="d-none d-sm-inline">Create Order</span>
                </a>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <form class="" id="sort_orders" action="" method="GET">
                    <div class="card-header">
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
                            <div class="d-flex align-items-center flex-nowrap gap-2">
                                <label for="entries" class="text-muted fw-bold mb-0 text-nowrap">Show</label>
                                <select id="entries" class="form-select custom-select" name="entries" style="min-width: 80px;">
                                    <option value="10" {{ request('entries', 10) == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('entries') == 20 ? 'selected' : '' }}>20</option>
                                    <option value="30" {{ request('entries') == 30 ? 'selected' : '' }}>30</option>
                                    <option value="50" {{ request('entries') == 50 ? 'selected' : '' }}>50</option>
                                    <option value="75" {{ request('entries') == 75 ? 'selected' : '' }}>75</option>
                                    <option value="all" {{ request('entries') == 'all' ? 'selected' : '' }}>All</option>
                                </select>
                                <span class="text-muted fw-bold mb-0 text-nowrap">entries</span>
                            </div>
                        </div>
                        
                        <div class="row g-2">
                            <div class="col-12 col-md-6 col-lg-4">
                                <select class="form-control" name="delivery_status" id="delivery_status">
                                    <option value="">Filter by Delivery Status</option>
                                    <option value="pending" {{ request('delivery_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="confirmed" {{ request('delivery_status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                    <option value="picked_up" {{ request('delivery_status') == 'picked_up' ? 'selected' : '' }}>Picked Up</option>
                                    <option value="on_the_way" {{ request('delivery_status') == 'on_the_way' ? 'selected' : '' }}>On The Way</option>
                                    <option value="delivered" {{ request('delivery_status') == 'delivered' ? 'selected' : '' }}>Delivered</option>
                                    <option value="cancelled" {{ request('delivery_status') == 'cancelled' ? 'selected' : '' }}>Cancel</option>
                                </select>
                            </div>
                            
                            <div class="col-12 col-md-6 col-lg-4">
                                <select class="form-control aiz-selectpicker" name="payment_status" id="payment_status">
                                    <option value="">Filter by Payment Status</option>
                                    <option value="pending" {{ request('payment_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="completed" {{ request('payment_status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                    <option value="refunding" {{ request('payment_status') == 'refunding' ? 'selected' : '' }}>Refunding</option>
                                    <option value="refunded" {{ request('payment_status') == 'refunded' ? 'selected' : '' }}>Refunded</option>
                                    <option value="fraud" {{ request('payment_status') == 'fraud' ? 'selected' : '' }}>Fraud</option>
                                    <option value="failed" {{ request('payment_status') == 'failed' ? 'selected' : '' }}>Failed</option>
                                    <option value="canceled" {{ request('payment_status') == 'canceled' ? 'selected' : '' }}>Canceled</option>
                                </select>
                            </div>
                       <div class="col-12 col-lg-4 table-search-input">
                                <input type="text" class="form-control input-sm" id="search" name="search"
                                    value="{{ request('search') }}"
                                    placeholder="Search Order Code & Customer">
                            </div>
                        </div>
                      
                        <!-- Filters Row -->
                       
                    </div>
                </form>

                <div class="card-body" id="orders_listing">
                    @include('backend.sales.orders_listing')
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')

<script>
$(document).ready(function() {
    $('#sort_orders').on('submit', function(e) {
        e.preventDefault();
    });

    $('#search').on('input', function() {
        $("#main_loader").show();
        loadOrders($('#sort_orders').serialize());
    });

    $('#entries, #payment_status, #delivery_status, #date_from, #date_to').on('change', function() {
        $("#main_loader").show();
        loadOrders($('#sort_orders').serialize());
    });
    
    $('#clear_filters').on('click', function() {
        $('#search').val('');
        $('#date_from').val('');
        $('#date_to').val('');
        $('#payment_status').val('');
        $('#delivery_status').val('');
        $("#main_loader").show();
        loadOrders($('#sort_orders').serialize());
    });

    $(document).on('click', '.aiz-pagination a', function(e) {
        $("#main_loader").show();
        e.preventDefault();
        let url = $(this).attr('href');
        loadOrders(url.split('?')[1]);
    });

    function loadOrders(params) {
        $("#main_loader").show();
        $.ajax({
            url: "{{ route('sales.orders.index') }}",
            type: "GET",
            data: params,
            success: function(response) {
                $('#orders_listing').html(response);
                $("#main_loader").hide();
            },
            error: function(xhr) {
                console.error("Error loading orders:", xhr.responseText);
                $("#main_loader").hide();
            }
        });
    }
});
</script>
@endsection