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

@section('module-content')
<!-- 路由資料（供 JS 使用） -->
<meta name="time-records-index-url" content="{{ route('panel.staff.time-records') }}">
<meta name="time-records-show-url" content="{{ route('panel.staff.time-records.show', ['year' => 'YEAR', 'week' => 'WEEK']) }}">

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10">
            <!-- 主卡片容器 -->
            <div class="card shadow-sm border-0 rounded-3">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="card-title text-primary fw-bold mb-0">
                        工時填報系統
                    </h5>
                </div>

                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <div class="p-3 rounded-3 d-inline-block mb-3">
                            <i class="fas fa-clock fa-3x text-primary"></i>
                        </div>
                        <h4 class="fw-bold">週報工時填報</h4>
                        <p class="text-muted">請選擇要填報的週次，系統將顯示該週的工時填報表</p>
                    </div>

                    {{-- 表單容器 --}}
                    <form method="GET" action="{{ route('panel.staff.time-records') }}" class="mb-4"
                          data-current-year="{{ $currentYear }}"
                          data-current-week="{{ $currentWeek }}">
                        <div class="row g-3 justify-content-center">
                            <div class="col-md-9">
                                <label for="week" class="form-label fw-medium">
                                    選擇週次
                                </label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text bg-light border-end-0">
                                        <i class="fas fa-calendar-alt text-primary"></i>
                                    </span>
                                    <select id="week" name="week" class="form-select border-start-0 ps-0 py-2">
                                        @foreach($weekOptions as $option)
                                            <option value="{{ $option['value'] }}" {{ ($option['year'] == $currentYear && $option['week'] == $currentWeek) ? 'selected' : '' }}>
                                                {{ $option['label'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="d-grid gap-2">
                                    <button type="button" id="view-button" class="btn btn-primary py-2 fw-medium">
                                        <i class="fas fa-edit me-2"></i>開始填報
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="row g-3 justify-content-center">
                        <div class="col-md-9">
                            <div class="d-flex justify-content-between border-top pt-3 mt-2">
                                <button type="button" id="previous-week" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-chevron-left me-1"></i>上週
                                </button>

                                <button type="button" id="current-week" class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-dot-circle me-1"></i>本週
                                </button>

                                <button type="button" id="next-week" class="btn btn-outline-secondary btn-sm">
                                    下週<i class="fas fa-chevron-right ms-1"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('module-scripts')
    @vite('Modules/Task/resources/assets/js/time-records/index.js')
@endpush

@push('module-styles')
<link rel="stylesheet" href="{{ Module::asset('task:css/time-records.css') }}">
@endpush