@extends('layouts.app')

@section('title', 'Fee Structure Details | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> / <span>Finance</span> / <span><a href="{{ route('schooladmin.finance.fee-structures.index') }}">Fee Structures</a></span> / <span class="active-page">Details</span>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold text-dark mb-1">Fee Structure Breakdown</h3>
            <p class="text-muted mb-0">{{ $feeStructure->schoolClass->name }} ({{ $feeStructure->schoolClass->stream }}) • Term {{ $feeStructure->term }} • {{ $feeStructure->academic_year }}</p>
        </div>
        <div>
            <a href="{{ route('schooladmin.finance.fee-structures.edit', $feeStructure) }}" class="btn btn-primary rounded-pill px-4">
                <i class="fas fa-edit me-2"></i>Edit Structure
            </a>
            <a href="{{ route('schooladmin.finance.fee-structures.index') }}" class="btn btn-outline-secondary rounded-pill px-4 ms-2">
                Back to List
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="fw-bold mb-0 text-primary">Component Breakdown</h6>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Item Name</th>
                                <th class="text-end pe-4">Amount (KES)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($feeStructure->items as $item)
                            <tr>
                                <td class="ps-4">{{ $item->name }}</td>
                                <td class="text-end pe-4 fw-semibold">{{ number_format($item->amount, 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-light fw-bold">
                            <tr>
                                <td class="ps-4">Total Amount</td>
                                <td class="text-end pe-4 text-primary h5 mb-0">KES {{ number_format($feeStructure->total_amount, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 rounded-4 mb-4">
                <div class="card-body p-4 text-center">
                    <div class="icon-circle bg-light-primary mb-3 mx-auto" style="width: 60px; height: 60px; line-height: 60px; border-radius: 50%; background: #f0f7ff; color: #0d6efd;">
                        <i class="fas fa-users-cog fa-lg"></i>
                    </div>
                    <h6 class="fw-bold">Billing Stats</h6>
                    <p class="text-muted small">Overview of students linked to this class structure.</p>
                    <hr>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Total Students:</span>
                        <span class="fw-bold">{{ $feeStructure->schoolClass->students->count() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection