@extends('layouts.management')

@section('content')
<div class="space-y-6" x-data="{
    name: '{{ old('name') }}',
    code: '{{ old('code', 'BR-DAR-01') }}',
    facilityType: '{{ old('facility_type', 'Station Restaurant') }}',
    city: '{{ old('city', 'Dar es Salaam') }}',
    address: '{{ old('address') }}',
    managerUserId: '{{ old('manager_user_id') }}',
    managerName: '{{ old('manager_name') }}',
    phone: '{{ old('phone') }}',
    email: '{{ old('email') }}',
    status: {{ old('status', true) ? 'true' : 'false' }},
    buId: '{{ isset($businessUnit) ? $businessUnit->id : old('business_unit_id') }}',
    cateringBuIds: {{ Js::from(array_map('strval', $cateringBusinessUnitIds)) }},
    get isCatering() {
        return this.cateringBuIds.includes(String(this.buId));
    },
    selectedBuName: '{{ isset($businessUnit) ? $businessUnit->name : 'Select Business Unit' }}',
    users: {{ Js::from($users->map(fn($u) => ['id' => $u->id, 'name' => $u->name, 'email' => $u->email])) }},
    onCityChange() {
        const cityCodeMap = {
            'Dar es Salaam': 'DAR',
            'Dodoma': 'DOM',
            'Morogoro': 'MRO',
            'Tabora': 'TBR',
            'Mwanza': 'MWZ',
            'Kigoma': 'KGM',
            'Tanga': 'TGA',
            'Kilimanjaro': 'KLM',
            'Arusha': 'ARS',
            'Singida': 'SGD',
            'Shinyanga': 'SHY',
            'Geita': 'GTA',
            'Iringa': 'IRG',
            'Kagera': 'KGR',
            'Katavi': 'KTV',
            'Lindi': 'LND',
            'Manyara': 'MNY',
            'Mara': 'MAR',
            'Mbeya': 'MBY',
            'Mtwara': 'MTW',
            'Njombe': 'NJM',
            'Pwani': 'PWN',
            'Rukwa': 'RKW',
            'Ruvuma': 'RVM',
            'Simiyu': 'SMY',
            'Songwe': 'SGW',
            'Zanzibar': 'ZNZ'
        };
        const abbr = cityCodeMap[this.city] || 'BR';
        if (!this.code || this.code.startsWith('BR-')) {
            this.code = 'BR-' + abbr + '-01';
        }
    },
    onManagerChange() {
        if (!this.managerUserId) {
            return;
        }
        const user = this.users.find(u => u.id == this.managerUserId);
        if (user) {
            this.managerName = user.name;
            this.email = user.email;
        }
    }
}">
    <!-- Executive Header Banner -->
    <div class="rounded-2xl bg-gradient-to-r from-[#0A1A2F] via-[#112642] to-[#1E3A8A] p-6 sm:p-7 text-white shadow-xl shadow-blue-950/10 border border-blue-900/30">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-blue-300/90 mb-1.5">
                    <a href="{{ route('management.organization.branches') }}" class="hover:text-white transition-colors flex items-center gap-1">
                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                        </svg>
                        Branch Management
                    </a>
                    <span>/</span>
                    <span class="text-blue-200">Create Branch</span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white">Register a Business Unit Branch</h1>
                <p class="mt-1 text-xs sm:text-sm text-blue-200/80">
                    Create an organizational branch for this Business Unit. Module-specific setup is configured inside each module.
                </p>
            </div>
            <div>
                <a href="{{ route('management.organization.branches') }}" class="inline-flex items-center rounded-xl bg-white/10 backdrop-blur-md px-4 py-2.5 text-xs font-bold text-white border border-white/20 hover:bg-white/20 transition-all shadow-sm">
                    &larr; Back to Directory
                </a>
            </div>
        </div>
    </div>

    <!-- Form & Preview Grid (md:grid-cols-12 for laptop responsiveness) -->
    <form action="{{ isset($businessUnit) ? route('management.branches.store', $businessUnit) : route('management.branches.store-direct') }}" method="POST" autocomplete="off" class="grid grid-cols-1 md:grid-cols-12 gap-6">
        @csrf

        <!-- Left Column: Form Fields (7 cols on md, 8 cols on xl) -->
        <div class="md:col-span-7 xl:col-span-8 space-y-6">
            <!-- Section 1: Parent Division & Identification -->
            <div class="bg-white shadow-xs rounded-2xl border border-slate-200/90 p-5 sm:p-7 space-y-5">
                <div class="flex items-center gap-3 pb-4 border-b border-slate-100">
                    <div class="h-9 w-9 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold shrink-0 border border-indigo-100">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.39 3.822A2.02 2.02 0 015.825 3h12.35a2.02 2.02 0 011.435.822l2.76 3.837m-16.5 0h16.5" />
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Business Unit & Branch Identity</h2>
                        <p class="text-xs text-slate-500">Select the parent Business Unit and assign the branch name and unique code.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- Parent Business Unit -->
                    @if(isset($businessUnit))
                        <input type="hidden" name="business_unit_id" value="{{ $businessUnit->id }}">
                        <div class="sm:col-span-2 rounded-xl bg-blue-50/70 p-4 border border-blue-200/80 flex items-center justify-between">
                            <div>
                                <span class="text-xs font-bold uppercase text-blue-700 tracking-wider">Business Unit</span>
                                <h4 class="text-base font-bold text-slate-900 mt-0.5">{{ $businessUnit->name }}</h4>
                                <p class="text-xs text-slate-500">{{ $businessUnit->category ?? 'Business Unit' }}</p>
                            </div>
                            <span class="font-mono text-xs font-bold text-blue-700 bg-white px-3 py-1 rounded-lg border border-blue-200 shadow-2xs">
                                {{ $businessUnit->code }}
                            </span>
                        </div>
                    @else
                        <div class="sm:col-span-2">
                            <label for="business_unit_id" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                                Business Unit <span class="text-red-500">*</span>
                            </label>
                            <div class="relative rounded-xl shadow-2xs">
                                <select name="business_unit_id" id="business_unit_id" x-model="buId" @change="selectedBuName = $event.target.options[$event.target.selectedIndex].text" class="block w-full rounded-xl border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium" required>
                                    <option value="">-- Select Business Unit --</option>
                                    @foreach($businessUnits as $bu)
                                        <option value="{{ $bu->id }}" {{ old('business_unit_id') == $bu->id ? 'selected' : '' }}>
                                            {{ $bu->name }} ({{ $bu->code }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('business_unit_id')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                        </div>
                    @endif

                    <!-- Branch Name -->
                    <div class="sm:col-span-2">
                        <label for="name" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Branch Name <span class="text-red-500">*</span>
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.39 3.822A2.02 2.02 0 015.825 3h12.35a2.02 2.02 0 011.435.822l2.76 3.837m-16.5 0h16.5" />
                                </svg>
                            </div>
                            <input type="text" name="name" id="name" x-model="name" autocomplete="off" placeholder="Morogoro Station Branch" class="block w-full rounded-xl border border-slate-300 pl-10 pr-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium" required>
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Official name of the branch within its Business Unit.</p>
                        @error('name')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <!-- Code -->
                    <div>
                        <label for="code" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Branch Code <span class="text-red-500">*</span>
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <span class="font-mono font-bold text-xs">#</span>
                            </div>
                            <input type="text" name="code" id="code" x-model="code" autocomplete="off" placeholder="BR-DAR-01" class="block w-full rounded-xl border border-slate-300 pl-8 pr-3.5 py-2.5 text-sm font-mono font-bold text-slate-900 uppercase bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all" required>
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Unique branch identifier across the organization.</p>
                        @error('code')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <!-- Catering Module Settings (legacy facility classification; only for Catering Business Units) -->
            <div x-show="isCatering" x-cloak class="bg-white shadow-xs rounded-2xl border border-amber-200/90 p-5 sm:p-7 space-y-4">
                <div class="flex items-center gap-3 pb-4 border-b border-amber-100">
                    <div class="h-9 w-9 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center font-bold shrink-0 border border-amber-100">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Catering Module Settings</h2>
                        <p class="text-xs text-slate-500">Shown only for Catering Business Units. Used by Catering/POS to discover this branch.</p>
                    </div>
                </div>

                <div>
                    <label for="facility_type" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                        Catering Facility Classification
                    </label>
                    <div class="relative rounded-xl shadow-2xs">
                        <select name="facility_type" id="facility_type" x-model="facilityType" :disabled="!isCatering" class="block w-full rounded-xl border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium">
                            <option value="Station Restaurant">Station Restaurant</option>
                            <option value="On-board Train Pantry">On-board Train Pantry</option>
                            <option value="Platform Retail Counter">Platform Retail Counter</option>
                            <option value="Central Production Hub">Central Production Hub</option>
                            <option value="Water Bottling Plant">Water Bottling Plant</option>
                            <option value="Regional Depot">Regional Depot</option>
                            <option value="Other Service Point">Other Service Point</option>
                        </select>
                    </div>
                    @error('facility_type')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            <!-- Section 2: Physical Station Location -->
            <div class="bg-white shadow-xs rounded-2xl border border-slate-200/90 p-5 sm:p-7 space-y-5">
                <div class="flex items-center gap-3 pb-4 border-b border-slate-100">
                    <div class="h-9 w-9 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center font-bold shrink-0 border border-blue-100">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Branch Location</h2>
                        <p class="text-xs text-slate-500">Region / city and physical address of the branch.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- City / Region Dropdown (Standard Tanzanian Regions) -->
                    <div class="sm:col-span-2">
                        <label for="city" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Region / City <span class="text-red-500">*</span>
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                                </svg>
                            </div>
                            <select name="city" id="city" x-model="city" @change="onCityChange()" class="block w-full rounded-xl border border-slate-300 pl-10 pr-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium">
                                <optgroup label="TRC Railway Corridors & Key Hubs">
                                    <option value="Dar es Salaam">Dar es Salaam (Main Terminal / Port / TRC HQ)</option>
                                    <option value="Dodoma">Dodoma (Capital / SGR Central Hub)</option>
                                    <option value="Morogoro">Morogoro (SGR Major Stop)</option>
                                    <option value="Tabora">Tabora (MTR Central Railway Junction)</option>
                                    <option value="Mwanza">Mwanza (Lake Victoria Hub)</option>
                                    <option value="Kigoma">Kigoma (Lake Tanganyika Terminal)</option>
                                    <option value="Tanga">Tanga (Northern Line Terminal)</option>
                                    <option value="Kilimanjaro">Kilimanjaro / Moshi</option>
                                    <option value="Arusha">Arusha (Northern Tourist Hub)</option>
                                    <option value="Singida">Singida (Central Line)</option>
                                    <option value="Shinyanga">Shinyanga (Mwanza Line Junction)</option>
                                    <option value="Katavi">Katavi (Mpanda Line)</option>
                                </optgroup>
                                <optgroup label="Other Administrative Regions (Tanzania)">
                                    <option value="Geita">Geita</option>
                                    <option value="Iringa">Iringa</option>
                                    <option value="Kagera">Kagera (Bukoba)</option>
                                    <option value="Lindi">Lindi</option>
                                    <option value="Manyara">Manyara (Babati)</option>
                                    <option value="Mara">Mara (Musoma)</option>
                                    <option value="Mbeya">Mbeya</option>
                                    <option value="Mtwara">Mtwara</option>
                                    <option value="Njombe">Njombe</option>
                                    <option value="Pwani">Pwani (Coast / Kibaha / Ruvu)</option>
                                    <option value="Rukwa">Rukwa (Sumbawanga)</option>
                                    <option value="Ruvuma">Ruvuma (Songea)</option>
                                    <option value="Simiyu">Simiyu</option>
                                    <option value="Songwe">Songwe</option>
                                    <option value="Zanzibar">Zanzibar / Pemba</option>
                                </optgroup>
                            </select>
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Curated Tanzanian administrative regions. Selecting a region automatically suggests the branch code prefix.</p>
                        @error('city')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <!-- Physical Address -->
                    <div class="sm:col-span-2">
                        <label for="address" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Physical Address
                        </label>
                        <textarea name="address" id="address" x-model="address" rows="2" placeholder="Street, building, or station address..." class="block w-full rounded-xl border border-slate-300 p-3 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all"></textarea>
                    </div>
                </div>
            </div>

            <!-- Section 3: Leadership & Governance -->
            <div class="bg-white shadow-xs rounded-2xl border border-slate-200/90 p-5 sm:p-7 space-y-5">
                <div class="flex items-center gap-3 pb-4 border-b border-slate-100">
                    <div class="h-9 w-9 rounded-xl bg-violet-50 text-violet-600 flex items-center justify-center font-bold shrink-0 border border-violet-100">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Branch Manager & Administrative Contact</h2>
                        <p class="text-xs text-slate-500">Administrative head / point of contact for this branch. Operational module roles are assigned inside each module.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <!-- Branch Manager Dropdown (auto-fills Manager Name & Email) -->
                    <div class="sm:col-span-2">
                        <label for="manager_user_id" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Branch Manager (Registered User)
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                </svg>
                            </div>
                            <select name="manager_user_id" id="manager_user_id" x-model="managerUserId" @change="onManagerChange()" class="block w-full rounded-xl border border-slate-300 pl-10 pr-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium">
                                <option value="">-- No registered user (use manual contact name) --</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('manager_user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }} &bull; {{ $user->email }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Optional. Selecting a user auto-fills the manager name & contact email.</p>
                        @error('manager_user_id')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <!-- Manager Name -->
                    <div class="sm:col-span-2">
                        <label for="manager_name" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Manager Name / Administrative Contact
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                </svg>
                            </div>
                            <input type="text" name="manager_name" id="manager_name" x-model="managerName" autocomplete="off" placeholder="Juma Ally" class="block w-full rounded-xl border border-slate-300 pl-10 pr-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium">
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Auto-filled from the selected user, or enter a contact name manually.</p>
                    </div>

                    <!-- Phone -->
                    <div>
                        <label for="phone" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Phone
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                                </svg>
                            </div>
                            <input type="text" name="phone" id="phone" x-model="phone" autocomplete="off" placeholder="+255 700 123 456" class="block w-full rounded-xl border border-slate-300 pl-10 pr-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all font-medium">
                        </div>
                    </div>

                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                            Email
                        </label>
                        <div class="relative rounded-xl shadow-2xs">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                                </svg>
                            </div>
                            <input type="email" name="email" id="email" x-model="email" autocomplete="off" placeholder="branch@tanrail.co.tz" class="block w-full rounded-xl border border-slate-300 pl-10 pr-3.5 py-2.5 text-sm text-slate-900 bg-white hover:border-slate-400 focus:border-blue-600 focus:ring-4 focus:ring-blue-500/15 transition-all">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section 4: Operational Status -->
            <div class="bg-white shadow-xs rounded-2xl border border-slate-200/90 p-5 sm:p-7">
                <div class="flex items-center justify-between gap-4 p-4 rounded-xl border border-slate-200 bg-slate-50/70">
                    <div>
                        <span class="text-sm font-bold text-slate-900 block">Operational Status</span>
                        <p class="text-xs text-slate-500 mt-0.5">
                            Active branches are available to their Business Unit's modules. Inactive branches are retained for history.
                        </p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer shrink-0">
                        <input type="checkbox" name="status" value="1" x-model="status" class="sr-only peer">
                        <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                    </label>
                </div>
            </div>

            <!-- Action Bar -->
            <div class="flex items-center justify-end gap-x-4 bg-white shadow-xs rounded-2xl border border-slate-200/90 p-4 sm:p-5">
                <a href="{{ route('management.organization.branches') }}" class="rounded-xl px-5 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-100 transition-colors">
                    Cancel
                </a>
                <button type="submit" class="inline-flex items-center rounded-xl bg-blue-600 px-6 py-2.5 text-sm font-bold text-white shadow-md hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all shadow-blue-500/25 active:scale-98 cursor-pointer">
                    <svg class="-ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                    Create Branch
                </button>
            </div>
        </div>

        <!-- Right Column: Live Interactive Preview (5 cols on md, 4 cols on xl) -->
        <div class="md:col-span-5 xl:col-span-4 space-y-6">
            <div class="sticky top-20 space-y-5">
                <!-- Preview Header Pill -->
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-500">Live Branch Preview</span>
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10">
                        <span class="w-1.5 h-1.5 rounded-full bg-indigo-600 animate-pulse"></span>
                        Real-time
                    </span>
                </div>

                <!-- Branch Card Mockup -->
                <div class="bg-white rounded-2xl shadow-md border border-slate-200 p-5 sm:p-6 space-y-4 overflow-hidden relative transition-all duration-300">
                    <div class="absolute top-0 left-0 right-0 h-2" :class="status ? 'bg-gradient-to-r from-indigo-600 to-blue-600' : 'bg-slate-300'"></div>

                    <div class="flex items-start justify-between gap-3 pt-1">
                        <div class="h-12 w-12 rounded-xl flex items-center justify-center font-black text-base shadow-sm text-white transition-colors" :class="status ? 'bg-indigo-600 shadow-indigo-500/30' : 'bg-slate-400'">
                            <span x-text="code ? code.substring(0, 2).toUpperCase() : 'BR'"></span>
                        </div>
                        <div>
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset" :class="status ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20' : 'bg-slate-100 text-slate-600 ring-slate-500/20'">
                                <span class="w-1.5 h-1.5 rounded-full" :class="status ? 'bg-emerald-500' : 'bg-slate-400'"></span>
                                <span x-text="status ? 'Active' : 'Inactive'"></span>
                            </span>
                        </div>
                    </div>

                    <div>
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-mono font-bold bg-slate-100 text-slate-700 uppercase" x-text="code ? code.toUpperCase() : 'CODE-PENDING'"></span>
                        <h3 class="text-base font-bold text-slate-900 mt-1.5" x-text="name ? name : 'New Branch Name'"></h3>
                        <p class="text-xs text-indigo-600 font-semibold mt-0.5" x-show="isCatering" x-text="facilityType"></p>
                    </div>

                    <p class="text-xs text-slate-500 line-clamp-2 leading-relaxed" x-text="address ? address : 'Physical address...'"></p>

                    <div class="pt-3.5 border-t border-slate-100 space-y-2 text-xs">
                        <div class="flex items-center justify-between text-slate-600">
                            <span class="text-slate-400">Business Unit:</span>
                            <span class="font-semibold text-blue-700 truncate max-w-[150px]" x-text="selectedBuName"></span>
                        </div>
                        <div class="flex items-center justify-between text-slate-600">
                            <span class="text-slate-400">Region / City:</span>
                            <span class="font-semibold text-slate-800" x-text="city ? city : 'Not set'"></span>
                        </div>
                        <div class="flex items-center justify-between text-slate-600">
                            <span class="text-slate-400">Branch Manager:</span>
                            <span class="font-semibold text-slate-800" x-text="managerName ? managerName : 'Not assigned'"></span>
                        </div>
                    </div>
                </div>

                <!-- Best Practice Card -->
                <div class="bg-indigo-50/70 rounded-2xl p-4 sm:p-5 border border-indigo-200/80 space-y-2">
                    <div class="flex items-center gap-2 text-indigo-900 font-bold text-xs">
                        <svg class="h-4 w-4 text-indigo-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                        </svg>
                        <span>Branch Administration Note</span>
                    </div>
                    <p class="text-xs text-indigo-800/80 leading-relaxed">
                        A branch is an organizational unit of its Business Unit. Module-specific configuration (e.g. Cleaning supervisors, POS, kitchen, or stock locations) is managed inside the respective module, not here.
                    </p>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection