@extends('layouts.app')
@section('title', '報修清單')

@section('content')
  <div class="container">
    <h1 class="mb-4">報修清單</h1>

    {{--  如果有額外篩選表單可放這裡 --}}

    <div class="table-responsive"><table id="dt" class="table table-striped align-middle">
      <thead>
        <tr>
          <th>#</th>
          <th>資產</th>
          <th>申請人</th>
          <th>原因</th>
          <th>狀態</th>
          <th>建立時間</th>
          @if (auth()->user()->role === 'admin')
            <th style="width:160px">操作</th>
          @endif
        </tr>
      </thead>
      <tbody>
        @foreach ($list as $row)
          <tr>
            <td>{{ $row->id }}</td>
            <td>{{ $row->asset->asset_name ?? '-' }}</td>
            <td>{{ $row->user->name }}</td>
            <td>{{ $row->reason }}</td>
            <td>
              @switch($row->status)
                @case('pending')
                  <span class="btn-status-pending">⚠️ 待處理</span>
                @break

                @case('in_progress')
                  <span class="btn-status-progress">🔧 維修中</span>
                @break

                @case('resolved')
                  <span class="btn-status-resolved">✅ 已完成</span>
                @break
              @endswitch
            </td>
            <td>{{ $row->created_at }}</td>

            @if (auth()->user()->role === 'admin')
              <td>
                {{-- 狀態下拉快速更新 --}}
                <form action="{{ route('repair-requests.update', $row) }}" method="POST" class="d-inline">
                  @csrf @method('PATCH')
                  <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="pending" {{ $row->status === 'pending' ? 'selected' : '' }}>待處理</option>
                    <option value="in_progress" {{ $row->status === 'in_progress' ? 'selected' : '' }}>維修中</option>
                    <option value="resolved" {{ $row->status === 'resolved' ? 'selected' : '' }}>已完成</option>
                  </select>
                </form>
              </td>
            @endif
          </tr>
        @endforeach
      </tbody>
    </table></div>
  </div>
@endsection

{{-- ③ 只推送 DataTables 初始化腳本 --}}
@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      if (document.querySelector('#dt')) {
        new DataTable('#dt', {
          language: {
            url: '/vendor/datatables/i18n/zh-HANT.json'
          },
          ordering: true,
          pageLength: 10
        });
      }
    });
  </script>
@endpush