@extends('layouts.app')

@section('title', 'Tagihan Siswa - ' . $siswa->nis)

@push('styles')
<style>
    /* ── Info bar siswa ── */
    .siswa-bar {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 9px 16px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 16px;
        margin-bottom: 12px;
        font-size: 0.9rem;
    }
    .siswa-bar .siswa-name {
        font-weight: 700;
        font-size: 1rem;
        color: #212529;
    }
    .siswa-bar .divider {
        color: #ced4da;
    }

    /* ── Summary cards ── */
    .summary-cards {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    .summary-card {
        flex: 1 1 0;
        min-width: 140px;
        border-radius: 6px;
        padding: 10px 14px;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .summary-card .sc-icon { font-size: 1.6rem; opacity: .7; }
    .summary-card .sc-body { line-height: 1.3; }
    .summary-card .sc-label { font-size: 0.78rem; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
    .summary-card .sc-value { font-size: 1.05rem; font-weight: 700; }
    .summary-card.bg-info    { background: linear-gradient(135deg,#17a2b8,#138496); }
    .summary-card.bg-success { background: linear-gradient(135deg,#28a745,#1e7e34); }
    .summary-card.bg-danger  { background: linear-gradient(135deg,#dc3545,#b21f2d); }
    .summary-card.bg-secondary{ background: linear-gradient(135deg,#6c757d,#545b62); }

    /* ── Filter bar ── */
    .filter-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    .filter-bar label { margin-bottom: 0; font-size: 0.9rem; white-space: nowrap; }

    /* ── Action bar ── */
    .action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    /* ── Tables ── */
    .card-title-sm { font-size: 0.95rem; font-weight: 600; }
    .table-compact th, .table-compact td { padding: 6px 10px !important; font-size: 0.875rem; vertical-align: middle !important; }
    .table-compact thead th { background: #f8f9fa; font-weight: 600; }
</style>
@endpush

@section('content')

@php
    $selectedTA = $tahunAjarans->firstWhere('id', $selectedTahunAjaranId);

    // Warna card sisa
    $totalSemuaTagihan = $tagihanSPP->count() + $tagihanDPP->count();
    if ($totalSemuaTagihan === 0) {
        $sisaColor = 'secondary'; $sisaIcon = 'minus-circle';
    } elseif ($totalSisa > 0) {
        $sisaColor = 'danger'; $sisaIcon = 'exclamation-triangle';
    } else {
        $sisaColor = 'success'; $sisaIcon = 'check-double';
    }

    $adaTagihanBelumLunas = $tagihanSPP->whereIn('status', ['belum_bayar','kurang'])->count()
        + $tagihanDPP->whereIn('status', ['belum_bayar','kurang'])->count();
@endphp

{{-- ① Info Siswa --}}
<div class="siswa-bar" style="align-items:flex-start; gap: 4px 20px;">

    {{-- Nama --}}
    <span class="siswa-name align-self-center">
        <i class="fas fa-user-graduate mr-1 text-primary"></i>{{ $siswa->nama_lengkap }}
    </span>

    <span class="divider align-self-center">|</span>

    {{-- NIS + Kelas (vertikal) --}}
    <span style="line-height:1.6">
        <span class="text-muted">NIS:</span> <strong>{{ $siswa->nis }}</strong><br>
        <span class="text-muted">Kelas:</span>
        @if($siswa->kelas)
            <span class="badge badge-info">{{ $siswa->kelas->nama_kelas }}</span>
        @else
            <span class="text-muted">-</span>
        @endif
    </span>

    <span class="divider align-self-center">|</span>

    {{-- Tahun Ajaran + Kategori (vertikal) --}}
    <span style="line-height:1.6">
        <span class="text-muted">TA:</span>
        @if($selectedTA)
            <span class="badge badge-secondary">{{ $selectedTA->tahun }}</span>
        @else
            <span class="text-muted">-</span>
        @endif
        <br>
        <span class="text-muted">Kategori:</span>
        <span class="badge badge-light border">{{ ucfirst($siswa->kategori) }}</span>
    </span>

    <span class="divider align-self-center">|</span>

    {{-- Status --}}
    <span class="align-self-center">
        @if($siswa->status == 'aktif')
            <span class="badge badge-success"><i class="fas fa-circle" style="font-size:.6rem"></i> Aktif</span>
        @else
            <span class="badge badge-danger">{{ ucfirst(str_replace('_', ' ', $siswa->status)) }}</span>
        @endif
    </span>

    {{-- Tunggak + Tombol WA berdampingan --}}
    @if($totalTunggakanSisa > 0)
        <span class="divider align-self-center">|</span>
        <span class="d-flex align-items-center" style="gap:8px">
            <span class="badge badge-danger" style="font-size:.85rem; padding:.35em .6em">
                <i class="fas fa-exclamation-circle"></i> Tunggak Rp {{ number_format($totalTunggakanSisa, 0, ',', '.') }}
            </span>
            @if(!empty($waPesan) && $siswa->no_wa)
                <button type="button" id="btnKirimWaTunggakan"
                    class="btn btn-success btn-sm"
                    data-nis="{{ $siswa->nis }}"
                    data-pesan="{{ addslashes($waPesan) }}"
                    data-nama="{{ $siswa->nama_lengkap }}">
                    <i class="fab fa-whatsapp"></i> Kirim WA Tunggakan
                </button>
            @endif
        </span>
    @endif

</div>

{{-- ② Filter + Summary + Aksi dalam satu baris area --}}
<div class="row no-gutters" style="gap:0; margin-bottom:10px;">
    <div class="col-12">
        <div class="d-flex align-items-start flex-wrap" style="gap:8px">

            {{-- Filter TA --}}
            <form action="{{ route('tagihan.cari') }}" method="GET" class="d-flex align-items-center" id="form-filter-tahun" style="gap:6px">
                <input type="hidden" name="nis" value="{{ $siswa->nis }}">
                <label class="mb-0 text-muted" style="white-space:nowrap">
                    <i class="fas fa-filter"></i> Tahun Ajaran:
                </label>
                <select name="tahun_ajaran_id" class="form-control form-control-sm" style="width:auto"
                    onchange="document.getElementById('form-filter-tahun').submit();">
                    @if($tahunAjarans->isEmpty())
                        <option value="">-- Belum Ada --</option>
                    @else
                        @foreach($tahunAjarans as $ta)
                            <option value="{{ $ta->id }}" {{ $selectedTahunAjaranId == $ta->id ? 'selected' : '' }}>
                                {{ $ta->tahun }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </form>

            {{-- Summary Cards --}}
            <div class="summary-cards" style="flex:1; margin:0">
                @if($tagihanSPP->isNotEmpty())
                <div class="summary-card bg-info">
                    <i class="fas fa-file-invoice-dollar sc-icon"></i>
                    <div class="sc-body">
                        <div class="sc-label">Total Tagihan</div>
                        <div class="sc-value">Rp {{ number_format($totalTagihan, 0, ',', '.') }}</div>
                    </div>
                </div>
                @endif
                <div class="summary-card bg-success">
                    <i class="fas fa-check-circle sc-icon"></i>
                    <div class="sc-body">
                        <div class="sc-label">Terbayar</div>
                        <div class="sc-value">Rp {{ number_format($totalTerbayar, 0, ',', '.') }}</div>
                    </div>
                </div>
                <div class="summary-card bg-{{ $sisaColor }}">
                    <i class="fas fa-{{ $sisaIcon }} sc-icon"></i>
                    <div class="sc-body">
                        <div class="sc-label">Sisa Tagihan</div>
                        <div class="sc-value">Rp {{ number_format($totalSisa, 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>

            {{-- Tombol Bayar / Status --}}
            @if($tarifTidakTersedia || $tagihans->isEmpty())
                <div class="alert alert-warning mb-0 py-1 px-2">
                    <i class="fas fa-exclamation-triangle"></i> Tarif belum tersedia.
                </div>
            @elseif($adaTagihanBelumLunas > 0)
                <a href="{{ route('transaksi.create', ['nis' => $siswa->nis]) }}"
                   class="btn btn-success btn-sm d-flex align-items-center" style="white-space:nowrap">
                    <i class="fas fa-cash-register mr-1"></i> Bayar Sekarang
                    <span class="badge badge-light ml-1">{{ $adaTagihanBelumLunas }}</span>
                </a>
            @else
                <div class="alert alert-success mb-0 py-1 px-2">
                    <i class="fas fa-check-circle"></i> Semua <strong>lunas</strong>
                </div>
            @endif

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

{{-- ③ Tagihan SPP --}}
<div class="card card-outline card-info mb-2">
    <div class="card-header py-1 px-3 d-flex justify-content-between align-items-center">
        <h3 class="card-title card-title-sm mb-0"><i class="fas fa-calendar-alt mr-1"></i> Tagihan SPP (Bulanan)</h3>
        @if(auth()->user()->hasRole('admin') || auth()->user()->hasRole('bendahara'))
            <button type="button" class="btn btn-xs btn-info" data-toggle="modal" data-target="#modalPotonganSPP" style="padding:2px 8px; font-size:0.75rem;">
                <i class="fas fa-percent"></i> Set Potongan SPP
            </button>
        @endif
    </div>
    <div class="card-body p-0">
        <table class="table table-hover table-sm table-compact mb-0">
            <thead>
                <tr>
                    <th style="width:36px">No</th>
                    <th>Bulan</th>
                    <th>Nominal</th>
                    <th>Terbayar</th>
                    <th>Sisa</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $sortedTagihanSPP = $tagihanSPP->sortBy(function($t) {
                        return $t->tahun . str_pad($t->bulan, 2, '0', STR_PAD_LEFT);
                    })->values();
                @endphp
                @forelse($sortedTagihanSPP as $index => $tagihan)
                    <tr>
                        <td class="text-center text-muted">{{ $index + 1 }}</td>
                        <td>{{ $tagihan->nama_bulan }} {{ $tagihan->tahun ?? '' }}</td>
                        <td>Rp {{ number_format($tagihan->jumlah_tagihan, 0, ',', '.') }}</td>
                        <td>Rp {{ number_format($tagihan->jumlah_terbayar, 0, ',', '.') }}</td>
                        <td>
                            @if($tagihan->sisa_tagihan > 0)
                                <strong class="text-danger">Rp {{ number_format($tagihan->sisa_tagihan, 0, ',', '.') }}</strong>
                            @else
                                <span class="text-success">Rp 0</span>
                            @endif
                        </td>
                        <td>
                            @if($tagihan->status == 'lunas')
                                <span class="badge badge-success">Lunas</span>
                            @elseif($tagihan->status == 'kurang')
                                <span class="badge badge-warning">Kurang</span>
                            @elseif($tagihan->is_tunggakan)
                                <span class="badge badge-danger">Tunggakan</span>
                            @else
                                <span class="badge badge-secondary">Belum Bayar</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted py-2">Belum ada tagihan SPP.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ④ Tagihan DPP --}}
<div class="card card-outline card-warning mb-2">
    <div class="card-header py-1 px-3">
        <h3 class="card-title card-title-sm"><i class="fas fa-money-check-alt mr-1"></i> Tagihan DPP (Sekali Bayar / Cicilan)</h3>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover table-sm table-compact mb-0">
            <thead>
                <tr>
                    <th style="width:36px">No</th>
                    <th>Nominal</th>
                    <th>Terbayar</th>
                    <th>Sisa</th>
                    <th>Status</th>
                    <th style="width:50px">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($tagihanDPP as $index => $tagihan)
                    <tr>
                        <td class="text-center text-muted">{{ $index + 1 }}</td>
                        <td>
                            @if($tagihan->tarif_lama > 0)
                                {{-- Nominal efektif = tarif_lama --}}
                                <span class="text-dark font-weight-bold">Rp {{ number_format($tagihan->tarif_lama, 0, ',', '.') }}</span>
                                <br><small class="text-muted" title="Tarif DPP asal">
                                    <s>Rp {{ number_format($tagihan->jumlah_tagihan, 0, ',', '.') }}</s>
                                </small>
                            @else
                                Rp {{ number_format($tagihan->jumlah_tagihan, 0, ',', '.') }}
                            @endif
                        </td>
                        <td>Rp {{ number_format($tagihan->jumlah_terbayar, 0, ',', '.') }}</td>
                        <td>
                            @if($tagihan->sisa_tagihan > 0)
                                <strong class="text-danger">Rp {{ number_format($tagihan->sisa_tagihan, 0, ',', '.') }}</strong>
                            @else
                                <span class="text-success">Rp 0</span>
                            @endif
                        </td>
                        <td>
                            @if($tagihan->status == 'lunas')
                                <span class="badge badge-success">Lunas</span>
                            @elseif($tagihan->status == 'kurang')
                                <span class="badge badge-warning">Kurang</span>
                            @elseif($tagihan->is_tunggakan)
                                <span class="badge badge-danger">Tunggakan</span>
                            @else
                                <span class="badge badge-secondary">Belum Bayar</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if(auth()->user()->hasRole('admin') || auth()->user()->hasRole('bendahara'))
                                <button type="button" class="btn btn-xs btn-info btn-set-tarif-lama"
                                    data-id="{{ $tagihan->id }}"
                                    data-tarif="{{ (int) $tagihan->tarif_lama }}"
                                    data-tarif-awal="{{ (int) $tagihan->jumlah_tagihan }}"
                                    data-toggle="modal" data-target="#modalTarifLama"
                                    title="Set Tarif Lama / Potongan" style="padding:2px 6px">
                                    <i class="fas fa-edit" style="font-size:.7rem"></i>
                                </button>
                            @else
                                -
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted py-2">Belum ada tagihan DPP.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Modal Set Tarif Lama --}}
<div class="modal fade" id="modalTarifLama" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form action="" method="POST" id="formTarifLama">
            @csrf
            @method('PATCH')
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h5 class="modal-title" style="font-size:.9rem">Set Tarif / Potongan DPP</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body py-2">
                    <div class="form-group mb-1">
                        <label style="font-size:.82rem">Tarif DPP Awal (Rp)</label>
                        <input type="number" id="inputTarifAwal" class="form-control form-control-sm" readonly>
                    </div>
                    <div class="form-group mb-1">
                        <label style="font-size:.82rem">Potongan DPP (%)</label>
                        <input type="number" name="potongan_dpp" id="inputPotonganDpp" class="form-control form-control-sm" min="0" max="100" placeholder="0">
                    </div>
                    <div class="form-group mb-1">
                        <label style="font-size:.82rem">Nominal DPP Akhir (Rp)</label>
                        <input type="number" name="tarif_lama" id="inputTarifLama" class="form-control form-control-sm" required min="0">
                        <small class="text-muted">Nominal setelah potongan.</small>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-sm btn-primary">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{-- Modal Set Potongan SPP Bulk --}}
<div class="modal fade" id="modalPotonganSPP" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form action="{{ route('tagihan.update-potongan-spp-bulk') }}" method="POST" id="formPotonganSPP">
            @csrf
            <input type="hidden" name="siswa_id" value="{{ $siswa->id }}">
            <input type="hidden" name="tahun_ajaran_id" value="{{ $selectedTahunAjaranId }}">
            
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h5 class="modal-title" style="font-size:.9rem">Set Potongan SPP (%)</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body py-2">
                    <div class="form-group mb-1">
                        <label style="font-size:.82rem">Potongan SPP (%)</label>
                        <input type="number" name="potongan_spp" id="inputPotonganSppBulk" class="form-control form-control-sm" required min="0" max="100" placeholder="Contoh: 10">
                        <small class="text-muted">Potongan akan diterapkan ke semua tagihan SPP yang belum lunas pada Tahun Ajaran ini.</small>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-sm btn-primary" onclick="return confirm('Apakah Anda yakin ingin menerapkan potongan SPP ke semua tagihan bulan yang belum dibayar?');">Terapkan</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
{{-- Toast Notifikasi WA --}}
<style>
#waToast {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    min-width: 280px; max-width: 380px;
    border-radius: 8px; padding: 12px 16px;
    display: none; box-shadow: 0 4px 16px rgba(0,0,0,.18);
    font-size: .88rem; align-items: flex-start; gap: 10px;
}
#waToast.toast-success { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
#waToast.toast-error   { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }
#waToast .toast-icon   { font-size: 1.2rem; margin-top: 1px; flex-shrink: 0; }
#waToast .toast-close  { margin-left: auto; cursor: pointer; opacity: .6; flex-shrink: 0; font-size: 1rem; }
</style>
<div id="waToast">
    <i class="toast-icon fas"></i>
    <div id="waToastMsg" style="flex:1"></div>
    <span class="toast-close" onclick="$(this).closest('#waToast').fadeOut()">&#x2715;</span>
</div>

<script>
    function showWaToast(type, msg) {
        var $t = $('#waToast');
        $t.removeClass('toast-success toast-error d-flex').addClass('toast-' + type);
        $t.find('.toast-icon').removeClass('fa-check-circle fa-times-circle')
            .addClass(type === 'success' ? 'fa-check-circle' : 'fa-times-circle');
        $('#waToastMsg').html(msg);
        $t.css('display', 'flex').hide().fadeIn(300);
        if (type === 'success') setTimeout(function(){ $t.fadeOut(400); }, 5000);
    }

    $(document).ready(function() {
        // ── Tarif lama modal ──
        $('.btn-set-tarif-lama').click(function() {
            let id    = $(this).data('id');
            let tarif = $(this).data('tarif');
            let tarifAwal = $(this).data('tarif-awal');
            
            $('#inputTarifAwal').val(tarifAwal);
            $('#inputTarifLama').val(tarif > 0 ? tarif : tarifAwal);
            $('#inputPotonganDpp').val('');
            
            $('#formTarifLama').attr('action', "{{ url('/tagihan') }}/" + id + "/tarif-lama");
        });

        // ── Hitung Otomatis Potongan DPP ──
        $('#inputPotonganDpp').on('input', function() {
            let tarifAwal = parseFloat($('#inputTarifAwal').val()) || 0;
            let diskon = parseFloat($(this).val()) || 0;
            if (diskon > 100) diskon = 100;
            if (diskon < 0) diskon = 0;
            
            let nominalAkhir = tarifAwal - (tarifAwal * diskon / 100);
            $('#inputTarifLama').val(Math.round(nominalAkhir));
        });
        
        $('#inputTarifLama').on('input', function() {
            $('#inputPotonganDpp').val('');
        });

        // ── Kirim WA Tunggakan per-siswa via Fonnte ──
        $('#btnKirimWaTunggakan').on('click', function() {
            var $btn  = $(this);
            var nis   = $btn.data('nis');
            var pesan = $btn.data('pesan');
            var nama  = $btn.data('nama');

            $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Mengirim...');

            $.ajax({
                url: '{{ route("ajax.tagihan.kirim-wa") }}',
                method: 'POST',
                data: {
                    _token : '{{ csrf_token() }}',
                    nis    : nis,
                    pesan  : pesan,
                },
                success: function(res) {
                    $btn.prop('disabled', false).html('<i class="fab fa-whatsapp"></i> Kirim WA Tunggakan');
                    if (res.success) {
                        showWaToast('success', '<strong>Berhasil!</strong> Notifikasi WA telah dikirim ke <em>' + nama + '</em>.');
                    } else {
                        showWaToast('error', '<strong>Gagal!</strong> ' + (res.message || 'Terjadi kesalahan.'));
                    }
                },
                error: function(xhr) {
                    $btn.prop('disabled', false).html('<i class="fab fa-whatsapp"></i> Kirim WA Tunggakan');
                    var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Terjadi kesalahan server.';
                    showWaToast('error', '<strong>Gagal!</strong> ' + msg);
                }
            });
        });
    });
</script>
@endpush