<title>HOD 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;
        box-sizing: border-box;
    }

    .ui.segments {
        margin-top: 2rem;
    }

    .ui.segment {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* .ui.celled.table {
        table-layout: fixed; /* ensures column widths respect CSS widths */
        /* width: 100%;
    }

    .ui.celled.table th,
    .ui.celled.table td {
        word-wrap: break-word;
    }

    .ui.celled.table th:nth-last-child(1),
    .ui.celled.table td:nth-last-child(1) {
        width: 25%; /* make Tindakan column longest */
    /* }

    .ui.celled.table th:nth-last-child(2),
    .ui.celled.table td:nth-last-child(2) {
        width: 10%; /* for Status */
    /* }  */

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    #loader {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        display: none;
        align-items: center; justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    #loader div {
        margin-top: 20%;
        margin-left:45%;
        width: 60px; height: 60px;
        border: 6px solid #fff;
        border-top: 6px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
</style>

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

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

            @forelse($pendingClaims as $claim)
                <tr>
                    <td style = "text-align: center;">{{ $loop->iteration }}</td>
                    <td>{{ $claim->user->name ?? '-' }}</td>
                    <td>
                        {{ $claim->claim_date }}
                        @php
                            $days = \Carbon\Carbon::parse($claim->claim_date)->diffInDays($claim->created_at ?? now());
                        @endphp
                        @if($days > 180)
                            <br><span class="ui red label tiny">Tertakluk BOD (&gt;6 bulan)</span>
                        @elseif($days > 90)
                            <br><span class="ui red label tiny">Lewat 3-6 bulan (-30%)</span>
                        @elseif($days > 30)
                            <span class="ui yellow label tiny">Lewat 1-3 bulan (-10%)</span>
                        @endif
                    </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; width: 1%;">
                        <a href="{{ route('mileage::HOD.show', $claim->id) }}" class="ui blue button tiny">
                            Lihat
                        </a>

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

                        <form action="{{ route('mileage::HOD.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 sokongan</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    {{-- Verified / Rejected Claims --}}
    <h3 class="ui dividing header mt-5">Previous Claims</h3>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>#</th>
                <th>Staff</th>
                <th>Tarikh</th>
                <th>Butiran Projek</th>
                <th>Jarak Layak (KM)</th>
                <th>Jumlah Tuntutan (RM)</th>
                <th>Status</th>
                <th>Tindakan</th>
            </tr>
        </thead>
        <tbody>
            @php
                $previousClaims = $claims->whereIn('status', ['Disokong', '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::HOD.show', $claim->id) }}" class="ui blue button tiny">
                            Lihat
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="center aligned">Tiada rekod tuntutan terdahulu</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection
