@extends('admin.admin_dashboard')

@section('customcss')
<style>
.card { border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); margin-bottom: 20px; }
.card-header { font-weight: 600; font-size: 16px; background: #667eea; color: #fff; padding: 10px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.card-body { background: #fff; padding: 15px; }

.table thead th { background: #f1f3f5; font-weight: 600; text-align: center; }
.table tbody td { vertical-align: middle; text-align: center; }
.text-danger { color: #e74c3c !important; }
.btn-sm { padding: 4px 12px; font-size: 13px; margin-left: 5px; }
.form-control { border-radius: 6px; }

/* Pagination */
.pagination { display: flex; justify-content: center; list-style: none; padding: 0; margin: 20px 0 0 0; }
.pagination li { margin: 0 4px; }
.pagination li a, .pagination li span {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    color: #667eea;
    text-decoration: none;
    transition: all 0.2s;
}
.pagination li a:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}
.pagination li.active span {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}
.pagination li.disabled span {
    color: #aaa;
    border-color: #ddd;
}
</style>
@endsection


@section('admin')
<div class="content-body">
    <div class="container-fluid">

        <!-- Breadcrumb -->
        <div class="row page-titles mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Reports</a></li>
                <li class="breadcrumb-item active"><a href="#">Due List</a></li>
            </ol>
        </div>

        <!-- Card Wrapper -->
        <div class="card">
            <div class="card-header">💰 Fee Due List</div>
            <div class="card-body">

                <!-- Filter Form -->
                <form method="GET" class="row mb-3 g-2 align-items-end">
                    <div class="col-md-3">
                        <label>Class</label>
                        <select name="class_id" class="form-control">
                            <option value="">Select Class</option>
                            @foreach($classes as $class)
                                <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                                    {{ $class->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Session</label>
                        <select name="session_id" class="form-control">
                            <option value="">Select Session</option>
                            @foreach($sessions as $session)
                                <option value="{{ $session->id }}" {{ request('session_id') == $session->id ? 'selected' : '' }}>
                                    {{ $session->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                    </div>
                    <div class="col-md-4 text-end">
                        <strong>Total Due:</strong> <span class="text-danger">{{ $totalDue }}</span>
                        <a href="{{ route('admin.payments.due-list.pdf', request()->all()) }}" class="btn btn-danger btn-sm">Export PDF</a>
                        <a href="{{ route('admin.payments.due-list.excel', request()->all()) }}" class="btn btn-success btn-sm">Export Excel</a>
                    </div>
                </form>

                <!-- Due Fees Table -->
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Student</th>
                                <th>Class</th>
                                <th>Fee Type</th>
                                <th>Total (৳)</th>
                                <th>Paid (৳)</th>
                                <th>Due (৳)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($dueFees as $key => $fee)
                            <tr>
                                <td>{{ $dueFees->firstItem() + $key }}</td>
                                <td>{{ $fee->student->student_name_english }} ({{ $fee->student->admission_roll }})</td>
                                <td>{{ $fee->student->classModel->name ?? '-' }}</td>
                                <td>{{ $fee->fee_type }}</td>
                                <td>{{ number_format($fee->amount,2) }}</td>
                                <td>{{ number_format($fee->paid_amount,2) }}</td>
                                <td class="text-danger">{{ number_format($fee->due_amount,2) }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted">No due fees found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-3">
    {{ $dueFees->links('pagination::bootstrap-5') }}
</div>


            </div>
        </div>
    </div>
</div>
@endsection