@extends('layouts.app')

@section('title', '設定 - ' . config('app.name'))

@section('content')
    <header class="c-toolbar">
        <div class="c-toolbar__row">
            <h2 class="c-toolbar__title">設定</h2>
            <div class="c-toolbar__actions">
                <a href="{{ route('applicants.index') }}" class="c-btn c-btn--ghost">応募者一覧へ</a>
            </div>
        </div>
        <p class="c-toolbar__sub">法人・応募媒体・店舗・職種・営業所のマスタを編集し、ページ下部の「保存」で一括反映します。</p>
    </header>

    <p class="c-form-intro">
        各セクションごとに入力し、空の行は保存時に無視されます。重複名は登録できません。
    </p>

    <form
        id="js-settings-page"
        class="c-settings-form"
        method="post"
        action="{{ route('settings.update') }}"
        novalidate
    >
        @csrf
        @method('PUT')

        @if ($errors->any())
            <div class="c-errors" role="alert">
                <p class="c-errors__title">入力内容を確認してください。</p>
                <ul class="c-errors__list">
                    @foreach ($errors->all() as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <section class="c-settings-section" aria-labelledby="settings-corporations-heading">
            <h3 id="settings-corporations-heading" class="c-settings-section__title">法人</h3>
            <p class="c-settings-section__help">応募者登録で選択できる法人名を登録します。空の行は保存時に無視されます。</p>

            <div id="js-corporations-container" class="c-settings-repeatable" data-section="corporations">
                @foreach ($corporationRows as $row)
                    <div class="c-settings-row js-repeatable-row" data-repeatable="corporations">
                        <input type="hidden" name="corporations[][id]" value="{{ $row['id'] ?? '' }}">
                        <input
                            type="text"
                            name="corporations[][name]"
                            value="{{ $row['name'] }}"
                            class="c-input c-settings-row__input"
                            autocomplete="organization"
                            placeholder="法人名"
                        >
                        <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この法人行を削除">
                            削除
                        </button>
                    </div>
                @endforeach
            </div>

            <button type="button" class="c-btn c-btn--secondary c-btn--sm js-add-row" data-tpl="js-tpl-row-corporations" data-container="js-corporations-container" data-section="corporations">
                行を追加
            </button>

            @error('corporations')
                <p class="c-settings-error" role="alert">{{ $message }}</p>
            @enderror
        </section>

        <section class="c-settings-section" aria-labelledby="settings-media-heading">
            <h3 id="settings-media-heading" class="c-settings-section__title">応募媒体名</h3>
            <p class="c-settings-section__help">空の行は保存時に無視されます。同じ名前は登録できません。</p>

            <div id="js-media-sources-container" class="c-settings-repeatable" data-section="media_sources">
                @foreach ($mediaSourceRows as $row)
                    <div class="c-settings-row js-repeatable-row" data-repeatable="media_sources">
                        <input type="hidden" name="media_sources[][id]" value="{{ $row['id'] ?? '' }}">
                        <input
                            type="text"
                            name="media_sources[][name]"
                            value="{{ $row['name'] }}"
                            class="c-input c-settings-row__input"
                            autocomplete="off"
                            placeholder="応募媒体名"
                        >
                        <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">
                            削除
                        </button>
                    </div>
                @endforeach
            </div>

            <button type="button" class="c-btn c-btn--secondary c-btn--sm js-add-row" data-tpl="js-tpl-row-media_sources" data-container="js-media-sources-container" data-section="media_sources">
                行を追加
            </button>

            @error('media_sources')
                <p class="c-settings-error" role="alert">{{ $message }}</p>
            @enderror
        </section>

        <section class="c-settings-section" aria-labelledby="settings-stores-heading">
            <h3 id="settings-stores-heading" class="c-settings-section__title">希望店舗</h3>
            <p class="c-settings-section__help">空の行は保存時に無視されます。同じ名前は登録できません。</p>

            <div id="js-stores-container" class="c-settings-repeatable" data-section="stores">
                @foreach ($storeRows as $row)
                    <div class="c-settings-row js-repeatable-row" data-repeatable="stores">
                        <input type="hidden" name="stores[][id]" value="{{ $row['id'] ?? '' }}">
                        <input
                            type="text"
                            name="stores[][name]"
                            value="{{ $row['name'] }}"
                            class="c-input c-settings-row__input"
                            autocomplete="off"
                            placeholder="希望店舗名"
                        >
                        <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">
                            削除
                        </button>
                    </div>
                @endforeach
            </div>

            <button type="button" class="c-btn c-btn--secondary c-btn--sm js-add-row" data-tpl="js-tpl-row-stores" data-container="js-stores-container" data-section="stores">
                行を追加
            </button>

            @error('stores')
                <p class="c-settings-error" role="alert">{{ $message }}</p>
            @enderror
        </section>

        <section class="c-settings-section" aria-labelledby="settings-job-types-heading">
            <h3 id="settings-job-types-heading" class="c-settings-section__title">職種名</h3>
            <p class="c-settings-section__help">空の行は保存時に無視されます。同じ名前は登録できません。</p>

            <div id="js-job-types-container" class="c-settings-repeatable" data-section="job_types">
                @foreach ($jobTypeRows as $row)
                    <div class="c-settings-row js-repeatable-row" data-repeatable="job_types">
                        <input type="hidden" name="job_types[][id]" value="{{ $row['id'] ?? '' }}">
                        <input
                            type="text"
                            name="job_types[][name]"
                            value="{{ $row['name'] }}"
                            class="c-input c-settings-row__input"
                            autocomplete="off"
                            placeholder="職種名"
                        >
                        <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">
                            削除
                        </button>
                    </div>
                @endforeach
            </div>

            <button type="button" class="c-btn c-btn--secondary c-btn--sm js-add-row" data-tpl="js-tpl-row-job_types" data-container="js-job-types-container" data-section="job_types">
                行を追加
            </button>

            @error('job_types')
                <p class="c-settings-error" role="alert">{{ $message }}</p>
            @enderror
        </section>

        <section class="c-settings-section" aria-labelledby="settings-offices-heading">
            <h3 id="settings-offices-heading" class="c-settings-section__title">営業所名</h3>
            <p class="c-settings-section__help">空の行は保存時に無視されます。同じ名前は登録できません。</p>

            <div id="js-offices-container" class="c-settings-repeatable" data-section="offices">
                @foreach ($officeRows as $row)
                    <div class="c-settings-row js-repeatable-row" data-repeatable="offices">
                        <input type="hidden" name="offices[][id]" value="{{ $row['id'] ?? '' }}">
                        <input
                            type="text"
                            name="offices[][name]"
                            value="{{ $row['name'] }}"
                            class="c-input c-settings-row__input"
                            autocomplete="off"
                            placeholder="営業所名"
                        >
                        <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">
                            削除
                        </button>
                    </div>
                @endforeach
            </div>

            <button type="button" class="c-btn c-btn--secondary c-btn--sm js-add-row" data-tpl="js-tpl-row-offices" data-container="js-offices-container" data-section="offices">
                行を追加
            </button>

            @error('offices')
                <p class="c-settings-error" role="alert">{{ $message }}</p>
            @enderror
        </section>

        <div class="c-settings-form-actions">
            <button type="submit" class="c-btn c-btn--primary">保存</button>
            <a href="{{ route('applicants.index') }}" class="c-btn c-btn--ghost">キャンセル</a>
        </div>
    </form>

    <section class="c-settings-section c-settings-section--account" aria-labelledby="settings-account-link-heading">
        <h3 id="settings-account-link-heading" class="c-settings-section__title">ログイン情報</h3>
        <p class="c-settings-section__help">
            管理者のメールアドレス・ログインパスワードを変更します。変更後は再ログインが必要です。
        </p>
        <p class="c-settings-account-link-wrap">
            <a href="{{ route('settings.account.edit') }}" class="c-btn c-btn--secondary">ログイン情報を変更</a>
        </p>
    </section>

    <template id="js-tpl-row-corporations">
        <div class="c-settings-row js-repeatable-row" data-repeatable="corporations">
            <input type="hidden" name="corporations[][id]" value="">
            <input type="text" name="corporations[][name]" value="" class="c-input c-settings-row__input" autocomplete="organization" placeholder="法人名">
            <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この法人行を削除">削除</button>
        </div>
    </template>

    <template id="js-tpl-row-media_sources">
        <div class="c-settings-row js-repeatable-row" data-repeatable="media_sources">
            <input type="hidden" name="media_sources[][id]" value="">
            <input type="text" name="media_sources[][name]" value="" class="c-input c-settings-row__input" autocomplete="off" placeholder="応募媒体名">
            <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">削除</button>
        </div>
    </template>

    <template id="js-tpl-row-stores">
        <div class="c-settings-row js-repeatable-row" data-repeatable="stores">
            <input type="hidden" name="stores[][id]" value="">
            <input type="text" name="stores[][name]" value="" class="c-input c-settings-row__input" autocomplete="off" placeholder="希望店舗名">
            <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">削除</button>
        </div>
    </template>

    <template id="js-tpl-row-job_types">
        <div class="c-settings-row js-repeatable-row" data-repeatable="job_types">
            <input type="hidden" name="job_types[][id]" value="">
            <input type="text" name="job_types[][name]" value="" class="c-input c-settings-row__input" autocomplete="off" placeholder="職種名">
            <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">削除</button>
        </div>
    </template>

    <template id="js-tpl-row-offices">
        <div class="c-settings-row js-repeatable-row" data-repeatable="offices">
            <input type="hidden" name="offices[][id]" value="">
            <input type="text" name="offices[][name]" value="" class="c-input c-settings-row__input" autocomplete="off" placeholder="営業所名">
            <button type="button" class="c-btn c-btn--outline c-btn--sm js-remove-row" aria-label="この行を削除">削除</button>
        </div>
    </template>
@endsection