@extends('admin.layouts.app')
@section('title', 'Orders')
@section('heading', 'Orders')

@section('content')

@php
    $counts = [
        'all'       => \App\Models\Order::count(),
        'pending'   => \App\Models\Order::where('status','pending')->count(),
        'confirmed' => \App\Models\Order::where('status','confirmed')->count(),
        'shipped'   => \App\Models\Order::where('status','shipped')->count(),
        'complete'  => \App\Models\Order::where('status','complete')->count(),
    ];
@endphp
<div class="order-pipeline">
    <a href="{{ route('admin.orders.index') }}" class="pipeline-step pip-all {{ !($filters['status'] ?? '') ? 'pip-active' : '' }}">
        <div class="pip-icon"><i class="fa-solid fa-list-ul"></i></div>
        <div>
            <div class="pip-count">{{ $counts['all'] }}</div>
            <div class="pip-label">All Orders</div>
        </div>
    </a>
    <a href="{{ route('admin.orders.index', ['status'=>'pending']) }}" class="pipeline-step pip-pending {{ ($filters['status'] ?? '') === 'pending' ? 'pip-active' : '' }}">
        <div class="pip-icon"><i class="fa-solid fa-clock"></i></div>
        <div>
            <div class="pip-count">{{ $counts['pending'] }}</div>
            <div class="pip-label">Pending</div>
        </div>
    </a>
    <a href="{{ route('admin.orders.index', ['status'=>'confirmed']) }}" class="pipeline-step pip-confirmed {{ ($filters['status'] ?? '') === 'confirmed' ? 'pip-active' : '' }}">
        <div class="pip-icon"><i class="fa-solid fa-hammer"></i></div>
        <div>
            <div class="pip-count">{{ $counts['confirmed'] }}</div>
            <div class="pip-label">In Production</div>
        </div>
    </a>
    <a href="{{ route('admin.orders.index', ['status'=>'shipped']) }}" class="pipeline-step pip-shipped {{ ($filters['status'] ?? '') === 'shipped' ? 'pip-active' : '' }}" style="color:#1d4ed8;">
        <div class="pip-icon"><i class="fa-solid fa-truck"></i></div>
        <div>
            <div class="pip-count">{{ $counts['shipped'] }}</div>
            <div class="pip-label">Shipped</div>
        </div>
    </a>
    <a href="{{ route('admin.orders.index', ['status'=>'complete']) }}" class="pipeline-step pip-complete {{ ($filters['status'] ?? '') === 'complete' ? 'pip-active' : '' }}">
        <div class="pip-icon"><i class="fa-solid fa-circle-check"></i></div>
        <div>
            <div class="pip-count">{{ $counts['complete'] }}</div>
            <div class="pip-label">Delivered</div>
        </div>
    </a>
</div>

<form method="GET" class="filter-bar">
    <div class="search-input">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" name="q" placeholder="Search by order ID, name or email…" value="{{ $filters['q'] ?? '' }}">
    </div>
    <select name="status">
        <option value="">All Statuses</option>
        @foreach($statuses as $s)
            <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ ucfirst($s) }}</option>
        @endforeach
    </select>
    <button class="adm-btn adm-btn-primary"><i class="fa-solid fa-filter"></i> Filter</button>
    <a href="{{ route('admin.orders.index') }}" class="adm-btn adm-btn-ghost">Reset</a>
</form>

<div class="table-wrap">
<table class="data-table">
    <thead><tr>
        <th>#</th>
        <th>Customer</th>
        <th>Phone</th>
        <th>Items</th>
        <th>Total</th>
        <th>Notes</th>
        <th>Status</th>
        <th>Date</th>
        <th class="col-actions"></th>
    </tr></thead>
    <tbody>
        @forelse($orders as $o)
            <tr class="animate-fade">
                <td><strong style="color:#f59e0b;">#{{ $o->id }}</strong></td>
                <td>
                    <strong>{{ $o->name }}</strong>
                    <br><small style="color:#475569;">{{ $o->email }}</small>
                </td>
                <td style="color:#64748b;">{{ $o->phone }}</td>
                <td>{{ $o->items->count() }} item{{ $o->items->count() != 1 ? 's' : '' }}</td>
                <td><strong style="color:#f59e0b;">Rs {{ number_format($o->total, 0) }}</strong></td>
                <td>
                    @if($o->customer_notes)
                        <span class="chip chip-amber" title="{{ $o->customer_notes }}"><i class="fa-solid fa-note-sticky"></i> Notes</span>
                    @else
                        <span style="color:#334155;">—</span>
                    @endif
                </td>
                <td>
                    <span class="order-status-badge osb-{{ $o->status }}">
                        @if($o->status === 'pending')       <i class="fa-solid fa-clock"></i>
                        @elseif($o->status === 'confirmed') <i class="fa-solid fa-hammer"></i>
                        @elseif($o->status === 'shipped')   <i class="fa-solid fa-truck"></i>
                        @elseif($o->status === 'complete')  <i class="fa-solid fa-circle-check"></i>
                        @endif
                        {{ $o->status === 'complete' ? 'Delivered' : ucfirst($o->status) }}
                    </span>
                </td>
                <td style="color:#475569; font-size:.82rem;">{{ $o->created_at->format('M d, Y') }}</td>
                <td class="actions-row">
                    <a href="{{ route('admin.orders.show', $o) }}" class="adm-btn adm-btn-ghost" style="padding:.4rem .7rem;" title="View"><i class="fa-solid fa-eye"></i></a>
                    <form method="POST" action="{{ route('admin.orders.destroy', $o) }}" onsubmit="return confirm('Delete order #{{ $o->id }}?');" style="display:inline;">
                        @csrf @method('DELETE')
                        <button class="adm-btn adm-btn-danger" style="padding:.4rem .7rem;" title="Delete"><i class="fa-solid fa-trash"></i></button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td colspan="9" class="empty-row">No orders found.</td></tr>
        @endforelse
    </tbody>
</table>
</div>

<div class="pagination-wrap">{{ $orders->links() }}</div>
@endsection