@extends('admin.layout')

@section('title', $step->exists ? 'Edit Langkah' : 'Tambah Langkah Baru')
@section('page_heading', $step->exists ? 'Edit Langkah Pemesanan' : 'Tambah Langkah Pemesanan Baru')

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

    <div class="p-6 bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm space-y-6">
        <div class="flex items-center justify-between border-b border-outline-variant pb-4">
            <div>
                <h3 class="font-headline-md text-base font-bold text-on-surface">{{ $step->exists ? 'Edit Langkah Pemesanan' : 'Formulir Langkah Baru' }}</h3>
                <p class="font-label-sm text-xs text-on-surface-variant">Lengkapi detail informasi langkah pemesanan.</p>
            </div>
            <a href="{{ route('admin.how-it-works.index') }}" class="text-xs font-bold text-on-surface-variant hover:text-on-surface flex items-center gap-1">
                <span class="material-symbols-outlined text-sm">arrow_back</span> Kembali
            </a>
        </div>

        <form action="{{ $step->exists ? route('admin.how-it-works.update', ['encryptedId' => $step->secure_id]) : route('admin.how-it-works.store') }}" method="POST" class="space-y-5 crud-form">
            @csrf
            @if($step->exists)
                @method('PUT')
            @endif

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- Step Number -->
                <div>
                    <label for="step_number" class="block text-xs font-bold text-on-surface mb-1">Nomor Langkah (Step #) <span class="text-error">*</span></label>
                    <input type="number" name="step_number" id="step_number" value="{{ old('step_number', $step->step_number ?? 1) }}" min="1" required
                           class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm text-on-surface focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-outline"
                           placeholder="1">
                </div>

                <!-- Judul Langkah -->
                <div class="md:col-span-2">
                    <label for="title" class="block text-xs font-bold text-on-surface mb-1">Judul Langkah <span class="text-error">*</span></label>
                    <input type="text" name="title" id="title" value="{{ old('title', $step->title) }}" required
                           class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm text-on-surface focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-outline"
                           placeholder="Contoh: Pilih Layanan">
                </div>
            </div>

            <!-- Sort Order -->
            <div>
                <label for="sort_order" class="block text-xs font-bold text-on-surface mb-1">Urutan Tampilkan (Sort Order) <span class="text-error">*</span></label>
                <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', $step->sort_order ?? 1) }}" min="0" required
                       class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm text-on-surface focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-outline"
                       placeholder="1">
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-xs font-bold text-on-surface mb-1">Deskripsi Langkah <span class="text-error">*</span></label>
                <textarea name="description" id="description" rows="3" required
                          class="w-full px-4 py-2.5 rounded-xl bg-surface-container-low border border-outline-variant text-sm text-on-surface focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-outline"
                          placeholder="Penjelasan petunjuk langkah ini...">{{ old('description', $step->description) }}</textarea>
            </div>

            <!-- Buttons -->
            <div class="pt-4 border-t border-outline-variant flex items-center justify-end gap-3">
                <a href="{{ route('admin.how-it-works.index') }}" class="px-5 py-2.5 rounded-xl border border-outline-variant text-on-surface-variant hover:bg-surface-variant font-bold text-xs transition-colors">
                    Batal
                </a>
                <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-xs hover:bg-opacity-90 transition-all active:scale-95 shadow">
                    {{ $step->exists ? 'Simpan Perubahan' : 'Tambah Langkah' }}
                </button>
            </div>
        </form>
    </div>

</div>
@endsection