<x-app-layout>
    <x-slot name="header">
        {{ __('Branches') }}
    </x-slot>

    <div class="p-6 space-y-6">
        @if (session('status'))
            <div class="rounded-md bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-800">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="min-w-0">
                <h1 class="text-xl font-semibold text-gray-900">Branches</h1>
                <p class="mt-1 text-sm text-gray-600">
                    Manage branches for this dealer.
                </p>
            </div>

            <a
                href="{{ route('settings.branches.create') }}"
                class="inline-flex w-full sm:w-auto justify-center items-center rounded-lg bg-[var(--dealer-accent-color)] px-3 py-1.5 text-xs sm:px-4 sm:py-2 sm:text-sm font-semibold text-[var(--dealer-accent-text-color)] shadow-sm hover:bg-[var(--dealer-accent-hover-color)] whitespace-nowrap"
            >
                Create Branch
            </a>
        </div>

        <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Name</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Code</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Address</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Default</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Active</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Users</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Created</th>
                            <th class="px-4 py-2 text-center font-semibold text-gray-700">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse ($branches as $branch)
                            <tr>
                                <td class="px-4 py-2 text-gray-900">
                                    {{ $branch->name }}
                                </td>
                                <td class="px-4 py-2 text-gray-700">
                                    {{ $branch->code ?? '—' }}
                                </td>
                                <td class="px-4 py-2 text-gray-700 max-w-xs">
                                    <span class="block truncate" title="{{ $branch->address }}">
                                        {{ $branch->address }}
                                    </span>
                                </td>
                                <td class="px-4 py-2">
                                    @if ($branch->is_default)
                                        <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
                                            Default
                                        </span>
                                    @else
                                        <span class="text-xs text-gray-500">—</span>
                                    @endif
                                </td>
                                <td class="px-4 py-2">
                                    @if ($branch->is_active)
                                        <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
                                            Active
                                        </span>
                                    @else
                                        <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
                                            Inactive
                                        </span>
                                    @endif
                                </td>
                                <td class="px-4 py-2 text-gray-700">
                                    {{ $branch->users_count ?? 0 }}
                                </td>
                                <td class="px-4 py-2 text-gray-500">
                                    {{ $branch->created_at?->format('Y-m-d') ?? '—' }}
                                </td>
                                <td class="px-4 py-2">
                                    <div class="flex items-center justify-end gap-2">
                                        <a
                                            href="{{ route('settings.branches.edit', $branch->id) }}"
                                            class="inline-flex items-center rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 whitespace-nowrap"
                                        >
                                            Edit
                                        </a>
                                        <a
                                            href="{{ route('settings.branches.users.index', $branch->id) }}"
                                            class="inline-flex items-center rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 whitespace-nowrap"
                                        >
                                            Manage Users
                                        </a>

                                        @if (! $branch->is_default)
                                            <form
                                                method="POST"
                                                action="{{ route('settings.branches.set-default', $branch->id) }}"
                                            >
                                                @csrf
                                                @method('PATCH')
                                                <button
                                                    type="submit"
                                                    class="inline-flex items-center rounded-md border border-blue-200 px-2 py-1 text-xs text-blue-700 hover:bg-blue-50 whitespace-nowrap"
                                                >
                                                    Set as Default
                                                </button>
                                            </form>
                                        @endif

                                        @if (! $branch->is_default)
                                            <form
                                                method="POST"
                                                action="{{ route('settings.branches.toggle-active', $branch->id) }}"
                                            >
                                                @csrf
                                                @method('PATCH')
                                                <button
                                                    type="submit"
                                                    class="inline-flex items-center rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 whitespace-nowrap"
                                                >
                                                    {{ $branch->is_active ? 'Deactivate' : 'Activate' }}
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-4 text-center text-sm text-gray-500">
                                    No branches found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-4 py-3 border-t border-gray-100">
                {{ $branches->links() }}
            </div>
        </div>
    </div>
</x-app-layout>

