@extends('layouts.app')

@section('page_title', 'System Parameters')

@section('content')
    @include('components.table-component', [
        'pageTitle' => 'System Parameters',
        'data' => $parameters ?? [],
        'columns' => [
            ['name' => 'Name', 'key' => 'name', 'sortable' => true],
            ['name' => 'Value', 'key' => 'value', 'sortable' => true],
            ['name' => 'Type', 'key' => 'type', 'sortable' => true],
            ['name' => 'Description', 'key' => 'description', 'sortable' => true],
            ['name' => 'Last Updated', 'key' => 'updated_at', 'sortable' => true]
        ],
        'allFields' => [
            ['name' => 'Name', 'key' => 'name', 'type' => 'text', 'required' => true],
            ['name' => 'Value', 'key' => 'value', 'type' => 'text', 'required' => true],
            ['name' => 'Type', 'key' => 'type', 'type' => 'select', 'options' => ['String', 'Number', 'Boolean', 'JSON'], 'required' => true],
            ['name' => 'Description', 'key' => 'description', 'type' => 'textarea', 'required' => true]
        ],
        'actions' => ['edit', 'view', 'delete'],
        'showAddButton' => true,
        'addButtonUrl' => route('system-parameters.create'),
        'showCheckboxes' => true,
        'showBatchDelete' => true,
        'showEditModal' => true,
        'showViewModal' => true,
        'baseRoute' => 'system-parameters'
    ])
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Handle parameter type change
    $(document).on('change', '[name="type"]', function() {
        const type = $(this).val();
        const valueInput = $(this).closest('form').find('[name="value"]');
        
        switch(type) {
            case 'Number':
                valueInput.attr('type', 'number');
                break;
            case 'Boolean':
                valueInput.replaceWith(`
                    <select name="value" class="form-control">
                        <option value="true">True</option>
                        <option value="false">False</option>
                    </select>
                `);
                break;
            case 'JSON':
                valueInput.replaceWith(`<textarea name="value" class="form-control" rows="3"></textarea>`);
                break;
            default:
                valueInput.attr('type', 'text');
        }
    });

    // Validate JSON input
    $(document).on('submit', 'form', function(e) {
        const type = $(this).find('[name="type"]').val();
        const value = $(this).find('[name="value"]').val();

        if (type === 'JSON') {
            try {
                JSON.parse(value);
            } catch (error) {
                e.preventDefault();
                alert('Please enter valid JSON');
            }
        }
    });

    // Format JSON display
    $('.table td:nth-child(2)').each(function() {
        const type = $(this).closest('tr').find('td:nth-child(3)').text().trim();
        const value = $(this).text().trim();

        if (type === 'JSON') {
            try {
                const formatted = JSON.stringify(JSON.parse(value), null, 2);
                $(this).html(`<pre class="mb-0">${formatted}</pre>`);
            } catch (error) {
                // Keep original value if not valid JSON
            }
        }
    });
});
</script>
@endpush

@push('styles')
<style>
pre {
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}
</style>
@endpush