@extends('admin.layouts.admin')
@section('content')
<div class="bg-white p-6 rounded-lg shadow-md" dir="rtl">
    <div class="flex justify-between items-center mb-6 border-b pb-4">
        <h2 class="text-xl font-bold">خطوات العمل (كيف يعمل)</h2>
        <a href="{{ route('admin.step.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded">إضافة خطوة</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-right">
        @foreach($steps as $step)
        <div class="border p-6 rounded-xl bg-gray-50 relative">
            <span class="absolute top-4 left-4 bg-blue-600 text-white w-8 h-8 flex items-center justify-center rounded-full font-bold">{{ $step->step_number }}</span>
            <div class="text-3xl text-blue-600 mb-2"><i class="{{ $step->icon }}"></i></div>
            <h3 class="font-bold text-lg">{{ $step->title }}</h3>
            <p class="text-gray-500 text-sm mb-4">{{ $step->description }}</p>
            <div class="flex gap-4">
                <a href="{{ route('admin.step.edit', $step->id) }}" class="text-blue-600">تعديل</a>
                <form action="{{ route('admin.step.destroy', $step->id) }}" method="POST" onsubmit="return confirm('حذف؟')">
                    @csrf @method('DELETE')
                    <button class="text-red-600">حذف</button>
                </form>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection