@extends('layouts.app')

@section('title', '通知信件排程設定')

@push('styles')
<style>
  .cycle-badge { font-size: 0.78rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
  .schedule-row td { vertical-align: middle; }
  .toggle-switch { width: 48px; height: 26px; }
  .last-sent { font-size: 0.8rem; color: #6c757d; }
  .time-inputs { display: flex; gap: 6px; align-items: center; }
  .time-inputs .form-select { width: auto; min-width: 80px; }
  .inline-form input, .inline-form select { font-size: 0.88rem; }
  .project-name { font-weight: 600; font-size: 0.95rem; }
  .client-name  { font-size: 0.78rem; color: #6c757d; }
  .save-indicator { font-size: 0.75rem; color: #198754; display: none; }
  tr.disabled-row td:not(.toggle-cell) { opacity: 0.45; pointer-events: none; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h2 class="mb-0"><i class="bi bi-envelope-check me-2 text-primary"></i>通知信件排程設定</h2>
      <p class="text-muted mt-1 mb-0 small">統一設定各專案維護報告的寄送週期、日期與時間</p>
    </div>
  </div>

  {{-- 說明卡 --}}
  <div class="alert alert-info d-flex gap-2 align-items-start mb-4" style="font-size:0.88rem;">
    <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
    <div>
      排程每小時自動檢查一次，當「今天的日期」與「目前的小時」符合設定時才寄出，且同週期內只寄一次。<br>
      若需立即測試，可點「<strong>立即寄送</strong>」按鈕。
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-white py-3">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <span class="fw-bold"><i class="bi bi-list-ul me-1"></i>專案列表（共 <span id="visible-count">{{ $projects->count() }}</span> / {{ $projects->count() }} 個）</span>
        <span class="text-muted small">變更後自動儲存</span>
      </div>
      <div class="mt-2 d-flex gap-2 flex-wrap">
        <div class="input-group" style="max-width:320px;">
          <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
          <input type="text" id="search-input" class="form-control border-start-0"
                 placeholder="搜尋專案名稱或客戶名稱…" autocomplete="off">
          <button class="btn btn-outline-secondary" id="search-clear" type="button" style="display:none;">
            <i class="bi bi-x"></i>
          </button>
        </div>
        <div class="btn-group btn-group-sm" role="group" id="filter-btns">
          <input type="radio" class="btn-check" name="filter" id="f-all"     autocomplete="off" checked>
          <label class="btn btn-outline-secondary" for="f-all">全部</label>
          <input type="radio" class="btn-check" name="filter" id="f-enabled" autocomplete="off">
          <label class="btn btn-outline-success"    for="f-enabled"><i class="bi bi-bell-fill me-1"></i>已啟用</label>
          <input type="radio" class="btn-check" name="filter" id="f-disabled" autocomplete="off">
          <label class="btn btn-outline-secondary"  for="f-disabled"><i class="bi bi-bell-slash me-1"></i>未啟用</label>
        </div>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle" id="settings-table">
        <thead class="table-light">
          <tr>
            <th style="width:200px;">專案</th>
            <th style="width:90px;" class="text-center">啟用通知</th>
            <th style="width:130px;">寄送週期</th>
            <th style="width:180px;">寄送時間（幾號 幾點）</th>
            <th>收件人信箱</th>
            <th style="width:160px;">上次寄送</th>
            <th style="width:110px;" class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          @foreach($projects as $project)
          <tr class="schedule-row {{ !$project->send_maintenance_report ? 'disabled-row' : '' }}"
              id="row-{{ $project->id }}"
              data-project="{{ strtolower($project->name) }}"
              data-client="{{ strtolower($project->client?->name ?? '') }}"
              data-enabled="{{ $project->send_maintenance_report ? '1' : '0' }}">

            {{-- 專案名稱 --}}
            <td>
              <div class="project-name">{{ $project->name }}</div>
              @if($project->client)
                <div class="client-name">{{ $project->client?->name ?? '未分類' }}</div>
              @endif
            </td>

            {{-- 啟用開關 --}}
            <td class="text-center toggle-cell">
              <div class="form-check form-switch d-flex justify-content-center mb-0">
                <input class="form-check-input toggle-switch enable-toggle"
                       type="checkbox" role="switch"
                       data-id="{{ $project->id }}"
                       {{ $project->send_maintenance_report ? 'checked' : '' }}>
              </div>
            </td>

            {{-- 週期 --}}
            <td class="inline-form">
              <select class="form-select form-select-sm field-select" data-id="{{ $project->id }}" data-field="maintenance_report_cycle">
                <option value="monthly"      {{ ($project->maintenance_report_cycle ?? 'monthly') === 'monthly'      ? 'selected' : '' }}>每月</option>
                <option value="quarterly"    {{ ($project->maintenance_report_cycle ?? '') === 'quarterly'    ? 'selected' : '' }}>每季（3個月）</option>
                <option value="semiannually" {{ ($project->maintenance_report_cycle ?? '') === 'semiannually' ? 'selected' : '' }}>每半年</option>
              </select>
            </td>

            {{-- 寄送時間 --}}
            <td class="inline-form">
              <div class="time-inputs">
                <span class="text-muted small">每月</span>
                <select class="form-select form-select-sm field-select" data-id="{{ $project->id }}" data-field="maintenance_report_send_day" style="width:72px;">
                  @for($d = 1; $d <= 28; $d++)
                    <option value="{{ $d }}" {{ ($project->maintenance_report_send_day ?? 1) == $d ? 'selected' : '' }}>{{ $d }}</option>
                  @endfor
                </select>
                <span class="text-muted small">號</span>
                <select class="form-select form-select-sm field-select" data-id="{{ $project->id }}" data-field="maintenance_report_send_hour" style="width:72px;">
                  @for($h = 0; $h <= 23; $h++)
                    <option value="{{ $h }}" {{ ($project->maintenance_report_send_hour ?? 8) == $h ? 'selected' : '' }}>{{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00</option>
                  @endfor
                </select>
              </div>
            </td>

            {{-- 收件人 --}}
            <td class="inline-form">
              <input type="text"
                     class="form-control form-control-sm field-input"
                     data-id="{{ $project->id }}"
                     data-field="maintenance_report_recipient"
                     value="{{ $project->maintenance_report_recipient }}"
                     placeholder="email1@example.com, email2@example.com"
                     style="min-width:240px;">
              <div class="form-text mt-0">多個信箱用逗號分隔</div>
            </td>

            {{-- 上次寄送 --}}
            <td>
              @if($project->last_maintenance_report_at)
                <span class="last-sent">
                  <i class="bi bi-check-circle-fill text-success me-1"></i>
                  {{ $project->last_maintenance_report_at->format('Y-m-d H:i') }}
                </span>
              @else
                <span class="last-sent text-secondary">尚未寄送</span>
              @endif
            </td>

            {{-- 操作 --}}
            <td class="text-center">
              <div class="d-flex flex-column align-items-center gap-1">
                <button class="btn btn-sm btn-outline-primary send-now-btn"
                        data-id="{{ $project->id }}"
                        title="立即寄送（不受排程時間限制）">
                  <i class="bi bi-send me-1"></i>立即寄送
                </button>
                <span class="save-indicator" id="saved-{{ $project->id }}">
                  <i class="bi bi-check2"></i> 已儲存
                </span>
              </div>
            </td>

          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
const CSRF = '{{ csrf_token() }}';

// ── 收集整列資料並 PATCH ──────────────────────────────────────────────────
function saveRow(projectId) {
  const row    = document.getElementById('row-' + projectId);
  const enabled = row.querySelector('.enable-toggle').checked;

  const payload = {
    send_maintenance_report:      enabled ? 1 : 0,
    maintenance_report_cycle:     row.querySelector('[data-field="maintenance_report_cycle"]').value,
    maintenance_report_send_day:  row.querySelector('[data-field="maintenance_report_send_day"]').value,
    maintenance_report_send_hour: row.querySelector('[data-field="maintenance_report_send_hour"]').value,
    maintenance_report_recipient: row.querySelector('[data-field="maintenance_report_recipient"]').value,
  };

  fetch(`/settings/maintenance-reports/${projectId}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': CSRF,
      'Accept': 'application/json',
    },
    body: JSON.stringify(payload),
  })
  .then(r => r.ok ? r.json() : Promise.reject(r))
  .then(() => {
    const ind = document.getElementById('saved-' + projectId);
    ind.style.display = 'inline';
    setTimeout(() => { ind.style.display = 'none'; }, 2500);
  })
  .catch(() => alert('儲存失敗，請重試'));
}

// ── 開關切換 ──────────────────────────────────────────────────────────────
document.querySelectorAll('.enable-toggle').forEach(toggle => {
  toggle.addEventListener('change', function() {
    const row = document.getElementById('row-' + this.dataset.id);
    if (this.checked) {
      row.classList.remove('disabled-row');
      row.dataset.enabled = '1';
    } else {
      row.classList.add('disabled-row');
      row.dataset.enabled = '0';
    }
    applyFilters();
    saveRow(this.dataset.id);
  });
});

// ── 下拉選單即時儲存 ──────────────────────────────────────────────────────
document.querySelectorAll('.field-select').forEach(sel => {
  sel.addEventListener('change', function() {
    saveRow(this.dataset.id);
  });
});

// ── 文字欄位 blur 儲存 ────────────────────────────────────────────────────
document.querySelectorAll('.field-input').forEach(input => {
  let timer;
  input.addEventListener('input', function() {
    clearTimeout(timer);
    timer = setTimeout(() => saveRow(this.dataset.id), 800);
  });
});

// ── 立即寄送 ─────────────────────────────────────────────────────────────
document.querySelectorAll('.send-now-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const id = this.dataset.id;
    if (!confirm('確定要立即寄出此專案的維護報告？')) return;

    this.disabled = true;
    this.innerHTML = '<i class="bi bi-hourglass-split me-1"></i>寄送中…';

    fetch(`/settings/maintenance-reports/${id}/send-now`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
    })
    .then(r => r.ok ? r.json() : r.json().then(d => Promise.reject(d)))
    .then(() => {
      this.innerHTML = '<i class="bi bi-check2 me-1"></i>已寄出';
      setTimeout(() => {
        this.disabled = false;
        this.innerHTML = '<i class="bi bi-send me-1"></i>立即寄送';
      }, 3000);
    })
    .catch(d => {
      alert('❌ ' + (d.error || '寄送失敗'));
      this.disabled = false;
      this.innerHTML = '<i class="bi bi-send me-1"></i>立即寄送';
    });
  });
});

// ── 搜尋 + 篩選 ───────────────────────────────────────────────────────────
const searchInput  = document.getElementById('search-input');
const searchClear  = document.getElementById('search-clear');
const visibleCount = document.getElementById('visible-count');
const allRows      = document.querySelectorAll('.schedule-row');

function applyFilters() {
  const q       = searchInput.value.trim().toLowerCase();
  const filter  = document.querySelector('input[name="filter"]:checked').id;
  let shown = 0;

  allRows.forEach(row => {
    const matchText   = !q || row.dataset.project.includes(q) || row.dataset.client.includes(q);
    const matchFilter = filter === 'f-all'
      || (filter === 'f-enabled'  && row.dataset.enabled === '1')
      || (filter === 'f-disabled' && row.dataset.enabled === '0');

    const visible = matchText && matchFilter;
    row.style.display = visible ? '' : 'none';
    if (visible) shown++;
  });

  visibleCount.textContent = shown;
  searchClear.style.display = q ? '' : 'none';
}

searchInput.addEventListener('input', applyFilters);
searchClear.addEventListener('click', () => { searchInput.value = ''; applyFilters(); searchInput.focus(); });
document.querySelectorAll('input[name="filter"]').forEach(r => r.addEventListener('change', applyFilters));
</script>
@endpush