@extends('user::layouts/panel')

@section('module-content')

    <!-- 添加篩選區塊 -->
    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white py-3 border-bottom-0">
            <h5 class="card-title text-primary fw-bold mb-0">
                <i class="fas fa-filter me-2"></i>專案篩選
            </h5>
        </div>
        <div class="card-body">
            <form id="projectFilter" class="mb-0">
                <div class="row g-3">
                    <!-- 客戶篩選 -->
                    <div class="col-md-3">
                        <label for="clientFilter" class="form-label d-flex align-items-center">
                            <i class="fas fa-building me-2 text-secondary"></i>
                            <span>客戶</span>
                        </label>
                        <select class="form-select select2" id="clientFilter" data-placeholder="選擇客戶">
                            <option value="">全部客戶</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- 技術類型篩選 -->
                    <div class="col-md-3">
                        <label for="techTypeFilter" class="form-label d-flex align-items-center">
                            <i class="fas fa-code me-2 text-secondary"></i>
                            <span>技術類型</span>
                        </label>
                        <select class="form-select select2" id="techTypeFilter" data-placeholder="選擇技術類型">
                            <option value="">全部技術類型</option>
                            @foreach($techTypes as $techType)
                                <option value="{{ $techType->id }}">{{ $techType->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- 專案類型篩選 -->
                    <div class="col-md-3">
                        <label for="projectTypeFilter" class="form-label d-flex align-items-center">
                            <i class="fas fa-th-large me-2 text-secondary"></i>
                            <span>專案類型</span>
                        </label>
                        <select class="form-select select2" id="projectTypeFilter" data-placeholder="選擇專案類型">
                            <option value="">全部專案類型</option>
                            @foreach($projectTypeKeys as $type)
                                <option value="{{ $type }}">{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- 專案狀態篩選 -->
                    <div class="col-md-3">
                        <label for="statusFilter" class="form-label d-flex align-items-center">
                            <i class="fas fa-tag me-2 text-secondary"></i>
                            <span>專案狀態</span>
                        </label>
                        <select class="form-select select2" id="statusFilter" data-placeholder="選擇專案狀態">
                            <option value="">全部狀態</option>
                            <option value="開發/執行">開發/執行</option>
                            <option value="保固">保固</option>
                            <option value="維護">維護</option>
                            <option value="其他">其他</option>
                            <option value="已完成">已完成</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow border-0">
        <div class="card-header bg-white py-3 border-bottom-0">
            <div class="d-flex justify-content-between align-items-center">
                <!-- 新增搜尋框 -->
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="fas fa-search text-muted"></i>
                        </span>
                        <input type="text" class="form-control border-start-0" id="globalSearch" placeholder="搜尋專案...">
                    </div>
                </div>

                <a href="{{ route('panel.project.projects.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>新增專案
                </a>
            </div>
        </div>

        <div class="card-body">
            <table id="dataTable" class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>流水編號</th>
                        <th>專案名稱</th>
                        <th>客戶</th>
                        <th>技術類型</th>
                        <th>專案類型</th>
                        <th>狀態</th>
                        <th>更新時間</th>
                        <th class="text-end">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 動態填充內容 -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- 引入刪除確認 Modal -->
    @include('custom::components.modal.delete', ['title' => '確認刪除專案?'])
@endsection

@push('meta')
    <meta name="js-datatable-url" content="{{ route('panel.project.projects.dataTable') }}">
    <meta name="js-project-destroy-url" content="{{ route('panel.project.projects.destroy', ':id') }}">
@endpush

@push('module-scripts')
    @vite(['resources/js/datatable.js', 'Modules/Project/resources/assets/js/projects/index.js'])
@endpush

@push('links')
    @vite('resources/css/datatable.css')
@endpush