<title>BOD Dashboard</title>
@extends('ui::layouts.app')

@section('content')
<style type="text/css">
    body {
        background-color: #f0f2f5;
    }
    .ui.container {
        max-width: 100% !important;
        overflow-x: hidden;
        padding: 0 5rem 0 2rem;
    }
    .ui.segment {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>

<div class="ui container mt-5">
    <h2 class="ui header">Board of Director Dashboard</h2>

    {{-- Pending Claims --}}
    <h3 class="ui dividing header">Pending Approval</h3>
    <table class="ui celled table">
        <thead>
            <tr>
                <th style="width:40px;text-align:center;">#</th>
                <th>Staff</th>
                <th>Tarikh</th>
                <th>Butiran</th>
                <th>Jarak Layak (KM)</th>
                <th>Jumlah (RM)</th>
                <th>Status</th>
                <th>Tindakan</th>
            </tr>
        </thead>
        <tbody>
            @php
                $pendingClaims = $claims->where('status', 'Disokong');
            @endphp

            @forelse($pendingClaims as $claim)
                <tr>
                    <td style="text-align:center;">{{ $loop->iteration }}</td>
                    <td>{{ $claim->user->name ?? '-' }}</td>
                    <td>{{ $claim->claim_date }}</td>
                    <td>{{ $claim->description ?? '-' }}</td>
                    <td>{{ max(0, $claim->total_mileage - 40) }} km</td>
                    <td>RM {{ number_format($claim->total_claim_amount, 2) }}</td>
                    <td>{{ $claim->status }}</td>
                    <td style="white-space:nowrap;">
                        <a href="{{ route('mileage::BOD.show', $claim->id) }}" class="ui blue button tiny">
                            Lihat
                        </a>

                        <form action="{{ route('mileage::BOD.approve', $claim->id) }}" method="POST" style="display:inline;">
                            @csrf
                            <button class="ui green button tiny" type="submit">Sahkan</button>
                        </form>

                        <form action="{{ route('mileage::BOD.reject', $claim->id) }}" method="POST" style="display:inline;">
                            @csrf
                            <button class="ui red button tiny" type="submit">Tolak</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="center aligned">Tiada tuntutan menunggu pengesahan</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    {{-- Approved / Rejected Claims --}}
    <h3 class="ui dividing header mt-5">Previous Decisions</h3>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>#</th>
                <th>Staff</th>
                <th>Tarikh</th>
                <th>Butiran</th>
                <th>Jarak Layak (KM)</th>
                <th>Jumlah (RM)</th>
                <th>Status</th>
                <th>Tindakan</th>
            </tr>
        </thead>
        <tbody>
            @php
                $previousClaims = $claims->whereIn('status', ['Disahkan', 'Ditolak']);
            @endphp

            @forelse($previousClaims as $claim)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $claim->user->name ?? '-' }}</td>
                    <td>{{ $claim->claim_date }}</td>
                    <td>{{ $claim->description ?? '-' }}</td>
                    <td>{{ max(0, $claim->total_mileage - 40) }} km</td>
                    <td>RM {{ number_format($claim->total_claim_amount, 2) }}</td>
                    <td>{{ $claim->status }}</td>
                    <td>
                        <a href="{{ route('mileage::BOD.show', $claim->id) }}" class="ui blue button tiny">Lihat</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="center aligned">Tiada rekod terdahulu</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection
