@extends('adminlte::page')

@section('title', 'Laporan Tagihan | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                Monitoring Pembayaran
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Pantau realisasi pendapatan dan status tagihan siswa secara real-time.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            {{-- Tombol Export PDF --}}
            <a href="{{ route('keuangan.laporan.pdf', $posBiaya->id) }}" 
               class="btn btn-light-danger text-danger font-weight-bold btn-sm rounded-pill px-4 shadow-sm hover-lift mr-2" target="_blank">
                <i class="fas fa-file-pdf mr-2"></i> Export PDF
            </a>
            
            {{-- Tombol Kembali --}}
            <a href="{{ route('keuangan.pos-biaya.index') }}" 
               class="btn btn-light text-muted font-weight-bold btn-sm rounded-pill px-4 shadow-sm hover-lift">
                <i class="fas fa-arrow-left mr-2"></i> Kembali
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    
    {{-- STATISTIK UTAMA: GRADIENT APEX --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm overflow-hidden h-100 card-apex-gradient" style="border-radius: 20px;">
                <div class="card-body p-4 position-relative">
                    <div class="row align-items-center z-index-1 position-relative">
                        <div class="col-md-7">
                            <span class="badge bg-white-20 text-white px-3 py-1 rounded-pill mb-2 font-weight-bold text-xs letter-spacing-1">
                                POS BIAYA: {{ strtoupper($posBiaya->nama_pembayaran) }}
                            </span>
                            <h2 class="font-weight-bold text-white mb-1">
                                Rp {{ number_format($totalUangMasuk, 0, ',', '.') }}
                            </h2>
                            <p class="text-white-50 mb-4 font-weight-500">
                                Total Realisasi Pendapatan (Target: Rp {{ number_format($potensiUang, 0, ',', '.') }})
                            </p>
                            
                            {{-- Modern Progress Bar --}}
                            <div class="apex-progress-wrapper">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="text-white font-weight-bold text-sm">{{ number_format($persenLunas, 1) }}% Tercapai</span>
                                    <span class="text-white-50 text-xs">{{ $sudahLunas }} dari {{ count($tagihans) }} Siswa Lunas</span>
                                </div>
                                <div class="progress shadow-sm" style="height: 12px; background-color: rgba(255,255,255,0.15); border-radius: 10px;">
                                    <div class="progress-bar bg-white shadow-sm" role="progressbar" 
                                         style="width: {{ $persenLunas }}%; border-radius: 10px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 text-right d-none d-md-block">
                            <div class="stats-icon-large">
                                <i class="fas fa-chart-pie opacity-20"></i>
                            </div>
                        </div>
                    </div>
                    {{-- Dekorasi Circle --}}
                    <div class="decorative-circle circle-1"></div>
                    <div class="decorative-circle circle-2"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- TABEL DATA SISWA --}}
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="font-weight-bold text-dark mb-0">
                        <i class="fas fa-list-ul text-purple mr-2"></i> Rincian Pembayaran Per Siswa
                    </h6>
                    <div>
                        <span class="badge bg-light-success text-success px-3 py-2 rounded-pill font-weight-bold mr-1">{{ $sudahLunas }} Lunas</span>
                        <span class="badge bg-light-danger text-danger px-3 py-2 rounded-pill font-weight-bold">{{ $belumLunas }} Tunggakan</span>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="table-responsive">
                        <table id="tableLaporan" class="table table-hover align-middle w-100">
                            <thead class="bg-light">
                                <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                                    <th class="border-0">No</th>
                                    <th class="border-0">Informasi Siswa</th>
                                    <th class="border-0">Kelas</th>
                                    <th class="border-0">Status Tagihan</th>
                                    <th class="border-0 text-right">Sisa (Rp)</th>
                                    <th class="border-0 text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tagihans as $tagihan)
                                <tr>
                                    <td class="text-muted font-weight-bold">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="symbol symbol-35px mr-3">
                                                <div class="symbol-label bg-light-purple text-purple rounded-circle font-weight-bold" style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;">
                                                    {{ substr($tagihan->siswa->nama_lengkap, 0, 1) }}
                                                </div>
                                            </div>
                                            <div>
                                                <span class="text-dark font-weight-bold d-block text-sm">{{ $tagihan->siswa->nama_lengkap }}</span>
                                                <small class="text-muted font-monospace">{{ $tagihan->siswa->nis }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-light-secondary text-muted border px-2 py-1" style="font-size: 0.7rem;">
                                            {{ $tagihan->siswa->kelas->nama_kelas ?? '-' }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($tagihan->status == 'lunas')
                                            <span class="badge bg-light-success text-success px-3 py-2 rounded-pill font-weight-bold text-xs border-0">
                                                <i class="fas fa-check-circle mr-1"></i> LUNAS
                                            </span>
                                        @elseif($tagihan->status == 'angsur')
                                            <span class="badge bg-light-warning text-warning px-3 py-2 rounded-pill font-weight-bold text-xs border-0">
                                                <i class="fas fa-clock mr-1"></i> DICICIL
                                            </span>
                                        @else
                                            <span class="badge bg-light-danger text-danger px-3 py-2 rounded-pill font-weight-bold text-xs border-0">
                                                <i class="fas fa-times-circle mr-1"></i> BELUM BAYAR
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-right font-weight-bold font-monospace {{ $tagihan->sisa_tagihan > 0 ? 'text-danger' : 'text-success' }}">
                                        {{ number_format($tagihan->sisa_tagihan, 0, ',', '.') }}
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('keuangan.transaksi.show', $tagihan->siswa_id) }}" 
                                           class="btn btn-icon btn-light-primary text-primary btn-sm rounded-circle shadow-sm hover-lift" 
                                           title="Input Pembayaran">
                                            <i class="fas fa-wallet"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA APEX */
    .card-apex-gradient {
        background: linear-gradient(135deg, #5B247A 0%, #2E1451 100%);
    }

    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }
    
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    
    .bg-light-secondary { background-color: #F3F6F9 !important; }
    
    .bg-light-primary { background-color: #E1F0FF !important; }
    .text-primary { color: #3699FF !important; }

    .btn-light-danger { background-color: #FFE2E5; color: #F64E60; border: none; }
    .btn-light-danger:hover { background-color: #F64E60; color: white; }

    /* MODERN TABLE */
    .table-hover tbody tr:hover { background-color: #FAFAFA; transition: 0.2s; }
    .font-monospace { font-family: 'Consolas', 'Monaco', monospace; }
    
    /* DECORATION */
    .bg-white-20 { background-color: rgba(255,255,255,0.2); }
    .letter-spacing-1 { letter-spacing: 1px; }
    .decorative-circle {
        position: absolute; border-radius: 50%; background: rgba(255,255,255,0.05); z-index: 0;
    }
    .circle-1 { width: 200px; height: 200px; top: -50px; right: -50px; }
    .circle-2 { width: 100px; height: 100px; bottom: -20px; left: 10%; }
    .z-index-1 { z-index: 1; }
    .stats-icon-large i { font-size: 8rem; color: #fff; }

    /* HOVER LIFT */
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s; }
    
    .btn-icon {
        width: 32px; height: 32px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#tableLaporan').DataTable({
            "responsive": true,
            "autoWidth": false,
            "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                   "<'row'<'col-sm-12'tr>>" +
                   "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Indonesian.json"
            }
        });
    });
</script>
@stop