@extends('layouts.opac')

@section('title', 'Fines & Charges › MTU Library Catalog')

@section('breadcrumb-trail')
    <span class="sep">›</span>
    <a href="{{ route('opac.home') }}">Home</a>
    <span class="sep">›</span>
    <a href="{{ route('opac.account') }}">My Account</a>
    <span class="sep">›</span>
    <span>Fines</span>
@endsection

@section('sidebar')
    <div class="sidebar-section">
        <div class="sidebar-title">My Account</div>
        <div class="sidebar-links">
            <a href="{{ route('opac.account') }}">Summary / Checkouts</a>
            <a href="{{ route('opac.holds') }}">My Holds</a>
            <a href="{{ route('opac.history') }}">Reading History</a>
            <a href="{{ route('opac.fines') }}" style="font-weight: bold;">Fines and Charges</a>
        </div>
    </div>
@endsection

@section('content')
    <div style="width: 100%;">
        <h2 style="font-size: 16px; color: #2e2e4e; margin-bottom: 12px; border-bottom: 1px solid #d5d5d5; padding-bottom: 6px;">
            👤 Outstanding Fines and Charges
        </h2>

        @if(count($fines) > 0)
            <table style="width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 15px;">
                <thead>
                    <tr style="background: #e8eef5; text-align: left;">
                        <th style="padding: 8px; border: 1px solid #ccc;">Linked Title / Description</th>
                        <th style="padding: 8px; border: 1px solid #ccc;">Charge Reason</th>
                        <th style="padding: 8px; border: 1px solid #ccc;">Accrued Date</th>
                        <th style="padding: 8px; border: 1px solid #ccc;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($fines as $fine)
                        <tr style="border-bottom: 1px solid #ddd;">
                            <td style="padding: 8px; border: 1px solid #ddd;">
                                <strong>{{ $fine->title }}</strong>
                            </td>
                            <td style="padding: 8px; border: 1px solid #ddd;">{{ $fine->reason }}</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">{{ \Carbon\Carbon::parse($fine->date)->format('d.m.Y') }}</td>
                            <td style="padding: 8px; border: 1px solid #ddd; font-weight: bold; color: #c00; font-size: 13px;">₦{{ number_format($fine->fine_amount, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div style="padding:12px; background:#fff3cd; color:#856404; border:1px solid #ffeeba; border-radius:3px; font-size:12px; text-align:right; font-weight:bold;">
                Total Outstanding: ₦{{ number_format(collect($fines)->sum('fine_amount'), 2) }}
            </div>
        @else
            <div style="padding: 20px; background: #f9f9f9; border: 1px dashed #ccc; text-align: center; color: #777; font-size: 13px;">
                You currently have no outstanding library fines.
            </div>
        @endif
    </div>
@endsection