@extends('layouts.app')
@section('title', 'Manage Branches')
@section('page-title', 'Simamia Matawi')
@section('content')

<div class="space-y-6" data-animate>
    {{-- Success and Error Messages --}}
    @if (session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 flex items-center justify-between animate-fade-in" x-data="{ show: true }" x-show="show" x-transition>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-green-600 dark:text-green-300 text-sm">check_circle</span>
                </div>
                <p class="text-green-800 dark:text-green-200 font-medium">{{ session('success') }}</p>
            </div>
            <button @click="show = false" class="text-green-600 dark:text-green-300 hover:text-green-800 dark:hover:text-green-100 transition-colors">
                <span class="material-icons text-lg">close</span>
            </button>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 flex items-center justify-between animate-fade-in" x-data="{ show: true }" x-show="show" x-transition>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 dark:text-red-300 text-sm">error</span>
                </div>
                <p class="text-red-800 dark:text-red-200 font-medium">{{ session('error') }}</p>
            </div>
            <button @click="show = false" class="text-red-600 dark:text-red-300 hover:text-red-800 dark:hover:text-red-100 transition-colors">
                <span class="material-icons text-lg">close</span>
            </button>
        </div>
    @endif

    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Simamia Matawi</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Ongeza, hariri na ufute matawi ya kampuni</p>
        </div>
        
        {{-- Add Branch Button --}}
        <button type="button" 
                @click="$dispatch('open-modal', 'addBranchModal')"
                class="inline-flex items-center px-4 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-xl hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105">
            <span class="material-icons text-lg mr-2">add</span>
            Ongeza Tawi Jipya
        </button>
    </div>

    {{-- Statistics Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Jumla ya Matawi</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $branches->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-blue-600 dark:text-blue-400">business</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Matawi Mapya Mwezi Huu</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $branches->where('created_at', '>=', now()->startOfMonth())->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-green-600 dark:text-green-400">trending_up</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Kiwango cha Ukuaji</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">+15%</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-purple-600 dark:text-purple-400">analytics</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 hover-lift">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">Tawi la Hivi Karibuni</p>
                    <p class="text-sm font-medium text-gray-900 dark:text-white mt-1">{{ $branches->sortByDesc('created_at')->first()->name ?? 'Hakuna' }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-orange-600 dark:text-orange-400">schedule</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Branches Table --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Matawi Yaliyopo</h3>
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <input type="text" 
                               placeholder="Tafuta tawi..." 
                               class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                               id="branchSearch">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="material-icons text-gray-400 text-lg">search</span>
                        </div>
                    </div>
                    <button class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" title="Uchunguzi zaidi">
                        <span class="material-icons">filter_list</span>
                    </button>
                </div>
            </div>
        </div>
        
       <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            ID
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Jina la Tawi
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Tarehe ya Usajili
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Hali
                        </th>
                        <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Vitendo
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse ($branches as $branch)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                                #{{ $branch->id }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-900/20 dark:to-primary-800/20 rounded-lg flex items-center justify-center">
                                        <span class="material-icons text-primary-600 dark:text-primary-400 text-lg">business</span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ ucfirst($branch->name) }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">Tawi la Biashara</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $branch->created_at->format('d/m/Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300">
                                    <span class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5"></span>
                                    Amilifu
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-2">
                                    {{-- Edit Button --}}
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'editBranchModal'); $dispatch('set-edit-data', { id: {{ $branch->id }}, name: '{{ $branch->name }}' })"
                                            class="inline-flex items-center p-2 text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 rounded-lg transition-all duration-200"
                                            title="Hariri">
                                        <span class="material-icons text-lg">edit</span>
                                    </button>

                                    {{-- Delete Button --}}
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'deleteBranchModal'); $dispatch('set-delete-data', { id: {{ $branch->id }}, name: '{{ $branch->name }}' })"
                                            class="inline-flex items-center p-2 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all duration-200"
                                            title="Futa">
                                        <span class="material-icons text-lg">delete</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center justify-center space-y-3">
                                    <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
                                        <span class="material-icons text-gray-400 text-2xl">business</span>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium text-gray-900 dark:text-white">Hakuna matawi yaliyopatikana</h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Anza kwa kuongeza tawi la kwanza</p>
                                    </div>
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'addBranchModal')"
                                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors">
                                        <span class="material-icons text-sm mr-1">add</span>
                                        Ongeza Tawi
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Add Branch Modal --}}
<div x-data="{ 
    open: false, 
    name: '',
    errors: {}
}" 
@open-modal.window="if ($event.detail === 'addBranchModal') { open = true; name = ''; errors = {}; }" 
@close-modal.window="if ($event.detail === 'addBranchModal') { open = false; }" 
@keydown.escape.window="open = false"
x-show="open" 
class="fixed inset-0 z-50 overflow-y-auto" 
x-transition:enter="ease-out duration-300" 
x-transition:enter-start="opacity-0" 
x-transition:enter-end="opacity-100" 
x-transition:leave="ease-in duration-200" 
x-transition:leave-start="opacity-100" 
x-transition:leave-end="opacity-0">

    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="open = false"></div>

        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

            <form action="{{ route('branches.store') }}" method="POST" @submit="$event.preventDefault(); handleSubmit($event)">
                @csrf
                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-primary-600 dark:text-primary-400">add_business</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Ongeza Tawi Jipya</h3>
                        </div>
                        <button type="button" @click="open = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                            <span class="material-icons">close</span>
                        </button>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label for="add_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Jina la Tawi <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   id="add_name" 
                                   x-model="name"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                                   :class="{ 'border-red-500 focus:ring-red-500': errors.name }"
                                   placeholder="Ingiza jina la tawi"
                                   required>
                            <p x-show="errors.name" x-text="errors.name" class="mt-1 text-sm text-red-600 dark:text-red-400"></p>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" 
                            class="w-full inline-flex justify-center items-center px-4 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:ml-3 sm:w-auto">
                        <span class="material-icons text-lg mr-2">save</span>
                        Hifadhi Tawi
                    </button>
                    <button type="button" 
                            @click="open = false"
                            class="mt-3 w-full inline-flex justify-center items-center px-4 py-2.5 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:mt-0 sm:w-auto">
                        Ghairi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit Branch Modal --}}
