@extends('layouts.app')

@section('title', '工時人員設定')

@push('styles')
<style>
.user-row { cursor: grab; transition: background .15s; }
.user-row.dragging { opacity: .4; cursor: grabbing; }
.user-row.drag-over { border-top: 2px solid #0d6efd; }
.badge-required { font-size: .7rem; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4" style="max-width:720px">

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="d-flex align-items-center gap-3 mb-4">
        <h4 class="fw-bold text-primary mb-0">工時人員設定</h4>
        <span class="text-muted small">設定哪些人需填工時、以及在工時表的欄位順序</span>
    </div>

    <form method="POST" action="{{ route('time-sheets.save-user-order') }}" id="orderForm">
        @csrf

        <div class="card shadow-sm border-0 rounded-3">
            <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                <span class="fw-semibold">人員清單</span>
                <small class="text-muted">拖曳列可調整順序，或直接修改序號</small>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive"><table class="table table-hover mb-0" id="userTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width:36px"></th>
                            <th style="width:60px" class="text-center">序號</th>
                            <th>姓名</th>
                            <th>部門</th>
                            <th class="text-center">需填工時</th>
                        </tr>
                    </thead>
                    <tbody id="sortable">
                        @foreach($users as $user)
                        <tr class="user-row" data-id="{{ $user->id }}">
                            <td class="text-center text-muted ps-3" style="cursor:grab">
                                <i class="fas fa-grip-vertical"></i>
                            </td>
                            <td class="text-center">
                                <input type="number" name="order[{{ $user->id }}]"
                                       value="{{ $user->timesheet_sort_order }}"
                                       class="form-control form-control-sm text-center sort-input"
                                       style="width:60px;margin:auto" min="0" max="9999">
                            </td>
                            <td class="fw-medium">
                                {{ $user->name }}
                                @if(!$user->is_active)
                                    <span class="badge bg-secondary badge-required ms-1">停用</span>
                                @endif
                            </td>
                            <td class="text-muted small">{{ $user->department ?? '—' }}</td>
                            <td class="text-center">
                                <div class="form-check form-switch d-flex justify-content-center mb-0">
                                    <input class="form-check-input timesheet-toggle" type="checkbox"
                                           name="required[{{ $user->id }}]" value="1"
                                           role="switch"
                                           aria-checked="{{ $user->timesheet_required ? 'true' : 'false' }}"
                                           {{ $user->timesheet_required ? 'checked' : '' }}>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table></div>
            </div>
            <div class="card-footer bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                <span class="small text-muted">
                    共 {{ $users->count() }} 人，
                    <span id="requiredCount">{{ $users->where('timesheet_required', true)->count() }}</span> 人需填工時
                </span>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="fas fa-save me-2"></i>儲存設定
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css">
<script>
document.addEventListener('DOMContentLoaded', () => {

    // ── 拖曳排序 ───────────────────────────────────────
    const tbody = document.getElementById('sortable');
    let dragging = null;

    tbody.querySelectorAll('.user-row').forEach(row => {
        row.draggable = true;

        row.addEventListener('dragstart', () => {
            dragging = row;
            setTimeout(() => row.classList.add('dragging'), 0);
        });
        row.addEventListener('dragend', () => {
            row.classList.remove('dragging');
            tbody.querySelectorAll('.user-row').forEach(r => r.classList.remove('drag-over'));
            dragging = null;
            recalcOrder();
        });
        row.addEventListener('dragover', e => {
            e.preventDefault();
            if (row === dragging) return;
            tbody.querySelectorAll('.user-row').forEach(r => r.classList.remove('drag-over'));
            row.classList.add('drag-over');
        });
        row.addEventListener('drop', e => {
            e.preventDefault();
            if (row === dragging) return;
            tbody.insertBefore(dragging, row);
            row.classList.remove('drag-over');
            recalcOrder();
        });
    });

    // 拖曳後自動重新編號（步距 10，方便插入）
    function recalcOrder() {
        tbody.querySelectorAll('.user-row').forEach((row, i) => {
            const input = row.querySelector('.sort-input');
            if (input) input.value = (i + 1) * 10;
        });
    }

    // ── 需填工時計數即時更新 ──────────────────────────
    const counter = document.getElementById('requiredCount');
    document.querySelectorAll('.timesheet-toggle').forEach(cb => {
        cb.addEventListener('change', () => {
            cb.setAttribute('aria-checked', cb.checked ? 'true' : 'false');
            counter.textContent = document.querySelectorAll('.timesheet-toggle:checked').length;
        });
    });

    // ── 送出前把 required[] 未勾的也帶進去（value=0）──
    document.getElementById('orderForm').addEventListener('submit', function() {
        document.querySelectorAll('.timesheet-toggle:not(:checked)').forEach(cb => {
            const name = cb.name;
            const userId = name.match(/\[(\d+)\]/)[1];
            const hidden = document.createElement('input');
            hidden.type  = 'hidden';
            hidden.name  = `required_off[${userId}]`;
            hidden.value = '0';
            this.appendChild(hidden);
        });
    });
});
</script>
@endpush