@extends('layouts.dashboard')

@section('content')
<div class="max-w-7xl mx-auto p-6 space-y-6">

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="flex items-center justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black">Areas</h1>
            <p class="text-slate-500">Assign salesmen to areas shown on public homepage.</p>
        </div>

        <a href="{{ route('areas.create') }}" class="btn btn-primary">
            + Add Area
        </a>
    </div>

    <div class="rounded-3xl bg-white border border-gray-200 shadow-sm overflow-hidden">
        <table class="table">
            <thead>
                <tr>
                    <th>Area</th>
                    <th>Salesmen</th>
                    <th>Status</th>
                    <th>Sort</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                @foreach($areas as $area)
                    <tr>
                        <td class="font-black">{{ $area->name }}</td>
                        <td>{{ $area->salesmen_count }}</td>
                        <td>
                            <span class="badge {{ $area->is_active ? 'badge-success' : 'badge-error' }}">
                                {{ $area->is_active ? 'Active' : 'Hidden' }}
                            </span>
                        </td>
                        <td>{{ $area->sort_order }}</td>
                        <td>
                            <a href="{{ route('areas.edit', $area) }}" class="btn btn-xs btn-primary">
                                Edit
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection