@extends('adminlte::page')

@section('title', 'Verifikasi Pembayaran | 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.6rem;">
                Verifikasi Pembayaran Online
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Validasi bukti transfer dari orang tua sebelum dicatat ke Jurnal Akuntansi.
            </p>
        </div>
        <div class="mt-3 mt-md-0">
            <button class="btn btn-light text-primary font-weight-bold shadow-sm rounded-pill px-4" onclick="location.reload();">
                <i class="fas fa-sync-alt mr-2"></i> Refresh Antrean
            </button>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0 pb-4">
    
    {{-- ALERT NOTIFIKASI --}}
    @if(session('success'))
        <div class="alert bg-light-success text-success border-0 shadow-sm mb-4 rounded-lg alert-dismissible fade show p-3" style="border-radius: 15px;">
            <div class="d-flex align-items-center">
                <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 30px; height: 30px;">
                    <i class="fas fa-check"></i>
                </div>
                <span class="font-weight-bold">{{ session('success') }}</span>
            </div>
            <button type="button" class="close text-success" data-dismiss="alert" style="padding-top: 1rem;">&times;</button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert bg-light-danger text-danger border-0 shadow-sm mb-4 rounded-lg alert-dismissible fade show p-3" style="border-radius: 15px;">
            <div class="d-flex align-items-center">
                <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 30px; height: 30px;">
                    <i class="fas fa-exclamation"></i>
                </div>
                <span class="font-weight-bold">{{ session('error') }}</span>
            </div>
            <button type="button" class="close text-danger" data-dismiss="alert" style="padding-top: 1rem;">&times;</button>
        </div>
    @endif

    {{-- KARTU TABEL ANTREAN --}}
    <div class="card border-0 modern-shadow" style="border-radius: 20px;">
        <div class="card-header bg-white py-4 px-4 border-0 d-flex justify-content-between align-items-center">
            <h5 class="font-weight-bold text-dark mb-0 d-flex align-items-center">
                <div class="bg-light-warning text-warning rounded-circle p-2 mr-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                    <i class="fas fa-hourglass-half pulse-anim"></i>
                </div>
                Antrean Verifikasi Masuk
            </h5>
            <span class="badge bg-light-danger text-danger px-3 py-2 rounded-pill font-weight-bold text-sm">
                {{ count($antrean) }} Pending
            </span>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 w-100">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                            <th class="pl-4 py-3">Tgl Upload</th>
                            <th>Siswa & Kelas</th>
                            <th>Jenis Tagihan</th>
                            <th class="text-right">Nominal Transfer</th>
                            <th class="text-center">Bukti Transfer</th>
                            <th class="text-center pr-4">Aksi Eksekusi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($antrean as $item)
                            <tr style="border-bottom: 1px solid #f4f6f9;">
                                <td class="pl-4 py-3 text-muted font-weight-500">
                                    <div class="text-dark font-weight-bold">{{ \Carbon\Carbon::parse($item->updated_at)->format('d M Y') }}</div>
                                    <div class="text-xs mt-1"><i class="far fa-clock mr-1"></i>{{ \Carbon\Carbon::parse($item->updated_at)->format('H:i') }} ({{ \Carbon\Carbon::parse($item->updated_at)->diffForHumans() }})</div>
                                </td>
                                
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="symbol symbol-35px mr-3 d-none d-sm-block">
                                            <div class="bg-light-primary text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                                                {{ substr($item->siswa->nama_lengkap ?? 'S', 0, 1) }}
                                            </div>
                                        </div>
                                        <div>
                                            <span class="font-weight-bold text-dark d-block text-sm">{{ $item->siswa->nama_lengkap ?? '-' }}</span>
                                            <span class="badge badge-light border text-xs text-muted mt-1"><i class="fas fa-school mr-1"></i> Kelas {{ $item->siswa->kelas->nama_kelas ?? '-' }}</span>
                                        </div>
                                    </div>
                                </td>
                                
                                <td>
                                    <span class="font-weight-bold text-dark text-sm">{{ $item->jenisPembayaran->nama_pembayaran ?? 'Tagihan' }}</span>
                                    <div class="text-xs text-muted font-monospace mt-1"><i class="fas fa-hashtag mr-1 opacity-50"></i>{{ $item->kode_tagihan }}</div>
                                </td>
                                
                                <td class="text-right">
                                    {{-- INI ADALAH TAMPILAN NOMINAL CICILAN YANG BARU --}}
                                    <span class="text-success font-weight-bolder d-block" style="font-size: 1.1rem;">
                                        + Rp {{ number_format($item->nominal_verifikasi ?? $item->sisa_tagihan, 0, ',', '.') }}
                                    </span>
                                    <div class="text-xs text-muted mt-1" title="Sisa hutang sebelum dibayar">
                                        Sisa Tagihan: Rp {{ number_format($item->sisa_tagihan, 0, ',', '.') }}
                                    </div>
                                </td>
                                
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-light border shadow-sm rounded-pill px-3 py-2 btn-lihat-bukti hover-lift font-weight-bold" 
                                            data-url="{{ asset('storage/' . $item->bukti_bayar) }}"
                                            data-nama="{{ $item->siswa->nama_lengkap ?? 'Siswa' }}"
                                            data-nominal="{{ number_format($item->nominal_verifikasi ?? $item->sisa_tagihan, 0, ',', '.') }}">
                                        <i class="fas fa-image text-info mr-1"></i> Cek Struk
                                    </button>
                                </td>
                                
                                <td class="text-center pr-4">
                                    <div class="d-flex justify-content-center align-items-center">
                                        {{-- Tombol Tolak --}}
                                        <button class="btn btn-icon btn-light-danger text-danger rounded-circle shadow-sm mr-2 btn-tolak hover-lift" 
                                                data-id="{{ $item->id }}" title="Tolak & Minta Upload Ulang">
                                            <i class="fas fa-times"></i>
                                        </button>
                                        
                                        {{-- Tombol ACC --}}
                                        <form action="{{ route('keuangan.verifikasi.approve', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menyetujui pembayaran ini? Transaksi akan otomatis memotong tagihan dan masuk ke Jurnal Akuntansi.');">
                                            @csrf
                                            <button type="submit" class="btn btn-icon btn-success rounded-circle shadow-sm hover-lift" title="Setujui Pembayaran">
                                                <i class="fas fa-check"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center justify-content-center opacity-50">
                                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
                                            <i class="fas fa-check-double fa-2x text-success"></i>
                                        </div>
                                        <h6 class="font-weight-bold text-dark mb-1">Semua Selesai!</h6>
                                        <p class="text-muted small mb-0">Belum ada antrean bukti pembayaran masuk saat ini.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- MODAL LIHAT GAMBAR (DARK MODE) --}}
