@php use App\Models\Setting; @endphp
@extends('cms.layouts.frame')

@section('styles')
    @include('cms.components.tinymce-style')
@endsection

@section('scripts')
    @include('cms.components.tinymce-script')
    @vite(["resources/js/cms/settings/edit.js"])
@endsection

@section('content')
    <main>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                @foreach($grouped as $groupName => $settings)
                    <a class="
                            nav-link
                            @if($isGroupFirst($loop)) active @endif
                       "
                       id="nav-{{ $groupName }}-tab"
                       data-bs-toggle="tab"
                       data-bs-target="#nav-{{ $groupName }}" type="button" role="tab"
                       aria-controls="nav-{{ $groupName }}"
                       aria-selected="true">
                        {{ __("setting.{$groupName}") }}
                    </a>
                @endforeach
            </div>
        </nav>
        <div class="tab-content pt-3" id="nav-tabContent">
            @foreach($grouped as $groupName => $settings)

                <div class="
                        tab-pane fade
                        @if($isGroupFirst($loop)) show active @endif
                     "
                     id="nav-{{ $groupName }}"
                     role="tabpanel"
                     aria-labelledby="nav-{{ $groupName }}"
                     tabindex="0">

                    @foreach($settings as $setting)
                        <form method="post" action="{{ route("cms.setting.update", $setting->id) }}" class="mt-3">
                            @csrf
                            @method('PUT')
                            <div class="mb-3">
                                <label for="input_{{ $setting->key }}" class="form-label fw-bolder">
                                    <h4>
                                        {{ $setting->title }}
                                    </h4>
                                </label>

                                {{-- 不同的類型使用不同的 html 元素。editor 會使用編輯器 --}}
                                @if($setting->element === "input")
                                    <input name="value" type="text" class="form-control" id="input_{{ $setting->key }}"
                                           value="{{ $setting->value }}">
                                @elseif($setting->element === "textarea")
                                    <textarea name="value" class="form-control" id="input_{{ $setting->key }}"
                                              rows="3">{{ $setting->value }}</textarea>
                                @elseif($setting->element === "editor")
                                    <textarea name="value" class="form-control editor" id="input_{{ $setting->key }}"
                                              rows="3">{{ $setting->value }}</textarea>

                                @endif


                                <div id="input_{{ $setting->key }}_help"
                                     class="form-text">{{ $setting->description }}</div>
                            </div>

                            @can("settingUpdate", Setting::class)
                                <button type="submit" class="btn btn-primary btn-sm">儲存</button>
                            @endcan
                        </form>
                        <hr>
                    @endforeach

                </div>
            @endforeach
        </div>
    </main>
@endsection