@extends('layouts.admin')
@section('title', 'Expense Details')
@section('page-title', 'Expense Details')
@section('page-subtitle', 'View expense information')

@section('content')
<div class="space-y-6">
    <div class="card-royal p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Expense #{{ $expense->id }}</h3>
                <p class="text-sm text-[var(--text-secondary)]">Recorded {{ $expense->created_at->format('M d, Y') }}</p>
            </div>
            <span class="px-3 py-1 rounded-full text-sm
                @if($expense->status === 'approved') bg-green-100 text-green-700
                @elseif($expense->status === 'pending') bg-yellow-100 text-yellow-700
                @else bg-red-100 text-red-700 @endif">
                {{ ucfirst($expense->status) }}
            </span>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Category</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->category?->name ?? 'N/A' }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Amount</p>
                <p class="font-medium text-red-500">GH₵{{ number_format($expense->amount, 2) }}</p>
            </div>
            <div class="md:col-span-2">
                <p class="text-sm text-[var(--text-secondary)]">Description</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->description }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Expense Date</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->expense_date->format('M d, Y') }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Payment Method</p>
                <p class="font-medium text-[var(--text-primary)] capitalize">{{ str_replace('_', '-', $expense->payment_method) }}</p>
            </div>
            @if($expense->vendor)
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Vendor</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->vendor }}</p>
            </div>
            @endif
            @if($expense->invoice_number)
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Invoice Number</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->invoice_number }}</p>
            </div>
            @endif
            @if($expense->approver)
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Approved By</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->approver->name }}</p>
            </div>
            @endif
            @if($expense->approval_date)
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Approved At</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->approval_date->format('M d, Y H:i') }}</p>
            </div>
            @endif
            @if($expense->notes)
            <div class="md:col-span-2">
                <p class="text-sm text-[var(--text-secondary)]">Notes</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $expense->notes }}</p>
            </div>
            @endif
        </div>
    </div>
    
    @if($expense->receipt)
    <div class="card-royal p-6 border-2 border-gold-500/30">
        <div class="flex items-center justify-between mb-4">
            <h4 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] flex items-center gap-2">
                <i class="fas fa-receipt text-gold-500"></i> Receipt Attachment
            </h4>
            <div class="flex gap-3">
                <a href="{{ asset('storage/' . $expense->receipt) }}" target="_blank" class="text-gold-500 hover:text-gold-600 flex items-center gap-1 text-sm">
                    <i class="fas fa-external-link-alt"></i> Open in new tab
                </a>
                <a href="{{ asset('storage/' . $expense->receipt) }}" download class="text-gold-500 hover:text-gold-600 flex items-center gap-1 text-sm">
                    <i class="fas fa-download"></i> Download
                </a>
            </div>
        </div>
        <div class="border border-[var(--border-color)] rounded-lg overflow-hidden bg-[var(--bg-primary)]">
            @php
                $extension = pathinfo($expense->receipt, PATHINFO_EXTENSION);
            @endphp
            
            @if(in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                <img src="{{ asset('storage/' . $expense->receipt) }}" alt="Receipt" class="max-w-full h-auto mx-auto">
            @elseif(strtolower($extension) === 'pdf')
                <iframe src="{{ asset('storage/' . $expense->receipt) }}" class="w-full h-96"></iframe>
            @else
                <div class="p-6 text-center">
                    <i class="fas fa-file-alt text-4xl text-[var(--text-secondary)] mb-3"></i>
                    <p class="text-[var(--text-secondary)]">Receipt file attached</p>
                    <a href="{{ asset('storage/' . $expense->receipt) }}" target="_blank" class="btn-royal px-4 py-2 rounded-lg text-white inline-flex items-center gap-2 mt-3">
                        <i class="fas fa-download"></i> View/Download Receipt
                    </a>
                </div>
            @endif
        </div>
    </div>
    @endif
    
    @if($expense->status === 'pending')
    <div class="card-royal p-6 bg-gradient-to-r from-green-500/10 to-transparent border border-green-500/30">
        <form action="{{ route('admin.finance.expenses.approve', $expense->id) }}" method="POST" class="flex items-center justify-between">
            @csrf
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-clipboard-check text-green-500"></i>
                </div>
                <div>
                    <p class="font-medium text-[var(--text-primary)]">Review Complete?</p>
                    <p class="text-sm text-[var(--text-secondary)]">If you've verified the receipt, approve this expense</p>
                </div>
            </div>
            <button type="submit" class="btn-royal px-6 py-3 rounded-lg text-white flex items-center gap-2">
                <i class="fas fa-check"></i> Approve Expense
            </button>
        </form>
    </div>
    @endif
    
    <div class="flex justify-end">
        <a href="{{ route('admin.finance.expenses.index') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">Back to List</a>
    </div>
</div>
@endsection