@extends('layouts.app')

@section('title', '專案管理')

@push('styles')
  <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
  <style>
    .type-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; }
    .type-開發 { background: rgba(13,110,253,.12); color: #0a58ca; }
    .type-保固 { background: rgba(255,193,7,.18); color: #997404; }
    .type-維護 { background: rgba(25,135,84,.12); color: #146c43; }
    .type-其他 { background: rgba(108,117,125,.12); color: #495057; }
    .cat-product { background: rgba(220,53,69,.08); color: #842029; border: 1px solid rgba(220,53,69,.25); border-radius: 4px; padding: 1px 6px; font-size: .75rem; font-weight: 600; margin-right: 4px; }
    .cat-project { background: rgba(13,110,253,.08); color: #084298; border: 1px solid rgba(13,110,253,.2); border-radius: 4px; padding: 1px 6px; font-size: .75rem; font-weight: 600; margin-right: 4px; }
    .tool-pill { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: .72rem; background: rgba(108,117,125,.1); color: #495057; }
    .client-item:hover { background: var(--bs-tertiary-bg); }
    .client-item.active { background: rgba(13,110,253,.08); border-left-color: #0d6efd !important; color: #0d6efd; font-weight: 600; }
  </style>
@endpush

@section('content')
@php
  $activeCount = $projects->where('is_ended', false)->count();
  $endedCount  = $projects->where('is_ended', true)->count();
  $clientCounts = $projects->groupBy(fn($p) => $p->client_id ?? 0)
                            ->map->count();
@endphp
<div class="d-flex" style="min-height:100vh;">

  {{-- ===== 左側客戶清單 ===== --}}
  <div id="client-sidebar" style="width:200px; flex-shrink:0; border-right:1px solid var(--bs-border-color); overflow-y:auto; position:sticky; top:0; max-height:100vh; background:var(--bs-body-bg); transition:width .2s ease; overflow-x:hidden;">
    <div style="padding:10px 12px 6px; display:flex; align-items:center; justify-content:space-between;">
      <span id="sidebar-label" style="font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--bs-secondary-color);">客戶</span>
      <button id="sidebar-toggle" title="收合側欄" style="background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); border-radius:6px; cursor:pointer; color:var(--bs-secondary-color); padding:2px 8px; line-height:1.4; font-size:.85rem; transition:all .15s;" onmouseover="this.style.background='#0d6efd';this.style.color='#fff';this.style.borderColor='#0d6efd';" onmouseout="this.style.background='var(--bs-tertiary-bg)';this.style.color='var(--bs-secondary-color)';this.style.borderColor='var(--bs-border-color)';">&#8249;</button>
    </div>
    <div id="sidebar-body">
      <div class="client-item active" data-client-id="" style="padding:6px 14px; cursor:pointer; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; border-left:3px solid transparent;">
        <span>全部</span>
        <span class="badge bg-secondary" style="font-size:.7rem;">{{ $projects->count() }}</span>
      </div>
      @foreach($clients as $c)
        @php $cnt = $clientCounts[$c->id] ?? 0; @endphp
        @if($cnt > 0)
        <div class="client-item" data-client-id="{{ $c->id }}" style="padding:6px 14px; cursor:pointer; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; border-left:3px solid transparent; gap:4px;">
          <span style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $c->name }}</span>
          <span class="badge bg-light text-secondary border" style="font-size:.7rem; flex-shrink:0;">{{ $cnt }}</span>
        </div>
        @endif
      @endforeach
      @php $nullCnt = $clientCounts[0] ?? 0; @endphp
      @if($nullCnt > 0)
      <div class="client-item" data-client-id="null" style="padding:6px 14px; cursor:pointer; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; border-left:3px solid transparent; gap:4px;">
        <span class="text-muted">未分類</span>
        <span class="badge bg-light text-secondary border" style="font-size:.7rem; flex-shrink:0;">{{ $nullCnt }}</span>
      </div>
      @endif
    </div>
  </div>

<div class="flex-grow-1 py-4 px-3" style="min-width:0;">

  {{-- ====================== 到期提醒區塊 ====================== --}}
  @if ($soonToExpire->count())
    <div class="card mb-4 border-danger shadow-sm">
      <div class="card-header bg-danger text-white" style="cursor: pointer;" data-bs-toggle="collapse"
        data-bs-target="#expireAlert" aria-expanded="true">
        ⏰ 即將到期專案提醒 <span class="float-end"><small>(點擊可收合)</small></span>
      </div>
      <div class="collapse show" id="expireAlert">
        <div class="card-body">
          <ul class="mb-0">
            @foreach ($soonToExpire->sortBy(function ($exp) {
        return \Carbon\Carbon::parse($exp->end_date)->timestamp;
    }) as $exp)
              @php
                $end = \Carbon\Carbon::parse($exp->end_date);
                $now = \Carbon\Carbon::now();
                $daysLeft = $now->floatDiffInRealDays($end, false);
              @endphp
              @if ($daysLeft > 0)
                <li>
                  <strong>{{ $exp->name }}</strong>
                  （客戶：{{ $exp->client?->name ?? '未分類' }}）
                  結束日：<span class="text-danger">{{ $end->format('Y-m-d') }}</span>
                  （剩 {{ number_format($daysLeft, 1) }} 天）
                  <a href="{{ route('projects.edit', $exp) }}" class="ms-2 btn btn-sm btn-outline-secondary">編輯</a>
                </li>
              @endif
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  @endif

  <h1 class="mb-3">專案管理</h1>

  <div class="d-flex gap-2 mb-3 flex-wrap justify-content-end">
    <a href="{{ route('projects.create') }}" class="btn btn-success">➕ 新增專案</a>
    <a href="{{ route('projects.export', ['type' => 'xlsx']) }}" class="btn btn-outline-success">匯出 Excel</a>
    <a href="{{ route('projects.export', ['type' => 'csv']) }}" class="btn btn-outline-secondary">匯出 CSV</a>
  </div>

  {{-- 批次操作 toolbar --}}
  @can('create', App\Models\Project::class)
  <div id="bulkToolbar" class="d-none mb-3">
    <form id="bulkForm" action="{{ route('projects.bulk-update') }}" method="POST">
      @csrf
      <div id="bulkIdsContainer"></div>
      <div class="d-flex align-items-center gap-2 p-2 bg-light border rounded">
        <span class="fw-semibold small text-secondary">
          已選 <span id="selectedCount">0</span> 個專案
        </span>
        <select name="project_type" class="form-select form-select-sm" style="width:auto;" required>
          <option value="" disabled selected>— 選擇要變更的類型 —</option>
          <option value="開發">開發</option>
          <option value="保固">保固</option>
          <option value="維護">維護</option>
          <option value="產品">產品</option>
          <option value="結束">結束</option>
        </select>
        <button type="submit" class="btn btn-sm btn-primary">套用</button>
        <button type="button" id="clearSelection" class="btn btn-sm btn-outline-secondary">取消選取</button>
      </div>
    </form>
  </div>
  @endcan

  {{-- 篩選列 --}}
  <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <select id="filter-status" class="form-select form-select-sm" style="width:auto;">
      <option value="0">開啟中（{{ $activeCount }}）</option>
      <option value="1">結束（{{ $endedCount }}）</option>
      <option value="">全部狀態</option>
    </select>
    <select id="filter-category" class="form-select form-select-sm" style="width:auto;">
      <option value="">全部分類</option>
      <optgroup label="產品">
        <option value="產品|">產品 — 全部</option>
        <option value="產品|開發">產品 — 開發</option>
        <option value="產品|保固">產品 — 保固</option>
        <option value="產品|維護">產品 — 維護</option>
        <option value="產品|其他">產品 — 其他</option>
      </optgroup>
      <optgroup label="專案">
        <option value="專案|">專案 — 全部</option>
        <option value="專案|開發">專案 — 開發</option>
        <option value="專案|保固">專案 — 保固</option>
        <option value="專案|維護">專案 — 維護</option>
        <option value="專案|其他">專案 — 其他</option>
      </optgroup>
    </select>
    <select id="filter-tool" class="form-select form-select-sm" style="width:auto;">
      <option value="">全部框架</option>
      <option value="Laravel">Laravel</option>
      <option value="SMF">SMF</option>
      <option value="Wordpress">Wordpress</option>
      <option value="ZF2">ZF2</option>
      <option value="其他">其他</option>
    </select>
  </div>

  <div class="card shadow-sm">
    <div class="card-body table-responsive">
      <table id="projectsTable" class="table table-striped table-bordered align-middle">
        <thead class="table-light">
          <tr>
            <th style="display:none;"></th>{{-- col 0: id for sort --}}
            @can('create', App\Models\Project::class)
            <th style="width:36px;">
              <input type="checkbox" id="checkAll" class="form-check-input" title="全選目前頁">
            </th>
            @endcan
            <th style="width:12%;">分類 / 階段</th>
            <th style="width:18%;">客戶名稱</th>
            <th>專案名稱</th>
            <th style="width:9%;">開發框架</th>
            <th style="width:9%; white-space:nowrap;">起始日</th>
            <th style="width:9%; white-space:nowrap;">結束日</th>
            <th style="width:14%; white-space:nowrap;">操作</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($projects as $p)
            @php
              $catClass  = $p->project_category === '產品' ? 'cat-product' : 'cat-project';
              $typeClass = 'type-' . ($p->project_type ?? '其他');
            @endphp
            <tr data-ended="{{ $p->is_ended ? '1' : '0' }}"
                data-category="{{ $p->project_category ?? '' }}"
                data-ptype="{{ $p->project_type ?? '' }}"
                data-tool="{{ $p->dev_tool ?? '' }}"
                data-client-id="{{ $p->client_id ?? 'null' }}">
              <td style="display:none;">{{ $p->id }}</td>{{-- sort col --}}
              @can('create', App\Models\Project::class)
              <td class="text-center">
                <input type="checkbox" class="form-check-input row-check" value="{{ $p->id }}" title="{{ $p->name }}">
              </td>
              @endcan
              <td>
                <span class="{{ $catClass }}">{{ $p->project_category ?? '未分類' }}</span>
                <span class="{{ $typeClass }}">{{ $p->project_type ?? '其他' }}</span>
              </td>
              <td>{{ $p->client?->name ?? '未分類' }}</td>
              <td>{{ $p->name }}</td>
              <td>
                @if($p->dev_tool)
                  <span class="tool-pill">{{ $p->dev_tool }}</span>
                @else
                  <span class="text-muted">—</span>
                @endif
              </td>
              <td style="white-space:nowrap;">
                {{ $p->start_date ? \Carbon\Carbon::parse($p->start_date)->format('Y-m-d') : '—' }}
              </td>
              <td style="white-space:nowrap;">
                {{ $p->end_date ? \Carbon\Carbon::parse($p->end_date)->format('Y-m-d') : '—' }}
              </td>
              <td style="white-space:nowrap;">
                <a href="{{ route('projects.manage.show', $p) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-box-arrow-in-right me-1"></i>進入</a>
                <a href="{{ route('projects.edit', $p) }}" class="btn btn-sm btn-primary ms-1">編輯</a>
                <form action="{{ route('projects.destroy', $p) }}" method="POST" class="d-inline"
                  onsubmit="return confirm('確定刪除？')">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-danger ms-1">刪除</button>
                </form>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</div>{{-- flex-grow-1 --}}
</div>{{-- d-flex --}}
@endsection

@push('scripts')
  <script src="/vendor/vendor/jquery/jquery-3.7.1.min.js"></script>
  <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
  <script src="/vendor/datatables/js/dataTables.bootstrap5.min.js"></script>
  <script>
  $(function() {
    // ── Filter state ──
    var fs = { status: '0', cat: '', type: '', tool: '', client: '' };

    // ── Custom filter ──
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
      if (settings.nTable.id !== 'projectsTable') return true;
      var node = settings.aoData[dataIndex].nTr;
      if (!node) return true;
      var ended  = node.getAttribute('data-ended')    || '';
      var cat    = node.getAttribute('data-category') || '';
      var ptype  = node.getAttribute('data-ptype')    || '';
      var tool   = node.getAttribute('data-tool')     || '';
      var client = node.getAttribute('data-client-id')|| '';
      if (fs.status !== '' && ended  !== fs.status) return false;
      if (fs.cat    !== '' && cat    !== fs.cat)    return false;
      if (fs.type   !== '' && ptype  !== fs.type)   return false;
      if (fs.tool   !== '' && tool   !== fs.tool)   return false;
      if (fs.client !== '' && client !== fs.client) return false;
      return true;
    });

    // ── Sidebar collapse ──
    var sidebarCollapsed = false;
    $('#sidebar-toggle').on('click', function() {
      var sidebar = $('#client-sidebar');
      sidebarCollapsed = !sidebarCollapsed;
      if (sidebarCollapsed) {
        sidebar.css('width', '32px');
        $('#sidebar-body').hide();
        $('#sidebar-label').hide();
        $(this).html('&#8250;').attr('title', '展開側欄');
      } else {
        sidebar.css('width', '200px');
        $('#sidebar-body').show();
        $('#sidebar-label').show();
        $(this).html('&#8249;').attr('title', '收合側欄');
      }
    });

    // ── Client sidebar ──
    $('.client-item').on('click', function() {
      fs.client = $(this).data('client-id') !== undefined ? $(this).data('client-id') + '' : '';
      if (fs.client === 'undefined') fs.client = '';
      $('.client-item').removeClass('active');
      $(this).addClass('active');
      table.draw();
    });

    // ── Init DataTable ──
    var table = $('#projectsTable').DataTable({
      stateSave: false,
      autoWidth: false,
      dom: 'lfrtip',
      pageLength: 25,
      order: [[0, 'desc']],
      language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
      columnDefs: [
        { visible: false, targets: 0 }
        @can('create', App\Models\Project::class)
        ,{ orderable: false, targets: 1 }
        @endcan
        ,{ orderable: false, targets: -1 }
      ]
    });

    // Draw with default status filter immediately
    table.draw();

    // ── Filter selects ──
    $('#filter-status').on('change', function() {
      fs.status = $(this).val();
      table.draw();
    });

    $('#filter-category').on('change', function() {
      var parts = $(this).val().split('|');
      fs.cat  = parts[0] || '';
      fs.type = parts[1] !== undefined ? parts[1] : '';
      table.draw();
    });

    $('#filter-tool').on('change', function() {
      fs.tool = $(this).val();
      table.draw();
    });

    // Clear search button
    setTimeout(function() {
      var searchBox = $('#projectsTable_filter');
      if (!searchBox.find('.clear-search').length) {
        searchBox.append('<button type="button" class="btn btn-sm btn-outline-secondary ms-2 clear-search">清除搜尋</button>');
      }
      searchBox.on('click', '.clear-search', function() { table.search('').draw(); });
    }, 0);

    // ── Batch select ──
    var selected = new Set();

    function updateToolbar() {
      var count = selected.size;
      $('#selectedCount').text(count);
      $('#bulkToolbar').toggleClass('d-none', count === 0);
      $('#projectsTable .row-check').each(function() {
        this.checked = selected.has(this.value);
      });
      var pageChecks = $('#projectsTable .row-check');
      var checkedOnPage = pageChecks.filter(function() { return selected.has(this.value); }).length;
      $('#checkAll').prop('indeterminate', checkedOnPage > 0 && checkedOnPage < pageChecks.length);
      $('#checkAll').prop('checked', pageChecks.length > 0 && checkedOnPage === pageChecks.length);
    }

    $('#checkAll').on('change', function() {
      var checked = this.checked;
      $('#projectsTable .row-check').each(function() {
        if (checked) selected.add(this.value);
        else selected.delete(this.value);
      });
      updateToolbar();
    });

    $('#projectsTable').on('change', '.row-check', function() {
      if (this.checked) selected.add(this.value);
      else selected.delete(this.value);
      updateToolbar();
    });

    table.on('draw', updateToolbar);

    $('#clearSelection').on('click', function() {
      selected.clear();
      updateToolbar();
    });

    $('#bulkForm').on('submit', function() {
      if (selected.size === 0) { alert('請至少選擇一個專案'); return false; }
      var container = $('#bulkIdsContainer').empty();
      selected.forEach(function(id) {
        container.append('<input type="hidden" name="ids[]" value="' + id + '">');
      });
    });
  });
  </script>
@endpush