@extends('layouts.admin')

@section('page-title', 'Practice Areas')

@section('content')
    <div class="admin-card">
        <div class="flex-between" style="margin-bottom:20px;">
            <p style="color:var(--text-muted);font-size:0.9rem;">These appear as the icon grid on the homepage.</p>
            <a href="{{ route('admin.practice-areas.create') }}" class="btn">+ Add Practice Area</a>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Order</th>
                    <th>Icon</th>
                    <th>Title</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($practiceAreas as $area)
                    <tr>
                        <td>{{ $area->sort_order }}</td>
                        <td><i class="{{ $area->icon }}"></i> <span style="color:#999;font-size:0.8rem;">{{ $area->icon }}</span></td>
                        <td>{{ str_replace("\n", ' ', $area->title) }}</td>
                        <td class="table-actions">
                            <a href="{{ route('admin.practice-areas.edit', $area) }}">Edit</a>
                            <form method="POST" action="{{ route('admin.practice-areas.destroy', $area) }}" style="display:inline;" onsubmit="return confirm('Delete this practice area?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4">No practice areas yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection