@extends('layout.template')

@section('title','My Orders')

@section('content')

<div class="container py-4">

    <h3 class="mb-6 mt-5">My Orders</h3>

    {{-- FILTER TABS --}}
<div class="mb-4 d-flex gap-2 flex-wrap">
    @php $tabs = ['active', 'completed', 'cancelled', 'returned']; @endphp

    @foreach($tabs as $tab)
        <button 
            class="btn filter-btn {{ $status == $tab ? 'btn-primary' : 'btn-outline-secondary' }}"
            data-status="{{ $tab }}">
            {{ ucfirst($tab) }}
        </button>
    @endforeach
</div>

    {{-- EMPTY STATE --}}
    @if(empty($orders))

        <div class="text-center py-5">
            <div style="font-size:80px;">📦</div>
            <h5 class="mt-3">No Orders Found</h5>
            <p class="text-muted">You don’t have any {{ $status }} orders yet</p>

            <a href="{{ url('/') }}" class="btn btn-primary mt-3">
                Start Shopping
            </a>
        </div>

    @else
<div id="orderList">
    @include('partials.order-list', ['orders' => $orders, 'status' => $status])
</div>

    @endif

</div>
<script>
$(document).on('click', '.filter-btn', function () {

    let status = $(this).data('status');

    // 🔥 Button UI update
    $('.filter-btn').removeClass('btn-primary').addClass('btn-outline-secondary');
    $(this).addClass('btn-primary').removeClass('btn-outline-secondary');

    // 🔥 Loader (optional)
    $('#orderList').html(`
        <div class="text-center py-5">
            <div class="spinner-border text-primary"></div>
        </div>
    `);

    $.ajax({
        url: "{{ route('orders') }}",
        type: "GET",
        data: { status: status },

        success: function(res) {
            $('#orderList').html(res.html);
        },

        error: function() {
            $('#orderList').html(`
                <div class="text-center text-danger py-5">
                    Failed to load orders
                </div>
            `);
        }
    });

});
</script>
@endsection