@extends('layouts.admin', ['title' => 'Branches'])

@section('content')
    <div x-data="branchesPage()">
        <div class="mb-6 flex items-center justify-between">
            <h1 class="text-2xl font-semibold text-slate-900">Branches</h1>
            <a href="/admin/branches/create" class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-slate-950 via-slate-900 to-amber-700 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add Branch
            </a>
        </div>
        <div x-show="loading" class="flex items-center justify-center py-20">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
        </div>

        <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mb-6">
            <p class="text-sm text-red-600" x-text="error"></p>
        </div>

        <div x-show="!loading && !error" class="rounded-2xl border border-slate-200/80 bg-white shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">#</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Name</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Location</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Contact</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <template x-for="(b, i) in branches" :key="b.id">
                            <tr @click="window.location = '/admin/branches/' + b.id" class="cursor-pointer hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-4 text-sm text-slate-500" x-text="i + 1"></td>
                                <td class="px-6 py-4 text-sm font-medium text-slate-900" x-text="b.name"></td>
                                <td class="px-6 py-4 text-sm text-slate-600" x-text="b.city"></td>
                                <td class="px-6 py-4 text-sm text-slate-600" x-text="b.contact"></td>
                                <td class="px-6 py-4">
                                    <span x-text="b.status"
                                          :class="b.status === 'Active' ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-slate-50 text-slate-600 ring-slate-500/10'"
                                          class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ring-1 ring-inset"></span>
                                </td>
                            </tr>
                        </template>
                        <tr x-show="branches.length === 0">
                            <td colspan="5" class="px-6 py-12 text-center text-sm text-slate-500">No branches found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection