<?php $__env->startSection('title', 'Kelola Data Unit'); ?>
<?php $__env->startSection('page-title', 'Data Unit'); ?>
<?php $__env->startSection('page-subtitle', 'Manajemen data unit dan informasi operasional'); ?>

<?php $__env->startPush('styles'); ?>
    <style>
        .dropdown-menu {
            display: none;
            position: fixed;
            width: 13rem;
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
            z-index: 9999;
        }

        .dropdown-menu.open {
            display: block;
        }

        .dropdown-wrapper {
            position: relative;
            display: inline-block;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <div class="space-y-4 sm:space-y-6">
        <div class="bg-white rounded-xl sm:rounded-2xl shadow-card animate-slide-up">

            
            <div class="px-4 sm:px-6 py-3 sm:py-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                    <div>
                        <h2 class="text-base sm:text-lg font-semibold text-gray-900">Daftar Unit</h2>
                        <p class="text-xs sm:text-sm text-gray-500 mt-1">Total: <?php echo e($units->total()); ?> Unit</p>
                    </div>
                    <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">

                        <a href="<?php echo e(route('admin.unit.create')); ?>"
                            class="group inline-flex items-center justify-center px-3 py-2 bg-primary hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-all shadow-sm">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            <span
                                class="hidden sm:inline-block sm:ml-2 group-hover:inline-block transition-all duration-300">Tambah</span>
                        </a>

                        <button type="button" onclick="toggleFilter()"
                            class="group inline-flex items-center justify-center px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-all <?php echo e(request()->hasAny(['provinsi', 'kota', 'status']) ? 'bg-blue-100 text-blue-700' : ''); ?>">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" />
                            </svg>
                            <span
                                class="hidden sm:inline-block sm:ml-2 group-hover:inline-block transition-all duration-300">
                                Filter
                                <?php if(request()->hasAny(['provinsi', 'kota', 'status'])): ?>
                                    <span
                                        class="inline-flex items-center justify-center w-4 h-4 text-xs bg-blue-600 text-white rounded-full ml-1">
                                        <?php echo e(collect(['provinsi', 'kota', 'status'])->filter(fn($k) => request($k))->count()); ?>

                                    </span>
                                <?php endif; ?>
                            </span>
                        </button>

                        <div id="search-container" class="transition-all duration-300"
                            style="<?php echo e(request('q') ? 'min-width: 280px;' : ''); ?>">
                            <button type="button" onclick="toggleSearch()" id="search-button"
                                class="group inline-flex items-center justify-center px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-all w-full sm:w-auto <?php echo e(request('q') ? 'hidden' : ''); ?>">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                                <span
                                    class="hidden sm:inline-block sm:ml-2 group-hover:inline-block transition-all duration-300">Cari</span>
                            </button>
                            <form method="GET" action="<?php echo e(route('admin.unit.index')); ?>" id="search-form"
                                class="<?php echo e(request('q') ? '' : 'hidden'); ?>">
                                <?php $__currentLoopData = ['provinsi', 'kota', 'status']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $filterKey): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <?php if(request($filterKey)): ?>
                                        <input type="hidden" name="<?php echo e($filterKey); ?>" value="<?php echo e(request($filterKey)); ?>">
                                    <?php endif; ?>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <div class="flex items-center">
                                    <div class="relative flex-1">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                            </svg>
                                        </div>
                                        <input type="search" name="q" value="<?php echo e(request('q')); ?>" id="search-input"
                                            placeholder="Cari nama unit, kode, admin..."
                                            class="block w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                                    </div>
                                    <?php if(request('q')): ?>
                                        <a href="<?php echo e(route('admin.unit.index', request()->except('q'))); ?>"
                                            class="ml-2 inline-flex items-center p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                        </a>
                                    <?php endif; ?>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>

                
                <div id="filter-panel"
                    class="<?php echo e(request()->hasAny(['provinsi', 'kota', 'status']) ? '' : 'hidden'); ?> mt-4 pt-4">
                    <form method="GET" action="<?php echo e(route('admin.unit.index')); ?>">
                        <?php if(request('q')): ?>
                            <input type="hidden" name="q" value="<?php echo e(request('q')); ?>">
                        <?php endif; ?>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 items-end">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Provinsi</label>
                                <select name="provinsi" id="filter-provinsi"
                                    class="block w-full text-sm border border-gray-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                                    <option value="">Semua Provinsi</option>
                                    <?php $__currentLoopData = $provinces; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $province): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($province->code); ?>"
                                            <?php echo e(request('provinsi') == $province->code ? 'selected' : ''); ?>>
                                            <?php echo e($province->name); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Kota / Kabupaten</label>
                                <select name="kota" id="filter-kota"
                                    class="block w-full text-sm border border-gray-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
                                    <?php echo e($cities->isEmpty() ? 'disabled' : ''); ?>>
                                    <option value="">Semua Kota</option>
                                    <?php $__currentLoopData = $cities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $city): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($city->code); ?>"
                                            <?php echo e(request('kota') == $city->code ? 'selected' : ''); ?>>
                                            <?php echo e($city->name); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                                <select name="status"
                                    class="block w-full text-sm border border-gray-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                                    <option value="">Semua Status</option>
                                    <option value="aktif" <?php echo e(request('status') == 'aktif' ? 'selected' : ''); ?>>Aktif
                                    </option>
                                    <option value="nonaktif" <?php echo e(request('status') == 'nonaktif' ? 'selected' : ''); ?>>
                                        Non-Aktif</option>
                                </select>
                            </div>
                            
                            <div class="flex items-center gap-2">
                                <button type="submit"
                                    class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-colors shadow-sm whitespace-nowrap">
                                    Terapkan Filter
                                </button>
                                <?php if(request()->hasAny(['provinsi', 'kota', 'status'])): ?>
                                    <a href="<?php echo e(route('admin.unit.index', request()->only('q'))); ?>"
                                        class="inline-flex items-center p-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition-colors"
                                        title="Reset Filter">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <?php if($units->count() > 0): ?>

                
                <div class="hidden md:block overflow-x-auto rounded-b-2xl overflow-hidden" id="table-container">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th
                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-80">
                                    Unit</th>
                                <th
                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-64">
                                    Wilayah</th>
                                <th
                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-36">
                                    Status</th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-16">
                                    Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <?php $__currentLoopData = $units; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $unit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                
                                <tr class="hover:bg-gray-50 transition-colors cursor-pointer"
                                    onclick="toggleDetail('<?php echo e($unit->uuid); ?>')">
 
                                    <td class="px-4 py-4 whitespace-nowrap w-80">
                                        <div class="flex items-center gap-3">
                                            <svg id="icon-<?php echo e($unit->uuid); ?>"
                                                class="w-3.5 h-3.5 flex-shrink-0 text-gray-400 transition-transform duration-200"
                                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M9 5l7 7-7 7" />
                                            </svg>
                                            <?php if($unit->logo): ?>
                                                <img src="<?php echo e(Storage::url($unit->logo)); ?>" alt="<?php echo e($unit->nama_unit); ?>"
                                                    class="w-10 h-10 rounded-lg object-cover border border-gray-200 flex-shrink-0">
                                            <?php else: ?>
                                                <div
                                                    class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                                                    <svg class="w-5 h-5 text-primary" fill="none"
                                                        stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2"
                                                            d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <div>
                                                <div class="text-sm font-semibold text-gray-900"><?php echo e($unit->nama_unit); ?>

                                                </div>
                                                <div class="text-xs text-gray-500"><?php echo e($unit->kode_unit); ?></div>
                                            </div>
                                        </div>
                                    </td>
 
                                    <td class="px-4 py-4 whitespace-nowrap w-64">
                                        <?php if($unit->kota_nama): ?>
                                            <div class="text-sm text-gray-700"><?php echo e($unit->kota_nama); ?></div>
                                        <?php endif; ?>
                                        <?php if($unit->provinsi_nama): ?>
                                            <div class="text-xs text-gray-400"><?php echo e($unit->provinsi_nama); ?></div>
                                        <?php else: ?>
                                            <span class="text-xs text-gray-400">—</span>
                                        <?php endif; ?>
                                    </td>
 
                                    <td class="px-4 py-4 whitespace-nowrap w-36">
                                        <?php if($unit->is_active): ?>
                                            <span
                                                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                                <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>Aktif
                                            </span>
                                        <?php else: ?>
                                            <span
                                                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-100 text-red-700 text-xs font-medium">
                                                <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>Non-aktif
                                            </span>
                                        <?php endif; ?>
                                    </td>
 
                                    
                                    <td class="px-6 py-4 whitespace-nowrap text-center w-16"
                                        onclick="event.stopPropagation()">
                                        <div class="dropdown-wrapper">
                                            <button type="button"
                                                onclick="toggleDropdown('menu-<?php echo e($unit->uuid); ?>', this)"
                                                class="inline-flex items-center p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path
                                                        d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                                                </svg>
                                            </button>
                                            <div id="menu-<?php echo e($unit->uuid); ?>" class="dropdown-menu">
                                                <div class="py-1">
 
                                                    
                                                    <a href="<?php echo e(route('admin.unit.edit', $unit->uuid)); ?>"
                                                        class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                                        <svg class="w-4 h-4 mr-3 text-gray-400" fill="none"
                                                            stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                        </svg>
                                                        Edit
                                                    </a>
 
                                                    
                                                    <div class="border-t border-gray-100 mt-1 pt-1">
                                                        <button type="button"
                                                            onclick="confirmToggleStatus('<?php echo e($unit->uuid); ?>','<?php echo e(addslashes($unit->nama_unit)); ?>')"
                                                            class="flex items-center w-full px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 transition-colors">
                                                            <svg class="w-4 h-4 mr-3" fill="none"
                                                                stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    stroke-width="2"
                                                                    d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                                                            </svg>
                                                            <?php echo e($unit->is_active ? 'Nonaktifkan' : 'Aktifkan'); ?>

                                                        </button>
                                                    </div>
 
                                                    
                                                    <div class="border-t border-gray-100 mt-1 pt-1">
                                                        <button type="button"
                                                            onclick="confirmDelete('<?php echo e($unit->uuid); ?>','<?php echo e(addslashes($unit->nama_unit)); ?>')"
                                                            class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                                                            <svg class="w-4 h-4 mr-3" fill="none"
                                                                stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    stroke-width="2"
                                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                            </svg>
                                                            Hapus
                                                        </button>
                                                    </div>
 
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>                                  
                                <tr id="detail-<?php echo e($unit->uuid); ?>" class="hidden">
                                    <td colspan="4" class="p-0">
                                        <div
                                            class="mx-6 my-3 bg-gray-50 rounded-xl border border-gray-200 overflow-hidden">
 
                                            
                                            <div class="grid grid-cols-2 divide-x divide-gray-200">
 
                                                
                                                <div class="px-6 py-2">
                                                    <p
                                                        class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">
                                                        Informasi Unit
                                                    </p>
                                                    <dl class="grid grid-cols-2 gap-x-6 gap-y-3">
                                                        <div>
                                                            <dt class="text-xs text-gray-400">Nama Unit</dt>
                                                            <dd class="text-sm font-semibold text-gray-900 mt-0.5">
                                                                <?php echo e($unit->nama_unit); ?>

                                                            </dd>
                                                        </div>
                                                        <div>
                                                            <dt class="text-xs text-gray-400">Kode Unit</dt>
                                                            <dd class="text-sm text-gray-700 mt-0.5">
                                                                <?php echo e($unit->kode_unit); ?>

                                                            </dd>
                                                        </div>
                                                        <?php if($unit->user): ?>
                                                            <div>
                                                                <dt class="text-xs text-gray-400">User Pemilik</dt>
                                                                <dd class="text-sm text-gray-700 mt-0.5">
                                                                    <?php echo e($unit->user->username ?? $unit->user->email); ?>

                                                                </dd>
                                                            </div>
                                                        <?php endif; ?>
                                                        <?php if($unit->admin_nama): ?>
                                                            <div>
                                                                <dt class="text-xs text-gray-400">Admin Unit</dt>
                                                                <dd class="text-sm text-gray-700 mt-0.5">
                                                                    <?php echo e($unit->admin_nama); ?>

                                                                </dd>
                                                            </div>
                                                        <?php endif; ?>
                                                    </dl>
                                                </div>
 
                                                
                                                <div class="px-6 py-2">
                                                    <p
                                                        class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">
                                                        Kontak & Wilayah
                                                    </p>
                                                    <dl class="grid grid-cols-2 gap-x-6 gap-y-3">
                                                        <?php if($unit->telepon): ?>
                                                            <div>
                                                                <dt class="text-xs text-gray-400">Telepon</dt>
                                                                <dd class="text-sm text-gray-700 mt-0.5">
                                                                    <?php echo e($unit->telepon); ?>

                                                                </dd>
                                                            </div>
                                                        <?php endif; ?>
                                                        <?php if($unit->email): ?>
                                                            <div>
                                                                <dt class="text-xs text-gray-400">Email</dt>
                                                                <dd class="text-sm text-gray-700 mt-0.5 break-all">
                                                                    <?php echo e($unit->email); ?>

                                                                </dd>
                                                            </div>
                                                        <?php endif; ?>
                                                        <?php if($unit->provinsi_nama || $unit->kota_nama || $unit->kecamatan_nama || $unit->kelurahan_nama || $unit->kode_pos): ?>
                                                            <div class="col-span-2">
                                                                <dt class="text-xs text-gray-400 mb-0.5">Alamat Wilayah
                                                                </dt>
                                                                <dd class="text-sm text-gray-700 leading-relaxed">
                                                                    <?php echo e(collect([
                                                                        $unit->alamat,
                                                                        $unit->kelurahan_nama ? 'Kel. ' . $unit->kelurahan_nama : null,
                                                                        $unit->kecamatan_nama ? 'Kec. ' . $unit->kecamatan_nama : null,
                                                                        $unit->kota_nama,
                                                                        $unit->provinsi_nama,
                                                                        $unit->kode_pos,
                                                                    ])->filter()->implode(', ')); ?>

                                                                </dd>
                                                            </div>
                                                        <?php endif; ?>
                                                    </dl>
                                                </div>
                                            </div>
 
                                            <?php if($unit->deskripsi): ?>
                                                <div class="border-t border-gray-200 px-6 py-2">
                                                    <p
                                                        class="text-[10px] font-bold text-gray-400 uppercase tracking-widest m-0">
                                                        Deskripsi
                                                    </p>
                                                    <p class="text-sm text-gray-700 whitespace-pre-line mt-0.5 m-0">
                                                        <?php echo e($unit->deskripsi); ?>

                                                    </p>
                                                </div>
                                            <?php endif; ?>
 
                                            <div
                                                class="border-t border-gray-200 px-6 py-3 bg-gray-50/50 flex items-center justify-between">
                                                <div class="flex gap-6">
                                                    <div>
                                                        <dt class="text-xs text-gray-400">Dibuat</dt>
                                                        <dd class="text-xs text-gray-600 mt-0.5">
                                                            <?php echo e($unit->created_at->format('d M Y, H:i')); ?>

                                                        </dd>
                                                    </div>
                                                    <div>
                                                        <dt class="text-xs text-gray-400">Diperbarui</dt>
                                                        <dd class="text-xs text-gray-600 mt-0.5">
                                                            <?php echo e($unit->updated_at->format('d M Y, H:i')); ?>

                                                        </dd>
                                                    </div>
                                                </div>
                                            </div>
 
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
                <div class="md:hidden divide-y divide-gray-200">
                    <?php $__currentLoopData = $units; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $unit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div>
                            <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
                                onclick="toggleDetail('<?php echo e($unit->uuid); ?>-mobile')">
                                <div class="flex items-start justify-between gap-2">
                                    <div class="flex items-start gap-3 flex-1 min-w-0">
                                        <svg id="icon-<?php echo e($unit->uuid); ?>-mobile"
                                            class="w-3.5 h-3.5 flex-shrink-0 mt-1 text-gray-400 transition-transform duration-200"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 5l7 7-7 7" />
                                        </svg>
                                        <?php if($unit->logo): ?>
                                            <img src="<?php echo e(Storage::url($unit->logo)); ?>" alt="<?php echo e($unit->nama_unit); ?>"
                                                class="flex-shrink-0 h-12 w-12 rounded-lg object-cover border border-gray-200">
                                        <?php else: ?>
                                            <div
                                                class="flex-shrink-0 h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
                                                <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                                </svg>
                                            </div>
                                        <?php endif; ?>
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-center gap-2 flex-wrap">
                                                <h3 class="text-sm font-semibold text-gray-900 truncate">
                                                    <?php echo e($unit->nama_unit); ?>

                                                </h3>
                                                <?php if($unit->is_active): ?>
                                                    <span
                                                        class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-green-100 text-green-700 text-xs font-medium"><span
                                                            class="w-1.5 h-1.5 rounded-full bg-green-500"></span>Aktif</span>
                                                <?php else: ?>
                                                    <span
                                                        class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-red-100 text-red-700 text-xs font-medium"><span
                                                            class="w-1.5 h-1.5 rounded-full bg-red-500"></span>Non-aktif</span>
                                                <?php endif; ?>
                                            </div>
                                            <p class="text-xs text-gray-500 mt-0.5"><?php echo e($unit->kode_unit); ?></p>
                                            <?php if($unit->user): ?>
                                                <p class="text-xs text-gray-400 mt-0.5">
                                                    <?php echo e($unit->user->username ?? $unit->user->email); ?>

                                                </p>
                                            <?php endif; ?>
                                            <?php if($unit->kota_nama || $unit->provinsi_nama): ?>
                                                <p class="text-xs text-gray-400 mt-0.5">
                                                    <?php echo e(collect([$unit->kota_nama, $unit->provinsi_nama])->filter()->implode(', ')); ?>

                                                </p>
                                            <?php endif; ?>
                                        </div>
                                    </div>
 
                                    
                                    <div class="dropdown-wrapper flex-shrink-0" onclick="event.stopPropagation()">
                                        <button type="button"
                                            onclick="toggleDropdown('menu-mob-<?php echo e($unit->uuid); ?>', this)"
                                            class="inline-flex items-center p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                <path
                                                    d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                                            </svg>
                                        </button>
                                        <div id="menu-mob-<?php echo e($unit->uuid); ?>" class="dropdown-menu">
                                            <div class="py-1">
                                                <a href="<?php echo e(route('admin.unit.edit', $unit->uuid)); ?>"
                                                    class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                                    <svg class="w-4 h-4 mr-3 text-gray-400" fill="none"
                                                        stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2"
                                                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                    </svg>
                                                    Edit
                                                </a>
                                                <div class="border-t border-gray-100 mt-1 pt-1">
                                                    <button type="button"
                                                        onclick="confirmToggleStatus('<?php echo e($unit->uuid); ?>','<?php echo e(addslashes($unit->nama_unit)); ?>')"
                                                        class="flex items-center w-full px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 transition-colors">
                                                        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                                                        </svg>
                                                        <?php echo e($unit->is_active ? 'Nonaktifkan' : 'Aktifkan'); ?>

                                                    </button>
                                                </div>
                                                <div class="border-t border-gray-100 mt-1 pt-1">
                                                    <button type="button"
                                                        onclick="confirmDelete('<?php echo e($unit->uuid); ?>','<?php echo e(addslashes($unit->nama_unit)); ?>')"
                                                        class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                                                        <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                        </svg>
                                                        Hapus
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
 
                            <div id="detail-<?php echo e($unit->uuid); ?>-mobile" class="hidden bg-gray-50 px-4 pb-4">
                                <div class="ml-6 pt-3 border-t border-gray-200 space-y-2">
                                    <?php if($unit->user): ?>
                                        <div><span class="text-xs text-gray-500">User Pemilik</span>
                                            <p class="text-sm text-gray-700">
                                                <?php echo e($unit->user->username ?? $unit->user->email); ?>

                                            </p>
                                        </div>
                                    <?php endif; ?>
                                    <?php if($unit->admin_nama): ?>
                                        <div><span class="text-xs text-gray-500">Admin Unit</span>
                                            <p class="text-sm text-gray-700"><?php echo e($unit->admin_nama); ?></p>
                                        </div>
                                    <?php endif; ?>
                                    <?php if($unit->telepon): ?>
                                        <div><span class="text-xs text-gray-500">Telepon</span>
                                            <p class="text-sm text-gray-700"><?php echo e($unit->telepon); ?></p>
                                        </div>
                                    <?php endif; ?>
                                    <?php if($unit->email): ?>
                                        <div><span class="text-xs text-gray-500">Email</span>
                                            <p class="text-sm text-gray-700"><?php echo e($unit->email); ?></p>
                                        </div>
                                    <?php endif; ?>
                                    <?php if($unit->alamat): ?>
                                        <div><span class="text-xs text-gray-500">Alamat</span>
                                            <p class="text-sm text-gray-700"><?php echo e($unit->alamat); ?></p>
                                        </div>
                                    <?php endif; ?>
                                    <?php if($unit->deskripsi): ?>
                                        <div><span class="text-xs text-gray-500">Deskripsi</span>
                                            <p class="text-sm text-gray-700"><?php echo e($unit->deskripsi); ?></p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    @endforeachv>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                
                <?php if($units->hasPages()): ?>
                    <div class="px-4 sm:px-6 py-3">
                        <?php echo e($units->links()); ?>

                    </div>
                <?php endif; ?>
            <?php else: ?>
                <div class="p-8 sm:p-12 text-center">
                    <div class="inline-flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 sm:w-8 sm:h-8 text-gray-400" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                    </div>
                    <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2">
                        <?php if(request()->hasAny(['q', 'provinsi', 'kota', 'status'])): ?>
                            Data Unit Tidak Ditemukan
                        <?php else: ?>
                            Belum Ada Data Unit
                        <?php endif; ?>
                    </h3>
                    <p class="text-sm text-gray-500 mb-6">
                        <?php if(request()->hasAny(['q', 'provinsi', 'kota', 'status'])): ?>
                            Tidak ada hasil yang sesuai dengan pencarian atau filter yang diterapkan.
                        <?php else: ?>
                            Mulai tambahkan data unit untuk mengelola organisasi.
                        <?php endif; ?>
                    </p>
                    <?php if(request()->hasAny(['q', 'provinsi', 'kota', 'status'])): ?>
                        <a href="<?php echo e(route('admin.unit.index')); ?>"
                            class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-all">
                            Reset Semua Filter
                        </a>
                    <?php else: ?>
                        <a href="<?php echo e(route('admin.unit.create')); ?>"
                            class="inline-flex items-center px-4 py-2 bg-primary hover:bg-primary-600 text-white text-sm font-medium rounded-lg transition-all shadow-sm">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            Tambah Unit
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div id="delete-modal"
        class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="p-4 sm:p-6 border border-gray-200 w-full max-w-sm shadow-lg rounded-xl sm:rounded-2xl bg-white">
            <div class="flex justify-center mb-3 sm:mb-4">
                <svg class="h-8 w-8 sm:h-10 sm:w-10 text-red-600" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-1.5 sm:mb-2 text-center">Hapus Unit</h3>
            <p class="text-xs sm:text-sm text-gray-500 mb-1 text-center">
                Apakah Anda yakin ingin menghapus unit "<span id="modal-unit-name"
                    class="font-semibold text-gray-700"></span>"?
            </p>
            <p class="text-xs sm:text-sm text-gray-500 mb-5 sm:mb-6 text-center">Tindakan ini tidak dapat dibatalkan
                dan semua data terkait akan ikut terhapus.</p>
            <div class="flex justify-center gap-2 sm:gap-3">
                <button type="button" onclick="document.getElementById('delete-modal').classList.add('hidden')"
                    class="w-24 sm:w-28 rounded-lg border border-gray-300 shadow-sm px-3 sm:px-4 py-2 sm:py-2.5 bg-white text-xs sm:text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    Batal
                </button>
                <button type="button" id="confirm-delete-btn"
                    class="w-24 sm:w-28 rounded-lg shadow-sm px-3 sm:px-4 py-2 sm:py-2.5 bg-red-600 text-xs sm:text-sm font-medium text-white hover:bg-red-700 transition-colors">
                    Hapus
                </button>
            </div>
        </div>
    </div>

    
    <div id="toggle-status-modal"
        class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="p-4 sm:p-6 border border-gray-200 w-full max-w-sm shadow-lg rounded-xl sm:rounded-2xl bg-white">
            <div class="flex justify-center mb-3 sm:mb-4">
                <svg class="h-8 w-8 sm:h-10 sm:w-10 text-blue-600" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                </svg>
            </div>
            <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-1.5 sm:mb-2 text-center">Ubah Status Unit
            </h3>
            <p class="text-xs sm:text-sm text-gray-500 mb-1 text-center">
                Apakah Anda yakin ingin mengubah status unit "<span id="toggle-modal-unit-name"
                    class="font-semibold text-gray-700"></span>"?
            </p>
            <div class="flex justify-center gap-2 sm:gap-3 mt-5">
                <button type="button" onclick="document.getElementById('toggle-status-modal').classList.add('hidden')"
                    class="w-24 sm:w-28 rounded-lg border border-gray-300 shadow-sm px-3 sm:px-4 py-2 sm:py-2.5 bg-white text-xs sm:text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    Batal
                </button>
                <button type="button" id="confirm-toggle-btn"
                    class="w-24 sm:w-28 rounded-lg shadow-sm px-3 sm:px-4 py-2 sm:py-2.5 bg-blue-600 text-xs sm:text-sm font-medium text-white hover:bg-blue-700 transition-colors">
                    Ya, Ubah
                </button>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        let deleteUuid = null;
        let toggleUuid = null;

        // ── Toggle accordion detail baris ─────────────────────────────────────────
        function toggleDetail(id) {
            const row = document.getElementById('detail-' + id);
            const icon = document.getElementById('icon-' + id);
            if (!row) return;
            const isHidden = row.classList.contains('hidden');
            row.classList.toggle('hidden', !isHidden);
            if (icon) icon.style.transform = isHidden ? 'rotate(90deg)' : 'rotate(0deg)';
        }

        // ── Toggle dropdown (fixed positioning agar tidak terpotong) ─────────────
        function toggleDropdown(menuId, btn) {
            document.querySelectorAll('.dropdown-menu.open').forEach(function(m) {
                if (m.id !== menuId) m.classList.remove('open');
            });

            const menu = document.getElementById(menuId);
            if (!menu) return;

            if (menu.classList.contains('open')) {
                menu.classList.remove('open');
                return;
            }

            // Tampilkan dulu baru hitung posisi
            menu.classList.add('open');

            const rect = btn.getBoundingClientRect();
            const menuW = 208;
            const menuH = menu.offsetHeight;

            let top = rect.bottom + 4;
            let left = rect.right - menuW;

            if (left < 8) left = 8;
            if (top + menuH > window.innerHeight - 8) top = rect.top - menuH - 4;

            menu.style.top = top + 'px';
            menu.style.left = left + 'px';
        }

        // Tutup saat klik di luar
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.dropdown-wrapper') && !e.target.closest('.dropdown-menu')) {
                document.querySelectorAll('.dropdown-menu.open').forEach(m => m.classList.remove('open'));
            }
        });

        // Tutup saat scroll
        window.addEventListener('scroll', function() {
            document.querySelectorAll('.dropdown-menu.open').forEach(m => m.classList.remove('open'));
        }, true);

        // ── Filter Panel ──────────────────────────────────────────────────────────
        function toggleFilter() {
            document.getElementById('filter-panel').classList.toggle('hidden');
        }

        // ── Search Toggle ─────────────────────────────────────────────────────────
        function toggleSearch() {
            const searchButton = document.getElementById('search-button');
            const searchForm = document.getElementById('search-form');
            const searchInput = document.getElementById('search-input');
            const searchContainer = document.getElementById('search-container');

            if (searchForm.classList.contains('hidden')) {
                searchButton.classList.add('hidden');
                searchForm.classList.remove('hidden');
                searchContainer.style.minWidth = '280px';
                setTimeout(() => searchInput.focus(), 50);
            } else {
                const hasQuery =
                    '<?php echo e(request('
                                                                                                q ')); ?>' !==
                    '';
                if (!hasQuery) searchInput.value = '';
                searchForm.classList.add('hidden');
                searchButton.classList.remove('hidden');
                searchContainer.style.minWidth = 'auto';
            }
        }

        // ── Konfirmasi Hapus ──────────────────────────────────────────────────────
        function confirmDelete(uuid, nama) {
            deleteUuid = uuid;
            document.getElementById('modal-unit-name').textContent = nama;
            document.getElementById('delete-modal').classList.remove('hidden');
            document.querySelectorAll('.dropdown-menu.open').forEach(m => m.classList.remove('open'));
        }

        document.getElementById('confirm-delete-btn').addEventListener('click', function() {
            if (!deleteUuid) return;
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/unit/${deleteUuid}`;

            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '<?php echo e(csrf_token()); ?>';

            const method = document.createElement('input');
            method.type = 'hidden';
            method.name = '_method';
            method.value = 'DELETE';

            form.appendChild(csrf);
            form.appendChild(method);
            document.body.appendChild(form);
            form.submit();
        });

        document.getElementById('delete-modal').addEventListener('click', function(e) {
            if (e.target === this) this.classList.add('hidden');
        });

        // ── Konfirmasi Toggle Status ──────────────────────────────────────────────
        function confirmToggleStatus(uuid, nama) {
            toggleUuid = uuid;
            document.getElementById('toggle-modal-unit-name').textContent = nama;
            document.getElementById('toggle-status-modal').classList.remove('hidden');
            document.querySelectorAll('.dropdown-menu.open').forEach(m => m.classList.remove('open'));
        }

        document.getElementById('confirm-toggle-btn').addEventListener('click', function() {
            if (!toggleUuid) return;
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/unit/${toggleUuid}/toggle-status`;

            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '<?php echo e(csrf_token()); ?>';

            form.appendChild(csrf);
            document.body.appendChild(form);
            form.submit();
        });

        document.getElementById('toggle-status-modal').addEventListener('click', function(e) {
            if (e.target === this) this.classList.add('hidden');
        });
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\ybm-umkm\resources\views/admin/unit/index.blade.php ENDPATH**/ ?>