@extends('layouts.app')

@section('title', 'Parent Dashboard | Institution Axis')

@section('sidebar-menu')
    <li class="nav-item active"><a href="{{ route('parent.dashboard') }}"><i class="fas fa-chart-pie"></i><span>Dashboard</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-child"></i><span>My Children</span></a></li>
    <li class="nav-item"><a href="{{ route('parent.finance.index') }}"><i class="fas fa-receipt"></i><span>Fee Payments</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-bell"></i><span>Announcements</span></a></li>
    <li class="nav-item"><a href="{{ route('parent.messages.index') }}"><i class="fas fa-envelope"></i><span>Contact School</span></a></li>
@endsection
@section('sidebar-footer')
    <p>Parent Access</p>
@endsection

@section('breadcrumb')
    <span><a href="#">Home</a></span> / <span class="active-page">Parent Dashboard</span>
@endsection

@section('navbar-right')
    <div class="notification-icon">
        <i class="fas fa-envelope"></i>
        @if($unreadMessages > 0)
            <span class="badge-notify">{{ $unreadMessages }}</span>
        @endif
    </div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=e54027&color=fff&name={{ urlencode(auth()->user()->name) }}" class="avatar-sm">
            <span>{{ auth()->user()->name }}</span> <i class="fas fa-chevron-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li><a class="dropdown-item" href="{{ route('logout') }}">Logout</a></li>
        </ul>
    </div>
@endsection

@section('content')
<div class="row g-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-primary-light text-primary"><i class="fas fa-graduation-cap"></i></div>
            <div class="stat-info">
                <h3>{{ $children->count() }}</h3>
                <p>Enrolled Children</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-success-light text-success"><i class="fas fa-chart-line"></i></div>
            <div class="stat-info">
                <h3>87%</h3>
                <p>Avg Academic Progress</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-warning-light text-warning"><i class="fas fa-credit-card"></i></div>
            <div class="stat-info">
                <h3>KES 4,200</h3>
                <p>Pending Fees</p>
            </div>
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-lg-7">
        <div class="card shadow-sm border-0 rounded-4 h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-child me-2 text-primary"></i>Children's Snapshot</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Student Name</th>
                                <th>Class</th>
                                <th>Attendance</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($children as $child)
                            <tr>
                                <td class="fw-bold">{{ $child->fullName() }}</td>
                                <td>{{ $child->schoolClass->name ?? 'N/A' }}</td>
                                <td><span class="badge bg-success-light text-success">98%</span></td>
                                <td>
                                    <a href="#" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-4">No children records linked.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card shadow-sm border-0 rounded-4 h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-bullhorn me-2 text-warning"></i>School Announcements</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    @forelse($announcements as $announcement)
                    <div class="list-group-item px-0 border-0 border-bottom">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1 fw-bold">{{ $announcement->title }}</h6>
                            <small class="text-muted">{{ $announcement->created_at->diffForHumans() }}</small>
                        </div>
                        <p class="mb-1 small text-muted">{{ $announcement->content }}</p>
                    </div>
                    @empty
                    <div class="text-center py-4">
                        <p class="text-muted">No new announcements from the school.</p>
                    </div>
                    @endforelse
                </div>
            </div>
            <div class="card-footer bg-white border-0 text-center">
                <a href="{{ route('parent.messages.index') }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-envelope me-1"></i> Contact Admin
                </a>
            </div>
        </div>
    </div>
</div>
<div class="card mt-4 shadow-sm">
    <div class="card-header">💰 Recent Payment History</div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Student</th>
                    <th>Amount</th>
                    <th>Method</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Mar 28, 2026</td>
                    <td>Melvin Otieno</td>
                    <td>KES 10,000</td>
                    <td>M-Pesa</td>
                </tr>
                <tr>
                    <td>Mar 28, 2026</td>
                    <td>Ivy Akinyi</td>
                    <td>KES 8,500</td>
                    <td>Bank</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <a href="{{ route('parent.finance.index') }}" class="btn btn-orange">View Full Statement</a>
        <button class="btn btn-outline-secondary">Download PDF</button>
    </div>
</div>
@endsection

@section('custom-scripts')
@endsection