@extends('layouts.app')
@section('page-title', 'Field Expenses')
@section('content')

<style>
    .fe-header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }
    .fe-header-bar h2 { font-size: 1.35rem; font-weight: 600; margin: 0; }

    .fe-section-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #2a2f3a;
        margin: 1.75rem 0 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .fe-section-title .badge-count {
        background: #eef2ff;
        color: #4f5fce;
        font-size: 0.72rem;
        font-weight: 700;
        border-radius: 999px;
        padding: 0.1rem 0.55rem;
    }

    .fe-card { background: #fff; border: 1px solid #eef0f2; border-radius: 10px; }
    .fe-table th {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8891a0;
        background: #f8f9fb;
        border-bottom: 2px solid #eef0f2;
        white-space: nowrap;
    }
    .fe-table td { vertical-align: middle; }
    .fe-table tr.is-review-row { background: #fffbeb; }

    .fe-status {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        white-space: nowrap;
    }
    .fe-status.in_review { background: #fff7e6; color: #b7791f; }
    .fe-status.approved  { background: #e6f4ea; color: #1a9f5c; }
    .fe-status.rejected  { background: #fdecec; color: #dc3545; }
    .fe-status.paid      { background: #e8ecff; color: #4f5fce; }

    .fe-empty {
        text-align: center;
        color: #8891a0;
        padding: 2.5rem 1rem;
        font-size: 0.9rem;
    }
</style>

<div class="fe-header-bar">
    <h2>Field Expenses</h2>
    <a href="{{ route('field-expenses.create') }}" class="btn btn-primary btn-sm">
        <i class="fas fa-plus"></i> New Field Expense
    </a>
</div>

@if(session('status'))
    <div class="alert alert-success">{{ session('status') }}</div>
@endif

@if($pendingMyReview->isNotEmpty())
<div class="fe-section-title">
    Pending Your Review
    <span class="badge-count">{{ $pendingMyReview->count() }}</span>
</div>
<div class="fe-card table-responsive">
    <table class="table fe-table mb-0">
        <thead>
            <tr>
                <th>Title</th>
                <th>Requested By</th>
                <th>Dates</th>
                <th>Requested Amount</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($pendingMyReview as $fe)
            <tr class="is-review-row">
                <td>{{ $fe->title }}</td>
                <td>{{ trim(($fe->user->first_name ?? '') . ' ' . ($fe->user->last_name ?? '')) ?: '—' }}</td>
                <td>{{ optional($fe->start_date)->format('d M Y') }} &ndash; {{ optional($fe->end_date)->format('d M Y') }}</td>
                <td>KES {{ number_format($fe->requested_amount, 2) }}</td>
                <td><span class="fe-status {{ $fe->status }}">{{ ucfirst(str_replace('_', ' ', $fe->status)) }}</span></td>
                <td class="text-end">
                    <a href="{{ route('field-expenses.show', $fe) }}" class="btn btn-outline-primary btn-sm">Review</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif

<div class="fe-section-title">My Requests</div>
<div class="fe-card table-responsive">
    <table class="table fe-table mb-0">
        <thead>
            <tr>
                <th>Title</th>
                <th>Dates</th>
                <th>Requested Amount</th>
                <th>Approved Amount</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @forelse($expenses as $fe)
            <tr>
                <td>{{ $fe->title }}</td>
                <td>{{ optional($fe->start_date)->format('d M Y') }} &ndash; {{ optional($fe->end_date)->format('d M Y') }}</td>
                <td>KES {{ number_format($fe->requested_amount, 2) }}</td>
                <td>{{ $fe->approved_amount !== null ? 'KES ' . number_format($fe->approved_amount, 2) : '—' }}</td>
                <td><span class="fe-status {{ $fe->status }}">{{ ucfirst(str_replace('_', ' ', $fe->status)) }}</span></td>
                <td class="text-end">
                    <a href="{{ route('field-expenses.show', $fe) }}" class="btn btn-outline-secondary btn-sm">View</a>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="fe-empty">You haven't submitted any field expense requests yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-3">
    {{ $expenses->links() }}
</div>

@endsection