@extends('layouts.app')

@section('title', '工時填報系統')

@push('styles')
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css">
<style>
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.pulse { animation: pulse 0.3s ease-in-out; }
</style>
@endpush

@section('content')
<div class="container py-4">

    <meta name="time-records-show-url"
          content="{{ route('time-records.show') }}?week=YEAR-WEEK">

    <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-circle d-inline-flex align-items-center justify-content-center mb-3"
                             style="background:#0d6efd;width:72px;height:72px">
                            <i class="fas fa-clock fa-2x text-white"></i>
                        </div>
                        <h4 class="fw-bold">週報工時填報</h4>
                        <p class="text-muted">請選擇要填報的週次，系統將顯示該週的工時填報表</p>
                    </div>

                    {{-- 週次選擇 --}}
                    <form method="GET" action="{{ route('time-records.show') }}"
                          id="week-form"
                          data-current-year="{{ now()->format('o') }}"
                          data-current-week="{{ now()->format('W') }}">
                        <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($options as $option)
                                            <option value="{{ $option['value'] }}"
                                                {{ ($option['year'] == now()->format('o') && $option['week'] == now()->format('W')) ? 'selected' : '' }}>
                                                {{ $option['label'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="d-grid">
                                    <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 mt-1">
                        <div class="col-md-9">
                            <div class="d-flex justify-content-between border-top pt-3 mt-1">
                                <button type="button" id="prev-week" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-chevron-left me-1"></i>上週
                                </button>
                                <button type="button" id="current-week-btn" 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('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const select    = document.getElementById('week');
    const viewBtn   = document.getElementById('view-button');
    const form      = document.getElementById('week-form');
    const currentY  = form.dataset.currentYear;
    const currentW  = form.dataset.currentWeek;

    // 開始填報：用 window.location 跳轉（避免 disabled submit 的瀏覽器相容問題）
    viewBtn.addEventListener('click', function () {
        const val = select.value;
        if (!val) return;
        viewBtn.disabled = true;
        viewBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>載入中...';
        window.location.href = '{{ route("time-records.show") }}?week=' + encodeURIComponent(val);
    });

    // 週次切換 → 按鈕閃爍
    select.addEventListener('change', function () {
        viewBtn.classList.add('pulse');
        setTimeout(() => viewBtn.classList.remove('pulse'), 300);
    });

    // 上週
    document.getElementById('prev-week').addEventListener('click', function () {
        if (select.selectedIndex < select.options.length - 1) {
            select.selectedIndex++;
            select.dispatchEvent(new Event('change'));
        }
    });

    // 下週
    document.getElementById('next-week').addEventListener('click', function () {
        if (select.selectedIndex > 0) {
            select.selectedIndex--;
            select.dispatchEvent(new Event('change'));
        }
    });

    // 本週
    document.getElementById('current-week-btn').addEventListener('click', function () {
        const target = currentY + '-' + currentW;
        for (let i = 0; i < select.options.length; i++) {
            if (select.options[i].value === target) {
                select.selectedIndex = i;
                select.dispatchEvent(new Event('change'));
                break;
            }
        }
    });

    // 鍵盤快捷鍵
    document.addEventListener('keydown', function (e) {
        if (e.target.tagName === 'BUTTON' || e.target.tagName === 'SELECT') return;
        if (e.key === 'Enter') {
            e.preventDefault();
            form.submit();
        } else if (e.key === 'ArrowLeft') {
            document.getElementById('prev-week').click();
        } else if (e.key === 'ArrowRight') {
            document.getElementById('next-week').click();
        }
    });
});
</script>
@endpush