@extends('layouts.app')

@section('title', '月薪明細')

@section('content')
<div class="page-hero p-4 p-lg-4 mb-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div>
            <div class="page-title mb-1">月薪明細</div>
            <div class="page-subtitle">{{ $month->format('Y-m') }} ｜ {{ $worker->name }}</div>
        </div>
        <div class="d-flex flex-wrap gap-2 no-print">
            <a href="{{ route('reports.monthly.detail.print', ['month' => $month->format('Y-m'), 'worker_id' => $worker->id]) }}" class="btn btn-outline-dark">列印</a>
            <a href="{{ route('reports.monthly', ['month' => $month->format('Y-m')]) }}" class="btn btn-outline-secondary">返回月薪統計</a>
        </div>
    </div>
</div>

@php
    $logs = $worker->workLogs;
    $adjustments = $worker->salaryAdjustments;
@endphp

<div class="row g-3 mb-3">
    <div class="col-md-3"><div class="card card-soft h-100"><div class="card-body"><div class="text-muted small">工作天數</div><div class="fs-4 fw-bold">{{ number_format($worker->days) }}</div></div></div></div>
    <div class="col-md-3"><div class="card card-soft h-100"><div class="card-body"><div class="text-muted small">總工時</div><div class="fs-4 fw-bold">{{ number_format($worker->totalHours, 1) }}</div></div></div></div>
    <div class="col-md-3"><div class="card card-soft h-100"><div class="card-body"><div class="text-muted small">月結加減項</div><div class="fs-4 fw-bold {{ $worker->salaryAdjustmentTotal >= 0 ? 'text-success' : 'text-danger' }}">NT$ {{ number_format($worker->salaryAdjustmentTotal, 2) }}</div></div></div></div>
    <div class="col-md-3"><div class="card card-soft h-100"><div class="card-body"><div class="text-muted small">應發薪資</div><div class="fs-4 fw-bold text-primary">NT$ {{ number_format($worker->monthlySalaryTotal, 2) }}</div></div></div></div>
</div>

<div class="card card-soft mb-3">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-4"><div class="text-muted small">姓名</div><div class="fw-semibold">{{ $worker->name }}</div></div>
            <div class="col-md-4"><div class="text-muted small">工號</div><div class="fw-semibold">{{ $worker->no }}</div></div>
            <div class="col-md-4"><div class="text-muted small">國籍 / 性別</div><div class="fw-semibold">{{ $worker->country }} ｜ {{ $worker->gender }}</div></div>
            <div class="col-md-4"><div class="text-muted small">時薪</div><div class="fw-semibold">NT$ {{ number_format($worker->hour_salary) }}</div></div>
            <div class="col-md-4"><div class="text-muted small">工作總薪資</div><div class="fw-semibold">NT$ {{ number_format($worker->workLogSalaryTotal, 2) }}</div></div>
            <div class="col-md-4"><div class="text-muted small">月結加減項</div><div class="fw-semibold">NT$ {{ number_format($worker->salaryAdjustmentTotal, 2) }}</div></div>
        </div>
    </div>
</div>

<div class="card card-soft mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <div class="fw-semibold">{{ $month->format('Y-m') }} 工作明細</div>
            <div class="text-muted small">列出該員工本月所有工時、薪資與內容</div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>日期</th>
                    <th>上午</th>
                    <th>下午</th>
                    <th>總工時</th>
                    <th>基本薪資</th>
                    <th>加班費 / 補貼</th>
                    <th>費用</th>
                    <th>當日薪資</th>
                    <th>工作內容</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($logs as $log)
                    <tr>
                        <td>{{ $log->work_date->format('Y-m-d') }}</td>
                        <td>{{ number_format($log->morning_hours, 1) }}</td>
                        <td>{{ number_format($log->afternoon_hours, 1) }}</td>
                        <td>{{ number_format($log->total_hours, 1) }}</td>
                        <td>NT$ {{ number_format($log->base_salary) }}</td>
                        <td>NT$ {{ number_format($log->overtime) }}</td>
                        <td>NT$ {{ number_format($log->adjustment) }}</td>
                        <td class="fw-semibold">NT$ {{ number_format($log->total_salary) }}</td>
                        <td>{{ $log->work_content ?: '-' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="9" 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 d-flex justify-content-between align-items-center">
        <div>
            <div class="fw-semibold">月結加減項明細</div>
            <div class="text-muted small">保險費、雜費、獎金等正負金額。</div>
        </div>
        <a href="{{ route('salary-adjustments.index', ['month' => $month->format('Y-m'), 'worker_id' => $worker->id]) }}" class="btn btn-sm btn-outline-primary">管理加減項</a>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>日期</th>
                    <th>金額</th>
                    <th>事由</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($adjustments as $adjustment)
                    <tr>
                        <td>{{ $adjustment->adjustment_date->format('Y-m-d') }}</td>
                        <td class="fw-semibold {{ $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>
@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