@extends('layouts.cp')
@section('title', 'App Settings')

@section('content')

<div class="bg-white rounded-xl border border-gray-200 p-6">
    <div class="mb-6">
        <h2 class="text-sm font-medium text-gray-900">App Settings</h2>
        <p class="text-xs text-gray-500 mt-1">Manage application configuration. Changes sync to main app automatically.</p>
    </div>

    @if($settings->isEmpty())
        <p class="text-sm text-gray-400 text-center py-8">No settings configured.</p>
    @else
        @foreach($settings as $group => $items)
        <div class="mb-8">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 px-1">
                {{ ucfirst($group) }}
            </h3>
            <div class="space-y-3">
                @foreach($items as $setting)
                <div class="border border-gray-100 rounded-xl p-4">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-1">
                                <p class="text-sm font-medium text-gray-800">{{ $setting->key }}</p>
                                <span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-400 font-mono">{{ $setting->type }}</span>
                            </div>
                            @if($setting->description)
                                <p class="text-xs text-gray-400">{{ $setting->description }}</p>
                            @endif
                        </div>
                        <div class="flex items-center gap-2">
                            <div id="current-{{ $setting->id }}"
                                 class="text-sm font-mono text-indigo-600 bg-indigo-50 px-2 py-1 rounded-lg">
                                {{ $setting->value }}
                            </div>
                            <button onclick="openEditSetting({{ $setting->id }}, '{{ $setting->key }}', {{ json_encode($setting->value) }}, '{{ $setting->type }}')"
                                    class="text-xs px-2.5 py-1 border border-blue-200 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100">
                                Edit
                            </button>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    @endif
</div>

{{-- Edit Modal --}}
<div id="setting-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeSettingModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="text-sm font-semibold text-gray-900">Edit Setting</h3>
                <p class="text-xs text-gray-400 mt-0.5" id="setting-key-label"></p>
            </div>
            <button onclick="closeSettingModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <input type="hidden" id="setting-id">
        <input type="hidden" id="setting-type">

        <div class="mb-4">
            <label class="block text-xs text-gray-500 mb-1">Value</label>
            <div id="setting-input-wrap"></div>
            <p id="setting-hint" class="text-xs text-gray-400 mt-1 hidden"></p>
        </div>

        <div class="flex gap-3">
            <button onclick="saveSetting()"
                    class="flex-1 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700">
                Save & Sync
            </button>
            <button onclick="closeSettingModal()"
                    class="px-4 py-2 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600">
                Cancel
            </button>
        </div>
    </div>
</div>

<script>
function openEditSetting(id, key, value, type) {
    document.getElementById('setting-id').value        = id;
    document.getElementById('setting-type').value      = type;
    document.getElementById('setting-key-label').textContent = key;

    const wrap = document.getElementById('setting-input-wrap');
    const hint = document.getElementById('setting-hint');
    const bidangs = @json($bidangs);
    const komisis = @json($komisis);
    
    if (type === 'boolean') {
        wrap.innerHTML = `
            <select id="setting-value" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                <option value="true" ${value === 'true' ? 'selected' : ''}>True</option>
                <option value="false" ${value === 'false' ? 'selected' : ''}>False</option>
            </select>
        `;
    } else if (type === 'json') {
        if (key.includes('bidang_ids') && bidangs.length > 0) {
            let selectedIds = [];
            try { selectedIds = JSON.parse(value).map(Number); } catch(e) {}
    
            let checkboxes = bidangs.map(b => `
                <label class="flex items-center gap-2 p-2 border border-gray-100 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <input type="checkbox" class="bidang-check w-4 h-4" value="${b.id}"
                           ${selectedIds.includes(Number(b.id)) ? 'checked' : ''}>
                    <span class="text-sm text-gray-700">${b.name}</span>
                </label>
            `).join('');
    
            wrap.innerHTML = `<div class="space-y-2">${checkboxes}</div><input type="hidden" id="setting-value">`;
            hint.textContent = 'Select bidangs to exclude from UM limits.';
            hint.classList.remove('hidden');
        } else if (key.includes('komisi_ids') && komisis.length > 0) {
            let selectedIds = [];
            try { selectedIds = JSON.parse(value).map(Number); } catch(e) {}
        
            let checkboxes = komisis.map(k => `
                <label class="flex items-center gap-2 p-2 border border-gray-100 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <input type="checkbox" class="bidang-check w-4 h-4" value="${k.id}"
                           ${selectedIds.includes(Number(k.id)) ? 'checked' : ''}>
                    <span class="text-sm text-gray-700">${k.name}</span>
                </label>
            `).join('');
        
            wrap.innerHTML = `<div class="space-y-2 max-h-60 overflow-y-auto">${checkboxes}</div><input type="hidden" id="setting-value">`;
            hint.textContent = 'Select komisis to exclude from limits.';
            hint.classList.remove('hidden');
        } else {
            let formatted = value;
            try { formatted = JSON.stringify(JSON.parse(value), null, 2); } catch(e) {}
            wrap.innerHTML = `
                <textarea id="setting-value" rows="4"
                          class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-gray-200">${formatted}</textarea>
            `;
            hint.textContent = 'Enter a valid JSON array or object. e.g. [1, 2, 3]';
            hint.classList.remove('hidden');
        }
    } else if (type === 'integer') {
        wrap.innerHTML = `
            <input type="number" id="setting-value" value="${value}"
                   class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
        `;
        hint.classList.add('hidden');
    } else {
        wrap.innerHTML = `
            <input type="text" id="setting-value" value="${value}"
                   class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
        `;
        hint.classList.add('hidden');
    }

    document.getElementById('setting-modal').classList.remove('hidden');
}

function closeSettingModal() {
    document.getElementById('setting-modal').classList.add('hidden');
    document.getElementById('setting-hint').classList.add('hidden');
}

function saveSetting() {
    const id  = document.getElementById('setting-id').value;
    let value = '';

    const checks = document.querySelectorAll('.bidang-check');
    if (checks.length > 0) {
        const selected = Array.from(checks)
            .filter(c => c.checked)
            .map(c => parseInt(c.value));
        value = JSON.stringify(selected);
    } else {
        value = document.getElementById('setting-value').value;
    }

    fetch(`/config/settings/${id}`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
        body: JSON.stringify({ value })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`current-${id}`).textContent = value;
            closeSettingModal();
        } else {
            alert('Error: ' + (data.message ?? 'Unknown error'));
        }
    })
    .catch(e => alert('Failed: ' + e.message));
}
</script>

@endsection