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

@section('module-content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            {{-- 週數選擇卡片 --}}
            <div class="card shadow-sm border-0 mb-4 hover-card">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="text-primary fw-bold mb-0">
                        <i class="fas fa-calendar-week me-2"></i>依週數查詢
                    </h5>
                    <span class="badge bg-primary-subtle text-primary px-3 py-2">週數查詢</span>
                </div>
                <div class="card-body p-4">
                    <form id="week-form">
                        <div class="row g-4 mb-4">
                            <div class="col-md-10">
                                <label class="form-label fw-bold mb-3">選擇週數範圍</label>
                                <div class="d-flex gap-3 align-items-center">
                                    <div class="flex-grow-1">
                                        <select name="start_week" class="form-select form-select-lg" id="start-week-select">
                                            <option value="">請選擇開始週</option>
                                            @foreach($weeks as $key => $label)
                                                @php
                                                    [$year, $week] = explode('-', $key);
                                                @endphp
                                                <option value="{{ $key }}" data-year="{{ $year }}" data-week="{{ $week }}">
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="fw-bold text-muted">至</div>
                                    <div class="flex-grow-1">
                                        <select name="end_week" class="form-select form-select-lg" id="end-week-select">
                                            <option value="">請選擇結束週</option>
                                            @foreach($weeks as $key => $label)
                                                @php
                                                    [$year, $week] = explode('-', $key);
                                                @endphp
                                                <option value="{{ $key }}" data-year="{{ $year }}" data-week="{{ $week }}">
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <button type="submit" class="btn btn-primary btn-lg d-block w-100 hover-btn">
                                    <i class="fas fa-search me-2"></i>查詢
                                </button>
                            </div>
                        </div>

                        {{-- 快速選擇按鈕 --}}
                        <div class="quick-select-buttons">
                            <div class="d-flex gap-2 justify-content-center flex-wrap">
                                <button type="button" class="btn btn-outline-primary hover-btn" data-period="this-week">
                                    <i class="fas fa-calendar-day me-1"></i>本週
                                </button>
                                <button type="button" class="btn btn-outline-primary hover-btn" data-period="last-week">
                                    <i class="fas fa-calendar-day me-1"></i>上週
                                </button>
                                <button type="button" class="btn btn-outline-primary hover-btn" data-period="this-month">
                                    <i class="fas fa-calendar-week me-1"></i>本月
                                </button>
                                <button type="button" class="btn btn-outline-primary hover-btn" data-period="last-month">
                                    <i class="fas fa-calendar-week me-1"></i>上月
                                </button>
                                <button type="button" class="btn btn-outline-primary hover-btn" data-period="this-quarter">
                                    <i class="fas fa-calendar-alt me-1"></i>本季
                                </button>
                                <button type="button" class="btn btn-outline-primary hover-btn" data-period="last-quarter">
                                    <i class="fas fa-calendar-alt me-1"></i>上季
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- 日期範圍選擇卡片 --}}
            <div class="card shadow-sm border-0 hover-card">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="text-primary fw-bold mb-0">
                        <i class="fas fa-calendar-alt me-2"></i>依日期範圍查詢
                    </h5>
                    <span class="badge bg-primary-subtle text-primary px-3 py-2">日期查詢</span>
                </div>
                <div class="card-body p-4">
                    <form id="date-form">
                        <div class="row g-4">
                            <div class="col-md-10">
                                <label class="form-label fw-bold">選擇日期範圍</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text bg-light border-0">
                                        <i class="fas fa-calendar"></i>
                                    </span>
                                    <input type="text" id="date-range" class="form-control border-start-0"
                                           placeholder="選擇日期範圍" readonly>
                                    <input type="hidden" name="start_date">
                                    <input type="hidden" name="end_date">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <button type="submit" class="btn btn-primary btn-lg d-block w-100 hover-btn">
                                    <i class="fas fa-search me-2"></i>查詢
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('meta')
<meta name="period-statistics-show-url" content="{{ route('panel.task.period-statistics.show', ['start_year' => ':start_year', 'start_week' => ':start_week', 'end_year' => ':end_year', 'end_week' => ':end_week']) }}">
@endpush

@push('scripts')
@vite('resources/js/moment.js')
@vite('resources/js/flatpickr.js')
<script src="{{ Module::asset('task:js/period-statistics/index.js') }}"></script>
@endpush