
<?php $__env->startSection('title', 'Pengaturan Sistem'); ?>

<?php $__env->startSection('content'); ?>

<div class="max-w-3xl mx-auto">

    
    <div class="mb-6">
        <h1 class="text-xl font-bold text-gray-900">Pengaturan Sistem</h1>
        <p class="text-sm text-gray-500 mt-0.5">Konfigurasi identitas perusahaan, nota, dan form</p>
    </div>

    <form method="POST" action="<?php echo e(route('admin.settings.update')); ?>" enctype="multipart/form-data"
          x-data="{ activeTab: '<?php echo e(array_key_first($groups)); ?>' }">
        <?php echo csrf_field(); ?> <?php echo method_field('PATCH'); ?>

        
        <div class="flex gap-1 bg-gray-100 rounded-2xl p-1 mb-5 flex-wrap">
            <?php $__currentLoopData = $groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $groupKey => $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <button type="button"
                    @click="activeTab = '<?php echo e($groupKey); ?>'"
                    :class="activeTab === '<?php echo e($groupKey); ?>'
                        ? 'bg-white text-brand-700 shadow-sm font-semibold'
                        : 'text-gray-500 hover:text-gray-700'"
                    class="flex-1 min-w-[120px] inline-flex items-center justify-center gap-2
                           text-sm rounded-xl px-3 py-2 transition">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<?php echo e($group['icon']); ?>"/>
                </svg>
                <span class="hidden sm:inline"><?php echo e($group['label']); ?></span>
            </button>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <?php
        // Kelompokkan rows dari DB berdasarkan group
        $byGroup = $rows->groupBy(fn($r) => $r->group);
        ?>

        
        <?php $__currentLoopData = $groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $groupKey => $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div x-show="activeTab === '<?php echo e($groupKey); ?>'" 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">

            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-50 bg-gray-50/50">
                    <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<?php echo e($group['icon']); ?>"/>
                        </svg>
                        <?php echo e($group['label']); ?>

                    </h2>
                </div>

                <div class="p-6 space-y-5">
                    <?php $__empty_1 = true; $__currentLoopData = $byGroup->get($groupKey, collect()); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $setting): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div>
                        <label for="setting_<?php echo e($setting->key); ?>"
                               class="block text-sm font-semibold text-gray-700 mb-1.5">
                            <?php echo e($setting->label ?? $setting->key); ?>

                        </label>

                        <?php if($setting->type === 'toggle'): ?>
                            
                            <label class="inline-flex items-center gap-3 cursor-pointer" x-data="{ on: <?php echo e(old($setting->key, (string) $setting->value) === '1' ? 'true' : 'false'); ?> }">
                                <input type="hidden" name="<?php echo e($setting->key); ?>" value="0">
                                <input type="checkbox" name="<?php echo e($setting->key); ?>" value="1"
                                       id="setting_<?php echo e($setting->key); ?>"
                                       <?php echo e(old($setting->key, (string) $setting->value) === '1' ? 'checked' : ''); ?>

                                       x-model="on"
                                       class="sr-only peer">
                                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none
                                            peer-focus:ring-2 peer-focus:ring-brand-300
                                            rounded-full peer peer-checked:after:translate-x-full
                                            peer-checked:after:border-white
                                            after:content-[''] after:absolute after:top-[2px] after:left-[2px]
                                            after:bg-white after:rounded-full after:h-5 after:w-5
                                            after:transition-all peer-checked:bg-brand-600 cursor-pointer">
                                </div>
                                <span class="text-sm text-gray-600" x-text="on ? 'Aktif' : 'Nonaktif'"></span>
                            </label>

                        <?php elseif($setting->type === 'textarea'): ?>
                            <textarea name="<?php echo e($setting->key); ?>" id="setting_<?php echo e($setting->key); ?>"
                                      rows="3"
                                      placeholder="Kosongkan jika tidak digunakan"
                                      class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm bg-white resize-y
                                             focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent"><?php echo e(old($setting->key, $setting->value)); ?></textarea>

                        <?php elseif($setting->type === 'color'): ?>
                            
                            <div x-data="{ color: '<?php echo e(old($setting->key, $setting->value ?: '#1d4ed8')); ?>' }" class="flex items-center gap-3">
                                <input type="color"
                                       name="<?php echo e($setting->key); ?>"
                                       id="setting_<?php echo e($setting->key); ?>"
                                       x-model="color"
                                       class="h-10 w-16 rounded-lg border border-gray-200 cursor-pointer p-1 bg-white"
                                       value="<?php echo e(old($setting->key, $setting->value ?: '#1d4ed8')); ?>">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-full border border-gray-200 shadow-sm" :style="`background:${color}`"></div>
                                    <span class="text-sm font-mono text-gray-600" x-text="color"></span>
                                </div>
                            </div>

                        <?php elseif($setting->type === 'image_upload'): ?>
                            
                            <div class="space-y-3">
                                <?php if($setting->value): ?>
                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
                                    <img src="<?php echo e(asset('storage/' . $setting->value)); ?>" alt="Logo" class="h-12 object-contain rounded">
                                    <div class="text-xs text-gray-500 break-all"><?php echo e($setting->value); ?></div>
                                </div>
                                <?php endif; ?>
                                <input type="file"
                                       name="logo_upload"
                                       id="setting_<?php echo e($setting->key); ?>"
                                       accept="image/png,image/jpeg,image/svg+xml,image/webp"
                                       class="block w-full text-sm text-gray-600 file:mr-3 file:py-2 file:px-4
                                              file:rounded-xl file:border-0 file:text-sm file:font-semibold
                                              file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                                <p class="text-xs text-gray-400">Format: PNG, JPG, SVG, WebP — maksimal 2MB. Kosongkan jika tidak ingin mengubah logo.</p>
                                
                                <input type="hidden" name="<?php echo e($setting->key); ?>" value="<?php echo e(old($setting->key, $setting->value)); ?>">
                            </div>

                        <?php else: ?>
                            <input type="<?php echo e($setting->type); ?>"
                                   name="<?php echo e($setting->key); ?>"
                                   id="setting_<?php echo e($setting->key); ?>"
                                   value="<?php echo e(old($setting->key, $setting->value)); ?>"
                                   placeholder="Kosongkan jika tidak digunakan"
                                   class="w-full rounded-xl border border-gray-200 px-4 py-2.5 text-sm bg-white
                                          focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
                        <?php endif; ?>

                        <?php $__errorArgs = [$setting->key];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <p class="mt-1 text-xs text-red-500"><?php echo e($message); ?></p>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <p class="text-sm text-gray-400 italic">Belum ada pengaturan di grup ini.</p>
                    <?php endif; ?>
                </div>
            </div>

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

        
        <div x-show="activeTab === 'nota'" class="mt-4">
            <div class="bg-blue-50 border border-blue-100 rounded-2xl px-5 py-4 text-sm text-blue-800">
                <p class="font-semibold mb-1">ℹ️ Pratinjau Nota</p>
                <p>Perubahan akan langsung terlihat pada nota PDF dan halaman nota digital.
                   Buka <a href="<?php echo e(route('nota.show', optional(\App\Models\ServiceTicket::latest()->first())->ticket_code ?? '#')); ?>"
                           class="underline font-medium" target="_blank">nota terakhir</a> untuk melihat hasilnya.</p>
            </div>
        </div>

        
        <div x-show="activeTab === 'invoice'" class="mt-4">
            <div class="bg-indigo-50 border border-indigo-100 rounded-2xl px-5 py-4 text-sm text-indigo-800">
                <p class="font-semibold mb-1">ℹ️ Tampilan Invoice</p>
                <p>Perubahan warna, logo, footer, dan QR akan langsung diterapkan ke PDF invoice.
                   <?php if(\App\Models\Invoice::latest()->first()): ?>
                   Buka <a href="<?php echo e(route('admin.invoices.pdf', \App\Models\Invoice::latest()->first())); ?>"
                           class="underline font-medium" target="_blank">preview PDF invoice terakhir</a> untuk melihat hasilnya.
                   <?php else: ?>
                   Buat invoice terlebih dahulu untuk melihat preview.
                   <?php endif; ?>
                </p>
            </div>
        </div>

        
        <div class="mt-5 flex items-center justify-between bg-white rounded-2xl border border-gray-100 shadow-sm px-6 py-4">
            <p class="text-sm text-gray-500">Perubahan berlaku langsung setelah disimpan.</p>
            <button type="submit"
                    class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white
                           font-semibold text-sm rounded-xl px-6 py-2.5 transition shadow-sm">
                <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="M5 13l4 4L19 7"/>
                </svg>
                Simpan Semua Pengaturan
            </button>
        </div>

    </form>
</div>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Service-sistem\resources\views/admin/settings/index.blade.php ENDPATH**/ ?>