@extends('adminlte::page')

@section('title', 'Pembayaran Kelas Saya')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">Pembayaran Kelas Saya</h1>
            <p class="text-muted small mb-0">Pantau dan kelola pembayaran siswa di kelas Anda.</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">Kelas Saya</li>
        </ol>
    </div>
@stop

@section('content')
    <div class="container-fluid pb-5">
        
        {{-- STATISTIK RINGKAS KELAS --}}
        <div class="row mb-4">
            <div class="col-md-4 col-12">
                <div class="small-box bg-gradient-primary border-0 shadow-sm rounded-lg p-3">
                    <div class="inner">
                        <h3 class="font-weight-bold">{{ $siswas->count() }}</h3>
                        <p class="mb-0 font-weight-bold text-uppercase small" style="opacity: 0.8;">Total Siswa</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-users opacity-20"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                @php
                    $totalLunas = $siswas->filter(function($s) {
                        return $s->tagihans->sum('sisa_tagihan') <= 0;
                    })->count();
                @endphp
                <div class="small-box bg-gradient-success border-0 shadow-sm rounded-lg p-3">
                    <div class="inner">
                        <h3 class="font-weight-bold">{{ $totalLunas }}</h3>
                        <p class="mb-0 font-weight-bold text-uppercase small" style="opacity: 0.8;">Siswa Lunas</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-check-circle opacity-20"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                @php
                    $totalNunggak = $siswas->count() - $totalLunas;
                @endphp
                <div class="small-box bg-gradient-danger border-0 shadow-sm rounded-lg p-3">
                    <div class="inner">
                        <h3 class="font-weight-bold">{{ $totalNunggak }}</h3>
                        <p class="mb-0 font-weight-bold text-uppercase small" style="opacity: 0.8;">Belum Lunas</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-exclamation-circle opacity-20"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABEL DAFTAR SISWA --}}
        <div class="card border-0 shadow-lg rounded-lg overflow-hidden">
            <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                <h5 class="font-weight-bold text-dark mb-0">
                    <i class="fas fa-list-ul text-primary mr-2"></i> Daftar Tagihan Siswa
                </h5>
                <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 250px;">
                        <input type="text" id="searchTable" class="form-control float-right" placeholder="Cari Nama Siswa...">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-default">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="tableWali" class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="pl-4 text-uppercase text-muted small font-weight-bold">Nama Siswa</th>
                                <th class="text-uppercase text-muted small font-weight-bold">NIS</th>
                                <th class="text-uppercase text-muted small font-weight-bold text-center">Total Tunggakan</th>
                                <th class="text-uppercase text-muted small font-weight-bold text-center">Status</th>
                                <th class="pr-4 text-uppercase text-muted small font-weight-bold text-right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($siswas as $siswa)
                                @php
                                    $totalHutang = $siswa->tagihans->sum('sisa_tagihan');
                                @endphp
                                <tr>
                                    <td class="pl-4">
                                        <div class="d-flex align-items-center">
                                            <div class="symbol symbol-35px mr-3">
                                                <div class="symbol-label bg-light-primary text-primary font-weight-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                                                    {{ substr($siswa->nama_lengkap, 0, 1) }}
                                                </div>
                                            </div>
                                            <span class="font-weight-bold text-dark">{{ $siswa->nama_lengkap }}</span>
                                        </div>
                                    </td>
                                    <td class="text-muted">{{ $siswa->nis }}</td>
                                    <td class="text-center">
                                        @if($totalHutang > 0)
                                            <span class="text-danger font-weight-bold">Rp {{ number_format($totalHutang, 0, ',', '.') }}</span>
                                        @else
                                            <span class="text-success font-weight-bold"><i class="fas fa-check-circle mr-1"></i> Lunas</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($totalHutang > 0)
                                            <span class="badge badge-soft-danger text-danger px-3 py-1 rounded-pill border border-danger">Belum Lunas</span>
                                        @else
                                            <span class="badge badge-soft-success text-success px-3 py-1 rounded-pill border border-success">Aman</span>
                                        @endif
                                    </td>
                                    <td class="text-right pr-4">
                                        <a href="{{ route('keuangan.transaksi.show', $siswa->id) }}" class="btn btn-sm btn-primary shadow-sm rounded-pill px-3 font-weight-bold">
                                            <i class="fas fa-wallet mr-1"></i> Bayar
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
<style>
    /* === WARNA MODERN UNTUK IKON & BADGE === */
    .text-primary { color: #3b82f6 !important; } /* Biru Modern */
    .text-success { color: #10b981 !important; } /* Hijau Mint */
    .text-danger { color: #ef4444 !important; } /* Merah Soft */
    .text-warning { color: #f59e0b !important; } /* Kuning Amber */
    
    .bg-gradient-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; }
    .bg-gradient-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
    .bg-gradient-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; }

    .badge-soft-success { background-color: #d1fae5; color: #065f46; }
    .badge-soft-danger { background-color: #fee2e2; color: #991b1b; }
    
    .bg-light-primary { background-color: #eff6ff !important; color: #3b82f6 !important; }

    /* === CUSTOM SIDEBAR WARNA BIRU MODERN === */
    /* Tambahkan ini untuk mengubah sidebar AdminLTE menjadi biru modern */
    .main-sidebar {
        background-color: #1e293b !important; /* Biru Gelap Modern (Slate-800) */
    }
    .main-sidebar .nav-link {
        color: #cbd5e1 !important; /* Teks abu-abu terang */
    }
    .main-sidebar .nav-link.active {
        background-color: #3b82f6 !important; /* Biru cerah untuk aktif */
        color: #ffffff !important;
        box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5);
    }
    .main-sidebar .brand-link {
        background-color: #0f172a !important; /* Biru Sangat Gelap untuk Logo */
        color: #ffffff !important;
        border-bottom: 1px solid #334155;
    }
    .main-sidebar .nav-header {
        color: #94a3b8 !important;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    /* === TAMPILAN TABEL & CARD === */
    .rounded-lg { border-radius: 16px !important; }
    .symbol-label { font-size: 14px; }
    .table thead th { border-bottom: none; background-color: #f8fafc; color: #64748b; }
    
    /* Button Hover Effect */
    .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Fitur Pencarian Tabel Client-Side Sederhana
        $("#searchTable").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#tableWali tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
@stop