@extends('layouts.dashboard')

@section('title', 'System Configuration')
@section('header', 'System Configuration')

@section('sidebar')
@include('super-admin.partials.sidebar')
@endsection

@section('content')
<div class="mb-4 flex justify-between items-center">
    <h2 class="text-2xl font-semibold text-gray-800">System Settings</h2>
    <button onclick="document.getElementById('add-setting-form').classList.toggle('hidden')" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
        Add Setting
    </button>
</div>

<!-- Add New Setting Form -->
<div id="add-setting-form" class="hidden bg-white rounded-lg shadow p-6 mb-6">
    <h3 class="text-lg font-semibold mb-4">Add New Setting</h3>
    <form action="{{ route('super-admin.system-config.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="key" class="block text-sm font-medium text-gray-700">Key *</label>
                <input type="text" name="key" id="key" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
            </div>
            <div>
                <label for="type" class="block text-sm font-medium text-gray-700">Type *</label>
                <select name="type" id="type" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    <option value="string">String</option>
                    <option value="integer">Integer</option>
                    <option value="boolean">Boolean</option>
                    <option value="json">JSON</option>
                </select>
            </div>
            <div class="md:col-span-2">
                <label for="value" class="block text-sm font-medium text-gray-700">Value</label>
                <input type="text" name="value" id="value" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
            </div>
            <div class="md:col-span-2">
                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                <textarea name="description" id="description" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></textarea>
            </div>
        </div>
        <div class="mt-4 flex justify-end space-x-3">
            <button type="button" onclick="document.getElementById('add-setting-form').classList.add('hidden')" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">
                Cancel
            </button>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
                Add Setting
            </button>
        </div>
    </form>
</div>

<!-- Settings Form -->
<div class="bg-white rounded-lg shadow p-6">
    <form action="{{ route('super-admin.system-config.update') }}" method="POST">
        @csrf
        <div class="space-y-6">
            @forelse($settings as $setting)
            <div class="border-b border-gray-200 pb-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Key</label>
                        <input type="text" value="{{ $setting->key }}" readonly class="mt-1 block w-full rounded-md border-gray-300 bg-gray-50">
                        <input type="hidden" name="settings[{{ $loop->index }}][key]" value="{{ $setting->key }}">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Type</label>
                        <select name="settings[{{ $loop->index }}][type]" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                            <option value="string" {{ $setting->type === 'string' ? 'selected' : '' }}>String</option>
                            <option value="integer" {{ $setting->type === 'integer' ? 'selected' : '' }}>Integer</option>
                            <option value="boolean" {{ $setting->type === 'boolean' ? 'selected' : '' }}>Boolean</option>
                            <option value="json" {{ $setting->type === 'json' ? 'selected' : '' }}>JSON</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Value</label>
                        <input type="text" name="settings[{{ $loop->index }}][value]" value="{{ is_array($setting->value) ? json_encode($setting->value) : $setting->value }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Description</label>
                        <input type="text" name="settings[{{ $loop->index }}][description]" value="{{ $setting->description }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    </div>
                </div>
                <div class="mt-2">
                    <form action="{{ route('super-admin.system-config.destroy', $setting) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900 text-sm">Delete</button>
                    </form>
                </div>
            </div>
            @empty
            <p class="text-sm text-gray-500">No settings configured.</p>
            @endforelse
        </div>

        @if($settings->count() > 0)
        <div class="mt-6 flex justify-end">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
                Update Settings
            </button>
        </div>
        @endif
    </form>
</div>
@endsection