@extends('layouts.app')
@section('title', 'Detail Anggota - ' . $anggota->nama)

@section('content')
<a href="{{ url('admin/anggota') }}" class="btn btn-secondary mb-3"><i class="bi bi-arrow-left"></i> Kembali</a>

<div class="row g-4">
    <div class="col-lg-4">
        <div class="card shadow border-0 text-center">
            <div class="card-body py-4">
                @if($anggota->foto)
                    <img src="{{ asset($anggota->foto) }}" class="rounded-circle shadow-sm" style="width:120px;height:120px;object-fit:cover;">
                @else
                    @php
                        $initials = strtoupper(substr($anggota->nama, 0, 1));
                        $colors = ['#4F46E5','#7C3AED','#EC4899','#EF4444','#F59E0B','#10B981','#06B6D4','#8B5CF6','#F97316','#14B8A6'];
                        $color = $colors[crc32($anggota->nama) % count($colors)];
                    @endphp
                    <div class="rounded-circle d-inline-flex align-items-center justify-content-center text-white fw-bold shadow-sm"
                         style="width:120px;height:120px;background:{{ $color }};font-size:48px;">
                        {{ $initials }}
                    </div>
                @endif
                <h5 class="mt-3 mb-1 fw-bold">{{ $anggota->nama }}</h5>
                <span class="badge bg-secondary">{{ $anggota->no_anggota }}</span>
                @if($anggota->status == 'aktif')
                    <span class="badge bg-success">Aktif</span>
                @else
                    <span class="badge bg-danger">Nonaktif</span>
                @endif
            </div>
        </div>

        <div class="card shadow border-0 mt-4">
            <div class="card-body text-center" id="kartuAnggota">
                <h6 class="fw-bold mb-3">Kartu Anggota</h6>
                <div id="qrcode" class="d-inline-block"></div>
                <p class="mt-2 mb-0 small text-muted">{{ $anggota->no_anggota }}</p>
                <button class="btn btn-outline-primary btn-sm mt-3" onclick="cetakKartu()"><i class="bi bi-printer"></i> Cetak Kartu</button>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card shadow border-0">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Informasi Anggota</h5>
                <a href="{{ url('admin/anggota/'.$anggota->id.'/edit') }}" class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i> Edit</a>
            </div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width:180px;">No. Anggota</td>
                        <td class="fw-semibold">{{ $anggota->no_anggota }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Nama</td>
                        <td class="fw-semibold">{{ $anggota->nama }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Email</td>
                        <td>{{ $anggota->email }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Jenis Kelamin</td>
                        <td>
                            @if($anggota->jenis_kelamin == 'L') Laki-laki
                            @elseif($anggota->jenis_kelamin == 'P') Perempuan
                            @else -
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted">Tempat / Tgl. Lahir</td>
                        <td>
                            {{ $anggota->tempat_lahir ?? '-' }} /
                            {{ $anggota->tanggal_lahir ? $anggota->tanggal_lahir->format('d/m/Y') : '-' }}
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted">No. HP</td>
                        <td>{{ $anggota->no_hp ?? '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Alamat</td>
                        <td>{{ $anggota->alamat ?? '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Tanggal Terdaftar</td>
                        <td>{{ $anggota->tanggal_terdaftar ? $anggota->tanggal_terdaftar->format('d/m/Y') : '-' }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Status</td>
                        <td>
                            @if($anggota->status == 'aktif')
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-danger">Nonaktif</span>
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    new QRCode(document.getElementById('qrcode'), {
        text: '{{ $anggota->id }}',
        width: 150,
        height: 150,
        colorDark: '#0f172a',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });

    function cetakKartu() {
        var printContent = document.getElementById('kartuAnggota').innerHTML;
        var win = window.open('', '', 'width=400,height=500');
        win.document.write(
            '<html><head><title>Kartu Anggota</title>' +
            '<style>body{font-family:sans-serif;text-align:center;padding:40px;}' +
            '.fw-bold{font-weight:700;} .small{font-size:0.85rem;} .text-muted{color:#6c757d;} .mt-2{margin-top:0.5rem;}' +
            '.mb-0{margin-bottom:0;} .mb-3{margin-bottom:1rem;}' +
            '</style></head><body>' + printContent + '</body></html>'
        );
        win.document.close();
        setTimeout(function(){ win.print(); win.close(); }, 500);
    }
</script>
@endpush