@extends('admin.layout')

@section('title', 'Cara Pemesanan')
@section('page_heading', 'Langkah Cara Pemesanan')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h3 class="font-headline-md text-base font-bold text-on-surface">Langkah-Langkah Pemesanan</h3>
            <p class="font-label-sm text-xs text-on-surface-variant">Kelola langkah mudah bagi pengguna dalam pemesanan mitra.</p>
        </div>
        <a href="{{ route('admin.how-it-works.create') }}" class="px-4 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-xs hover:bg-opacity-90 transition-all active:scale-95 shadow flex items-center gap-2">
            <span class="material-symbols-outlined text-base">add</span>
            Tambah Langkah Baru
        </a>
    </div>

    <!-- Table Card -->
    <div class="bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4">Langkah ke</th>
                        <th class="px-6 py-4">Judul Langkah</th>
                        <th class="px-6 py-4">Deskripsi Petunjuk</th>
                        <th class="px-6 py-4">Urutan</th>
                        <th class="px-6 py-4 text-right">Aksi (Encrypted ID)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/60">
                    @forelse($steps as $step)
                        <tr class="hover:bg-surface-container-low/50 transition-colors">
                            <td class="px-6 py-4">
                                <span class="w-8 h-8 rounded-full bg-primary text-on-primary font-bold text-xs inline-flex items-center justify-center">
                                    {{ $step->step_number }}
                                </span>
                            </td>
                            <td class="px-6 py-4 font-bold text-on-surface">
                                {{ $step->title }}
                            </td>
                            <td class="px-6 py-4 text-xs font-body-md text-on-surface-variant max-w-md">
                                {{ $step->description }}
                            </td>
                            <td class="px-6 py-4 text-xs font-bold text-on-surface-variant">
                                #{{ $step->sort_order }}
                            </td>
                            <td class="px-6 py-4 text-right space-x-2">
                                <!-- Encrypted Edit Link Parameter -->
                                <a href="{{ route('admin.how-it-works.edit', ['encryptedId' => $step->secure_id]) }}"
                                   class="inline-flex items-center px-3 py-1.5 rounded-lg bg-tertiary-container/20 text-tertiary border border-tertiary-container/40 hover:bg-tertiary-container/30 font-bold text-xs transition-colors">
                                    <span class="material-symbols-outlined text-sm mr-1">edit</span>
                                    Edit
                                </a>

                                <!-- Encrypted Delete Form Parameter -->
                                <form action="{{ route('admin.how-it-works.destroy', ['encryptedId' => $step->secure_id]) }}" method="POST" class="inline-block delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="inline-flex items-center px-3 py-1.5 rounded-lg bg-error-container text-on-error-container border border-error/20 hover:bg-error-container/80 font-bold text-xs transition-colors">
                                        <span class="material-symbols-outlined text-sm mr-1">delete</span>
                                        Hapus
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-on-surface-variant text-sm">
                                Belum ada langkah pemesanan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection