<title>Butiran Tuntutan Bulanan</title>
@extends('ui::layouts.app')

@section('content')
<style>
    body { background-color: #f0f2f5; }
    .ui.container { padding: 0 5rem 3rem 2rem; margin-top: 3rem; }
    h2.ui.header { font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; }
    .ui.segment {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-top: 2rem;
        padding: 1.5rem;
    }
    .status-label {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: capitalize;
        opacity: 0.9;
    }
    .status-Diproses { background-color: rgba(33,133,208,0.3); color: #1b4f72; }
    .status-Disokong { background-color: rgba(46,204,113,0.3); color: #1d5d38; }
    .status-Disahkan { background-color: rgba(241,196,15,0.3); color: #7a6000; }
    .status-Disemak { background-color: rgba(155,89,182,0.3); color: #4a2c63; }
    .status-Diluluskan { background-color: rgba(26,188,156,0.3); color: #0b5449; }
    .status-Ditolak { background-color: rgba(231,76,60,0.3); color: #7e2018; }

    table.ui.table { background: white; border-radius: 10px; }
    .totals-row td { font-weight: 700; background: #f7f7f8; }
    .small-muted { font-size: .9rem; color: #666; }

    @media (max-width: 768px) {
        .ui.container { padding: 0 2rem; }
    }
</style>

<div class="ui container">
    <h2 class="ui header">Butiran Tuntutan Bulanan</h2>
    <p>
        <strong>Projek:</strong> {{ $projectName }} <br>
        <strong>Bulan:</strong> {{ \Carbon\Carbon::parse($month)->translatedFormat('F Y') }}
    </p>

    {{-- Claims Table --}}
    <table class="ui celled table">
        <thead>
            <tr>
                <th>Tarikh</th>
                <th>Butiran</th>
                <th>Dari</th>
                <th>Ke</th>
                <th>Jumlah KM</th>
                <th>Tol (RM)</th>
                <th>Lain-lain (RM)</th>
                <th>Status</th>
                <th>Jumlah (RM)</th>
            </tr>
        </thead>
        <tbody>
            @php
                $total = 0;
                $totalMileage = 0;
                $totalToll = 0;
                $totalOthers = 0;
            @endphp

            @foreach($claims as $c)
                @php
                    $total += $c->total_claim_amount;
                    $totalMileage += $c->total_mileage ?? 0;
                    $totalToll += $c->toll_amount ?? 0;
                    $totalOthers += $c->others_amount ?? 0;
                @endphp

                <tr>
                    <td>{{ \Carbon\Carbon::parse($c->claim_date)->format('d/m/Y') }}</td>
                    <td>{{ $c->description ?? '-' }}</td>
                    <td>{{ $c->distance_from ?? '-' }}</td>
                    <td>{{ $c->distance_to ?? '-' }}</td>
                    <td>{{ number_format($c->total_mileage, 1) }}</td>
                    <td>{{ number_format($c->toll_amount ?? 0, 2) }}</td>
                    <td>{{ number_format($c->others_amount ?? 0, 2) }}</td>
                    <td>
                        <span class="status-label status-{{ $c->status }}">{{ $c->status }}</span>
                    </td>
                    <td>RM {{ number_format($c->total_claim_amount, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
        <tfoot>
            <tr class="totals-row">
                <td colspan="4" class="right aligned"><strong>Jumlah Keseluruhan:</strong></td>
                <td>{{ number_format($totalMileage, 1) }} KM</td>
                <td>RM {{ number_format($totalToll, 2) }}</td>
                <td>RM {{ number_format($totalOthers, 2) }}</td>
                <td></td>
                <td><strong>RM {{ number_format($total, 2) }}</strong></td>
            </tr>
        </tfoot>
    </table>

    {{-- Info Section --}}
    <div class="ui segment">
        <h4><i class="info circle icon"></i> Nota Pengiraan</h4>
        <p>
            • Potongan 40KM dikenakan bagi setiap hari perjalanan.<br>
            • Kadar (Kereta): RM0.55/km bagi ≤500km, RM0.50/km bagi >500km.<br>
            • Kadar (Motosikal): RM0.30/km.<br>
            • Tuntutan termasuk Tol dan Lain-lain jika disertakan resit.
        </p>
    </div>

    {{-- Back button --}}
    <a href="{{ route('mileage::applications.index', ['month' => $month]) }}" class="ui grey button">
        <i class="arrow left icon"></i> Kembali
    </a>
</div>
@endsection
