@extends('layouts.sash')

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

@section('content')
<div class="row mt-4">
<div class="col-lg-7 space-y-4">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-semibold text-slate-800">{{ $branch->name }}</h1>
        <div class="flex gap-2">
            <a href="{{ route('branches.edit', $branch) }}" class="px-4 py-2 bg-slate-800 text-white text-sm font-medium rounded-lg hover:bg-slate-700">Edit</a>
            <a href="{{ route('branches.index') }}" class="px-4 py-2 bg-slate-200 text-slate-700 text-sm font-medium rounded-lg">Back</a>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 space-y-3">
        <p><span class="text-slate-500 text-sm">Code</span> {{ $branch->code }}</p>
        <p><span class="text-slate-500 text-sm">Status</span> <span class="px-2 py-0.5 text-xs font-medium rounded-full {{ $branch->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' }}">{{ $branch->status }}</span></p>
        @if($branch->address)<p><span class="text-slate-500 text-sm">Address</span> {{ $branch->address }}</p>@endif
        @if($branch->city)<p><span class="text-slate-500 text-sm">City</span> {{ $branch->city }}{!! $branch->state ? ', ' . $branch->state : '' !!}</p>@endif
        @if($branch->phone)<p><span class="text-slate-500 text-sm">Phone</span> {{ $branch->phone }}</p>@endif
        @if($branch->opening_time)<p><span class="text-slate-500 text-sm">Hours</span> {{ $branch->opening_time->format('g:i A') }} - {{ $branch->closing_time?->format('g:i A') }}</p>@endif
    </div>
</div>
</div>
@endsection