@extends('layouts.app')
@section('title', 'Manage Districts')
@section('page-title', 'Simamia Wilaya')
@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 Wilaya</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Ongeza, hariri na ufute wilaya za matawi</p>
        </div>
        
        {{-- Add District Button --}}
        <button type="button" 
                @click="$dispatch('open-modal', 'addDistrictModal')"
                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_location</span>
            Ongeza Wilaya Mpya
        </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 Wilaya</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $districts->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">location_on</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">Wilaya Mpya Mwezi Huu</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $districts->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">Matawi Yenye Wilaya</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $districts->pluck('branch_id')->unique()->count() }}</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">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">Wastani wa Wilaya/Tawi</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $branches->count() > 0 ? round($districts->count() / $branches->count(), 1) : 0 }}</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">analytics</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Districts 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">Wilaya Zilizopo</h3>
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <input type="text" 
                               placeholder="Tafuta wilaya..." 
                               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="districtSearch">
                        <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>
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" title="Chuja kwa tawi">
                            <span class="material-icons">filter_list</span>
                        </button>
                        <div x-show="open" @click.outside="open = false" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-95"
                             class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-10">
                            <div class="p-2">
                                <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" id="branchFilter">
                                    <option value="">Matawi yote</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->name }}">{{ ucfirst($branch->name) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </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 Wilaya
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            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 ($districts as $district)
                        <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">
                                #{{ $district->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-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg flex items-center justify-center">
                                        <span class="material-icons text-blue-600 dark:text-blue-400 text-lg">location_on</span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ ucfirst($district->name) }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">Wilaya ya Utawala</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center space-x-2">
                                    @if($district->branch)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/20 text-primary-800 dark:text-primary-300">
                                            <span class="material-icons text-xs mr-1">business</span>
                                            {{ ucfirst($district->branch->name) }}
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300">
                                            Hakuna tawi
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $district->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', 'editDistrictModal'); $dispatch('set-edit-data', { id: {{ $district->id }}, name: '{{ $district->name }}', branchId: {{ $district->branch_id ?? 'null' }} })"
                                            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', 'deleteDistrictModal'); $dispatch('set-delete-data', { id: {{ $district->id }}, name: '{{ $district->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="6" 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">location_on</span>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium text-gray-900 dark:text-white">Hakuna wilaya zilizopatikana</h3>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Anza kwa kuongeza wilaya ya kwanza</p>
                                    </div>
                                    <button type="button" 
                                            @click="$dispatch('open-modal', 'addDistrictModal')"
                                            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_location</span>
                                        Ongeza Wilaya
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Add District Modal --}}
<div x-data="{ 
    open: false, 
    name: '',
    branchId: '',
    errors: {}
}" 
@open-modal.window="if ($event.detail === 'addDistrictModal') { open = true; name = ''; branchId = ''; errors = {}; }" 
@close-modal.window="if ($event.detail === 'addDistrictModal') { 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('districts.store') }}" method="POST">
                @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_location</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Ongeza Wilaya Mpya</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 Wilaya <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 wilaya"
                                   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>
                            <label for="add_branch_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Tawi <span class="text-red-500">*</span>
                            </label>
                            <select name="branch_id" 
                                    id="add_branch_id" 
                                    x-model="branchId"
                                    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 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.branch_id }"
                                    required>
                                <option value="" disabled selected>Chagua Tawi</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ ucfirst($branch->name) }}</option>
                                @endforeach
                            </select>
                            <p x-show="errors.branch_id" x-text="errors.branch_id" 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 Wilaya
                    </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 District Modal --}}
<div x-data="{ 
    open: false, 
    districtId: null,
    name: '',
    branchId: '',
    errors: {}
}" 
@open-modal.window="if ($event.detail === 'editDistrictModal') { open = true; errors = {}; }" 
@set-edit-data.window="districtId = $event.detail.id; name = $event.detail.name; branchId = $event.detail.branchId;"
@close-modal.window="if ($event.detail === 'editDistrictModal') { 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="`/districts/${districtId}`" 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_location</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Hariri Wilaya</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 Wilaya <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 wilaya"
                                   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>
                            <label for="edit_branch_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Tawi <span class="text-red-500">*</span>
                            </label>
                            <select name="branch_id" 
                                    id="edit_branch_id" 
                                    x-model="branchId"
                                    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 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.branch_id }"
                                    required>
                                <option value="" disabled>Chagua Tawi</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ ucfirst($branch->name) }}</option>
                                @endforeach
                            </select>
                            <p x-show="errors.branch_id" x-text="errors.branch_id" 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 District Modal --}}
<div x-data="{ 
    open: false, 
    districtId: null,
    districtName: ''
}" 
@open-modal.window="if ($event.detail === 'deleteDistrictModal') { open = true; }" 
@set-delete-data.window="districtId = $event.detail.id; districtName = $event.detail.name;"
@close-modal.window="if ($event.detail === 'deleteDistrictModal') { 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 Wilaya</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 wilaya <strong x-text="districtName"></strong>? 
                                    Hatua hii haiwezi kubadilishwa na data yote inayohusiana itafutwa.
                                </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="`/districts/${districtId}`" 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 Wilaya
                    </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

@push('scripts')

</script>
@endpush