<div x-data="{ 
    open: false, 
    branchId: null,
    name: '',
    errors: {}
}" 
@open-modal.window="if ($event.detail === 'editBranchModal') { open = true; errors = {}; }" 
@set-edit-data.window="branchId = $event.detail.id; name = $event.detail.name;"
@close-modal.window="if ($event.detail === 'editBranchModal') { open = false; }" 
@keydown.escape.window="open = false"
x-show="open" 
class="fixed inset-0 z-50 overflow-y-auto" 
x-transition:enter="ease-out duration-300" 
x-transition:enter-start="opacity-0" 
x-transition:enter-end="opacity-100" 
x-transition:leave="ease-in duration-200" 
x-transition:leave-start="opacity-100" 
x-transition:leave-end="opacity-0">

    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="open = false"></div>

        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

            <form :action="`/branches/${branchId}`" method="POST">
                @csrf
                @method('PUT')
                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
                                <span class="material-icons text-yellow-600 dark:text-yellow-400">edit</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Hariri Tawi</h3>
                        </div>
                        <button type="button" @click="open = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                            <span class="material-icons">close</span>
                        </button>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label for="edit_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Jina la Tawi <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   id="edit_name" 
                                   x-model="name"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
                                   :class="{ 'border-red-500 focus:ring-red-500': errors.name }"
                                   placeholder="Ingiza jina la tawi"
                                   required>
                            <p x-show="errors.name" x-text="errors.name" class="mt-1 text-sm text-red-600 dark:text-red-400"></p>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" 
                            class="w-full inline-flex justify-center items-center px-4 py-2.5 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white rounded-lg hover:from-yellow-600 hover:to-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:ml-3 sm:w-auto">
                        <span class="material-icons text-lg mr-2">save</span>
                        Hifadhi Mabadiliko
                    </button>
                    <button type="button" 
                            @click="open = false"
                            class="mt-3 w-full inline-flex justify-center items-center px-4 py-2.5 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:mt-0 sm:w-auto">
                        Ghairi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Delete Branch Modal --}}
<div x-data="{ 
    open: false, 
    branchId: null,
    branchName: ''
}" 
@open-modal.window="if ($event.detail === 'deleteBranchModal') { open = true; }" 
@set-delete-data.window="branchId = $event.detail.id; branchName = $event.detail.name;"
@close-modal.window="if ($event.detail === 'deleteBranchModal') { open = false; }" 
@keydown.escape.window="open = false"
x-show="open" 
class="fixed inset-0 z-50 overflow-y-auto" 
x-transition:enter="ease-out duration-300" 
x-transition:enter-start="opacity-0" 
x-transition:enter-end="opacity-100" 
x-transition:leave="ease-in duration-200" 
x-transition:leave-start="opacity-100" 
x-transition:leave-end="opacity-0">

    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-85 transition-opacity" @click="open = false"></div>

        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

            <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center">
                            <span class="material-icons text-red-600 dark:text-red-400">warning</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Futa Tawi</h3>
                    </div>
                    <button type="button" @click="open = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                        <span class="material-icons">close</span>
                    </button>
                </div>

                <div class="space-y-4">
                    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <div class="flex items-start space-x-3">
                            <span class="material-icons text-red-600 dark:text-red-400 mt-0.5">info</span>
                            <div>
                                <h4 class="text-sm font-medium text-red-800 dark:text-red-300">Onyo!</h4>
                                <p class="text-sm text-red-700 dark:text-red-300 mt-1">
                                    Una uhakika unataka kufuta tawi <strong x-text="branchName"></strong>? 
                                    Hatua hii haiwezi kubadilishwa.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 dark:bg-gray-700/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <form :action="`/branches/${branchId}`" method="POST" class="sm:ml-3">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="w-full inline-flex justify-center items-center px-4 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:w-auto">
                        <span class="material-icons text-lg mr-2">delete</span>
                        Futa Tawi
                    </button>
                </form>
                <button type="button" 
                        @click="open = false"
                        class="mt-3 w-full inline-flex justify-center items-center px-4 py-2.5 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 sm:mt-0 sm:w-auto">
                    Ghairi
                </button>
            </div>
        </div>
    </div>
</div>

@endsection