@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <h4 class="mb-4">Kelola Pemesanan</h4>

    <div class="table-responsive table-card">
        <table class="table table-nowrap table-striped-columns mb-0">
            <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>Nama Pengguna</th>
                    <th>Layanan</th>
                    <th>Jadwal</th>
                    <th>Alamat</th>
                    <th>Status</th>
                    <th>Teknisi</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($orders as $order)
                <tr>
                    <td>#ORDER{{ str_pad($order->id, 4, '0', STR_PAD_LEFT) }}</td>
                    <td>{{ $order->user->name ?? '-' }}</td>
                    <td>{{ $order->service->name ?? '-' }}</td>
                    <td>{{ \Carbon\Carbon::parse($order->schedule)->format('d M Y') }}</td>
                    <td>{{ $order->address }}</td>
                    <td>
                        <span class="badge 
                            @if ($order->status == 'completed') bg-success
                            @elseif ($order->status == 'pending') bg-warning
                            @elseif ($order->status == 'cancelled') bg-danger
                            @else bg-secondary
                            @endif">
                            {{ ucfirst($order->status) }}
                        </span>
                    </td>
                    <td>{{ $order->technician->name ?? 'Belum ditugaskan' }}</td>
                    <td>
                        <a href="{{ route('admin.orders.edit', $order->id) }}" class="btn btn-sm btn-warning">Kelola</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center">Tidak ada data pemesanan.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection