@php
    $workLog = $workLog ?? null;
    $values = $values ?? [];
    $submitLabel = $submitLabel ?? '儲存';
@endphp

<form method="post" action="{{ $action }}" class="card card-soft">
    @csrf
    @if (($method ?? 'post') !== 'post')
        @method($method)
    @endif
    <div class="card-body">
        <div class="section-toolbar">
            <div>
                <div class="fw-semibold">工時輸入</div>
                <div class="text-muted small">工時與薪資會即時計算，減少重複操作。</div>
            </div>
            <span class="badge text-bg-light border">支援半小時與小數輸入</span>
        </div>
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label">日期</label>
                <input type="date" name="work_date" value="{{ old('work_date', $values['work_date'] ?? now()->toDateString()) }}" class="form-control form-control-lg" required>
            </div>
            <div class="col-md-5">
                <label class="form-label">工人</label>
                <select name="worker_id" id="workerSelect" class="form-select form-select-lg worker-select" required>
                    <option value="">請選擇工人</option>
                    @foreach ($workers as $worker)
                        <option value="{{ $worker->id }}" data-hour-salary="{{ $worker->hour_salary }}" @selected((string) old('worker_id', $values['worker_id'] ?? '') === (string) $worker->id)>
                            {{ $worker->no }}｜{{ $worker->name }}｜{{ $worker->country }}｜{{ $worker->gender }}｜時薪 NT$ {{ number_format($worker->hour_salary) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">上午工時</label>
                <input type="number" step="0.5" min="0" name="morning_hours" class="form-control form-control-lg calc-input" value="{{ old('morning_hours', $values['morning_hours'] ?? 0) }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">下午工時</label>
                <input type="number" step="0.5" min="0" name="afternoon_hours" class="form-control form-control-lg calc-input" value="{{ old('afternoon_hours', $values['afternoon_hours'] ?? 0) }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">加班費 / 補貼</label>
                <input type="number" step="0.01" name="overtime" class="form-control form-control-lg calc-input" value="{{ old('overtime', $values['overtime'] ?? 0) }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">費用</label>
                <input type="number" step="0.01" name="adjustment" class="form-control form-control-lg calc-input" value="{{ old('adjustment', $values['adjustment'] ?? 0) }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">總工時</label>
                <input type="text" id="totalHoursDisplay" class="form-control form-control-lg" readonly>
            </div>
            <div class="col-md-2">
                <label class="form-label">基本薪資</label>
                <input type="text" id="baseSalaryDisplay" class="form-control form-control-lg" readonly>
            </div>
            <div class="col-md-2">
                <label class="form-label">當日薪資</label>
                <input type="text" id="totalSalaryDisplay" class="form-control form-control-lg" readonly>
            </div>
            <div class="col-12">
                <label class="form-label">工作內容</label>
                <input type="text" name="work_content" class="form-control form-control-lg" value="{{ old('work_content', $values['work_content'] ?? '') }}" list="workContents" placeholder="例如：採番茄、整理菜園、施肥">
                {{-- <textarea name="work_content" rows="5" class="form-control form-control-lg" placeholder="例如：採番茄、整理菜園、施肥">{{ old('work_content', $values['work_content'] ?? '') }}</textarea> --}}
                {{-- <datalist id="workContents">
                    @foreach ($workContents as $content)
                        <option value="{{ $content }}">
                    @endforeach
            </div>
            {{-- <div class="col-12">
                <label class="form-label">備註</label>
                <textarea name="remark" rows="3" class="form-control form-control-lg">{{ old('remark', $values['remark'] ?? '') }}</textarea>
            </div> --}}
        </div>
    </div>
    <div class="card-footer bg-white d-flex justify-content-between align-items-center">
        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">返回</a>
        <div class="d-flex gap-2">
            <button type="reset" class="btn btn-outline-secondary">取消</button>
            <button type="submit" class="btn btn-primary">{{ $submitLabel }}</button>
        </div>
    </div>
</form>

@push('scripts')
<script>
    $(function () {
        $('.worker-select').select2({
            placeholder: '請搜尋工人',
            allowClear: true,
        });

        const moneyFormatter = new Intl.NumberFormat('zh-TW', { maximumFractionDigits: 2 });

        function recalculate() {
            const morning = parseFloat($('input[name="morning_hours"]').val() || 0);
            const afternoon = parseFloat($('input[name="afternoon_hours"]').val() || 0);
            const overtime = parseFloat($('input[name="overtime"]').val() || 0);
            const adjustment = parseFloat($('input[name="adjustment"]').val() || 0);
            const salaryRate = parseFloat($('#workerSelect option:selected').data('hour-salary') || 0);
            const totalHours = morning + afternoon;
            const baseSalary = totalHours * salaryRate;
            const totalSalary = baseSalary + overtime + adjustment;

            $('#totalHoursDisplay').val(moneyFormatter.format(totalHours));
            $('#baseSalaryDisplay').val('NT$ ' + moneyFormatter.format(baseSalary));
            $('#totalSalaryDisplay').val('NT$ ' + moneyFormatter.format(totalSalary));
        }

        $('.calc-input, #workerSelect').on('change keyup', recalculate);
        recalculate();
    });
</script>
@endpush