<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('heading', null, []); ?> Settings <?php $__env->endSlot(); ?>

    <?php
    $listTypes = \App\Http\Controllers\SettingsController::LIST_TYPES;
    ?>

    
    <div
        x-data="{
            active: window.location.hash ? window.location.hash.slice(1) : 'app_settings',
            setActive(id) { this.active = id; window.location.hash = id; }
        }"
        class="flex gap-7 items-start"
    >

    
    <aside class="w-64 shrink-0 sticky top-6">
        <nav class="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            
            <div class="px-3 pt-3 pb-2">
                <p class="px-2 pb-1.5 text-[10px] font-bold uppercase tracking-widest text-gray-400">General</p>
                <button @click="setActive('app_settings')"
                        :class="active==='app_settings'
                            ? 'bg-green-600 text-white shadow-sm'
                            : 'text-gray-600 hover:bg-gray-100'"
                        class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all">
                    <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.764-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                    </svg>
                    App Settings
                </button>
            </div>

            <div class="mx-3 border-t border-gray-100"></div>

            
            <div class="px-3 py-2">
                <p class="px-2 pb-1.5 text-[10px] font-bold uppercase tracking-widest text-gray-400">Farm Data</p>
                <button @click="setActive('species')"
                        :class="active==='species'
                            ? 'bg-green-600 text-white shadow-sm'
                            : 'text-gray-600 hover:bg-gray-100'"
                        class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all">
                    <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
                    </svg>
                    Species Config
                </button>
                <button @click="setActive('feeds')"
                        :class="active==='feeds'
                            ? 'bg-green-600 text-white shadow-sm'
                            : 'text-gray-600 hover:bg-gray-100'"
                        class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all mt-0.5">
                    <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/>
                    </svg>
                    Feed Config
                </button>
            </div>

            <div class="mx-3 border-t border-gray-100"></div>

            
            <div class="px-3 py-2">
                <p class="px-2 pb-1.5 text-[10px] font-bold uppercase tracking-widest text-gray-400">Access Control</p>
                <button @click="setActive('roles')"
                        :class="active==='roles'
                            ? 'bg-green-600 text-white shadow-sm'
                            : 'text-gray-600 hover:bg-gray-100'"
                        class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all">
                    <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/>
                    </svg>
                    Roles & Permissions
                </button>
            </div>

            <div class="mx-3 border-t border-gray-100"></div>

            
            <div class="px-3 py-2">
                <p class="px-2 pb-1.5 text-[10px] font-bold uppercase tracking-widest text-gray-400">Lookup Lists</p>
                <?php $__currentLoopData = $listTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type => $title): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <button @click="setActive('<?php echo e($type); ?>')"
                        :class="active==='<?php echo e($type); ?>'
                            ? 'bg-green-600 text-white shadow-sm'
                            : 'text-gray-600 hover:bg-gray-100'"
                        class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all mt-0.5">
                    <svg class="h-3.5 w-3.5 shrink-0 opacity-70" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12"/>
                    </svg>
                    <?php echo e($title); ?>

                </button>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

        </nav>
    </aside>

    
    <div class="flex-1 min-w-0">

    
    <div x-show="active === 'app_settings'" x-cloak>
        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            
            <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
                <h2 class="text-base font-semibold text-gray-900">App Settings</h2>
                <p class="text-xs text-gray-500 mt-0.5">Global unit preferences applied across the system</p>
            </div>

            <div class="divide-y divide-gray-100">

                
                <form method="POST" action="<?php echo e(route('settings.app.store')); ?>">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="key" value="dimension_unit">
                    <div class="px-6 py-5 flex items-start justify-between gap-6">
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Dimension Measurement</p>
                            <p class="text-xs text-gray-500 mt-0.5">Unit used for pond length, width, and depth</p>
                        </div>
                        <div class="flex items-center gap-4 shrink-0">
                            <?php $__currentLoopData = ['m' => 'Metres (m)', 'ft' => 'Feet (ft)']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $lbl): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="value" value="<?php echo e($val); ?>"
                                       <?php echo e(($appSettings['dimension_unit'] ?? 'm') === $val ? 'checked' : ''); ?>

                                       class="text-green-600 focus:ring-green-500 h-4 w-4">
                                <span class="text-sm text-gray-700"><?php echo e($lbl); ?></span>
                            </label>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <div class="px-6 pb-5 flex justify-end border-t border-dashed border-gray-100 pt-3">
                        <button type="submit"
                                class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                            Save
                        </button>
                    </div>
                </form>

                
                <form method="POST" action="<?php echo e(route('settings.app.store')); ?>">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="key" value="feed_quantity_unit">
                    <div class="px-6 py-5 flex items-start justify-between gap-6">
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Feed Quantity Unit</p>
                            <p class="text-xs text-gray-500 mt-0.5">Unit used in feeding logs and inventory records</p>
                        </div>
                        <div class="flex items-center gap-4 shrink-0">
                            <?php $__currentLoopData = ['kg' => 'Kilograms (kg)', 'g' => 'Grams (g)']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $lbl): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="value" value="<?php echo e($val); ?>"
                                       <?php echo e(($appSettings['feed_quantity_unit'] ?? 'kg') === $val ? 'checked' : ''); ?>

                                       class="text-green-600 focus:ring-green-500 h-4 w-4">
                                <span class="text-sm text-gray-700"><?php echo e($lbl); ?></span>
                            </label>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <div class="px-6 pb-5 flex justify-end border-t border-dashed border-gray-100 pt-3">
                        <button type="submit"
                                class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                            Save
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    
    <div x-show="active === 'species'" x-cloak x-data="{ addOpen: false }">
        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            
            <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white flex items-center justify-between">
                <div>
                    <h2 class="text-base font-semibold text-gray-900">Species Configuration</h2>
                    <p class="text-xs text-gray-500 mt-0.5">Water quality thresholds and target weights per species</p>
                </div>
                <button @click="addOpen = !addOpen" type="button"
                        :class="addOpen ? 'bg-gray-100 text-gray-700' : 'bg-green-600 text-white hover:bg-green-700'"
                        class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors shadow-sm">
                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="!addOpen" d="M12 4.5v15m7.5-7.5h-15"/>
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="addOpen" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span x-text="addOpen ? 'Cancel' : 'Add Species'"></span>
                </button>
            </div>

            
            <div x-show="addOpen" x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 style="display:none"
                 class="border-b border-gray-200 bg-gray-50 px-6 py-5">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">New Species</p>
                <form method="POST" action="<?php echo e(route('settings.species.store')); ?>" class="space-y-4">
                    <?php echo csrf_field(); ?>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="sm:col-span-2 grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Species Name</label>
                                <input type="text" name="name" placeholder="e.g. Catfish"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Target Weight (g)</label>
                                <input type="number" name="target_weight_g" placeholder="1000" min="1"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-gray-600 mb-2">Water Quality Thresholds</p>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            <?php $__currentLoopData = ['safe_ph_min'=>['pH Min','6.5','0.1'],'safe_ph_max'=>['pH Max','8.5','0.1'],'safe_do_min_mgl'=>['DO Min (mg/L)','4.0','0.1'],'safe_temp_min_c'=>['Temp Min (°C)','24','0.5'],'safe_temp_max_c'=>['Temp Max (°C)','30','0.5'],'safe_ammonia_max_ppm'=>['Ammonia Max (ppm)','0.05','0.001'],'safe_nitrite_max_ppm'=>['Nitrite Max (ppm)','0.1','0.001']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $field => [$label, $placeholder, $step]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div>
                                <label class="block text-xs text-gray-500 mb-1"><?php echo e($label); ?></label>
                                <input type="number" name="<?php echo e($field); ?>" placeholder="<?php echo e($placeholder); ?>" step="<?php echo e($step); ?>"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                    <div class="flex gap-2 pt-1">
                        <button type="submit"
                                class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                            Add Species
                        </button>
                        <button type="button" @click="addOpen = false"
                                class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>

            
            <?php if($species->isEmpty()): ?>
            <div class="px-6 py-14 text-center">
                <svg class="mx-auto h-10 w-10 text-gray-300 mb-3" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
                </svg>
                <p class="text-sm font-medium text-gray-500">No species configured yet</p>
                <p class="text-xs text-gray-400 mt-1">Add species to enable water quality alerting</p>
            </div>
            <?php else: ?>
            <div class="divide-y divide-gray-100">
                <?php $__currentLoopData = $species; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div x-data="{ editing: false }" class="transition-colors" :class="editing ? 'bg-amber-50/60' : 'hover:bg-gray-50/70'">

                    
                    <div x-show="!editing" class="px-6 py-4 flex items-start justify-between gap-4">
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2">
                                <p class="font-semibold text-gray-900"><?php echo e($s->name); ?></p>
                                <span class="text-xs text-gray-400 font-normal">· target <?php echo e(number_format($s->target_weight_g)); ?>g</span>
                            </div>
                            <div class="mt-2 flex flex-wrap gap-1.5">
                                <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">pH <?php echo e($s->safe_ph_min); ?>–<?php echo e($s->safe_ph_max); ?></span>
                                <span class="inline-flex items-center rounded-md bg-sky-50 px-2 py-0.5 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-600/20"><?php echo e($s->safe_temp_min_c); ?>–<?php echo e($s->safe_temp_max_c); ?>°C</span>
                                <span class="inline-flex items-center rounded-md bg-teal-50 px-2 py-0.5 text-xs font-medium text-teal-700 ring-1 ring-inset ring-teal-600/20">DO ≥<?php echo e($s->safe_do_min_mgl); ?></span>
                                <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20">NH₃ ≤<?php echo e($s->safe_ammonia_max_ppm); ?></span>
                                <span class="inline-flex items-center rounded-md bg-orange-50 px-2 py-0.5 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-600/20">NO₂ ≤<?php echo e($s->safe_nitrite_max_ppm); ?></span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 shrink-0 pt-0.5">
                            <button @click="editing = true" type="button"
                                    class="rounded-lg border border-green-300 px-3 py-1.5 text-xs font-semibold text-green-700 hover:bg-green-50 transition-colors">
                                Edit
                            </button>
                            <form method="POST" action="<?php echo e(route('settings.species.destroy', $s)); ?>"
                                  onsubmit="return confirm('Remove <?php echo e($s->name); ?>?')">
                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                <button type="submit"
                                        class="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-50 transition-colors">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>

                    
                    <div x-show="editing" style="display:none" class="px-6 py-5">
                        <p class="text-xs font-semibold text-amber-700 uppercase tracking-wide mb-4">Editing — <?php echo e($s->name); ?></p>
                        <form method="POST" action="<?php echo e(route('settings.species.update', $s)); ?>" class="space-y-4">
                            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Species Name</label>
                                    <input type="text" name="name" value="<?php echo e($s->name); ?>"
                                           class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Target Weight (g)</label>
                                    <input type="number" name="target_weight_g" value="<?php echo e($s->target_weight_g); ?>" min="1"
                                           class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                                </div>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-gray-600 mb-2">Water Quality Thresholds</p>
                                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                    <?php $__currentLoopData = ['safe_ph_min'=>['pH Min','0.1'],'safe_ph_max'=>['pH Max','0.1'],'safe_do_min_mgl'=>['DO Min (mg/L)','0.1'],'safe_temp_min_c'=>['Temp Min (°C)','0.5'],'safe_temp_max_c'=>['Temp Max (°C)','0.5'],'safe_ammonia_max_ppm'=>['Ammonia Max (ppm)','0.001'],'safe_nitrite_max_ppm'=>['Nitrite Max (ppm)','0.001']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $field => [$label, $step]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div>
                                        <label class="block text-xs text-gray-500 mb-1"><?php echo e($label); ?></label>
                                        <input type="number" name="<?php echo e($field); ?>" value="<?php echo e($s->$field); ?>" step="<?php echo e($step); ?>"
                                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                                    </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                            <div class="flex gap-2 pt-1">
                                <button type="submit"
                                        class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                                    Save Changes
                                </button>
                                <button type="button" @click="editing = false"
                                        class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div x-show="active === 'feeds'" x-cloak x-data="{ addOpen: false }">
        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            
            <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white flex items-center justify-between">
                <div>
                    <h2 class="text-base font-semibold text-gray-900">Feed Configurations</h2>
                    <p class="text-xs text-gray-500 mt-0.5">Brand and type combinations available in feeding autocomplete</p>
                </div>
                <button @click="addOpen = !addOpen" type="button"
                        :class="addOpen ? 'bg-gray-100 text-gray-700' : 'bg-green-600 text-white hover:bg-green-700'"
                        class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors shadow-sm">
                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="!addOpen" d="M12 4.5v15m7.5-7.5h-15"/>
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="addOpen" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span x-text="addOpen ? 'Cancel' : 'Add Feed'"></span>
                </button>
            </div>

            
            <div x-show="addOpen" x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 style="display:none"
                 class="border-b border-gray-200 bg-gray-50 px-6 py-5">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">New Feed Config</p>
                <form method="POST" action="<?php echo e(route('settings.feed.store')); ?>"
                      class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    <?php echo csrf_field(); ?>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Brand</label>
                        <input type="text" name="brand" placeholder="e.g. Coppens"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Type / Size</label>
                        <input type="text" name="type" placeholder="e.g. 3mm Floating"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Pellet Size (mm)</label>
                        <input type="number" name="size_mm" placeholder="3.0" step="0.5"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Bag Weight (kg)</label>
                        <input type="number" name="bag_weight_kg" placeholder="15" step="0.5" min="0.1"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                    </div>
                    <div class="col-span-2 sm:col-span-4 flex gap-2 pt-1">
                        <button type="submit"
                                class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                            Add Feed
                        </button>
                        <button type="button" @click="addOpen = false"
                                class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>

            <?php if($feeds->isEmpty()): ?>
            <div class="px-6 py-14 text-center">
                <svg class="mx-auto h-10 w-10 text-gray-300 mb-3" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/>
                </svg>
                <p class="text-sm font-medium text-gray-500">No feed configs yet</p>
                <p class="text-xs text-gray-400 mt-1">Add feed brands and types to use in feeding logs</p>
            </div>
            <?php else: ?>
            <div class="divide-y divide-gray-100">
                <?php $__currentLoopData = $feeds; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $f): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div x-data="{ editing: false }" class="transition-colors" :class="editing ? 'bg-amber-50/60' : 'hover:bg-gray-50/70'">

                    
                    <div x-show="!editing" class="px-6 py-4 flex items-center justify-between gap-4">
                        <div class="min-w-0 flex-1">
                            <p class="font-semibold text-gray-900"><?php echo e($f->brand); ?> <span class="text-gray-400 font-normal text-sm">/ <?php echo e($f->type); ?></span></p>
                            <p class="text-xs text-gray-400 mt-0.5">
                                <?php if($f->size_mm): ?><span><?php echo e($f->size_mm); ?>mm pellets</span> · <?php endif; ?><span><?php echo e($f->bag_weight_kg); ?>kg per bag</span>
                            </p>
                        </div>
                        <div class="flex items-center gap-2 shrink-0">
                            <button @click="editing = true" type="button"
                                    class="rounded-lg border border-green-300 px-3 py-1.5 text-xs font-semibold text-green-700 hover:bg-green-50 transition-colors">
                                Edit
                            </button>
                            <form method="POST" action="<?php echo e(route('settings.feed.destroy', $f)); ?>"
                                  onsubmit="return confirm('Remove this feed config?')">
                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                <button type="submit"
                                        class="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-50 transition-colors">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>

                    
                    <div x-show="editing" style="display:none" class="px-6 py-5">
                        <p class="text-xs font-semibold text-amber-700 uppercase tracking-wide mb-4">Editing — <?php echo e($f->brand); ?> <?php echo e($f->type); ?></p>
                        <form method="POST" action="<?php echo e(route('settings.feed.update', $f)); ?>"
                              class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Brand</label>
                                <input type="text" name="brand" value="<?php echo e($f->brand); ?>"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Type / Size</label>
                                <input type="text" name="type" value="<?php echo e($f->type); ?>"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Pellet Size (mm)</label>
                                <input type="number" name="size_mm" value="<?php echo e($f->size_mm); ?>" step="0.5"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Bag Weight (kg)</label>
                                <input type="number" name="bag_weight_kg" value="<?php echo e($f->bag_weight_kg); ?>" step="0.5" min="0.1"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                            <div class="col-span-2 sm:col-span-4 flex gap-2 pt-1">
                                <button type="submit"
                                        class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                                    Save Changes
                                </button>
                                <button type="button" @click="editing = false"
                                        class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

    
    <div x-show="active === 'roles'" x-cloak x-data="{ addOpen: false }">
        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            
            <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white flex items-center justify-between">
                <div>
                    <h2 class="text-base font-semibold text-gray-900">Roles & Permissions</h2>
                    <p class="text-xs text-gray-500 mt-0.5">Manage access roles and their granular permissions</p>
                </div>
                <button @click="addOpen = !addOpen" type="button"
                        :class="addOpen ? 'bg-gray-100 text-gray-700' : 'bg-green-600 text-white hover:bg-green-700'"
                        class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors shadow-sm">
                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="!addOpen" d="M12 4.5v15m7.5-7.5h-15"/>
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="addOpen" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span x-text="addOpen ? 'Cancel' : 'Add Role'"></span>
                </button>
            </div>

            
            <div x-show="addOpen"
                 x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 style="display:none"
                 class="border-b border-gray-200 bg-gray-50 px-6 py-5">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">New Custom Role</p>
                <form method="POST" action="<?php echo e(route('settings.roles.store')); ?>" class="space-y-5">
                    <?php echo csrf_field(); ?>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Role Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="<?php echo e(old('name')); ?>" placeholder="e.g. Supervisor"
                                   class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Access Level (inherits route access from) <span class="text-red-500">*</span></label>
                            <select name="parent_role" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                                <option value="">— select —</option>
                                <?php $__currentLoopData = ['admin'=>'Admin','manager'=>'Farm Manager','farm_hand'=>'Farm Hand','viewer'=>'Viewer']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $slug => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($slug); ?>" <?php if(old('parent_role') === $slug): echo 'selected'; endif; ?>><?php echo e($label); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Description</label>
                            <input type="text" name="description" value="<?php echo e(old('description')); ?>" placeholder="Brief description"
                                   class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        </div>
                    </div>

                    <div>
                        <p class="text-xs font-semibold text-gray-600 mb-3">Permissions</p>
                        <div class="rounded-lg border border-gray-200 bg-white overflow-hidden divide-y divide-gray-100">
                            <?php $__currentLoopData = $permissions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group => $perms): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="flex items-start gap-4 px-4 py-3">
                                <span class="w-36 shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wider pt-0.5"><?php echo e($group); ?></span>
                                <div class="flex flex-wrap gap-x-5 gap-y-2">
                                    <?php $__currentLoopData = $perms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <label class="flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="permissions[]" value="<?php echo e($key); ?>"
                                               <?php if(is_array(old('permissions')) && in_array($key, old('permissions'))): echo 'checked'; endif; ?>
                                               class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500">
                                        <span class="text-sm text-gray-700"><?php echo e($label); ?></span>
                                    </label>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>

                    <div class="flex gap-2 pt-1">
                        <button type="submit" class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                            Create Role
                        </button>
                        <button type="button" @click="addOpen = false"
                                class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>

            
            <?php if($roles->isEmpty()): ?>
            <div class="px-6 py-14 text-center">
                <p class="text-sm font-medium text-gray-500">No roles found. Run <code class="text-xs bg-gray-100 px-1 rounded">php artisan db:seed --class=RoleSeeder</code> to seed defaults.</p>
            </div>
            <?php else: ?>
            <div class="divide-y divide-gray-100">
                <?php $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $role): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div x-data="{ editing: false }" class="transition-colors" :class="editing ? 'bg-amber-50/60' : 'hover:bg-gray-50/70'">

                    
                    <div x-show="!editing" class="px-6 py-4 flex items-start justify-between gap-4">
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2 flex-wrap">
                                <p class="font-semibold text-gray-900"><?php echo e($role->name); ?></p>
                                <?php if($role->is_system): ?>
                                    <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">System</span>
                                <?php else: ?>
                                    <span class="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20">Custom</span>
                                    <?php if($role->parent_role): ?>
                                    <span class="text-xs text-gray-400">inherits <?php echo e(ucwords(str_replace('_',' ',$role->parent_role))); ?> access</span>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </div>
                            <?php if($role->description): ?>
                            <p class="text-xs text-gray-400 mt-0.5"><?php echo e($role->description); ?></p>
                            <?php endif; ?>
                            <p class="text-xs text-gray-400 mt-1"><?php echo e(count($role->permissions ?? [])); ?> permission<?php echo e(count($role->permissions ?? []) !== 1 ? 's' : ''); ?> granted</p>
                        </div>
                        <div class="flex items-center gap-2 shrink-0 pt-0.5">
                            <button @click="editing = true" type="button"
                                    class="rounded-lg border border-green-300 px-3 py-1.5 text-xs font-semibold text-green-700 hover:bg-green-50 transition-colors">
                                Edit
                            </button>
                            <?php if(!$role->is_system): ?>
                            <form method="POST" action="<?php echo e(route('settings.roles.destroy', $role)); ?>"
                                  onsubmit="return confirm('Delete role <?php echo e($role->name); ?>? Users assigned this role will need to be reassigned.')">
                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                <button type="submit"
                                        class="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-50 transition-colors">
                                    Delete
                                </button>
                            </form>
                            <?php endif; ?>
                        </div>
                    </div>

                    
                    <div x-show="editing" style="display:none" class="px-6 py-5 space-y-5">
                        <p class="text-xs font-semibold text-amber-700 uppercase tracking-wide">
                            Editing — <?php echo e($role->name); ?>

                            <?php if($role->is_system): ?><span class="ml-1 text-blue-600">(system role)</span><?php endif; ?>
                        </p>
                        <form method="POST" action="<?php echo e(route('settings.roles.update', $role)); ?>" class="space-y-5">
                            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Role Name</label>
                                    <input type="text" name="name" value="<?php echo e($role->name); ?>"
                                           <?php if($role->is_system): ?> readonly class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-500 cursor-not-allowed"
                                           <?php else: ?> class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
                                           <?php endif; ?> required>
                                </div>
                                <?php if(!$role->is_system): ?>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Access Level</label>
                                    <select name="parent_role" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                        <?php $__currentLoopData = ['admin'=>'Admin','manager'=>'Farm Manager','farm_hand'=>'Farm Hand','viewer'=>'Viewer']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $slug => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($slug); ?>" <?php if($role->parent_role === $slug): echo 'selected'; endif; ?>><?php echo e($label); ?></option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <?php endif; ?>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Description</label>
                                    <input type="text" name="description" value="<?php echo e($role->description); ?>"
                                           class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                </div>
                            </div>

                            
                            <div>
                                <p class="text-xs font-semibold text-gray-600 mb-3">Permissions</p>
                                <div class="rounded-lg border border-gray-200 bg-white overflow-hidden divide-y divide-gray-100">
                                    <?php $__currentLoopData = $permissions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group => $perms): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="flex items-start gap-4 px-4 py-3">
                                        <span class="w-36 shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wider pt-0.5"><?php echo e($group); ?></span>
                                        <div class="flex flex-wrap gap-x-5 gap-y-2">
                                            <?php $__currentLoopData = $perms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <label class="flex items-center gap-1.5 cursor-pointer">
                                                <input type="checkbox" name="permissions[]" value="<?php echo e($key); ?>"
                                                       <?php if(in_array($key, $role->permissions ?? [])): echo 'checked'; endif; ?>
                                                       class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500">
                                                <span class="text-sm text-gray-700"><?php echo e($label); ?></span>
                                            </label>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>

                            <div class="flex gap-2 pt-1">
                                <button type="submit"
                                        class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                                    Save Changes
                                </button>
                                <button type="button" @click="editing = false"
                                        class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>

        </div>
    </div>

    
    <?php $__currentLoopData = $listTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type => $title): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php $items = $lookups->get($type, collect()); ?>
    <div x-show="active === '<?php echo e($type); ?>'" x-cloak x-data="{ addOpen: false }">
        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">

            
            <div class="px-6 py-5 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white flex items-center justify-between">
                <div>
                    <h2 class="text-base font-semibold text-gray-900"><?php echo e($title); ?></h2>
                    <p class="text-xs text-gray-500 mt-0.5">
                        <?php if($items->isEmpty()): ?>
                            No items yet
                        <?php else: ?>
                            <?php echo e($items->count()); ?> <?php echo e(Str::plural('item', $items->count())); ?> configured
                        <?php endif; ?>
                    </p>
                </div>
                <button @click="addOpen = !addOpen" type="button"
                        :class="addOpen ? 'bg-gray-100 text-gray-700' : 'bg-green-600 text-white hover:bg-green-700'"
                        class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors shadow-sm">
                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="!addOpen" d="M12 4.5v15m7.5-7.5h-15"/>
                        <path stroke-linecap="round" stroke-linejoin="round" x-show="addOpen" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    <span x-text="addOpen ? 'Cancel' : 'Add Item'"></span>
                </button>
            </div>

            
            <div x-show="addOpen" x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 -translate-y-1"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 style="display:none"
                 class="border-b border-gray-200 bg-gray-50 px-6 py-5">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-4">New Item</p>
                <form method="POST" action="<?php echo e(route('settings.lookup.store')); ?>"
                      class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="list_type" value="<?php echo e($type); ?>">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            Value <span class="font-normal text-gray-400">(slug)</span>
                        </label>
                        <input type="text" name="value" placeholder="e.g. concrete"
                               pattern="[a-z0-9_]+" title="Lowercase letters, numbers and underscores only"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-mono focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Display Label</label>
                        <input type="text" name="label" placeholder="e.g. Concrete"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Sort Order</label>
                        <input type="number" name="sort_order" value="0" min="0"
                               class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>
                    <div class="sm:col-span-4 flex gap-2 pt-1">
                        <button type="submit"
                                class="rounded-lg bg-green-600 px-5 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                            Add Item
                        </button>
                        <button type="button" @click="addOpen = false"
                                class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>

            
            <?php if($items->isEmpty()): ?>
            <div class="px-6 py-12 text-center">
                <svg class="mx-auto h-8 w-8 text-gray-300 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12"/>
                </svg>
                <p class="text-sm font-medium text-gray-500">No items yet</p>
                <p class="text-xs text-gray-400 mt-1">Click "Add Item" above to populate this list</p>
            </div>
            <?php else: ?>
            <div class="divide-y divide-gray-100">
                <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div x-data="{ editing: false }" class="transition-colors" :class="editing ? 'bg-amber-50/60' : 'hover:bg-gray-50/60'">

                    
                    <div x-show="!editing" class="px-6 py-3 flex items-center justify-between gap-3">
                        <div class="flex items-center gap-3 min-w-0">
                            <code class="shrink-0 inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs font-mono text-gray-600 ring-1 ring-inset ring-gray-200"><?php echo e($item->value); ?></code>
                            <span class="text-sm font-medium text-gray-900 truncate"><?php echo e($item->label); ?></span>
                            <?php if($item->sort_order > 0): ?>
                            <span class="shrink-0 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-400">#<?php echo e($item->sort_order); ?></span>
                            <?php endif; ?>
                        </div>
                        <div class="flex items-center gap-2 shrink-0">
                            <button @click="editing = true" type="button"
                                    class="rounded-lg border border-green-300 px-2.5 py-1.5 text-xs font-semibold text-green-700 hover:bg-green-50 transition-colors">
                                Edit
                            </button>
                            <form method="POST" action="<?php echo e(route('settings.lookup.destroy', $item)); ?>"
                                  onsubmit="return confirm('Remove this item?')">
                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                <button type="submit"
                                        class="rounded-lg border border-red-200 px-2.5 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-50 transition-colors">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>

                    
                    <div x-show="editing" style="display:none" class="px-6 py-4">
                        <form method="POST" action="<?php echo e(route('settings.lookup.update', $item)); ?>"
                              class="flex items-end gap-3 flex-wrap">
                            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                            <div class="shrink-0">
                                <p class="text-xs font-semibold text-gray-500 mb-1.5">Value (slug)</p>
                                <code class="inline-flex items-center rounded-md bg-gray-100 px-2.5 py-2 text-xs font-mono text-gray-600 ring-1 ring-inset ring-gray-200 h-[38px]"><?php echo e($item->value); ?></code>
                            </div>
                            <div class="flex-1 min-w-40">
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Display Label</label>
                                <input type="text" name="label" value="<?php echo e($item->label); ?>"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500" required>
                            </div>
                            <div class="w-24">
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Sort Order</label>
                                <input type="number" name="sort_order" value="<?php echo e($item->sort_order); ?>" min="0"
                                       class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            </div>
                            <div class="flex gap-2 shrink-0">
                                <button type="submit"
                                        class="rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors shadow-sm">
                                    Save
                                </button>
                                <button type="button" @click="editing = false"
                                        class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>

        </div>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    </div>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\laragon\www\farm\resources\views\settings\index.blade.php ENDPATH**/ ?>