@extends('layouts.portal')

@section('title', 'View Liabilities')
@section('page_title', 'My Liabilities')
@section('page_subtitle', 'View your recorded loans and debts')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'liabilities'])
@endsection

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-6xl mx-auto px-6">
        <!-- Header -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-800">My Liabilities</h1>
                    <p class="text-gray-500 mt-1">These liabilities were recorded by our staff.</p>
                </div>
                <a href="{{ route('client.dashboard') }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl transition-all">
                    Back to Dashboard
                </a>
            </div>
        </div>

        <!-- Liabilities List -->
        <div class="bg-white rounded-2xl shadow-lg p-6">
            @if($existingLiabilities->isNotEmpty())
                <div class="space-y-4">
                    @foreach($existingLiabilities as $liability)
                        <div class="border-2 border-gray-200 rounded-xl p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-800">{{ ucfirst(str_replace('_', ' ', $liability->type)) }}</h3>
                                <span class="text-sm text-gray-500">{{ $liability->created_at->format('d M Y') }}</span>
                            </div>
                            <p class="text-gray-600">{{ $liability->description }}</p>
                            @if($liability->amount)
                                <p class="text-red-600 font-medium mt-2">Amount: ${{ number_format($liability->amount, 2) }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8">
                    <p class="text-gray-500">No liabilities recorded yet.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection