@extends('layouts.app')

@section('title', '⚙ 簽到退設定')

@section('content')
<div class="container py-4" style="max-width:820px">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0"><i class="bi bi-gear me-2"></i>簽到退設定</h4>
    <a href="{{ route('attendance.admin') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回
    </a>
  </div>

  @if(session('success'))
  <div class="alert alert-success alert-dismissible fade show">
    <i class="bi bi-check-circle me-1"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  @endif

  @if($errors->any())
  <div class="alert alert-danger">
    @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
  </div>
  @endif

  <form method="POST" action="{{ route('attendance.settings.save') }}" id="settingsForm">
    @csrf
    <input type="hidden" name="groups_json" id="groupsJson">

    {{-- IP 限制 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header fw-semibold">
        <i class="bi bi-shield-lock me-2"></i>IP 簽到退限制
      </div>
      <div class="card-body">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch"
                 name="attendance_ip_restrict" value="1" id="ipRestrictSwitch"
                 {{ $settings['attendance_ip_restrict'] ? 'checked' : '' }}
                 onchange="document.getElementById('ipListSection').style.display = this.checked ? '' : 'none'">
          <label class="form-check-label fw-semibold" for="ipRestrictSwitch">啟用 IP 簽到退限制</label>
          <div class="text-muted small">開啟後，只有允許清單內的 IP 才可簽到退</div>
        </div>
        <div id="ipListSection" style="{{ $settings['attendance_ip_restrict'] ? '' : 'display:none' }}">
          <label class="form-label small fw-semibold">允許簽到退的 IP / CIDR（每行一筆）</label>
          <textarea name="attendance_allowed_ips" class="form-control font-monospace small"
                    rows="6" placeholder="例：&#10;192.168.1.0/24&#10;10.0.0.1">{{ $settings['attendance_allowed_ips'] }}</textarea>
          <div class="mt-2 p-2 rounded bg-light-subtle border small">
            <i class="bi bi-info-circle me-1 text-primary"></i>
            您目前的 IP：<code>{{ request()->ip() }}</code>
            <button type="button" class="btn btn-xs btn-outline-primary btn-sm ms-2 py-0 px-2"
                    onclick="addMyIp()">加入清單</button>
          </div>
        </div>
      </div>
    </div>

    {{-- 班制設定 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-clock me-2"></i>工作班制設定</span>
        <button type="button" class="btn btn-sm btn-success" onclick="addGroup()">
          <i class="bi bi-plus-circle me-1"></i>新增組別
        </button>
      </div>
      <div class="card-body">

        {{-- 週五提早 --}}
        <div class="form-check form-switch mb-3 pb-3 border-bottom" id="fridayRow">
          <input class="form-check-input" type="checkbox" role="switch"
                 name="attendance_friday_early_enabled" value="1" id="fridayEarlySwitch"
                 {{ $settings['attendance_friday_early_enabled'] ? 'checked' : '' }}
                 onchange="toggleFriday(this.checked)">
          <label class="form-check-label fw-semibold" for="fridayEarlySwitch">週五提早半小時下班</label>
          <div class="text-muted small">開啟後，週五下班時間改為各組的週五下班時間</div>
        </div>

        {{-- 組別卡片容器 --}}
        <div id="groupCards" class="row g-3">
          @php
            $palette = ['success','info','warning','primary','secondary','danger'];
          @endphp
          @foreach($groups as $i => $g)
          <div class="col-md-6 group-card" data-idx="{{ $i }}">
            <div class="p-3 border rounded bg-{{ $palette[$i % count($palette)] }}-subtle">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="d-flex align-items-center gap-2 fw-semibold text-{{ $palette[$i % count($palette)] }}-emphasis">
                  <i class="bi bi-people me-1"></i>
                  <input type="text" class="form-control form-control-sm group-id-input fw-semibold"
                         style="width:80px;font-weight:600"
                         value="{{ $g['id'] }}" maxlength="10"
                         placeholder="組別名稱">
                  <span class="small text-muted">組</span>
                </div>
                <button type="button" class="btn btn-sm btn-outline-danger btn-delete-group"
                        onclick="deleteGroup(this)" title="刪除此組別">
                  <i class="bi bi-trash3"></i>
                </button>
              </div>
              <div class="row g-2">
                <div class="col-6">
                  <label class="form-label small fw-semibold mb-1">上班時間</label>
                  <input type="time" class="form-control form-control-sm group-start"
                         value="{{ $g['start'] }}">
                </div>
                <div class="col-6">
                  <label class="form-label small fw-semibold mb-1">下班時間</label>
                  <input type="time" class="form-control form-control-sm group-end"
                         value="{{ $g['end'] }}">
                </div>
                <div class="col-12 friday-end-row" style="{{ $settings['attendance_friday_early_enabled'] ? '' : 'display:none' }}">
                  <label class="form-label small fw-semibold mb-1 text-muted">
                    <i class="bi bi-calendar-week me-1"></i>週五下班時間
                  </label>
                  <input type="time" class="form-control form-control-sm group-friday-end"
                         value="{{ $g['friday_end'] }}">
                </div>
              </div>
            </div>
          </div>
          @endforeach
        </div>

        <div class="form-text mt-3">
          組別名稱（如 A、B、夜班）會存入人員的班制設定。若修改既有組別名稱，請同步至人員管理頁面重新指定。
        </div>
      </div>
    </div>

    {{-- 遲到補請假連動 --}}
    <div class="card border-0 shadow-sm mb-4">
      <div class="card-header bg-transparent fw-semibold py-3">
        <i class="bi bi-calendar-check me-2 text-warning"></i>遲到補請假連動
      </div>
      <div class="card-body">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch"
                 name="attendance_leave_link_enabled" value="1" id="leaveLinkSwitch"
                 {{ $settings['attendance_leave_link_enabled'] ? 'checked' : '' }}
                 onchange="document.getElementById('leaveLinkSection').style.display = this.checked ? '' : 'none'">
          <label class="form-check-label fw-semibold" for="leaveLinkSwitch">啟用遲到補請假功能</label>
          <div class="form-text">啟用後，員工遲到超過設定分鐘數，簽到退頁面將顯示「補請假」快速按鈕。</div>
        </div>
        <div id="leaveLinkSection" style="{{ $settings['attendance_leave_link_enabled'] ? '' : 'display:none' }}">
          <label class="form-label small fw-semibold" for="leaveLateMinutes">遲到超過幾分鐘才提示</label>
          <div class="input-group" style="max-width:200px;">
            <input type="number" name="attendance_leave_late_minutes" id="leaveLateMinutes"
                   class="form-control form-control-sm"
                   value="{{ $settings['attendance_leave_late_minutes'] ?? 30 }}"
                   min="1" max="240">
            <span class="input-group-text small">分鐘</span>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
      <a href="{{ route('attendance.admin') }}" class="btn btn-secondary">取消</a>
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-floppy me-1"></i>儲存設定
      </button>
    </div>
  </form>
</div>
@endsection

@push('scripts')
<script>
const PALETTE = ['success','info','warning','primary','secondary','danger'];

function reindex() {
  document.querySelectorAll('#groupCards .group-card').forEach((card, i) => {
    card.dataset.idx = i;
    // recolor
    const inner = card.querySelector('.p-3.border.rounded');
    PALETTE.forEach(p => {
      inner.classList.remove('bg-' + p + '-subtle');
      inner.querySelector('.fw-semibold').classList.remove('text-' + p + '-emphasis');
    });
    inner.classList.add('bg-' + PALETTE[i % PALETTE.length] + '-subtle');
    inner.querySelector('.fw-semibold').classList.add('text-' + PALETTE[i % PALETTE.length] + '-emphasis');
  });
  // disable delete if only 1 group
  const btns = document.querySelectorAll('.btn-delete-group');
  btns.forEach(b => b.disabled = btns.length <= 1);
}

function addGroup() {
  const cards = document.querySelectorAll('#groupCards .group-card');
  const i = cards.length;
  const col = document.createElement('div');
  col.className = 'col-md-6 group-card';
  col.dataset.idx = i;
  const p = PALETTE[i % PALETTE.length];
  const fridayVisible = document.getElementById('fridayEarlySwitch').checked;
  // suggest next letter
  const usedIds = Array.from(document.querySelectorAll('.group-id-input')).map(el => el.value.trim());
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  const nextId = letters.find(l => !usedIds.includes(l)) || '';

  col.innerHTML = `
    <div class="p-3 border rounded bg-${p}-subtle">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="d-flex align-items-center gap-2 fw-semibold text-${p}-emphasis">
          <i class="bi bi-people me-1"></i>
          <input type="text" class="form-control form-control-sm group-id-input fw-semibold"
                 style="width:80px;font-weight:600" value="${nextId}" maxlength="10" placeholder="組別名稱">
          <span class="small text-muted">組</span>
        </div>
        <button type="button" class="btn btn-sm btn-outline-danger btn-delete-group"
                onclick="deleteGroup(this)" title="刪除此組別">
          <i class="bi bi-trash3"></i>
        </button>
      </div>
      <div class="row g-2">
        <div class="col-6">
          <label class="form-label small fw-semibold mb-1">上班時間</label>
          <input type="time" class="form-control form-control-sm group-start" value="09:00">
        </div>
        <div class="col-6">
          <label class="form-label small fw-semibold mb-1">下班時間</label>
          <input type="time" class="form-control form-control-sm group-end" value="18:00">
        </div>
        <div class="col-12 friday-end-row" style="${fridayVisible ? '' : 'display:none'}">
          <label class="form-label small fw-semibold mb-1 text-muted">
            <i class="bi bi-calendar-week me-1"></i>週五下班時間
          </label>
          <input type="time" class="form-control form-control-sm group-friday-end" value="17:30">
        </div>
      </div>
    </div>`;
  document.getElementById('groupCards').appendChild(col);
  reindex();
  col.querySelector('.group-id-input').focus();
}

function deleteGroup(btn) {
  const cards = document.querySelectorAll('#groupCards .group-card');
  if (cards.length <= 1) return;
  btn.closest('.group-card').remove();
  reindex();
}

function toggleFriday(show) {
  document.querySelectorAll('.friday-end-row').forEach(el => {
    el.style.display = show ? '' : 'none';
  });
}

function addMyIp() {
  const ta   = document.querySelector('[name="attendance_allowed_ips"]');
  const myIp = '{{ request()->ip() }}';
  const cur  = ta.value.trim();
  if (!cur.includes(myIp)) ta.value = (cur ? cur + '\n' : '') + myIp;
  document.getElementById('ipRestrictSwitch').checked = true;
  document.getElementById('ipListSection').style.display = '';
}

// Serialize groups to JSON before submit
document.getElementById('settingsForm').addEventListener('submit', function() {
  const groups = [];
  document.querySelectorAll('#groupCards .group-card').forEach(card => {
    const id  = card.querySelector('.group-id-input').value.trim().toUpperCase();
    if (!id) return;
    groups.push({
      id:         id,
      start:      card.querySelector('.group-start').value || '09:00',
      end:        card.querySelector('.group-end').value   || '18:00',
      friday_end: card.querySelector('.group-friday-end').value || '17:30',
    });
  });
  document.getElementById('groupsJson').value = JSON.stringify(groups);
});

// Init
reindex();
document.getElementById('leaveLinkSwitch').addEventListener('change', function() {
  document.getElementById('leaveLinkSection').style.display = this.checked ? '' : 'none';
});
</script>
@endpush