@extends('layouts.app')

@section('content')



<nav area-label="breadcrumb">
    <ul class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">
           Home
        </a></li>
        <li class="breadcrumb-item active">Orders</li>
    </ul>
</nav>

<ul class="nav nav-tabs" id="orderTabs">
    <li class="nav-item">
        <a class="nav-link @if($status == 'all') active @endif" data-status="all" href="?status=all">All Orders</a>
    </li>
    <li class="nav-item">
        <a class="nav-link @if($status == 'unshipped') active @endif" data-status="unshipped" href="?status=unshipped">Unshipped</a>
    </li>
    <li class="nav-item">
        <a class="nav-link @if($status == 'shipped') active @endif" data-status="shipped" href="?status=shipped">Shipped</a>
    </li>
    <li class="nav-item">
        <a class="nav-link @if($status == 'cancelled') active @endif" data-status="cancelled" href="?status=cancelled">Canceled</a>
    </li>
</ul>

<div id="orderContent" class="tab-content">
    @include('admin.orders.partials.orders_table', ['orders' => $orders])
</div>

<script>
/*$(document).ready(function() {
    // Handle tab clicks to load orders
    $('#orderTabs a').on('click', function(event) {
        event.preventDefault();

        // Remove the active class from all tabs
        $('#orderTabs a.nav-link').removeClass('active');

        // Add the active class to the clicked tab
        $(this).addClass('active');

        var status = $(this).data('status');
        $.ajax({
            url: '{{ route("orders.index") }}',
            type: 'GET',
            data: { status: status },
            success: function(response) {
                $('#orderContent').html(response);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });
});*/


</script>
@endsection