@include('layouts.components.section-marker', ['section_name' => $title])

<div class="card py-4 px-4">
    @foreach($settings as $setting)

    <div class="row mb-3">
        <div class="col">
            <div class="form-group">
                <label class="mb-2" for="{{ $setting->key }}">{{ $setting->description }}</label>
                    @switch($setting->type_form)
                        @case('string')
                        @case('email')
                        @case('phone')
                        @case('integer')
                            <input type="{{ $setting->type_form === 'string' ? 'text' : $setting->type_form }}"
                                class="form-control"
                                name="{{ $setting->key }}"
                                id="{{ $setting->key }}"
                                value="{{ old($setting->key, $setting->value) }}">
                            @break

                        @case('boolean')
                            <select name="{{ $setting->key }}" id="{{ $setting->key }}" class="form-control">
                                <option value="1" {{ $setting->value == '1' ? 'selected' : '' }}>Sim</option>
                                <option value="0" {{ $setting->value == '0' ? 'selected' : '' }}>Não</option>
                            </select>
                            @break

                        @case('upload')
                            <input type="file" name="{{ $setting->key }}" id="{{ $setting->key }}" class="form-control">
                            @if ($setting->value)
                                <img src="{{ asset('storage/' . $setting->value) }}" alt="{{ $setting->description }}" class="mt-2" style="max-width: 200px;">
                            @endif
                            @break

                        @case('json')
                            <textarea name="{{ $setting->key }}" id="{{ $setting->key }}" class="form-control" rows="4">{{ json_encode($setting->value, JSON_PRETTY_PRINT) }}</textarea>
                            @break
                    @endswitch
                </div>
            </div>
        </div>
    @endforeach
</div>