@extends('admin.template.layout')
@section('content')
<div class="row">
    <div class="col-sm-3">
        <div class="card mb-5 rounded-4 mb-xl-8">
            <div class="card-header align-items-center p-4 rounded-top-4 mh-0"
                style="min-height: 0; background-color: #F87316;">
                <div class="card-title m-0 text-white">
                    Total Biaya Pendidikan
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class=" fw-bolder fs-2">
                        Rp.
                        {{ number_format($data->keuangan ? $data->keuangan->total_biaya : 0, 0, ',', '.') }}
                    </div>
                    <div>
                        <div class="btn btn-icon rounded-circle p-4 bg-light-warning">
                            <i class="ki-duotone ki-information fs-2 text-warning">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                            </i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="card mb-5 rounded-4 mb-xl-8">
            <div class="card-header align-items-center p-4 rounded-top-4 mh-0"
                style="min-height: 0; background-color: #F87316;">
                <div class="card-title m-0 text-white">
                    Jenis Pembayaran
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class=" fw-bolder fs-2">
                        {{ $data->keuangan ? $data->keuangan->type_pembayaran : '-' }}
                    </div>
                    <div>
                        <div class="btn btn-icon rounded-circle p-4 bg-light-warning">
                            <i class="ki-duotone ki-chart-pie-simple fs-2 text-warning">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                            </i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="card mb-5 rounded-4 mb-xl-8">
            <div class="card-header align-items-center p-4 rounded-top-4 mh-0"
                style="min-height: 0; background-color: #F87316;">
                <div class="card-title m-0 text-white">
                    Biaya Terbayar
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class=" fw-bolder fs-2">
                        Rp.
                        {{ number_format($data->keuangan ? $data->keuangan->riwayatPembayaran->sum('nominal') : 0, 0, ',', '.') }}
                    </div>
                    <div>
                        <div class="btn btn-icon rounded-circle p-4 bg-light-warning">
                            <i class="ki-duotone ki-verify fs-2 text-warning">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                            </i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="card mb-5 rounded-4 mb-xl-8">
            <div class="card-header align-items-center p-4 rounded-top-4 mh-0"
                style="min-height: 0; background-color: #F87316;">
                <div class="card-title m-0 text-white">
                    Saldo / Biaya Belum Dibayar
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class=" fw-bolder fs-2">
                        Rp.
                        {{ number_format($data->keuangan ? $data->keuangan->total_biaya - $data->keuangan->riwayatPembayaran->sum('nominal') : 0, 0, ',', '.') }}
                    </div>
                    <div>
                        <div class="btn btn-icon rounded-circle p-4 bg-light-warning">
                            <i class="ki-duotone ki-cross-circle fs-2 text-warning">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class=" mb-5 mb-xl-8">
    <div class="d-flex justify-content-between align-items-center my-6 mh-0"
        style="min-height: 0;">
        <div>
            <div class="fs-2 fw-bold m-0">Riwayat Pembayaran</div>
            <div class="text-muted mb-6">Data riwayat pembayaran biaya pendidikan siswa</div>
        </div>
    </div>
    <div class="table-responsive">
        <table id="myTable" class="table table-rounded w-100 fs-6 align-middle">
            <thead>
                <tr class="fw-bold text-white">
                    <th class="rounded-start-pill" style="background-color: #F87316">No</th>
                    <th style="background-color: #F87316">Pembayaran</th>
                    <th style="background-color: #F87316">Tanggal Bayar</th>
                    <th style="background-color: #F87316">Nominal Dibayarkan</th>
                    <th style="background-color: #F87316">Tipe Pembayaran</th>
                    <th style="background-color: #F87316">Metode Pembayaran</th>
                    <th style="background-color: #F87316">Status</th>
                    <th class="rounded-end-pill" style="background-color: #F87316">Aksi</th>
                </tr>
            </thead>
            <tbody class="text-start"></tbody>
            <tfoot class="text-start">
                <tr>
                    <th colspan="3" class="text-end text-success">Total Dibayarkan:</th>
                    <th id="totalNominal"></th>
                    <th colspan="4"></th>
                </tr>
                <tr>
                    <th colspan="3" class="text-end">Biaya Pendidikan:</th>
                    <th id="biayaPendidikan"></th>
                    <th colspan="4"></th>
                </tr>
                <tr>
                    <th colspan="3" class="text-end text-danger">Saldo / Biaya Belum
                        Dibayar:</th>
                    <th id="saldoBelumDibayar"></th>
                    <th colspan="4"></th>
                </tr>
            </tfoot>

        </table>

    </div>
</div>
@endsection

@section('script')
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script>
    $(document).ready(function () {
        let totalNominalFromBackend = 0;
        let totalBiaya = 0;
        let saldoBelumBayar = 0;

        const table = $('#myTable').DataTable({
            responsive: true,
            order: [],
            ajax: {
                url: '{{ route('keuangan-siswa.riwayat_pembayaran.data') }}',
                type: 'GET',
                dataSrc: function(json) {
                    // store from backend
                    totalNominalFromBackend = json.total_nominal || 0;
                    totalBiaya = json.total_biaya || 0;
                    saldoBelumBayar = json.saldo || 0;
                    return json.data;
                }
            },
            columns: [{
                    data: 'index',
                    className: "text-start ps-2"
                },
                {
                    data: 'pembayaran'
                },
                {
                    data: 'tanggal'
                },
                {
                    data: 'nominal'
                },
                {
                    data: 'type_pembayaran'
                },
                {
                    data: 'metode_pembayaran'
                },
                {
                    data: 'status'
                },
                {
                    data: 'action'
                },
            ],
            footerCallback: function(row, data, start, end, display) {
                // use jQuery to inject values
                const formatIDR = (num) => new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0
                }).format(num);

                $('#biayaPendidikan').html(formatIDR(totalBiaya));
                $('#saldoBelumDibayar').html(formatIDR(saldoBelumBayar));
                $('#totalNominal').html(formatIDR(totalNominalFromBackend));
                $('#totalNominal').addClass('text-success fw-bold');
                if (saldoBelumBayar > 0) {
                    $('#saldoBelumDibayar').addClass('text-danger fw-bold').removeClass(
                        'text-success');
                } else {
                    $('#saldoBelumDibayar').addClass('text-success fw-bold').removeClass(
                        'text-danger');
                }

            }
        });
    })
</script>
@endsection