@extends('layouts.app')

@section('title', '工人明細')

@section('content')
<div class="row g-3">
    <div class="col-lg-4">
        <div class="card card-soft">
            <div class="card-body">
                <div class="page-title mb-2">{{ $worker->name }}</div>
                <div class="text-muted small mb-3">工號 {{ $worker->no }} ｜ {{ $worker->country }} ｜ {{ $worker->gender }}</div>
                <div class="row g-2 mb-3">
                    <div class="col-6"><div class="text-muted small">時薪</div><div class="fw-semibold">NT$ {{ number_format($worker->hour_salary) }}</div></div>
                    <div class="col-6"><div class="text-muted small">狀態</div><div class="fw-semibold">{{ $worker->active ? '在職' : '離職' }}</div></div>
                    <div class="col-12"><div class="text-muted small">電話</div><div class="fw-semibold">{{ $worker->phone ?: '-' }}</div></div>
                    <div class="col-12"><div class="text-muted small">備註</div><div class="fw-semibold">{{ $worker->remark ?: '-' }}</div></div>
                </div>
                <div class="d-flex gap-2 mt-3">
                    <a href="{{ route('workers.edit', $worker->id) }}" class="btn btn-primary">修改</a>
                    <a href="{{ route('workers.index') }}" class="btn btn-outline-secondary">返回</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card card-soft mb-3">
            <div class="card-header"><strong>薪資歷史</strong></div>
            <div class="card-body">
                <canvas id="salaryChart" height="100"></canvas>
            </div>
        </div>
        <div class="card card-soft">
            <div class="card-header"><strong>最近工時</strong></div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>日期</th>
                            <th>工時</th>
                            <th>薪資</th>
                            <th>內容</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentLogs as $log)
                            <tr>
                                <td>{{ $log->work_date->format('Y-m-d') }}</td>
                                <td>{{ number_format($log->total_hours, 1) }}</td>
                                <td>NT$ {{ number_format($log->total_salary) }}</td>
                                <td>{{ $log->work_content }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-4">尚無工時資料</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card card-soft mt-3">
            <div class="card-header"><strong>最近月結加減項</strong></div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>日期</th>
                            <th>金額</th>
                            <th>事由</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentAdjustments as $adjustment)
                            <tr>
                                <td>{{ $adjustment->adjustment_date->format('Y-m-d') }}</td>
                                <td class="{{ $adjustment->amount >= 0 ? 'text-success' : 'text-danger' }}">NT$ {{ number_format($adjustment->amount, 2) }}</td>
                                <td>{{ $adjustment->reason }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted py-4">尚無加減項資料</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const monthlyLabels = @json($monthlySalary->pluck('month'));
    const monthlyTotals = @json($monthlySalary->pluck('monthly_salary_total'));

    new Chart(document.getElementById('salaryChart'), {
        type: 'line',
        data: {
            labels: monthlyLabels,
            datasets: [{
                label: '應發薪資',
                data: monthlyTotals,
                borderColor: '#0d6efd',
                backgroundColor: 'rgba(13,110,253,.15)',
                tension: .3,
                fill: true,
            }]
        },
        options: {
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });
</script>
@endpush