@extends('layouts.admin')

@section('title', '問題追蹤板')

@push('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">問題追蹤板</li>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/issues/index.css') }}">
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1><i class="bi bi-kanban me-3"></i>問題追蹤板</h1>
        </div>
        <div class="col-md-6 text-md-right">
            <a href="{{ route('issues.create') }}" class="btn btn-success">
                <i class="bi bi-plus-circle me-2"></i>新增問題
            </a>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="filter-card">
    <form action="{{ route('issues.index') }}" method="GET">
        <div class="row">
            <div class="col-md-3 mb-3">
                <label class="form-label fw-bold">分類</label>
                <select name="category" class="form-select">
                    <option value="">所有分類</option>
                    <option value="工人問題" {{ request('category') == '工人問題' ? 'selected' : '' }}>工人問題</option>
                    <option value="宿舍問題" {{ request('category') == '宿舍問題' ? 'selected' : '' }}>宿舍問題</option>
                    <option value="公司問題" {{ request('category') == '公司問題' ? 'selected' : '' }}>公司問題</option>
                    <option value="店鋪問題" {{ request('category') == '店鋪問題' ? 'selected' : '' }}>店鋪問題</option>
                    <option value="其他問題" {{ request('category') == '其他問題' ? 'selected' : '' }}>其他問題</option>
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label fw-bold">狀態</label>
                <select name="status" class="form-select">
                    <option value="">所有狀態</option>
                    <option value="open" {{ request('status') == 'open' ? 'selected' : '' }}>開啟</option>
                    <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>處理中</option>
                    <option value="closed" {{ request('status') == 'closed' ? 'selected' : '' }}>已完結</option>
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label fw-bold">優先級</label>
                <select name="priority" class="form-select">
                    <option value="">所有優先級</option>
                    <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>緊急</option>
                    <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>高</option>
                    <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>中</option>
                    <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>低</option>
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label fw-bold">搜尋</label>
                <div class="input-group">
                    <input type="text" name="keyword" class="form-control" placeholder="搜尋問題..." value="{{ request('keyword') }}">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>
        @if(request('category') || request('status') || request('priority') || request('keyword'))
        <div class="row">
            <div class="col-12">
                <a href="{{ route('issues.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-x-circle me-1"></i>清除篩選
                </a>
            </div>
        </div>
        @endif
    </form>
</div>

<!-- Issues List -->
@foreach($issues as $issue)
<div class="issue-card priority-{{ $issue->priority }} {{ $issue->isClosed() ? 'closed' : '' }}">
    <div class="d-flex justify-content-between align-items-start">
        <div class="flex-grow-1">
            <div class="issue-title">
                @if($issue->isClosed())
                    <i class="bi bi-check-circle-fill text-success me-2"></i>
                @endif
                {{ $issue->title }}
            </div>
            <div class="issue-content">
                {{ Str::limit($issue->content, 150) }}
            </div>
            <div class="issue-meta">
                <span class="badge badge-category badge-{{ $issue->category == '工人問題' ? 'worker' : ($issue->category == '宿舍問題' ? 'dormitory' : ($issue->category == '公司問題' ? 'company' : ($issue->category == '店鋪問題' ? 'shop' : 'other'))) }}">
                    {{ $issue->category }}
                </span>
                <span class="badge badge-status status-{{ $issue->status }}">
                    {{ $issue->status_label }}
                </span>
                <span class="priority-{{ $issue->priority }}">
                    <i class="bi bi-flag-fill me-1"></i>優先級：{{ $issue->priority_label }}
                </span>
                @if($issue->due_date)
                    <span class="{{ $issue->isOverdue() ? 'overdue' : '' }}">
                        <i class="bi bi-calendar-event me-1"></i>
                        @if($issue->isOverdue())
                            <i class="bi bi-exclamation-triangle-fill me-1"></i>已逾期
                        @endif
                        {{ $issue->due_date->format('Y-m-d H:i') }}
                    </span>
                @endif
                <span>
                    <i class="bi bi-person me-1"></i>建立者：{{ $issue->user->name }}
                </span>
                @if($issue->assignedUser)
                    <span>
                        <i class="bi bi-person-badge me-1"></i>跟進人：{{ $issue->assignedUser->name }}
                    </span>
                @endif
                <span>
                    <i class="bi bi-clock me-1"></i>{{ $issue->created_at->diffForHumans() }}
                </span>
                <span class="reply-count">
                    <i class="bi bi-chat-dots me-1"></i>{{ $issue->replies->count() }} 回覆
                </span>
            </div>
        </div>
        <div class="ms-3">
            <a href="{{ route('issues.show', $issue->id) }}" class="btn btn-primary btn-sm">
                <i class="bi bi-eye me-1"></i>查看
            </a>
        </div>
    </div>
</div>
@endforeach

@if($issues->isEmpty())
<div class="text-center py-5">
    <i class="bi bi-inbox" style="font-size: 5rem; color: #dee2e6;"></i>
    <h4 class="text-muted mt-3">目前沒有問題</h4>
    <p class="text-muted">請點擊上方按鈕新增問題</p>
</div>
@endif

<!-- Pagination -->
@if($issues->hasPages())
<div class="d-flex justify-content-center mt-4">
    {{ $issues->links('pagination::bootstrap-5') }}
</div>
@endif
@endsection