@extends('layouts.app')

@section('title', 'My Orders - MiMSMS Voter System')

@section('content')
<h1 style="color: var(--primary-orange); margin-bottom: 2rem;">My Orders</h1>

<div class="card">
    @if($orders->count() > 0)
        <table>
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Area</th>
                    <th>Package</th>
                    <th>Quantity</th>
                    <th>Status</th>
                    <th>WHMCS ID</th>
                    <th>Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                    <tr>
                        <td>#{{ $order->id }}</td>
                        <td>{{ $order->electoralArea->name ?? 'N/A' }}</td>
                        <td>{{ ucfirst(str_replace('_', ' ', $order->package_type)) }}</td>
                        <td>{{ number_format($order->quantity) }}</td>
                        <td>
                            <span class="badge badge-{{ $order->order_status === 'completed' ? 'success' : ($order->order_status === 'pending' ? 'warning' : ($order->order_status === 'cancelled' ? 'danger' : 'info')) }}">
                                {{ ucfirst($order->order_status) }}
                            </span>
                        </td>
                        <td>{{ $order->whmcs_order_id ?? '-' }}</td>
                        <td>{{ $order->created_at->format('M d, Y') }}</td>
                        <td>
                            <a href="{{ route('order.confirmation', $order->id) }}" style="color: var(--primary-orange); text-decoration: none;">View</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div style="margin-top: 2rem;">
            {{ $orders->links() }}
        </div>
    @else
        <p style="text-align: center; color: var(--text-light); padding: 2rem;">
            You haven't placed any orders yet. <a href="{{ route('order.create') }}" style="color: var(--primary-orange); text-decoration: none;">Create your first order →</a>
        </p>
    @endif
</div>
@endsection