@extends('layout.index')
@section('title', 'Data Anggota & Cetak KTA - SIAPN')

@section('content')
<div class="container-fluid px-0">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold mb-0 text-dark">Data Anggota</h3>
            <p class="text-muted mb-0">Kelola data dan Cetak Kartu Tanda Anggota (KTA)</p>
        </div>
        <a href="{{ route('anggota.create') }}" class="btn btn-success shadow-sm rounded-pill px-3">
            <i class="bi bi-person-plus-fill me-1"></i> Tambah Anggota
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 rounded-3 mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(!$activeBlanko)
        <div class="alert alert-danger shadow-sm border-0 rounded-3 mb-4">
            <i class="bi bi-exclamation-triangle-fill me-2"></i> <strong>Perhatian:</strong> Belum ada Blanko KTA yang aktif! Fitur Cetak tidak akan berfungsi. Setel di menu Data Blanko.
        </div>
    @endif

    <div class="card border-0 shadow-sm" style="border-radius: var(--radius-xl);">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0 align-middle">
                    <thead style="background-color: var(--color-primary-50);">
                        <tr>
                            <th width="5%" class="text-center py-3 border-0 text-secondary">No</th>
                            <th class="py-3 border-0 text-secondary">Profil Anggota</th>
                            <th class="text-center py-3 border-0 text-secondary">Id Anggota</th>
                            <th class="text-center py-3 border-0 text-secondary">Asal PAC</th>
                            <th width="20%" class="text-center py-3 border-0 text-secondary">Aksi & Cetak</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($anggota as $index => $item)
                        <tr>
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    @if($item->id_gambar)
                                        <img src="{{ route('proxy.image', $item->id_gambar) }}" class="rounded-circle shadow-sm me-3" style="width: 45px; height: 45px; object-fit: cover;" alt="Foto">
                                    @else
                                        <div class="rounded-circle shadow-sm me-3 bg-secondary text-white d-flex align-items-center justify-content-center fw-bold" style="width: 45px; height: 45px; font-size: 16px;">
                                            {{ strtoupper(substr($item->nama, 0, 1)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <div class="fw-bold text-dark">{{ $item->nama }}</div>
                                        <div class="text-muted small">{{ $item->ttl }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center fw-medium text-dark">{{ $item->id_anggota }}</td>
                            <td class="text-center text-muted">{{ $item->pac->nama_pac }}</td>
                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-2">
                                    
                                    <!-- TOMBOL CETAK KTA -->
                                    <button type="button" class="btn btn-success btn-sm rounded-pill px-3 fw-bold shadow-sm" 
                                        onclick="bukaModalCetak(
                                            '{{ $item->id_anggota }}', 
                                            '{{ addslashes($item->nama) }}', 
                                            '{{ addslashes($item->ttl) }}', 
                                            '{{ addslashes($item->alamat) }}', 
                                            '{{ addslashes($item->pac->nama_pac) }}', 
                                            '{{ $item->id_gambar ? route('proxy.image', $item->id_gambar) : '' }}'
                                        )" {{ !$activeBlanko ? 'disabled' : '' }}>
                                        <i class="bi bi-printer-fill me-1"></i> Cetak KTA
                                    </button>

                                    <!-- Tombol Edit -->
                                    <a href="{{ route('anggota.edit', $item->id) }}" class="btn btn-warning btn-sm text-white rounded-3 shadow-sm">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    
                                    <!-- Tombol Hapus -->
                                    <form action="{{ route('anggota.destroy', $item->id) }}" method="POST" class="m-0" onsubmit="return confirm('Yakin ingin menghapus anggota ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm rounded-3 shadow-sm">
                                            <i class="bi bi-trash-fill"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">Belum ada data anggota.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ======================================================= -->
<!-- MODAL PREVIEW & CETAK HTML -->
<!-- ======================================================= -->
<div class="modal fade" id="modalCetakKta" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--radius-xl); background: #f8f9fa;">
            
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-success"><i class="bi bi-card-heading me-2"></i> Preview Cetak KTA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body d-flex justify-content-center" style="overflow-x: auto;">
                
                <!-- CONTAINER SCALING -->
                <div style="transform: scale(0.9); transform-origin: top center; margin-bottom: -50px;">
                    
                    <!-- MASTER AREA KTA (Resolusi: 900 x 600 px) -->
                    <div id="kta-print-area" style="width: 900px; height: 600px; position: relative; background: #fff; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1);">
                        
                        <!-- 1. FRAME FOTO -->
                        <div style="position: absolute; left: 36px; top: 183px; width: 183px; height: 250px; background: #ffffff; border: 4px solid #FFD700; border-radius: 12px; z-index: 1; box-shadow: 0 4px 8px rgba(0,0,0,0.2);"></div>

                        <!-- 2. FOTO PROFIL -->
                        <img id="cetak-foto" crossorigin="anonymous" src="" style="position: absolute; left: 36px; top: 182px; width: 190px; height: 250px; object-fit: cover; z-index: 2; border-radius: 8px;">

                        <!-- 3. GAMBAR BLANKO KTA -->
                        @if($activeBlanko)
                        <img src="{{ route('proxy.image', $activeBlanko->file_gambar) }}" crossorigin="anonymous" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;">
                        @endif

                        <!-- 4. TEKS DATA ANGGOTA -->
                        
                        <!-- No. KTA -->
                        <div id="cetak-id-anggota" style="position: absolute; left: 410px; top: 177px; z-index: 10; font-family: 'Arial Black', Arial, sans-serif; font-size: 23px; font-weight: 900; color: #000000; -webkit-text-stroke: 0.7px #ffffff; letter-spacing: 0.5px;"></div>
                        
                        <!-- Nama -->
                        <div id="cetak-nama" style="position: absolute; left: 410px; top: 225px; z-index: 10; font-family: 'Arial Black', Arial, sans-serif; font-size: 20px; font-weight: 900; color: #000000; -webkit-text-stroke: 0.7px #ffffff; text-transform: uppercase;"></div>
                        
                        <!-- TTL -->
                        <div id="cetak-ttl" style="position: absolute; left: 410px; top: 268px; z-index: 10; font-family: 'Arial Black', Arial, sans-serif; font-size: 20px; font-weight: 900; color: #000000; -webkit-text-stroke: 0.6px #ffffff;"></div>
                        
                        <!-- Alamat (Dipaksa 2 Baris) -->
                        <div id="cetak-alamat" style="position: absolute; left: 410px; top: 312px; z-index: 10; font-family: 'Arial Black', Arial, sans-serif; font-size: 17px; font-weight: 900; color: #000000; -webkit-text-stroke: 0.5px #ffffff; width: 440px; line-height: 1.25;"></div>
                        
                        <!-- PAC (Digeser ke bawah sedikit agar aman dari 2 baris alamat) -->
                        <div id="cetak-pac" style="position: absolute; left: 410px; top: 370px; z-index: 10; font-family: 'Arial Black', Arial, sans-serif; font-size: 20px; font-weight: 900; color: #000000; -webkit-text-stroke: 0.7px #ffffff;"></div>

                    </div>
                </div>
            </div>
            
            <div class="modal-footer border-0 justify-content-center pb-4 pt-0 gap-3">
                <button type="button" class="btn btn-secondary rounded-pill px-4 fw-medium" data-bs-dismiss="modal">Tutup</button>
                <button type="button" id="btnPreviewAction" onclick="previewKTA()" class="btn btn-success rounded-pill px-5 fw-bold shadow-sm" style="font-size: 1.1rem;">
                    <i class="bi bi-eye-fill me-2"></i> Preview KTA (Tab Baru)
                </button>
            </div>

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

<!-- LIBRARY HTML2CANVAS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
    let currentIdAnggota = ''; 

    function bukaModalCetak(idAnggota, nama, ttl, alamat, pac, urlFoto) {
        currentIdAnggota = idAnggota; 
        
        document.getElementById('cetak-id-anggota').innerText = idAnggota;
        document.getElementById('cetak-nama').innerText = nama.toUpperCase();
        document.getElementById('cetak-ttl').innerText = ttl;
        
        // Format alamat dipaksa menjadi 2 baris agar rapi di kartu
        let alamatFormatted = alamat;
        if (alamat.length > 30) {
            let words = alamat.split(' ');
            let line1 = '';
            let line2 = '';
            
            words.forEach(word => {
                if ((line1 + word).length <= 35 && line2 === '') {
                    line1 += word + ' ';
                } else {
                    line2 += word + ' ';
                }
            });
            alamatFormatted = line1.trim() + '<br>' + line2.trim();
        }
        
        document.getElementById('cetak-alamat').innerHTML = alamatFormatted;
        
        let cleanPac = pac.replace(/pac/gi, '').trim();
        document.getElementById('cetak-pac').innerText = cleanPac.toUpperCase();
        
        let imgEl = document.getElementById('cetak-foto');
        imgEl.crossOrigin = "Anonymous"; 
        imgEl.src = urlFoto;

        let modalEl = document.getElementById('modalCetakKta');
        let modal = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();
    }

    function previewKTA() {
        const printArea = document.getElementById('kta-print-area');
        const btn = document.getElementById('btnPreviewAction');
        const originalText = btn.innerHTML;
        
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Memproses Preview...';
        btn.disabled = true;

        html2canvas(printArea, {
            scale: 2, 
            useCORS: true, 
            allowTaint: false,
            backgroundColor: "#ffffff",
            logging: false
        }).then(canvas => {
            let imageUrl = canvas.toDataURL('image/jpeg', 0.95);
            
            let w = window.open('', '_blank');
            if(w) {
                w.document.write(`
                    <html>
                        <head>
                            <title>Preview KTA - ${currentIdAnggota}</title>
                            <style>
                                body { margin: 0; background: #222; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-family: sans-serif; color: #fff; }
                                img { max-width: 90%; height: auto; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border-radius: 8px; margin-bottom: 20px; }
                                .info { font-size: 14px; color: #bbb; text-align: center; }
                                .btn-download { margin-top: 20px; padding: 12px 24px; background: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; text-decoration: none; display: inline-block; }
                                .btn-download:hover { background: #218838; }
                            </style>
                        </head>
                        <body>
                            <img src="${imageUrl}" alt="KTA ${currentIdAnggota}"/>
                            <a href="${imageUrl}" download="KTA-${currentIdAnggota}.jpg" class="btn-download">
                                <i class="bi bi-download"></i> Download KTA
                            </a>
                            <div class="info" style="margin-top: 15px;">Preview KTA (${currentIdAnggota})</div>
                        </body>
                    </html>
                `);
                w.document.close();
            } else {
                alert("Pop-up diblokir oleh browser! Harap izinkan pop-up untuk situs ini.");
            }

            btn.innerHTML = originalText;
            btn.disabled = false;
        }).catch(err => {
            alert("Gagal merender KTA. Pastikan koneksi stabil.");
            console.error(err);
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }
</script>
@endsection