@extends('layouts.app')

@section('title', 'Orders')

@section('content')
<h1>Orders</h1>
<p style="margin-bottom:16px;">
    <a href="{{ route('orders.create') }}" style="padding:8px 16px; background:var(--m3-primary); color:var(--m3-on-primary); border-radius:8px; text-decoration:none;">New order</a>
    <a href="{{ route('orders.export', request()->only('status', 'sort')) }}" style="margin-left:8px; padding:8px 16px; background:var(--m3-surface-variant); color:var(--m3-on-surface); border-radius:8px; text-decoration:none;">Export CSV</a>
    <span style="margin-left:12px;">Filter: <a href="{{ route('orders.index') }}" style="padding:4px 10px; border-radius:20px; background:{{ request('status') === null ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === null ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">All</a>
    <a href="{{ route('orders.index', ['status' => 'pending']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'pending' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'pending' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Pending</a>
    <a href="{{ route('orders.index', ['status' => 'completed']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'completed' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'completed' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Completed</a>
    <a href="{{ route('orders.index', ['status' => 'refunded']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'refunded' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'refunded' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Refunded</a>
    <a href="{{ route('orders.index', ['status' => 'cancelled']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'cancelled' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'cancelled' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Cancelled</a></span>
    <span style="margin-left:8px;">Sort: <a href="{{ route('orders.index', array_merge(request()->only('status'), ['sort' => 'created_desc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort', 'created_desc') === 'created_desc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Newest</a> <a href="{{ route('orders.index', array_merge(request()->only('status'), ['sort' => 'created_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'created_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Oldest</a> <a href="{{ route('orders.index', array_merge(request()->only('status'), ['sort' => 'status_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'status_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Status</a></span>
</p>
<div class="card">
    <h2>Order history</h2>
    <form method="post" action="{{ route('orders.bulk-destroy') }}" id="bulk-form">
        @csrf
        <p style="margin-bottom:12px;">
            <button type="submit" form="bulk-form" onclick="var n = document.querySelectorAll('#bulk-form .row-select:checked').length; if (n === 0) { alert('Please select at least one order.'); return false; } return confirm('Delete selected orders?');" style="padding:6px 12px; border-radius:8px; background:var(--m3-surface-variant); border:1px solid var(--m3-outline); cursor:pointer;">Delete selected</button>
        </p>
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="select-all" aria-label="Select all"></th>
                    <th>Transaction</th>
                    <th>Product</th>
                    <th>Customer</th>
                    <th>Status</th>
                    <th>Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $o)
                    <tr>
                        <td data-label=""><input type="checkbox" name="ids[]" value="{{ $o->id }}" form="bulk-form" class="row-select"></td>
                        <td data-label="Transaction">{{ $o->transaction_id ?? '—' }}</td>
                        <td data-label="Product">{{ $o->product?->title ?? '—' }}</td>
                        <td data-label="Customer">{{ $o->user?->name ?? '—' }}</td>
                        <td data-label="Status">{{ $o->status }}</td>
                        <td data-label="Date">{{ $o->created_at->format('M j, Y H:i') }}</td>
                        <td data-label="Actions">
                            @if($o->status === 'completed' && $o->product?->file_path)
                                <a href="{{ route('orders.download', $o) }}" style="margin-right:8px;">Download</a>
                                <a href="{{ \Illuminate\Support\Facades\URL::temporarySignedRoute('orders.deliver', now()->addMinutes(10), ['order_id' => $o->id]) }}" target="_blank" rel="noopener" style="margin-right:8px;" title="Signed link (valid 10 min)">Delivery link</a>
                            @endif
                            <a href="{{ route('orders.edit', $o) }}" style="margin-right:8px;">Edit</a>
                            <form method="post" action="{{ route('orders.destroy', $o) }}" style="display:inline;" onsubmit="return confirm('Delete this order?');">@csrf @method('DELETE')<button type="submit" style="background:none;border:none;color:var(--m3-primary);cursor:pointer;padding:0;text-decoration:underline;">Delete</button></form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="empty-state">No orders yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    </form>
    @if($orders->hasPages())
        <div class="pagination">{{ $orders->links() }}</div>
    @endif
</div>
<script>
document.getElementById('select-all')?.addEventListener('change', function() {
    document.querySelectorAll('.row-select').forEach(function(cb) { cb.checked = this.checked; }.bind(this));
});
</script>
@endsection