@extends('layouts.app')

@section('title', '📋 簽到退管理')

@push('styles')
<link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
<style>
.absent-chip {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .78rem;
    background: #f8d7da;
    color: #842029;
    margin: .15rem;
}
[data-bs-theme="dark"] .absent-chip {
    background: #4a1a1e;
    color: #f8d7da;
}
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <h4 class="mb-0"><i class="bi bi-people-fill me-2"></i>簽到退管理</h4>
    <div class="d-flex gap-2">
      <a href="{{ route('attendance.stats') }}" class="btn btn-sm btn-outline-primary">
        <i class="bi bi-bar-chart-line me-1"></i>工時統計
      </a>
      <a href="{{ route('attendance.settings') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-gear me-1"></i>簽到退設定
      </a>
    </div>
  </div>

  {{-- 篩選列 --}}
  <form method="GET" class="card shadow-sm mb-4">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-sm-6 col-md-2">
          <label class="form-label small mb-1">開始日期</label>
          <input type="date" name="date_from" class="form-control form-control-sm"
                 value="{{ $dateFrom }}" max="{{ now()->toDateString() }}">
        </div>
        <div class="col-sm-6 col-md-2">
          <label class="form-label small mb-1">結束日期</label>
          <input type="date" name="date_to" class="form-control form-control-sm"
                 value="{{ $dateTo }}" max="{{ now()->toDateString() }}">
        </div>
        <div class="col-sm-6 col-md-2">
          <label class="form-label small mb-1" for="department">部門</label>
          <select name="department" class="form-select form-select-sm" id="department">
            <option value="">全部部門</option>
            @foreach($departments as $d)
            <option value="{{ $d }}" {{ $dept==$d?'selected':'' }}>{{ $d }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-6 col-md-2">
          <label class="form-label small mb-1" for="user_id">人員</label>
          <select name="user_id" class="form-select form-select-sm" id="user_id">
            <option value="">全部人員</option>
            @foreach($users as $u)
            <option value="{{ $u->id }}" {{ $userId==$u->id?'selected':'' }}>
              {{ $u->name }}@if($u->department)（{{ $u->department }}）@endif
              @if($u->is_contractor)【委外】@endif
            </option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-6 col-md-1">
          <label class="form-label small mb-1" for="type">類型</label>
          <select name="type" class="form-select form-select-sm" id="type">
            <option value="">全部</option>
            @foreach(\App\Models\Attendance::TYPES as $k => $v)
            <option value="{{ $k }}" {{ $type==$k?'selected':'' }}>{{ $v['label'] }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-6 col-md-2 d-flex align-items-end gap-3 pb-1">
          <div class="form-check form-check-sm mb-0">
            <input class="form-check-input" type="checkbox" name="include_contractor" value="1"
                   id="incContractor" {{ $includeContractor ? 'checked' : '' }}>
            <label class="form-check-label small text-muted" for="incContractor">含委外廠商</label>
          </div>
        </div>
        <div class="col-sm-6 col-md-1">
          <button class="btn btn-primary btn-sm w-100">
            <i class="bi bi-search me-1"></i>查詢
          </button>
        </div>
      </div>
    </div>
  </form>

  {{-- 出缺席摘要（單日時顯示）--}}
  @if($summary)
  <div class="row g-3 mb-4">
    <div class="col-sm-4">
      <div class="card text-center border-0 shadow-sm">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold text-success">{{ $summary['present'] }}</div>
          <div class="small text-muted">已打上班卡</div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card text-center border-0 shadow-sm">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold text-danger">{{ $summary['absent']->count() }}</div>
          <div class="small text-muted">尚未打上班卡</div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card text-center border-0 shadow-sm">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold text-secondary">{{ $summary['total'] }}</div>
          <div class="small text-muted">全體人員</div>
        </div>
      </div>
    </div>
    @if($summary['absent']->isNotEmpty())
    <div class="col-12">
      <div class="card border-danger-subtle shadow-sm">
        <div class="card-header py-2 small fw-semibold text-danger">
          <i class="bi bi-person-x me-1"></i>尚未上班簽到退人員
        </div>
        <div class="card-body py-2">
          @foreach($summary['absent'] as $abUser)
          <span class="absent-chip">
            {{ $abUser->name }}
            @if($abUser->department)<small class="opacity-75">・{{ $abUser->department }}</small>@endif
          </span>
          @endforeach
        </div>
      </div>
    </div>
    @endif
  </div>
  @endif

  {{-- 簽到退紀錄表 --}}
  <div class="card shadow-sm">
    <div class="card-header d-flex align-items-center justify-content-between py-2">
      <span class="small fw-semibold">
        共 <strong>{{ $records->count() }}</strong> 筆紀錄
        　{{ $dateFrom === $dateTo ? $dateFrom : "$dateFrom ～ $dateTo" }}
      </span>
      <a href="{{ route('attendance.export', array_filter(['date_from'=>$dateFrom,'date_to'=>$dateTo,'user_id'=>$userId,'department'=>$dept,'type'=>$type,'include_contractor'=>$includeContractor?'1':null])) }}"
         class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-download me-1"></i>匯出 CSV
      </a>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table id="attTable" class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>日期</th>
              <th>時間</th>
              <th>姓名</th>
              <th>部門</th>
              <th>類型</th>
              <th>備註</th>
              <th>IP</th>
            </tr>
          </thead>
          <tbody>
            @forelse($records as $r)
            <tr>
              <td class="text-nowrap">{{ $r->clocked_at->format('Y-m-d') }}</td>
              <td class="text-nowrap fw-semibold">{{ $r->clocked_at->format('H:i:s') }}</td>
              <td class="text-nowrap">{{ $r->user->name ?? '—' }}</td>
              <td class="text-nowrap text-muted small">{{ $r->user->department ?? '—' }}</td>
              <td><span class="badge bg-{{ $r->typeColor() }}">{{ $r->typeLabel() }}</span></td>
              <td class="text-muted small">{{ $r->note ?? '—' }}</td>
              <td class="text-muted small font-monospace">{{ $r->ip_address ?? '—' }}</td>
            </tr>
            @empty
            <tr><td colspan="7" class="text-center text-muted py-4">查無紀錄</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="/vendor/datatables/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function () {
    @if($records->count() > 0)
    $('#attTable').DataTable({
        order: [[0,'desc'],[1,'desc']],
        pageLength: 50,
        language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
        columnDefs: [{ targets: [5,6], orderable: false }]
    });
    @endif
});
</script>
@endpush