@extends('layouts.admin')

@section('title', $branch->name)
@section('page-title', $branch->name)

@section('content')
<div class="max-w-3xl space-y-6">
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid gap-4 sm:grid-cols-2">
            <div>
                <dt class="text-sm font-medium text-slate-500">Name</dt>
                <dd class="mt-1 text-sm font-medium text-slate-800">{{ $branch->name }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Code</dt>
                <dd class="mt-1 text-sm text-slate-800">{{ $branch->code }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Phone</dt>
                <dd class="mt-1 text-sm text-slate-800">{{ $branch->phone ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Email</dt>
                <dd class="mt-1 text-sm text-slate-800">{{ $branch->email ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Status</dt>
                <dd class="mt-1"><span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $branch->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-800' }}">{{ $branch->status }}</span></dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-slate-500">Manager</dt>
                <dd class="mt-1 text-sm text-slate-800">{{ $branch->manager?->name ?? '—' }}</dd>
            </div>
            <div class="sm:col-span-2">
                <dt class="text-sm font-medium text-slate-500">Address</dt>
                <dd class="mt-1 text-sm text-slate-800">{{ $branch->address ?: '—' }}</dd>
            </div>
        </dl>
        <div class="mt-6 flex gap-3">
            @can('edit branches')
            <a href="{{ route('branches.edit', $branch) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Edit</a>
            @endcan
            <a href="{{ route('branches.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to list</a>
        </div>
    </div>
    @if($branch->users->isNotEmpty())
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-lg font-semibold text-slate-800 mb-4">Staff ({{ $branch->users->count() }})</h2>
        <ul class="divide-y divide-slate-200">
            @foreach($branch->users as $u)
            <li class="py-2 flex items-center justify-between">
                <a href="{{ route('staff.show', $u) }}" class="text-sm text-slate-800 hover:text-slate-600">{{ $u->name }}</a>
                <span class="text-xs text-slate-500">{{ $u->getRoleNames()->first() }}</span>
            </li>
            @endforeach
        </ul>
        <p class="mt-3"><a href="{{ route('staff.index', ['branch_id' => $branch->id]) }}" class="text-sm text-slate-600 hover:text-slate-800">View all staff →</a></p>
    </div>
    @endif
</div>
@endsection