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

@section('content')
<style>
    body { 
        background-color: #f0f2f5;
    }

    .ui.container { 
        max-width: 100% !important; 
        overflow-x: hidden; 
        padding: 0 5rem 3rem 2rem; 
        margin-top: 3rem; 
    }

    h2.ui.header { 
        font-size: 1.8rem; 
        font-weight: 700; 
        color: #1b1c1d; 
        margin-bottom: 0.5rem; 
    }

    h3.ui.dividing.header { 
        font-size: 1.3rem; 
        font-weight: 600; 
        color: #444; 
        border-bottom: 2px solid #ddd; 
        padding-bottom: 0.5rem; 
    }

    .ui.table { 
        background: white; 
        border-radius: 10px; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
        margin-bottom: 2rem; 
    }

    .ui.table th { 
        background: #f9fafb !important; 
        color: #444; 
        font-weight: 600; 
    }

     /* Filter bar styling */
    .filter-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
        padding: 0.8rem 1.5rem;
        width: fit-content;
        margin: 1.5rem 0;
    }

    .filter-bar label {
        font-weight: 600;
        color: #333;
        margin-right: 0.5rem;
    }

    .filter-bar input[type="month"] {
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        padding: 0.4rem 0.6rem;
        font-size: 1rem;
        color: #333;
        transition: all 0.2s ease;
    }

    .filter-bar input[type="month"]:focus {
        border-color: #21ba45;
        outline: none;
        box-shadow: 0 0 0 2px rgba(33, 186, 69, 0.15);
    }
</style>

<div class="ui container mt-5">
    {{-- Header --}}
    <div class="header-row" style="display:flex;justify-content:space-between;align-items:center;">
        <h2 class="ui header">Project Manager Dashboard</h2>
    </div>

    {{-- Month Filter --}}
    <form method="GET" class="filter-bar">
        <label for="month">Bulan:</label>
        <input type="month" id="month" name="month" value="{{ $month }}" required>
        <button class="ui teal button">
            <i class="filter icon"></i> Tapis
        </button>
    </form>

    {{-- Projects Section --}}
    @forelse($projects as $project)
        <div class="project-section">
            <h3 class="ui dividing header">{{ $project->p_project_description ?? $project->project_name ?? 'Tanpa Projek' }}</h3>

            @php
                // Match claims by the project ID
                $claimsForProject = $claims->where('project_id', $project->id);
                $staffGrouped = $claimsForProject->groupBy('user_id');
            @endphp

            @if($staffGrouped->count() > 0)
                <table class="ui celled table">
                    <thead>
                        <tr>
                            <th style="text-align:center; width:40px;">#</th>
                            <th>Nama Staf</th>
                            <th>Jumlah Tuntutan</th>
                            <th>Jumlah Keseluruhan (RM)</th>
                            <th>Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($staffGrouped as $userId => $staffClaims)
                            @php
                                $user = $staffClaims->first()->user;
                                $totalAmount = $staffClaims->sum('total_claim_amount');
                            @endphp
                            <tr>
                                <td style="text-align:center;">{{ $loop->iteration }}</td>
                                <td>{{ $user->name ?? '-' }}</td>
                                <td>{{ $staffClaims->count() }}</td>
                                <td>RM {{ number_format($totalAmount, 2) }}</td>
                                <td>
                                    <a href="{{ route('mileage::projectManager.show', ['projectId' => $project->id, 'userId' => $user->id, 'month' => $month]) }}"
                                    class="ui blue button tiny">
                                        Lihat
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <br>
            @else
                <div class="ui message">Tiada tuntutan untuk projek ini bulan ini.</div>
            @endif
        </div>
    @empty
        <div class="ui message">Tiada projek di bawah anda.</div>
    @endforelse
</div>
@endsection
