<?php $__env->startSection('title', 'Transaksi Pembayaran'); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .tagihan-card { transition: all .2s; border: 2px solid transparent; }
    .tagihan-card.selected { border-color: #007bff; background: #f0f6ff; }
    .tagihan-card .check-icon { display:none; }
    .tagihan-card.selected .check-icon { display:inline-block; }
    .total-box { background: linear-gradient(135deg,#1a73e8,#0d47a1); color:#fff; border-radius:12px; }
    .siswa-box { background: linear-gradient(135deg,#1976d2,#0d47a1); color:#fff; border-radius:12px; }
    .badge-spp { background:#17a2b8; }
    .badge-dpp { background:#fd7e14; }
    .input-jumlah { max-width:180px; }
    #no-tagihan-msg { display:none; }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>


<?php if($errors->any()): ?>
<div class="alert alert-danger alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <ul class="mb-0"><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $e): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><li><?php echo e($e); ?></li><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?></ul>
</div>
<?php endif; ?>


<div class="card card-outline card-primary mb-3">
    <div class="card-header border-0">
        <h3 class="card-title"><i class="fas fa-search"></i> Cari Siswa</h3>
    </div>
    <div class="card-body">
        <form method="GET" action="<?php echo e(route('transaksi.create')); ?>" id="form-cari">
            <input type="text" name="nis" id="search-nis" class="form-control form-control-lg text-center font-weight-bold" 
                   style="font-size: 1.5rem; letter-spacing: 2px;"
                   placeholder="Cari NIS..." 
                   value="<?php echo e(request('nis')); ?>" autofocus autocomplete="off" required>
        </form>
    </div>
</div>

<?php if($siswa): ?>


<?php
    $siswaKelasInSelectedYear = $siswa->siswaKelasHistory()
        ->with(['kelas', 'tahunAjaran'])
        ->where('tahun_ajaran_id', $selectedTahunAjaranId)
        ->first();

    $kelasNama = $siswaKelasInSelectedYear?->kelas?->nama_kelas ?? '-';
    $tahunAjaranLabel = $siswaKelasInSelectedYear?->tahunAjaran?->tahun ?? '-';
?>
<div class="siswa-box p-3 mb-3 d-flex align-items-center shadow">
    <div class="mr-3" style="font-size:2.5rem;"><i class="fas fa-user-circle"></i></div>
    <div>
        <h5 class="mb-0 font-weight-bold"><?php echo e($siswa->nama_lengkap); ?></h5>
        <small>NIS: <strong><?php echo e($siswa->nis); ?></strong> &nbsp;|&nbsp;
            Kelas: <strong><?php echo e($kelasNama); ?></strong> &nbsp;|&nbsp;
            Tahun Ajaran: <strong><?php echo e($tahunAjaranLabel); ?></strong> &nbsp;|&nbsp;
            Kategori: <strong><?php echo e(ucfirst($siswa->kategori)); ?></strong>
        </small>
    </div>
    <div class="ml-auto">
        <span class="badge badge-<?php echo e($siswa->status == 'aktif' ? 'success' : 'danger'); ?> badge-pill px-3 py-2" style="font-size:.85rem;">
            <?php echo e(ucfirst($siswa->status)); ?>

        </span>
    </div>
</div>


<div class="card card-outline card-secondary mb-3">
    <div class="card-body py-2">
        <form action="<?php echo e(route('transaksi.create')); ?>" method="GET" class="form-inline" id="form-filter-tahun">
            <input type="hidden" name="nis" value="<?php echo e($siswa->nis); ?>">
            <label class="mr-2 mb-0"><i class="fas fa-filter"></i> Filter Tahun Ajaran:</label>
            <select name="tahun_ajaran_id" class="form-control form-control-sm" onchange="document.getElementById('form-filter-tahun').submit();">
                <?php if($tahunAjaranList->isEmpty()): ?>
                    <option value="">-- Belum Ada Tagihan --</option>
                <?php else: ?>
                    <?php $__currentLoopData = $tahunAjaranList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ta): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($ta->id); ?>" <?php echo e($selectedTahunAjaranId == $ta->id ? 'selected' : ''); ?>>
                            <?php echo e($ta->tahun); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                <?php endif; ?>
            </select>
        </form>
    </div>
</div>


<form method="POST" action="<?php echo e(route('transaksi.store')); ?>" id="form-transaksi" enctype="multipart/form-data">
    <?php echo csrf_field(); ?>
    <input type="hidden" name="siswa_id" value="<?php echo e($siswa->id); ?>">

    <div class="row">
        
        <div class="col-lg-8">

            
            <?php if($tagihanSPP->isNotEmpty()): ?>
            <div class="card card-outline card-info mb-3">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-calendar-alt"></i> Tagihan SPP (Belum Lunas)</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-sm btn-info" id="pilih-semua-spp">Pilih Semua SPP</button>
                    </div>
                </div>
                <div class="card-body p-2">
                    <?php $__currentLoopData = $tagihanSPP; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tagihan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php $sisa = $tagihan->sisa_tagihan; ?>
                    <div class="tagihan-card card mb-2 shadow-sm" data-id="<?php echo e($tagihan->id); ?>" data-sisa="<?php echo e($sisa); ?>" data-jenis="SPP">
                        <div class="card-body py-2 px-3">
                            <div class="d-flex align-items-center">
                                <input type="checkbox" class="cb-tagihan mr-2" style="width:18px;height:18px;cursor:pointer;"
                                    name="tagihan_ids[]" value="<?php echo e($tagihan->id); ?>" id="cb-<?php echo e($tagihan->id); ?>">
                                <label for="cb-<?php echo e($tagihan->id); ?>" class="mb-0 flex-grow-1" style="cursor:pointer;">
                                    <strong><?php echo e($tagihan->nama_bulan); ?> <?php echo e($tagihan->tahun); ?></strong>
                                    &nbsp;<span class="badge badge-spp text-white">SPP</span>
                                    <span class="badge badge-light text-muted ml-1">Bayar Penuh</span>
                                    <i class="fas fa-check-circle text-primary ml-1 check-icon"></i>
                                    <br>
                                    <small class="text-muted">
                                        <?php echo e($tagihan->kelas->nama_kelas ?? '-'); ?> &nbsp;|&nbsp;
                                        Tagihan: <strong>Rp <?php echo e(number_format($tagihan->tarifPembayaran->nominal ?? $tagihan->jumlah_tagihan, 0, ',', '.')); ?></strong> &nbsp;|&nbsp;
                                        Terbayar: Rp <?php echo e(number_format($tagihan->jumlah_terbayar, 0, ',', '.')); ?> &nbsp;|&nbsp;
                                        Sisa: <strong class="text-danger">Rp <?php echo e(number_format($sisa, 0, ',', '.')); ?></strong>
                                    </small>
                                </label>
                                
                                <div class="ml-3 detail-bayar-group" style="display:none;">
                                    <input type="hidden" name="jumlah_bayar[<?php echo e($tagihan->id); ?>]"
                                        class="input-bayar" value="<?php echo e($sisa); ?>" data-sisa="<?php echo e($sisa); ?>">
                                    <span class="badge badge-success px-3 py-2" style="font-size:.85rem;">
                                        <i class="fas fa-lock mr-1"></i> Rp <?php echo e(number_format($sisa, 0, ',', '.')); ?>

                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <?php endif; ?>

            
            <?php if($tagihanDPP->isNotEmpty()): ?>
            <div class="card card-outline card-warning mb-3">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-money-check-alt"></i> Tagihan DPP (Belum Lunas)</h3>
                </div>
                <div class="card-body p-2">
                    <?php $__currentLoopData = $tagihanDPP; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tagihan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php $sisa = $tagihan->sisa_tagihan; ?>
                    <div class="tagihan-card card mb-2 shadow-sm" data-id="<?php echo e($tagihan->id); ?>" data-sisa="<?php echo e($sisa); ?>" data-jenis="DPP">
                        <div class="card-body py-2 px-3">
                            <div class="d-flex align-items-center">
                                <input type="checkbox" class="cb-tagihan mr-2" style="width:18px;height:18px;cursor:pointer;"
                                    name="tagihan_ids[]" value="<?php echo e($tagihan->id); ?>" id="cb-<?php echo e($tagihan->id); ?>">
                                <label for="cb-<?php echo e($tagihan->id); ?>" class="mb-0 flex-grow-1" style="cursor:pointer;">
                                    <strong><?php echo e($tagihan->tarifPembayaran->nama ?? '-'); ?></strong>
                                    &nbsp;<span class="badge badge-dpp text-white">DPP</span>
                                    <span class="badge badge-light text-muted ml-1">Bisa Dicicil</span>
                                    <?php if($tagihan->status == 'kurang'): ?>
                                        <span class="badge badge-warning">Cicilan Berjalan</span>
                                    <?php endif; ?>
                                    <i class="fas fa-check-circle text-primary ml-1 check-icon"></i>
                                    <br>
                                    <small class="text-muted">
                                        <?php echo e($tagihan->kelas->nama_kelas ?? '-'); ?> &nbsp;|&nbsp;
                                        <?php if($tagihan->tarif_lama > 0): ?>
                                            Tarif Lama: <strong class="text-info">Rp <?php echo e(number_format($tagihan->tarif_lama, 0, ',', '.')); ?></strong> &nbsp;|&nbsp;
                                            <span style="text-decoration: line-through;">Total Awal: Rp <?php echo e(number_format($tagihan->tarifPembayaran->nominal ?? $tagihan->jumlah_tagihan, 0, ',', '.')); ?></span> &nbsp;|&nbsp;
                                        <?php else: ?>
                                            Total: <strong>Rp <?php echo e(number_format($tagihan->tarifPembayaran->nominal ?? $tagihan->jumlah_tagihan, 0, ',', '.')); ?></strong> &nbsp;|&nbsp;
                                        <?php endif; ?>
                                        Terbayar: Rp <?php echo e(number_format($tagihan->jumlah_terbayar, 0, ',', '.')); ?> &nbsp;|&nbsp;
                                        Sisa: <strong class="text-danger">Rp <?php echo e(number_format($sisa, 0, ',', '.')); ?></strong>
                                    </small>
                                </label>
                                
                                <div class="ml-3 input-jumlah detail-bayar-group" style="display:none;">
                                    <input type="number" name="jumlah_bayar[<?php echo e($tagihan->id); ?>]"
                                        class="form-control form-control-sm input-bayar text-right"
                                        value="<?php echo e($sisa); ?>" min="1" max="<?php echo e($sisa); ?>"
                                        data-sisa="<?php echo e($sisa); ?>" placeholder="Nominal Cicilan">
                                    <small class="text-muted">Sisa: Rp <?php echo e(number_format($sisa, 0, ',', '.')); ?></small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <?php endif; ?>

            <?php if($tagihanSPP->isEmpty() && $tagihanDPP->isEmpty()): ?>
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i> Semua tagihan siswa ini sudah <strong>lunas</strong>.
            </div>
            <?php endif; ?>

        </div>

        
        <div class="col-lg-4">
            <div class="total-box p-4 mb-3 shadow">
                <h5 class="mb-3"><i class="fas fa-receipt mr-1"></i> Ringkasan Pembayaran</h5>
                <div id="no-tagihan-msg" class="alert alert-warning py-2 text-center" style="display:none;">
                    <small>Pilih tagihan terlebih dahulu</small>
                </div>
                <div id="summary-list" class="mb-3" style="font-size:.9rem;"></div>
                <hr style="border-color:rgba(255,255,255,.3)">
                <div class="d-flex justify-content-between align-items-center">
                    <strong>Total Bayar:</strong>
                    <span id="total-display" style="font-size:1.4rem;font-weight:700;">Rp 0</span>
                </div>
            </div>

            <div class="card card-outline card-secondary">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-cog"></i> Detail Transaksi</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="metode_pembayaran">Metode Pembayaran <span class="text-danger">*</span></label>
                        <select name="metode_pembayaran" id="metode_pembayaran" class="form-control" required>
                            <option value="tunai" <?php echo e(old('metode_pembayaran','tunai')=='tunai'?'selected':''); ?>>💵 Tunai</option>
                            <option value="transfer" <?php echo e(old('metode_pembayaran')=='transfer'?'selected':''); ?>>🏦 Transfer Bank</option>
                            <option value="qris" <?php echo e(old('metode_pembayaran')=='qris'?'selected':''); ?>>📱 QRIS</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="bukti_bayar">Upload Bukti Bayar (opsional)</label>
                        <input type="file" name="bukti_bayar" id="bukti_bayar" class="form-control-file" accept="image/*">
                        <?php $__errorArgs = ['bukti_bayar'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <small class="text-danger"><?php echo e($message); ?></small> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>
                    <div class="form-group">
                        <label for="keterangan">Keterangan (opsional)</label>
                        <textarea name="keterangan" id="keterangan" class="form-control" rows="2" maxlength="255"
                            placeholder="Catatan pembayaran..."><?php echo e(old('keterangan')); ?></textarea>
                    </div>
                    <button type="submit" class="btn btn-success btn-block btn-lg" id="btn-bayar" disabled>
                        <i class="fas fa-save"></i> Simpan Pembayaran
                    </button>
                    <a href="<?php echo e(route('tagihan.cari', ['nis' => $siswa->nis])); ?>" class="btn btn-default btn-block mt-2">
                        <i class="fas fa-eye"></i> Lihat Tagihan
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

<?php else: ?>

<div class="card card-outline card-success mt-4">
    <div class="card-header border-0">
        <h3 class="card-title"><i class="fas fa-history mr-1"></i> Riwayat Pembayaran Terbaru</h3>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-striped table-hover table-valign-middle">
            <thead class="bg-light">
                <tr>
                    <th>Tanggal</th>
                    <th>Siswa</th>
                    <th>Jenis Pembayaran</th>
                    <th>Nominal</th>
                    <th>Metode</th>
                    <th>Petugas</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php $__empty_1 = true; $__currentLoopData = $riwayatTerbaru; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $trx): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr>
                    <td><?php echo e(\Carbon\Carbon::parse($trx->tanggal_bayar)->format('d M Y')); ?></td>
                    <td>
                        <strong><?php echo e($trx->siswa->nama_lengkap ?? '-'); ?></strong><br>
                        <small class="text-muted"><?php echo e($trx->siswa->nis ?? '-'); ?></small>
                    </td>
                    <td>
                        <?php
                            $jenisArr = [];
                            foreach($trx->detailPembayaran as $dtl) {
                                $jenis = $dtl->tagihan->tarifPembayaran->jenis ?? '';
                                if($jenis && !in_array($jenis, $jenisArr)) {
                                    $jenisArr[] = $jenis;
                                }
                            }
                            $jenisStr = implode(', ', $jenisArr);
                        ?>
                        <?php if(empty($jenisStr)): ?>
                            -
                        <?php else: ?>
                            <?php $__currentLoopData = $jenisArr; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $j): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <span class="badge badge-<?php echo e($j == 'SPP' ? 'info' : 'warning'); ?>"><?php echo e($j); ?></span>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>
                    </td>
                    <td><strong>Rp <?php echo e(number_format($trx->total_bayar, 0, ',', '.')); ?></strong></td>
                    <td>
                        <?php if($trx->metode_pembayaran == 'tunai'): ?>
                            <span class="badge badge-success"><i class="fas fa-money-bill-wave"></i> Tunai</span>
                        <?php elseif($trx->metode_pembayaran == 'transfer'): ?>
                            <span class="badge badge-primary"><i class="fas fa-university"></i> Transfer</span>
                        <?php else: ?>
                            <span class="badge badge-info"><i class="fas fa-qrcode"></i> QRIS</span>
                        <?php endif; ?>
                    </td>
                    <td><?php echo e($trx->user->name ?? '-'); ?></td>
                    <td class="text-center">
                        <a href="<?php echo e(route('transaksi.bukti', $trx->id)); ?>" class="btn btn-sm btn-outline-primary" target="_blank" title="Cetak Bukti">
                            <i class="fas fa-print"></i> Cetak
                        </a>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="7" class="text-center py-4 text-muted">
                        <i class="fas fa-inbox fa-2x mb-2 text-light"></i><br>
                        Belum ada riwayat transaksi pembayaran.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
$(document).ready(function () {



    // Toggle Pilih Semua / Uncheck Semua SPP
    var isAllSppSelected = false;
    $('#pilih-semua-spp').on('click', function () {
        isAllSppSelected = !isAllSppSelected;
        // Hanya checkbox di dalam card SPP ini
        $(this).closest('.card').find('.cb-tagihan').each(function () {
            $(this).prop('checked', isAllSppSelected).trigger('change');
        });
        
        if (isAllSppSelected) {
            $(this).text('Uncheck Semua SPP');
            $(this).removeClass('btn-info').addClass('btn-secondary');
        } else {
            $(this).text('Pilih Semua SPP');
            $(this).removeClass('btn-secondary').addClass('btn-info');
        }
    });

    // Handle checkbox tagihan
    $(document).on('change', '.cb-tagihan', function () {
        var card = $(this).closest('.tagihan-card');
        var group = card.find('.detail-bayar-group');
        if ($(this).is(':checked')) {
            card.addClass('selected');
            group.show();
        } else {
            card.removeClass('selected');
            group.hide();
        }
        updateTotal();
    });

    // Update total saat nilai input berubah
    $(document).on('input', '.input-bayar', function () {
        var max = parseFloat($(this).attr('max'));
        var val = parseFloat($(this).val());
        if (val > max) $(this).val(max);
        if (val < 1) $(this).val(1);
        updateTotal();
    });

    function formatRp(n) {
        return 'Rp ' + n.toLocaleString('id-ID');
    }

    function updateTotal() {
        var total = 0;
        var summaryHtml = '';
        var count = 0;

        $('.cb-tagihan:checked').each(function () {
            var card  = $(this).closest('.tagihan-card');
            var input = card.find('.input-bayar');
            var val   = parseFloat(input.val()) || 0;
            var label = card.find('label strong').first().text();
            total += val;
            count++;
            summaryHtml += `<div class="d-flex justify-content-between mb-1">
                <small class="text-white-50">${label}</small>
                <small><strong>${formatRp(val)}</strong></small>
            </div>`;
        });

        $('#summary-list').html(summaryHtml);
        $('#total-display').text(formatRp(total));

        if (count > 0) {
            $('#btn-bayar').prop('disabled', false);
            $('#no-tagihan-msg').hide();
        } else {
            $('#btn-bayar').prop('disabled', true);
            $('#no-tagihan-msg').show();
            $('#total-display').text('Rp 0');
        }
    }

    updateTotal();
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Herd\spp_app\resources\views/transaksi/create.blade.php ENDPATH**/ ?>