@extends('layouts.setup')
@section('title', 'オペレーター管理')
@section('page-title', 'オペレーター管理')

@section('setup_body')
@php
  use App\Support\OperatorPermissionCatalog;
  $legacyOperators = $operators->filter(fn ($op) => empty($op->login_user_id));
@endphp

@if($legacyOperators->isNotEmpty())
  <div class="alert alert-warning mb-3">
    ログイン用アカウントが未連携のオペレーターが {{ $legacyOperators->count() }} 件あります。<strong>一度削除して再追加</strong>すると、登録したメールアドレスとパスワードでログインできるようになります。
  </div>
@endif

<div class="setup-form-card mb-4">
  <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span>オペレーター一覧</span>
    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addOperatorModal">
      <i class="bi bi-plus-lg me-1"></i>オペレーターを追加
    </button>
  </div>
  <div class="card-body p-0">
    @if($operators->isEmpty())
      <div class="text-center py-5 px-3">
        <i class="bi bi-person-gear" style="font-size:3rem;color:#ddd;"></i>
        <p class="mt-3 text-muted mb-0">オペレーターが登録されていません</p>
      </div>
    @else
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light"><tr>
            <th>名前</th><th>メールアドレス</th><th>権限</th><th>ステータス</th><th></th>
          </tr></thead>
          <tbody>
            @foreach($operators as $op)
            <tr>
              <td>{{ $op->name }}</td>
              <td>{{ $op->email }}</td>
              <td>
                <div class="d-flex flex-wrap gap-1">
                  @forelse(OperatorPermissionCatalog::activeLabels($op) as $label)
                    <span class="badge bg-light text-dark" style="font-size:0.7rem;">{{ $label }}</span>
                  @empty
                    <span class="text-muted small">なし</span>
                  @endforelse
                </div>
              </td>
              <td>
                @if(empty($op->login_user_id))
                  <span class="badge bg-warning text-dark">要再登録</span>
                @else
                  <span class="badge {{ $op->status === 'active' ? 'bg-success' : 'bg-secondary' }}">{{ $op->status === 'active' ? '有効' : '無効' }}</span>
                @endif
              </td>
              <td>
                <div class="btn-group btn-group-sm">
                  @if($op->login_user_id)
                  <button type="button" class="btn btn-outline-secondary btn-edit-operator" title="編集"
                    data-bs-toggle="modal" data-bs-target="#editOperatorModal"
                    data-update-url="{{ route('setting.operator.update', $op) }}"
                    data-name="{{ $op->name }}"
                    data-email="{{ $op->email }}"
                    data-status="{{ $op->status }}"
                    @foreach(OperatorPermissionCatalog::definitions() as $def)
                    data-{{ str_replace('_', '-', $def['column']) }}="{{ $op->{$def['column']} ? '1' : '0' }}"
                    @endforeach
                  ><i class="bi bi-pencil"></i></button>
                  @endif
                  <form method="POST" action="{{ route('setting.operator.destroy', $op) }}" class="d-inline" onsubmit="return confirm('削除しますか？')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger" title="削除"><i class="bi bi-trash"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    @endif
  </div>
</div>

<div class="modal fade" id="addOperatorModal" tabindex="-1" aria-labelledby="addOperatorModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable"><div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="addOperatorModalLabel">オペレーターを追加</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
    </div>
    <form method="POST" action="{{ route('setting.operator.store') }}">
      @csrf
      <div class="modal-body">
        <p class="small text-muted mb-3">サブ担当者用のログインを作成します。登録した<strong>メールアドレスとパスワード</strong>で、契約者と同じログイン画面から入れます。<strong>同じメールは複数の契約（会社）で使えます</strong>（2社目以降を追加するときは、既に設定したパスワードを入力してください）。ログイン時に会社を選べます。</p>
        <div class="mb-3"><label class="form-label fw-semibold">名前 <span class="text-danger">*</span></label><input type="text" name="name" class="form-control" value="{{ old('name') }}" required autocomplete="name"></div>
        <div class="mb-3"><label class="form-label fw-semibold">メールアドレス <span class="text-danger">*</span></label><input type="email" name="email" class="form-control" value="{{ old('email') }}" required autocomplete="email"></div>
        <div class="mb-3"><label class="form-label fw-semibold">パスワード <span class="text-danger">*</span></label><input type="password" name="password" class="form-control" required minlength="8" autocomplete="new-password"></div>
        <div class="mb-0">
          <label class="form-label fw-semibold">アクセス権限</label>
          @include('setting.partials.operator-permission-fields', ['prefix' => 'add', 'perms' => []])
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
        <button type="submit" class="btn btn-primary">追加する</button>
      </div>
    </form>
  </div></div>
</div>

<div class="modal fade" id="editOperatorModal" tabindex="-1" aria-labelledby="editOperatorModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable"><div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="editOperatorModalLabel">オペレーターを編集</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
    </div>
    <form method="POST" id="edit-operator-form" action="#">
      @csrf @method('PUT')
      <div class="modal-body">
        <div class="mb-3"><label class="form-label fw-semibold">名前 <span class="text-danger">*</span></label><input type="text" name="name" id="edit-operator-name" class="form-control" required></div>
        <div class="mb-3"><label class="form-label fw-semibold">メールアドレス <span class="text-danger">*</span></label><input type="email" name="email" id="edit-operator-email" class="form-control" required></div>
        <div class="mb-3">
          <label class="form-label fw-semibold">パスワード</label>
          <input type="password" name="password" id="edit-operator-password" class="form-control" minlength="8" autocomplete="new-password">
          <div class="form-text">変更しない場合は空のままにしてください。</div>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">ステータス</label>
          <select name="status" id="edit-operator-status" class="form-select">
            <option value="active">有効</option>
            <option value="inactive">無効</option>
          </select>
        </div>
        <div class="mb-0">
          <label class="form-label fw-semibold">アクセス権限</label>
          <div id="edit-operator-permissions">
            @include('setting.partials.operator-permission-fields', ['prefix' => 'edit', 'perms' => []])
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
        <button type="submit" class="btn btn-primary">保存する</button>
      </div>
    </form>
  </div></div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.btn-edit-operator').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var form = document.getElementById('edit-operator-form');
    form.action = btn.getAttribute('data-update-url') || '#';
    document.getElementById('edit-operator-name').value = btn.getAttribute('data-name') || '';
    document.getElementById('edit-operator-email').value = btn.getAttribute('data-email') || '';
    document.getElementById('edit-operator-status').value = btn.getAttribute('data-status') || 'active';
    document.getElementById('edit-operator-password').value = '';
    form.querySelectorAll('input[type=checkbox][name^=perm_]').forEach(function (cb) {
      var col = cb.name.replace(/_/g, '-');
      var val = btn.getAttribute('data-' + col);
      cb.checked = val === '1';
    });
  });
});
</script>
@endpush