@extends('layouts.app')
@section('title', 'SSL 已完成清單')

@push('styles')
@include('ssl._styles')
@endpush

@section('content')
<div class="ssl-page">
  @include('ssl._sidebar')

  <main class="ssl-main">
    @foreach(['success','error'] as $k)
      @if(session($k))
        <div class="alert alert-{{ $k === 'error' ? 'danger' : 'success' }} alert-dismissible fade show mb-3">
          {{ session($k) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      @endif
    @endforeach

    {{-- 批次操作列 --}}
    <div id="batchBar" style="display:none;position:sticky;top:66px;z-index:100;background:#1e40af;color:#fff;padding:8px 16px;border-radius:8px;margin-bottom:10px;align-items:center;gap:12px;">
      <span class="fw-semibold me-2">已選 <span id="batchCnt">0</span> 筆</span>
      <form id="batchForm" method="POST" action="{{ route('ssl-csr.destroyBatch') }}" style="display:inline;">
        @csrf @method('DELETE')
        <div id="batchIds"></div>
        <button type="button" id="batchDelBtn" class="btn btn-sm btn-danger me-2">
          <i class="bi bi-trash me-1"></i>批次刪除
        </button>
      </form>
      <button type="button" id="batchCancelBtn" class="btn btn-sm btn-outline-light">取消選取</button>
    </div>

    <div class="ssl-card">
      <div class="ssl-card-head">
        <div class="ssl-card-icon" style="background:linear-gradient(135deg,#10b981,#059669);">
          <i class="bi bi-list-ul text-white"></i>
        </div>
        <div class="flex-grow-1">
          <div class="ssl-card-title">已完成 CSR 清單</div>
          <div class="ssl-card-sub">已產生的 CSR 與 Key 檔案</div>
        </div>
        <a href="{{ route('ssl-csr.index') }}" class="btn btn-sm btn-outline-primary">
          <i class="bi bi-plus-lg me-1"></i>新增 CSR
        </a>
      </div>
      <div class="ssl-card-body p-0">
        @if(count($files) > 0)
          <div class="table-responsive">
            <table id="dt" class="table table-hover align-middle mb-0" style="font-size:.875rem;">
              <thead class="table-light">
                <tr>
                  <th style="width:36px;" class="text-center">
                    <input type="checkbox" id="chkAll" class="form-check-input" title="全選">
                  </th>
                  <th class="text-center text-muted" style="width:48px;font-size:.75rem;">#</th>
                  <th class="ps-2">檔案識別碼</th>
                  <th>網域名稱 (CN)</th>
                  <th>產生時間</th>
                  <th class="text-center">下載</th>
                  <th class="text-center">動作</th>
                </tr>
              </thead>
              <tbody>
                @foreach($files as $file)
                  <tr>
                    <td class="text-center">
                      <input type="checkbox" class="form-check-input row-cb"
                             value="{{ $file['csr_filename'] }}" data-name="files[]">
                    </td>
                    <td class="text-center text-muted" style="font-size:.75rem;">{{ $loop->iteration }}</td>
                    <td class="ps-2">
                      <code class="text-secondary" style="font-size:.78rem;">{{ $file['csr_filename'] }}</code>
                    </td>
                    <td class="fw-medium">{{ $file['common_name'] }}</td>
                    <td class="text-muted">{{ $file['created_at'] }}</td>
                    <td class="text-center">
                      <a href="{{ route('ssl-csr.download', ['type' => 'csr', 'filename' => $file['csr_filename']]) }}"
                         class="btn btn-xs btn-outline-primary me-1" title="下載 CSR">
                        <i class="bi bi-file-earmark-text me-1"></i>CSR
                      </a>
                      <a href="{{ route('ssl-csr.download', ['type' => 'key', 'filename' => $file['key_filename']]) }}"
                         class="btn btn-xs btn-outline-secondary" title="下載 Key">
                        <i class="bi bi-key me-1"></i>Key
                      </a>
                    </td>
                    <td class="text-center">
                      <form action="{{ route('ssl-csr.sendEmail', ['id' => $file['csr_filename']]) }}" method="POST" class="d-inline">
                        @csrf
                        <input type="hidden" name="csr_filename" value="{{ $file['csr_filename'] }}">
                        <input type="hidden" name="key_filename" value="{{ $file['key_filename'] }}">
                        <input type="hidden" name="common_name" value="{{ $file['common_name'] }}">
                        <button type="submit" class="btn btn-xs btn-outline-info me-1" title="寄信">
                          <i class="bi bi-envelope"></i>
                        </button>
                      </form>
                      <button type="button" class="btn btn-xs btn-outline-danger"
                              data-bs-toggle="modal"
                              data-bs-target="#delModal_{{ $loop->index }}"
                              title="刪除">
                        <i class="bi bi-trash"></i>
                      </button>

                      <div class="modal fade" id="delModal_{{ $loop->index }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-sm">
                          <div class="modal-content">
                            <form action="{{ route('ssl-csr.delete', ['filename' => $file['csr_filename']]) }}" method="POST">
                              @csrf @method('DELETE')
                              <div class="modal-header border-0 pb-0">
                                <h6 class="modal-title fw-bold text-danger">
                                  <i class="bi bi-exclamation-triangle me-1"></i>確認刪除
                                </h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                              </div>
                              <div class="modal-body pt-2" style="font-size:.875rem;">
                                確定刪除 <strong>{{ $file['csr_filename'] }}</strong> 及其私鑰？<br>
                                <span class="text-danger small">此操作無法還原。</span>
                              </div>
                              <div class="modal-footer border-0 pt-0">
                                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-sm btn-danger">確認刪除</button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @else
          <div class="text-center py-5 text-muted">
            <i class="bi bi-inbox fs-1 d-block mb-2 opacity-25"></i>
            目前沒有任何 CSR 檔案
          </div>
        @endif
      </div>
    </div>
  </main>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const table = document.querySelector('#dt');
  if (table) {
    new DataTable(table, {
      language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
      ordering: true,
      pageLength: 15,
      lengthMenu: [[10, 15, 25, 50], [10, 15, 25, 50]],
      columnDefs: [
        { orderable: false, searchable: false, targets: [0, 1, 5, 6] },
        { render: (_, __, ___, meta) => meta.row + 1, targets: 1 },
      ],
    });
  }

  // ── 批次刪除邏輯 ──
  const batchBar    = document.getElementById('batchBar');
  const batchCnt    = document.getElementById('batchCnt');
  const batchIds    = document.getElementById('batchIds');
  const batchDelBtn = document.getElementById('batchDelBtn');
  const batchCancel = document.getElementById('batchCancelBtn');
  const chkAll      = document.getElementById('chkAll');

  function updateBatchBar() {
    const checked = document.querySelectorAll('.row-cb:checked');
    batchCnt.textContent = checked.length;
    batchBar.style.display = checked.length > 0 ? 'flex' : 'none';
    chkAll.indeterminate = checked.length > 0 && checked.length < document.querySelectorAll('.row-cb').length;
    chkAll.checked = checked.length > 0 && checked.length === document.querySelectorAll('.row-cb').length;
  }

  document.addEventListener('change', e => {
    if (e.target.id === 'chkAll') {
      document.querySelectorAll('.row-cb').forEach(cb => cb.checked = e.target.checked);
    }
    updateBatchBar();
  });

  batchDelBtn.addEventListener('click', () => {
    const checked = document.querySelectorAll('.row-cb:checked');
    if (!checked.length) return;
    if (!confirm(`確定刪除選取的 ${checked.length} 筆 CSR 及其私鑰？此操作無法還原。`)) return;
    batchIds.innerHTML = '';
    checked.forEach(cb => {
      const inp = document.createElement('input');
      inp.type = 'hidden'; inp.name = 'files[]'; inp.value = cb.value;
      batchIds.appendChild(inp);
    });
    document.getElementById('batchForm').submit();
  });

  batchCancel.addEventListener('click', () => {
    document.querySelectorAll('.row-cb').forEach(cb => cb.checked = false);
    if (chkAll) chkAll.checked = false;
    updateBatchBar();
  });
});
</script>
<style>.btn-xs { padding:.2rem .5rem; font-size:.75rem; }</style>
@endpush