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

<style>
    .fe-back { font-size: 0.85rem; color: #8891a0; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
    .fe-back:hover { color: #4f5fce; }

    .fe-card { background: #fff; border: 1px solid #eef0f2; border-radius: 10px; }
    .fe-card + .fe-card { margin-top: 1.25rem; }
    .fe-card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #eef0f2; }
    .fe-card-body { padding: 1.25rem 1.5rem; }

    .fe-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .fe-title-row h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.35rem; color: #2a2f3a; }
    .fe-desc { color: #6b7280; font-size: 0.9rem; margin: 0; }

    .fe-status {
        display: inline-flex; align-items: center; gap: 0.35rem;
        font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.7rem;
        border-radius: 999px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em;
    }
    .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-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
        margin-top: 1.1rem;
    }
    .fe-meta-grid .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8891a0; margin-bottom: 2px; }
    .fe-meta-grid .value { font-size: 0.9rem; font-weight: 600; color: #2a2f3a; }

    .fe-amounts {
        display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem;
    }
    .fe-amount-box {
        flex: 1; min-width: 180px;
        background: #f8f9fb; border: 1px solid #eef0f2; border-radius: 8px;
        padding: 0.9rem 1.1rem;
    }
    .fe-amount-box .label { font-size: 0.75rem; color: #8891a0; margin-bottom: 4px; }
    .fe-amount-box .amount { font-size: 1.25rem; font-weight: 700; color: #2a2f3a; }
    .fe-amount-box.approved .amount { color: #1a9f5c; }

    .fe-rejected-banner {
        background: #fdecec; border: 1px solid #f6c6c9; color: #a12832;
        border-radius: 8px; padding: 0.85rem 1.1rem; margin-top: 1.1rem; font-size: 0.87rem;
    }
    .fe-rejected-banner strong { display: block; margin-bottom: 2px; }

    /* Approval timeline */
    .fe-timeline { display: flex; flex-direction: column; }
    .fe-timeline-step { display: flex; gap: 0.9rem; position: relative; padding-bottom: 1.35rem; }
    .fe-timeline-step:last-child { padding-bottom: 0; }
    .fe-timeline-step:not(:last-child)::before {
        content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: #eef0f2;
    }
    .fe-timeline-icon {
        width: 32px; height: 32px; border-radius: 50%; background: #f1f2f5; color: #8891a0;
        display: flex; align-items: center; justify-content: center; font-size: 0.78rem; flex-shrink: 0; z-index: 1;
    }
    .fe-timeline-step.approved .fe-timeline-icon { background: #e6f4ea; color: #1a9f5c; }
    .fe-timeline-step.rejected .fe-timeline-icon { background: #fdecec; color: #dc3545; }
    .fe-timeline-step.is-current .fe-timeline-icon { background: #fff7e6; color: #b7791f; }
    .fe-timeline-role { font-weight: 600; font-size: 0.88rem; color: #2a2f3a; }
    .fe-timeline-meta { font-size: 0.78rem; color: #8891a0; margin-top: 2px; }
    .fe-timeline-comment { font-size: 0.8rem; color: #4a4f5a; font-style: italic; margin-top: 4px; }

    /* Action panel */
    .fe-action-panel { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
    .fe-reject-box { display: none; margin-top: 0.85rem; }
    .fe-reject-box textarea { resize: vertical; }

    /* Items table */
    #feItemsTable th {
        font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8891a0;
        background: #f8f9fb; border-bottom: 2px solid #eef0f2; white-space: nowrap;
    }
    #feItemsTable td { vertical-align: middle; }
    .fe-item-status {
        display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700;
        padding: 0.15rem 0.55rem; border-radius: 999px; text-transform: capitalize;
    }
    .fe-item-status.pending  { background: #f1f2f5; color: #6b7280; }
    .fe-item-status.approved { background: #e6f4ea; color: #1a9f5c; }
    .fe-item-status.rejected { background: #fdecec; color: #dc3545; }
    .fe-item-reject-row textarea { resize: vertical; }
</style>

<a href="{{ route('field-expenses.index') }}" class="fe-back"><i class="fas fa-arrow-left"></i> Back to Field Expenses</a>

@if(session('status'))
    <div class="alert alert-success">{{ session('status') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

{{-- Header --}}
<div class="fe-card">
    <div class="fe-card-body">
        <div class="fe-title-row">
            <div>
                <h2>{{ $fieldExpense->title }}</h2>
                @if($fieldExpense->description)
                    <p class="fe-desc">{{ $fieldExpense->description }}</p>
                @endif
            </div>
            <span class="fe-status {{ $fieldExpense->status }}">{{ ucfirst(str_replace('_', ' ', $fieldExpense->status)) }}</span>
        </div>

        <div class="fe-meta-grid">
            <div>
                <div class="label">Requested By</div>
                <div class="value">{{ trim(($fieldExpense->user->first_name ?? '') . ' ' . ($fieldExpense->user->last_name ?? '')) ?: '—' }}</div>
            </div>
            <div>
                <div class="label">Start Date</div>
                <div class="value">{{ optional($fieldExpense->start_date)->format('d M Y') }}</div>
            </div>
            <div>
                <div class="label">End Date</div>
                <div class="value">{{ optional($fieldExpense->end_date)->format('d M Y') }}</div>
            </div>
            <div>
                <div class="label">Submitted</div>
                <div class="value">{{ optional($fieldExpense->created_at)->format('d M Y') }}</div>
            </div>
            @if($fieldExpense->status === 'paid')
            <div>
                <div class="label">Paid On</div>
                <div class="value">{{ optional($fieldExpense->paid_at)->format('d M Y') }}</div>
            </div>
            @endif
        </div>

        <div class="fe-amounts">
            <div class="fe-amount-box">
                <div class="label">Requested Amount</div>
                <div class="amount">KES {{ number_format($fieldExpense->requested_amount, 2) }}</div>
            </div>
            <div class="fe-amount-box approved">
                <div class="label">Approved Amount</div>
                <div class="amount">{{ $fieldExpense->approved_amount !== null ? 'KES ' . number_format($fieldExpense->approved_amount, 2) : '—' }}</div>
            </div>
        </div>

        @if($fieldExpense->status === 'rejected' && $fieldExpense->rejected_reason)
        <div class="fe-rejected-banner">
            <strong>Rejected</strong>
            {{ $fieldExpense->rejected_reason }}
        </div>
        @endif
    </div>
</div>

{{-- Action panel: header-level approve/reject, or mark paid --}}
@if($canAction || $canMarkPaid)
<div class="fe-card">
    <div class="fe-card-body">
        @if($canAction)
            <div class="fe-action-panel">
                <form method="POST" action="{{ route('field-expenses.approve', $fieldExpense) }}">
                    @csrf
                    <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-check"></i> Approve This Level</button>
                </form>
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="document.getElementById('feRejectBox').style.display='block'">
                    <i class="fas fa-times"></i> Reject
                </button>
                <span class="text-muted small">Approving moves this request to the next level in the chain.</span>
            </div>
            <div class="fe-reject-box" id="feRejectBox">
                <form method="POST" action="{{ route('field-expenses.reject', $fieldExpense) }}">
                    @csrf
                    <label class="form-label small fw-semibold">Reason for rejection<span class="text-danger">*</span></label>
                    <textarea name="reason" class="form-control form-control-sm mb-2" rows="2" required placeholder="Explain why this request is being rejected..."></textarea>
                    <button type="submit" class="btn btn-danger btn-sm">Confirm Rejection</button>
                    <button type="button" class="btn btn-link btn-sm" onclick="document.getElementById('feRejectBox').style.display='none'">Cancel</button>
                </form>
            </div>
        @endif

        @if($canMarkPaid)
            <form method="POST" action="{{ route('field-expenses.mark-paid', $fieldExpense) }}" class="{{ $canAction ? 'mt-3' : '' }}">
                @csrf
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-money-bill-wave"></i> Mark as Paid</button>
                <span class="text-muted small ms-2">This request is fully approved and ready for disbursement.</span>
            </form>
        @endif
    </div>
</div>
@endif

{{-- Approval timeline --}}
<div class="fe-card">
    <div class="fe-card-header"><strong>Approval Progress</strong></div>
    <div class="fe-card-body">
        <div class="fe-timeline">
            @forelse($fieldExpense->approvals as $step)
            <div class="fe-timeline-step {{ $step->status }} {{ $fieldExpense->current_level == $step->level ? 'is-current' : '' }}">
                <div class="fe-timeline-icon">
                    @if($step->status === 'approved')
                        <i class="fas fa-check"></i>
                    @elseif($step->status === 'rejected')
                        <i class="fas fa-times"></i>
                    @else
                        <i class="fas fa-clock"></i>
                    @endif
                </div>
                <div>
                    <div class="fe-timeline-role">Level {{ $step->level }} &middot; {{ str_replace('_', ' ', $step->approver_role) }}</div>
                    @if($step->approver)
                        <div class="fe-timeline-meta">{{ trim($step->approver->first_name . ' ' . $step->approver->last_name) }} &middot; {{ optional($step->acted_at)->format('d M Y, H:i') }}</div>
                    @elseif($fieldExpense->current_level == $step->level)
                        <div class="fe-timeline-meta">Awaiting action</div>
                    @else
                        <div class="fe-timeline-meta">Not yet reached</div>
                    @endif
                    @if($step->comment)
                        <div class="fe-timeline-comment">&ldquo;{{ $step->comment }}&rdquo;</div>
                    @endif
                </div>
            </div>
            @empty
            <div class="text-muted small">No approval levels were required for this request — it was approved automatically.</div>
            @endforelse
        </div>
    </div>
</div>

{{-- Expense breakdown --}}
<div class="fe-card">
    <div class="fe-card-header"><strong>Expense Breakdown</strong></div>
    <div class="table-responsive">
        <table class="table mb-0" id="feItemsTable">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Units</th>
                    <th>Unit Type</th>
                    <th>Description</th>
                    <th>Total</th>
                    <th>Status</th>
                    @if($canAction)
                        <th>Action</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach($fieldExpense->items as $item)
                <tr>
                    <td>{{ $item->expense_type }}</td>
                    <td>KES {{ number_format($item->amount, 2) }}</td>
                    <td>{{ rtrim(rtrim(number_format($item->units, 2), '0'), '.') }}</td>
                    <td>{{ $item->unit_type }}</td>
                    <td>{{ $item->description ?: '—' }}</td>
                    <td><strong>KES {{ number_format($item->total_amount, 2) }}</strong></td>
                    <td>
                        <span class="fe-item-status {{ $item->status }}">{{ $item->status }}</span>
                        @if($item->status === 'rejected' && $item->rejected_reason)
                            <div class="text-muted" style="font-size:0.72rem; margin-top:2px;">{{ $item->rejected_reason }}</div>
                        @endif
                    </td>
                    @if($canAction)
                    <td>
                        @if($item->status === 'pending')
                            <form method="POST" action="{{ route('field-expenses.items.approve', [$fieldExpense, $item]) }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-success btn-sm">Approve</button>
                            </form>
                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="document.getElementById('itemReject-{{ $item->id }}').style.display='table-row'">Reject</button>
                        @else
                            &mdash;
                        @endif
                    </td>
                    @endif
                </tr>
                @if($canAction && $item->status === 'pending')
                <tr class="fe-item-reject-row" id="itemReject-{{ $item->id }}" style="display:none;">
                    <td colspan="8">
                        <form method="POST" action="{{ route('field-expenses.items.reject', [$fieldExpense, $item]) }}" class="d-flex gap-2 align-items-start">
                            @csrf
                            <textarea name="reason" class="form-control form-control-sm" rows="1" required placeholder="Reason for rejecting this item..."></textarea>
                            <button type="submit" class="btn btn-danger btn-sm">Confirm</button>
                            <button type="button" class="btn btn-link btn-sm" onclick="document.getElementById('itemReject-{{ $item->id }}').style.display='none'">Cancel</button>
                        </form>
                    </td>
                </tr>
                @endif
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@endsection