@php
    $setting = $settings->where('key', $key)->first();
@endphp

@if($setting)
    <div class="mb-7">
        <label for="{{ $key }}" class="app-label text-sm font-bold">
            {{ $label ?? __(ucfirst(str_replace('_', ' ', $key))) }}
        </label>

        @if(isset($help))
            <div class="text-slate-500 dark:text-slate-400 text-xs mb-2">{{ $help }}</div>
        @endif

        @if($setting->data_type == 'text')
            <input type="text" class="app-input app-input--solid @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]" value="{{ old("settings.{$key}.value", $setting->value) }}">
        @elseif($setting->data_type == 'email')
            <input type="email" class="app-input app-input--solid @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]" value="{{ old("settings.{$key}.value", $setting->value) }}">
        @elseif($setting->data_type == 'tel')
            <input type="tel" class="app-input app-input--solid @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]" value="{{ old("settings.{$key}.value", $setting->value) }}">
        @elseif($setting->data_type == 'password')
            <input type="password" class="app-input app-input--solid @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]" placeholder="••••••••">
        @elseif($setting->data_type == 'textarea')
            <textarea class="app-input app-input--solid @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]" rows="3">{{ old("settings.{$key}.value", $setting->value) }}</textarea>
        @elseif($setting->data_type == 'select')
            <select class="app-input app-select app-input--solid @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]">
                <option value="">{{ __('dashboard.Choose an option') }}</option>
                @if($setting->options)
                    @foreach(json_decode($setting->options) as $option)
                        <option value="{{ $option->value }}" {{ old("settings.{$key}.value", $setting->value) == $option->value ? 'selected' : '' }}>{{ __($option->label) }}</option>
                    @endforeach
                @endif
            </select>
        @elseif($setting->data_type == 'checkbox')
            <div class="app-check">
                <input type="hidden" name="settings[{{ $key }}][value]" value="0">
                <input type="checkbox" class="app-check__input @error("settings.{$key}.value") app-input--invalid @enderror" id="{{ $key }}" name="settings[{{ $key }}][value]" value="1" {{ old("settings.{$key}.value", $setting->value) == '1' ? 'checked' : '' }}>
                <label class="app-check__label" for="{{ $key }}"></label>
            </div>
        @elseif($setting->data_type == 'file')
            <div class="image-input image-input-outline {{ $setting->value ? '' : 'image-input-empty' }}" data-kt-image-input="true" style="background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}')">
                <div class="image-input-wrapper w-125px h-125px" style="background-image: {{ $setting->value && Storage::exists($setting->value) ? 'url('.Storage::url($setting->value).')' : 'none' }}"></div>
                <label class="app-btn app-btn--icon rounded-full w-[25px] h-[25px] bg-white dark:bg-slate-900 shadow" data-kt-image-input-action="change" title="Change avatar">
                    <i class="fa-solid fa-pen text-xs"></i>
                    <input type="file" name="settings[{{ $key }}][value]" accept=".png, .jpg, .jpeg, .svg" />
                    <input type="hidden" name="settings[{{ $key }}]_remove" />
                </label>
                <span class="app-btn app-btn--icon rounded-full w-[25px] h-[25px] bg-white dark:bg-slate-900 shadow" data-kt-image-input-action="cancel" title="Cancel avatar">
                    <i class="fa-solid fa-x text-2xl"></i>
                </span>
                <span class="app-btn app-btn--icon rounded-full w-[25px] h-[25px] bg-white dark:bg-slate-900 shadow" data-kt-image-input-action="remove" title="Remove avatar">
                    <i class="fa-solid fa-x text-2xl"></i>
                </span>
            </div>
            <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">Allowed file types: png, jpg, jpeg, svg.</div>
        @endif

        <input type="hidden" name="settings[{{ $key }}][key]" value="{{ $key }}">

        @error("settings.{$key}.value")
            <div class="app-field-error block">{{ $message }}</div>
        @enderror
    </div>
@endif