<div class="modal fade" id="modalLihatBukti" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 bg-transparent shadow-none">
            <div class="modal-header border-0 pb-0 justify-content-end">
                <button type="button" class="close text-white text-shadow" data-dismiss="modal" style="font-size: 2.5rem; opacity: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.5);">&times;</button>
            </div>
            <div class="modal-body text-center pt-0">
                <img src="" id="img_preview" class="img-fluid rounded-lg modern-shadow mb-3" style="max-height: 75vh; border: 4px solid white; object-fit: contain;">
                <div class="bg-dark rounded-pill d-inline-block px-4 py-2 mx-auto modern-shadow" style="opacity: 0.9;">
                    <h6 class="text-white mb-0 font-weight-bold" id="text_pengirim">Bukti Transfer</h6>
                    <small class="text-warning font-weight-bold" id="text_klaim_nominal"></small>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL TOLAK PEMBAYARAN MODERN --}}
<div class="modal fade" id="modalTolak" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 modern-shadow" style="border-radius: 20px; overflow: hidden;">
            <div class="modal-header bg-light-danger border-0 px-4 py-3">
                <h5 class="modal-title font-weight-bold text-danger d-flex align-items-center">
                    <div class="bg-danger text-white rounded p-2 mr-3 d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    Tolak Pembayaran
                </h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form id="formTolak" method="POST">
                @csrf
                <div class="modal-body px-4 pt-4 pb-2">
                    <div class="alert bg-light border-0 text-muted text-sm rounded-lg mb-4">
                        <i class="fas fa-info-circle mr-2 text-primary"></i> Bukti ini akan dikembalikan. Tulis alasan penolakan dengan jelas agar orang tua dapat memperbaikinya.
                    </div>
                    <div class="form-group mb-4">
                        <label class="text-xs font-weight-bold text-uppercase text-muted">Alasan Penolakan <span class="text-danger">*</span></label>
                        <textarea name="catatan_penolakan" class="form-control form-control-solid" rows="3" placeholder="Contoh: Gambar buram, Nominal transfer kurang, dll..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 justify-content-between">
                    <button type="button" class="btn btn-light rounded-pill px-4 font-weight-bold text-muted border" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger rounded-pill px-4 shadow-sm font-weight-bold hover-lift">
                        <i class="fas fa-paper-plane mr-2"></i> Kirim Penolakan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* UTILITIES TEMA MODERN */
    .modern-shadow { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08); transition: transform 0.3s ease; }
    .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

    /* WARNA BACKGROUND LEMBUT */
    .bg-light-success { background-color: #ecfdf5 !important; }
    .bg-light-danger { background-color: #fef2f2 !important; }
    .bg-light-warning { background-color: #fffbeb !important; }
    .bg-light-primary { background-color: #eff6ff !important; }

    /* BUTTON ICONS */
    .btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .btn-light-danger { background-color: #fef2f2; color: #dc2626; border: none; }
    .btn-light-danger:hover { background-color: #dc2626; color: white; }

    /* FORM SOLID */
    .form-control-solid { background-color: #F5F8FA; border-color: #F5F8FA; color: #5E6278; border-radius: 10px; }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #EEF3F7; box-shadow: none; }

    /* ANIMASI JAM PASIR */
    @keyframes pulse {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.7; }
        100% { transform: scale(1); opacity: 1; }
    }
    .pulse-anim { animation: pulse 2s infinite; }

    /* TABLE STYLING */
    .table thead th { border-bottom: 2px solid #f1f5f9; background-color: #ffffff; padding-top: 1rem; padding-bottom: 1rem;}
    .table-hover tbody tr:hover { background-color: #f8fafc; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Modal Lihat Gambar Struk
        $('.btn-lihat-bukti').on('click', function() {
            let url = $(this).data('url');
            let nama = $(this).data('nama');
            let nominal = $(this).data('nominal');
            
            $('#img_preview').attr('src', url);
            $('#text_pengirim').text('Dari: ' + nama);
            $('#text_klaim_nominal').text('Klaim Transfer: Rp ' + nominal);
            $('#modalLihatBukti').modal('show');
        });

        // Modal Tolak
        $('.btn-tolak').on('click', function() {
            let id = $(this).data('id');
            let baseUrl = "{{ route('keuangan.verifikasi.reject', 'TAGIHAN_ID') }}";
            $('#formTolak').attr('action', baseUrl.replace('TAGIHAN_ID', id));
            $('#modalTolak').modal('show');
        });
    });
</script>
@stop