@if(Session::has('success'))
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        {{ Session::get('success') }}
    </div>
@elseif(Session::has('error'))
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-ban"></i> {{__('入力内容に不備があります')}}:</h4>
        {!! Session::get('error') !!}
    </div>
@elseif(isset($errorMsg))
    <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-ban"></i> {{__('入力内容に不備があります')}}:</h4>
        {!! $errorMsg !!}
    </div>
@endif

    
<div class="card-body">
    @if ($errors->any())
        <div class="alert alert-danger">
            <h4>入力内容に不備があります:</h4>
            <ol>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ol>
        </div>
    @endif

    <div class="row">
    {{-- オペレータID（編集時のみ表示） --}}
    @if($isEdit)
    <div class="form-group col-3">
        <label>{{ __('validation.attributes.ope_id') }}</label>
    </div>
    <div class="form-group col-9">
        <input type="text" value="{{ $record->ope_id ?? '' }}" 
            class="form-control form-control-lg" readonly>
    </div>
    @endif

    <!-- オペレータ名 -->
    <div class="form-group col-3">
        <label class="required">{{ __('validation.attributes.ope_name') }}</label>
    </div>
    <div class="form-group col-9">
        <div class="input-group">
            <input type="text" 
                name="ope_name"
                value="{{ old('ope_name', $isEdit ? $record->ope_name : '') }}"
                class="form-control form-control-lg"
                placeholder="{{ __('validation.attributes.ope_name') }}">
        </div>
    </div>
    <!-- /.form group - オペレータ名 -->

    <!-- ログインID -->
    <div class="form-group col-3">
        <label class="required">{{ __('validation.attributes.login_id') }}</label>
    </div>
    <div class="form-group col-9">
        <div class="input-group">
            <input type="text"
                name="login_id"
                class="form-control form-control-lg"
                value="{{ old('login_id', $isEdit ? $record->login_id : '') }}"
                maxlength="255"
                autocomplete="off"
                placeholder="{{ __('validation.attributes.login_id') }}">
        </div>
    </div>
    <!-- /.form group - ログインID -->

    {{-- パスワード（新規必須 / 編集任意） --}}
    <div class="form-group col-3">
        <label class="@if(!$isEdit) required @endif">{{ __('validation.attributes.password') }}</label>
    </div>
    <div class="form-group col-9">
        <div class="input-group">
            <input type="password"
                name="password"
                class="form-control form-control-lg"
                placeholder="{{ __('validation.attributes.password') }}"
                autocomplete="new-password">
        </div>
    </div>

    <div class="form-group col-3">
        <label class="@if(!$isEdit) required @endif">{{ __('validation.attributes.password_confirmation') }}</label>
    </div>
    <div class="form-group col-9">
        <div class="input-group">
            <input type="password"
                name="password_confirmation"
                class="form-control form-control-lg"
                placeholder="{{ __('validation.attributes.password_confirmation') }}">
        </div>
    </div>


    <!-- オペレータ種別 -->
    <div class="form-group col-3">
        <label class="required">{{__('validation.attributes.ope_type')}}</label>
    </div>
    <div class="form-group col-9">
        <div class="input-group">
            <select name="ope_type" class="form-control form-control-lg">
                <option value="">{{ __('validation.attributes.ope_type') }}</option>
                @foreach(\App\Models\Ope::OPE_TYPE as $key => $item)
                    <option value="{{ $key }}" 
                        {{ old('ope_type', $isEdit ? $record->ope_type : '') == $key ? 'selected' : '' }}>
                        {{ $item }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
    <!-- /.form group - オペレータ種別 -->

    <!-- メールアドレス -->
    <div class="col-3 form-group">
        <label class="required">{{ __('validation.attributes.ope_mail') }}</label>
    </div>
    <div class="col-9 form-group">
        <input type="email"
            name="ope_mail"
            class="form-control form-control-lg"
            value="{{ old('ope_mail', $isEdit ? $record->ope_mail : '') }}"
            maxlength="128"
            placeholder="{{ __('validation.attributes.ope_mail') }}">
    </div>
    <!-- /.form group - メールアドレス -->

    <!-- 電話番号 -->
    <div class="col-3 form-group">
        <label class="required">{{ __('validation.attributes.ope_phone') }}</label>
    </div>
    <div class="col-9 form-group">
        <input type="text"
            name="ope_phone"
            class="form-control form-control-lg"
            value="{{ old('ope_phone', $isEdit ? $record->ope_phone : '') }}"
            maxlength="15"
            placeholder="{{ __('validation.attributes.ope_phone') }}">
    </div>
    <!-- /.form group - 電話番号 -->

    {{-- ▼ キュー1〜13アラート送信 --}}
    @for ($i = 1; $i <= 13; $i++)
    <div class="form-group col-3">
        <label>{{ __('validation.attributes.ope_sendalart_que'.$i) }}</label>
    </div>
    <div class="form-group col-9">
        <div class="row">
            <div class="col-2 offset-1 form-check">
                <input type="radio" class="minimal" name="ope_sendalart_que{{ $i }}" value="1"
                    {{ old('ope_sendalart_que'.$i, $isEdit ? $record->{'ope_sendalart_que'.$i} : 0) == 1 ? 'checked' : '' }}>
                <label class="form-check-label">{{ __('はい') }}</label>
            </div>
            <div class="col-2 form-check">
                <input type="radio" class="minimal" name="ope_sendalart_que{{ $i }}" value="0"
                    {{ old('ope_sendalart_que'.$i, $isEdit ? $record->{'ope_sendalart_que'.$i} : 0) == 0 ? 'checked' : '' }}>
                <label class="form-check-label">{{ __('いいえ') }}</label>
            </div>
        </div>
    </div>
    @endfor
    {{-- ▲ キュー1〜13 --}}
{{--
    <!-- 管理者権限付与 -->
    <div class="form-group col-3">
        <label>{{__('validation.attributes.ope_auth1')}}</label>
    </div>
    <div class="form-group col-9">
        <div class="row">
            <div class="col-4 offset-1 form-check">
                <input type="radio" class="minimal" name="ope_auth1" value="管理者権限付与"
                    {{ old('ope_auth1', $isEdit ? $record->ope_auth1 : '付与しない') == '管理者権限付与' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("管理者権限付与")}}</label>
            </div>
            <div class="col-2 form-check">
                <input type="radio" class="minimal" name="ope_auth1" value="付与しない"
                    {{ old('ope_auth1', $isEdit ? $record->ope_auth1 : '付与しない') == '付与しない' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("付与しない")}}</label>
            </div>
        </div>
    </div>

    <!-- エリアマネージャー権限付与 -->
    <div class="form-group col-3">
        <label>{{__('validation.attributes.ope_auth2')}}</label>
    </div>
    <div class="form-group col-9">
        <div class="row">
            <div class="col-4 offset-1 form-check">
                <input type="radio" class="minimal" name="ope_auth2" value="エリアマネージャー権限付与"
                    {{ old('ope_auth2', $isEdit ? $record->ope_auth2 : '付与しない') == 'エリアマネージャー権限付与' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("エリアマネージャー権限付与")}}</label>
            </div>
            <div class="col-2 form-check">
                <input type="radio" class="minimal" name="ope_auth2" value="付与しない"
                    {{ old('ope_auth2', $isEdit ? $record->ope_auth2 : '付与しない') == '付与しない' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("付与しない")}}</label>
            </div>
        </div>
    </div>

    <!-- エリアオペレーター権限付与 -->
    <div class="form-group col-3">
        <label>{{__('validation.attributes.ope_auth3')}}</label>
    </div>
    <div class="form-group col-9">
        <div class="row">
            <div class="col-4 offset-1 form-check">
                <input type="radio" class="minimal" name="ope_auth3" value="エリアオペレーター権限付与"
                    {{ old('ope_auth3', $isEdit ? $record->ope_auth3 : '付与しない') == 'エリアオペレーター権限付与' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("エリアオペレーター権限付与")}}</label>
            </div>
            <div class="col-2 form-check">
                <input type="radio" class="minimal" name="ope_auth3" value="付与しない"
                    {{ old('ope_auth3', $isEdit ? $record->ope_auth3 : '付与しない') == '付与しない' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("付与しない")}}</label>
            </div>
        </div>
    </div>

    <!-- オペレーター権限付与 -->
    <div class="form-group col-3">
        <label>{{__('validation.attributes.ope_auth4')}}</label>
    </div>
    <div class="form-group col-9">
        <div class="row">
            <div class="col-4 offset-1 form-check">
                <input type="radio" class="minimal" name="ope_auth4" value="オペレーター権限付与"
                    {{ old('ope_auth4', $isEdit ? $record->ope_auth4 : '付与しない') == 'オペレーター権限付与' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("オペレーター権限付与")}}</label>
            </div>
            <div class="col-2 form-check">
                <input type="radio" class="minimal" name="ope_auth4" value="付与しない"
                    {{ old('ope_auth4', $isEdit ? $record->ope_auth4 : '付与しない') == '付与しない' ? 'checked' : '' }}>
                <label class="form-check-label">{{__("付与しない")}}</label>
            </div>
        </div>
    </div>
--}}
    <!-- 退職フラグ -->
    <div class="form-group col-3">
        <label>{{__('validation.attributes.ope_quit_flag')}}</label>
    </div>
    <div class="form-group col-9">
        <div class="row">
            <div class="col-4 offset-1 form-check">
                <input type="radio" class="minimal" name="ope_quit_flag" value="1"
                    {{ old('ope_quit_flag', $isEdit ? $record->ope_quit_flag : 0) == 1 ? 'checked' : '' }}>
                <label class="form-check-label">{{__('退職')}}</label>
            </div>
            <div class="col-2 form-check">
                <input type="radio" class="minimal" name="ope_quit_flag" value="0"
                    {{ old('ope_quit_flag', $isEdit ? $record->ope_quit_flag : 0) == 0 ? 'checked' : '' }}>
                <label class="form-check-label">{{__('退職しない')}}</label>
            </div>
        </div>
    </div>
    <!-- /.form group - 退職フラグ -->

    <!-- 退職日 -->
    <div class="col-3 form-group">
        <label>{{ __('validation.attributes.ope_quitday') }}</label>
    </div>
    <div class="col-9 form-group">
        <input type="date"
            name="ope_quitday"
            class="form-control form-control-lg"
            value="{{ old('ope_quitday', $isEdit ? $record->ope_quitday : '') }}">
    </div>
    <!-- /.form group - 退職日 -->

<!-- 機能（画面） -->
<div class="form-group col-3">
    <label>機能（画面）</label>
</div>
<div class="form-group col-9">
    <div class="input-group">
        <select id="feature_id"
                name="feature_id"
                class="form-control form-control-lg permission-control">
            <option value="">機能を選択してください</option>
            @foreach($features as $feature)
                <option value="{{ $feature->id }}"
                    {{ (string)old('feature_id', $selectedFeatureId ?? '') === (string)$feature->id ? 'selected' : '' }}>
                    {{ $feature->name }}
                </option>
            @endforeach
        </select>
    </div>
</div>


<!-- 操作権限 -->
<div class="form-group col-3 mt-3">
    <label>操作権限</label>
</div>
<div class="form-group col-9 mt-3">
    <div id="permission_box">
        @foreach($permissions as $perm)
            <label class="mr-4 mb-0 d-inline-flex align-items-center">
                <input type="checkbox"
                       class="perm-checkbox permission-control mr-1"
                       name="permission_ids[]"
                       value="{{ $perm->id }}">
                {{ $perm->name }}
            </label>
        @endforeach
    </div>
    <small class="text-muted d-block mt-2">
        ※ 機能を選択後、現在設定済みの権限が自動で反映されます。
    </small>
</div>


<!-- 保存ボタンは既存のままでOK -->

         
    </div>
    {{-- ▼ 下部ボタン --}}
    <div class="row mt-4">
        <div class="form-group col-md-10 d-flex align-items-center gap-2 justify-content-start">

            {{-- 登録ボタン --}}
            @if($isEdit)
                <button type="button" id="register_edit" class="btn btn-lg btn-success mr-2">
                    {{ __('登録') }}
                </button>
            @else
                <button type="button" id="register" class="btn btn-lg btn-success mr-2 register">
                    {{ __('登録') }}
                </button>
            @endif

            {{-- 削除ボタン（編集時のみ表示） --}}
            @if($isEdit)
                <button type="button" id="delete_edit" class="btn btn-lg btn-danger">
                    {{ __('削除') }}
                </button>
            @endif

        </div>
    </div>

</div>

<script>
/**
 * オペレータ種別に応じて
 * 0: 管理者 → 機能・権限 非活性
 * 1: 職員   → 機能・権限 活性
 */
function togglePermissionArea() {
    const opeType = document.querySelector('select[name="ope_type"]').value;
    const controls = document.querySelectorAll('.permission-control');

    if (opeType === '0') { // 管理者
        controls.forEach(el => {
            el.disabled = true;
            if (el.type === 'checkbox') {
                el.checked = false;
            }
        });
    } else {
        controls.forEach(el => {
            el.disabled = false;
        });
    }
}

/**
 * 機能選択時：既存権限を反映
 */
async function refreshPermissionChecks() {
    const featureId = document.getElementById('feature_id').value;
    const opeId = {{ (int)($record->ope_id ?? 0) }};
    const opeType = document.querySelector('select[name="ope_type"]').value;

    // 管理者は個別権限設定しない
    if (opeType === '0') return;

    // 一旦すべて解除
    document.querySelectorAll('.perm-checkbox').forEach(cb => cb.checked = false);

    if (!featureId || !opeId) return;

    const res = await fetch(`/opes/${opeId}/permissions?feature_id=${featureId}`);
    const ids = await res.json();

    const set = new Set(ids.map(String));
    document.querySelectorAll('.perm-checkbox').forEach(cb => {
        if (set.has(String(cb.value))) cb.checked = true;
    });
}

/* ---------- イベント登録 ---------- */
document.addEventListener('DOMContentLoaded', () => {
    togglePermissionArea();
    refreshPermissionChecks();
});

document.querySelector('select[name="ope_type"]').addEventListener('change', () => {
    togglePermissionArea();
    refreshPermissionChecks();
});

document.getElementById('feature_id').addEventListener('change', refreshPermissionChecks);
</script>


