@extends('layouts.branch')

@section('title', 'Branch Profile')
@section('header', 'Branch Profile')

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Profile', 'url' => route('branch.profile')]
        ]
    ])

    <div class="max-w-4xl mx-auto">
        <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-slate-200 bg-slate-50/50 flex items-center gap-4">
                <div class="h-12 w-12 bg-indigo-600 rounded-lg flex items-center justify-center text-white shadow-sm">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-slate-800">{{ $branch->name }}</h3>
                    <p class="text-sm text-slate-500 uppercase tracking-widest text-[10px]">Registry: {{ $branch->outlet_code }}</p>
                </div>
            </div>

            <div class="p-8 space-y-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-1">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Reporting Manager</p>
                        <p class="text-sm font-semibold text-slate-700">{{ $branch->reporting_manager }}</p>
                    </div>

                    <div class="space-y-1">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Primary Contact</p>
                        <p class="text-sm font-semibold text-slate-700">{{ $branch->phone }}</p>
                    </div>

                    <div class="space-y-1">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Email Address</p>
                        <p class="text-sm font-semibold text-slate-700 lowercase">{{ $branch->email ?? 'Not Configured' }}</p>
                    </div>

                    <div class="space-y-1">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">City / Region</p>
                        <p class="text-sm font-semibold text-slate-700">{{ $branch->city }}, {{ $branch->state }}</p>
                    </div>

                    <div class="space-y-1 md:col-span-2">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Physical Address</p>
                        <p class="text-sm font-semibold text-slate-700 leading-relaxed">{{ $branch->address_1 }}<br>{{ $branch->address_2 }}</p>
                    </div>
                </div>

                <div class="pt-6 border-t border-slate-100 flex justify-between items-center">
                    <p class="text-[10px] text-slate-400 font-medium italic">Contact headquarters for profile modifications.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection