@extends('layouts.app')

@section('title', '電腦設備攜入╱攜出申請')

@section('content')
  <div class="container py-4">
    <h1 class="mb-4">💻 電腦設備申請紀錄</h1>

    @include('partials.alert')

    {{-- 🆕 ① 篩選 flow --}}
    <form class="row g-2 mb-3" method="GET">
      <div class="col-auto">
        <select name="flow" class="form-select">
          <option value="">攜入＋攜出</option>
          <option value="in" @selected(request('flow') === 'in')>只看攜入</option>
          <option value="out" @selected(request('flow') === 'out')>只看攜出</option>
        </select>
      </div>
      {{-- 原本 status 篩選（若需要） --}}
      <div class="col-auto">
        <select name="status" class="form-select">
          <option value="">全部狀態</option>
          @foreach (['pending_supervisor', 'pending_admin', 'approved', 'rejected', 'returned'] as $s)
            <option value="{{ $s }}" @selected(request('status') == $s)>
              {{ [
                  'pending_supervisor' => '待主管',
                  'pending_admin' => '待管理者',
                  'approved' => '已通過',
                  'rejected' => '已拒絕',
                  'returned' => '已攜回',
              ][$s] }}
            </option>
          @endforeach
        </select>
      </div>
      <div class="col-auto"><button class="btn btn-primary">篩選</button></div>
    </form>

    <div class="card shadow-sm">
      <div class="card-body table-responsive">
        <table id="deviceTable" class="table table-striped table-bordered align-middle">
          <thead class="table-light">
            <tr>
              <th style="width:60px">#</th>
              <th style="width:88px">🆕 類型</th> {{-- 新增 --}}
              <th style="width:140px">帳號</th>
              <th>部門</th>
              <th>申請人</th>
              <th>申請日期</th>
              <th>狀態</th>
              <th>下載</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($list as $row)
              @php
                $user = $row->user;
                $flowBg = $row->flow === 'in' ? 'success' : 'info'; // 綠=攜入  藍=攜出
                $flowTx = $row->flow === 'in' ? '攜入' : '攜出';
                $statusMap = [
                    'pending_supervisor' => ['warning', '待主管'],
                    'pending_admin' => ['primary', '待管理者'],
                    'approved' => ['success', '已通過'],
                    'rejected' => ['danger', '已拒絕'],
                    'returned' => ['secondary', '已攜回'],
                ];
                [$stBg, $stTx] = $statusMap[$row->status] ?? ['secondary', '未知'];
              @endphp
              <tr>
                <td>{{ $row->id }}</td>

                {{-- 🆕 flow 標籤 --}}
                <td><span class="badge bg-{{ $flowBg }}">{{ $flowTx }}</span></td>

                <td>{{ $user->username ?? $user->email }}</td>
                <td>{{ $user->department }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $row->created_at->format('Y-m-d H:i') }}</td>

                <td><span class="badge bg-{{ $stBg }}">{{ $stTx }}</span></td>

                <td>
                  @if ($row->status === 'approved' || $row->status === 'returned')
                    <a href="{{ route('device-requests.download', $row) }}"
                      class="btn btn-sm btn-outline-secondary">下載</a>
                  @else
                    <button class="btn btn-sm btn-outline-secondary" disabled>下載</button>
                  @endif
                </td>

                <td>
                  <a href="{{ route('device-requests.show', $row) }}" class="btn btn-sm btn-outline-primary">檢視</a>
                  {{-- 取消邏輯照舊 --}}
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    $(function() {
      if (!$.fn.DataTable.isDataTable('#deviceTable')) {
        $('#deviceTable').DataTable({
          order: [
            [5, 'desc']
          ],
          language: {
            url: '/vendor/datatables/i18n/zh-HANT.json'
          }
        });
      }
    });
  </script>
@endpush