@extends('layouts.app')

@section('title', 'VPN 帳號申請紀錄')

@push('styles')
  {{-- DataTables CSS --}}
  <link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
  <div class="container py-4">
    <h1 class="mb-4">🔒 VPN 帳號申請紀錄</h1>

    {{-- 篩選表單 --}}
    @if (auth()->user()->role !== 'user')
      <form class="row g-2 mb-3" method="GET">
        <div class="col-auto">
          <select name="status" class="form-select">
            <option value="">全部狀態</option>
            @foreach (['pending_supervisor', 'pending_admin', 'approved', 'rejected'] as $s)
              <option value="{{ $s }}" {{ ($status ?? '') == $s ? 'selected' : '' }}>
                @switch($s)
                  @case('pending_supervisor')
                    待主管審核
                  @break

                  @case('pending_admin')
                    待管理者審核
                  @break

                  @case('approved')
                    已通過
                  @break

                  @case('rejected')
                    已拒絕
                  @break
                @endswitch
              </option>
            @endforeach
          </select>
        </div>
        <div class="col-auto">
          <button class="btn btn-primary">篩選</button>
        </div>
      </form>
    @endif

    <div class="card shadow-sm">
      <div class="card-body table-responsive">
        <table id="vpnTable" class="table table-striped table-bordered align-middle">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>帳號</th>
              <th>部門</th>
              <th>申請人</th>
              <th>申請日期</th>
              <th>狀態</th>
              <th>下載申請單</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($list as $row)
              <tr>
                <td>{{ $row->id }}</td>
                <td>{{ $row->username }}</td>
                <td>{{ $row->user->department }}</td>
                <td>{{ $row->user->name }}</td>
                <td>{{ $row->created_at->format('Y-m-d H:i') }}</td>
                <td>
                  @php
                    $color = match ($row->status) {
                        'approved' => 'success',
                        'rejected' => 'danger',
                        'pending_supervisor' => 'warning',
                        'pending_admin' => 'info',
                        default => 'secondary',
                    };
                  @endphp
                  <span class="badge bg-{{ $color }}">
                    @switch($row->status)
                      @case('pending_supervisor')
                        待主管審核
                      @break

                      @case('pending_admin')
                        待管理者審核
                      @break

                      @case('approved')
                        已通過
                      @break

                      @case('rejected')
                        已拒絕
                      @break

                      @default
                        未知狀態
                    @endswitch
                  </span>
                </td>
                <td>
                  @if ($row->status === 'approved')
                    <a href="{{ route('vpn-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('vpn-requests.show', $row) }}" class="btn btn-sm btn-outline-primary">
                    檢視
                  </a>
                  @if (!in_array($row->status, ['approved', 'rejected']))
                    <form action="{{ route('vpn-requests.destroy', $row) }}" method="POST" class="d-inline"
                      onsubmit="return confirm('確定要取消此申請？');">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="btn btn-sm btn-outline-danger">
                        取消
                      </button>
                    </form>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  {{-- jQuery & DataTables JS --}}
  <script src="https://code.jquery.com/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() {
      $('#vpnTable').DataTable({
        serverSide: false,
        processing: false,
        dom: 'lfrtip',
        order: [
          [4, 'desc']
        ], // 以申請日期排序
        pageLength: 20,
        language: {
          url: '/vendor/datatables/i18n/zh-HANT.json'
        }
      });
    });
  </script>
@endpush