@extends('layouts.admin')

@section('title', 'Order Management')

@section('content')
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
    <div>
        <h1 class="serif" style="font-size: 26px; margin: 0; color: #0f172a;">Customer Orders</h1>
        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">Fulfill orders, track shipments, and update payment statuses.</p>
    </div>
</div>

<!-- Status Filter Tabs -->
<div style="display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; flex-wrap: wrap;">
    <a href="{{ route('admin.orders.index') }}" class="btn-admin {{ !$status ? 'btn-primary' : 'btn-secondary' }}" style="padding: 6px 14px; font-size: 13px;">All Orders</a>
    <a href="{{ route('admin.orders.index', ['status' => 'pending']) }}" class="btn-admin {{ $status === 'pending' ? 'btn-primary' : 'btn-secondary' }}" style="padding: 6px 14px; font-size: 13px;">Pending</a>
    <a href="{{ route('admin.orders.index', ['status' => 'processing']) }}" class="btn-admin {{ $status === 'processing' ? 'btn-primary' : 'btn-secondary' }}" style="padding: 6px 14px; font-size: 13px;">Processing</a>
    <a href="{{ route('admin.orders.index', ['status' => 'shipped']) }}" class="btn-admin {{ $status === 'shipped' ? 'btn-primary' : 'btn-secondary' }}" style="padding: 6px 14px; font-size: 13px;">Shipped</a>
    <a href="{{ route('admin.orders.index', ['status' => 'delivered']) }}" class="btn-admin {{ $status === 'delivered' ? 'btn-primary' : 'btn-secondary' }}" style="padding: 6px 14px; font-size: 13px;">Delivered</a>
    <a href="{{ route('admin.orders.index', ['status' => 'cancelled']) }}" class="btn-admin {{ $status === 'cancelled' ? 'btn-primary' : 'btn-secondary' }}" style="padding: 6px 14px; font-size: 13px;">Cancelled</a>
</div>

<!-- Search Bar -->
<div class="admin-card" style="margin-bottom: 24px; padding: 14px 20px;">
    <form action="{{ route('admin.orders.index') }}" method="GET" style="display: flex; gap: 12px;">
        @if($status)
            <input type="hidden" name="status" value="{{ $status }}">
        @endif
        <input type="text" name="search" value="{{ $search }}" placeholder="Search by order #, customer name, email or phone..." class="form-control" style="flex: 1;">
        <button type="submit" class="btn-admin btn-secondary">Search</button>
    </form>
</div>

<!-- Orders Table -->
<div class="admin-card">
    @if($orders->isEmpty())
        <div style="padding: 40px; text-align: center; color: var(--text-muted);">
            No customer orders found under this status filter.
        </div>
    @else
        <div style="overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Customer</th>
                        <th>Address</th>
                        <th>Items Count</th>
                        <th>Total Amount</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $ord)
                        <tr>
                            <td>
                                <strong style="color: var(--primary);">{{ $ord->order_number }}</strong>
                                <div style="font-size: 11px; color: var(--text-muted);">{{ $ord->created_at->format('M d, Y H:i') }}</div>
                            </td>
                            <td>
                                <div style="font-weight: 600; color: #0f172a;">{{ $ord->customer_name }}</div>
                                <div style="font-size: 12px; color: var(--text-muted);">{{ $ord->customer_phone }}</div>
                            </td>
                            <td>
                                <div style="font-size: 12px; color: #334155;">{{ Str::limit($ord->shipping_address, 30) }}</div>
                                <div style="font-size: 11px; color: var(--text-muted);">{{ $ord->city }}, {{ $ord->pincode }}</div>
                            </td>
                            <td>{{ $ord->items->sum('quantity') }} items</td>
                            <td>
                                <strong style="color: #0f172a;">₹{{ number_format($ord->total_amount, 2) }}</strong>
                                @if($ord->discount_amount > 0)
                                    <div style="font-size: 11px; color: #15803d;">Saved ₹{{ number_format($ord->discount_amount, 2) }}</div>
                                @endif
                            </td>
                            <td>
                                <span class="badge" style="background: #f1f5f9; color: #334155;">{{ strtoupper($ord->payment_method) }}</span>
                                <div style="font-size: 11px; color: {{ $ord->payment_status === 'paid' ? '#15803d' : '#b45309' }};">{{ ucfirst($ord->payment_status) }}</div>
                            </td>
                            <td>
                                <span class="badge badge-{{ $ord->order_status }}">{{ ucfirst($ord->order_status) }}</span>
                            </td>
                            <td>
                                <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                                    <a href="{{ route('admin.orders.show', $ord) }}" class="btn-admin btn-secondary" style="padding: 5px 8px; font-size: 11px;">
                                        <i data-lucide="eye" style="width: 13px;"></i> Details
                                    </a>
                                    <a href="{{ route('admin.orders.invoice', $ord) }}" target="_blank" class="btn-admin btn-secondary" style="padding: 5px 8px; font-size: 11px; background: #e0eff9; color: #186297; border-color: #b9dff3;" title="Download GST Tax Invoice">
                                        <i data-lucide="file-text" style="width: 13px;"></i> Invoice
                                    </a>
                                    <a href="{{ route('admin.orders.packing_slip', $ord) }}" target="_blank" class="btn-admin btn-secondary" style="padding: 5px 8px; font-size: 11px;" title="Print Packing Slip">
                                        <i data-lucide="package" style="width: 13px;"></i> Slip
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div style="margin-top: 20px;">
            {{ $orders->links() }}
        </div>
    @endif
</div>
@endsection