{{-- resources/views/anggota/pac.blade.php --}}
@extends('layout.index')
@section('title', 'Data Anggota ' . $pac->nama_pac . ' - SIAPN')

@push('styles')
    <style>
        /* ============================================================
           ENTERPRISE DESIGN SYSTEM v11 – Premium Green Theme
           Enhanced with better spacing, consistency, and polish
           ============================================================ */

        @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap');

        :root {
            /* Brand Colors - Preserved from original */
            --primary: #0F973D;
            --primary-hover: #0B7A31;
            --primary-light: #E3F5E9;
            --primary-soft: rgba(15, 151, 61, 0.15);
            --primary-gradient: linear-gradient(135deg, #0F973D 0%, #22C55E 100%);
            
            --success: #22C55E;
            --warning: #F59E0B;
            --danger: #EF4444;
            --info: #3B82F6;
            
            --bg-body: #F1F5F9;
            --bg-card: #FFFFFF;
            --border-color: #E9EDF4;
            --border-subtle: #F1F4F9;
            
            --text-primary: #0B1A2E;
            --text-secondary: #5A6B7C;
            --text-muted: #94A3B8;
            --text-inverse: #FFFFFF;
            
            --radius-card: 20px;
            --radius-btn: 9999px;
            --radius-input: 12px;
            --radius-modal: 28px;
            --radius-sm: 8px;
            
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.07), 0 8px 24px rgba(0, 0, 0, 0.03);
            --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.09), 0 12px 32px rgba(0, 0, 0, 0.04);
            
            --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            
            /* 8pt Grid System */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
            --space-12: 48px;
            --space-16: 64px;
        }

        /* ============================================================
           RESET & BASE
           ============================================================ */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background: var(--bg-body);
            color: var(--text-primary);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 800;
            letter-spacing: -0.025em;
            margin: 0;
            line-height: 1.25;
        }

        a {
            text-decoration: none;
            color: var(--primary);
            transition: var(--transition);
        }
        a:hover {
            color: var(--primary-hover);
        }

        img {
            max-width: 100%;
            height: auto;
            vertical-align: middle;
        }

        :focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* ============================================================
           ANIMATIONS
           ============================================================ */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        @keyframes pulse-dot {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.5;
                transform: scale(0.85);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================================
           HERO SECTION – Premium Header
           ============================================================ */
        .hero-section {
            background: var(--bg-card);
            border-radius: var(--radius-card);
            padding: var(--space-6) var(--space-8);
            margin-bottom: var(--space-6);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
            animation: fadeInUp 0.6s ease-out;
            transition: var(--transition);
        }
        .hero-section:hover {
            box-shadow: var(--shadow-md);
        }

        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 100% 0%, rgba(15, 151, 61, 0.04) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero-section::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-gradient);
            opacity: 0;
            transition: var(--transition);
            border-radius: var(--radius-card) var(--radius-card) 0 0;
        }
        .hero-section:hover::after {
            opacity: 1;
        }

        /* Breadcrumb */
        .breadcrumb-custom {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            white-space: nowrap;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-secondary);
            padding: 0 0 var(--space-3) 0;
            margin-bottom: var(--space-3);
            position: relative;
            z-index: 1;
            scrollbar-width: none;
        }
        .breadcrumb-custom::-webkit-scrollbar {
            display: none;
        }
        .breadcrumb-custom a {
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.2rem 0.6rem;
            border-radius: var(--radius-sm);
            transition: var(--transition);
        }
        .breadcrumb-custom a:hover {
            color: var(--primary);
            background: var(--primary-light);
        }
        .breadcrumb-custom .separator {
            color: var(--border-color);
            font-size: 0.6rem;
        }
        .breadcrumb-custom .active {
            color: var(--text-primary);
            font-weight: 700;
            background: var(--primary-light);
            padding: 0.2rem 1rem;
            border-radius: var(--radius-btn);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        /* Header Content */
        .header-content {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-5);
            position: relative;
            z-index: 1;
        }

        .header-left {
            display: flex;
            align-items: flex-start;
            gap: var(--space-5);
            flex: 1 1 auto;
            min-width: 0;
        }

        .header-icon {
            width: 64px;
            height: 64px;
            background: var(--primary-gradient);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 2rem;
            flex-shrink: 0;
            box-shadow: 0 8px 24px rgba(15, 151, 61, 0.25);
            transition: var(--transition);
        }
        .header-icon:hover {
            transform: scale(1.04) rotate(-2deg);
            box-shadow: 0 12px 32px rgba(15, 151, 61, 0.35);
        }

        .header-text h1 {
            font-size: 1.75rem;
            font-weight: 900;
            letter-spacing: -0.03em;
            line-height: 1.2;
        }
        .header-text h1 span {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .header-text .subtitle {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-top: 0.1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .header-text .subtitle i {
            color: var(--primary);
        }

        /* Stats Badges */
        .stats-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin-top: var(--space-3);
            position: relative;
            z-index: 1;
        }

        .stat-badge-hero {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.3rem 1.2rem;
            border-radius: var(--radius-btn);
            font-size: 0.75rem;
            font-weight: 700;
            background: #fff;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-xs);
            color: var(--text-primary);
            transition: all var(--transition);
            white-space: nowrap;
            animation: fadeInUp 0.6s ease-out backwards;
        }
        .stat-badge-hero:nth-child(1) { animation-delay: 0.05s; }
        .stat-badge-hero:nth-child(2) { animation-delay: 0.1s; }
        .stat-badge-hero:nth-child(3) { animation-delay: 0.15s; }
        .stat-badge-hero:nth-child(4) { animation-delay: 0.2s; }
        .stat-badge-hero:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-soft);
        }
        .stat-badge-hero i {
            font-size: 1rem;
        }

        /* Actions */
        .desktop-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            align-items: center;
            flex-shrink: 0;
        }

        .mobile-actions {
            display: none;
            flex-wrap: wrap;
            gap: var(--space-2);
            align-items: center;
            width: 100%;
            margin-top: var(--space-3);
        }

        /* ============================================================
           BUTTONS – Enterprise Grade
           ============================================================ */
        .btn-modern {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            padding: 0.65rem 1.6rem;
            font-weight: 700;
            font-size: 0.875rem;
            border-radius: var(--radius-btn);
            border: 1px solid transparent;
            transition: all var(--transition);
            box-shadow: var(--shadow-xs);
            cursor: pointer;
            line-height: 1.4;
            min-height: 48px;
            white-space: nowrap;
            background: transparent;
            touch-action: manipulation;
            letter-spacing: 0.01em;
            position: relative;
            overflow: hidden;
            text-decoration: none !important;
        }
        .btn-modern::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-btn);
            background: rgba(255, 255, 255, 0.15);
            opacity: 0;
            transition: var(--transition);
        }
        .btn-modern:hover::after {
            opacity: 1;
        }
        .btn-modern:active {
            transform: scale(0.96);
        }
        .btn-modern:disabled {
            opacity: 0.5;
            pointer-events: none;
            transform: none !important;
        }
        .btn-modern.btn-sm {
            padding: 0.3rem 1.1rem;
            font-size: 0.75rem;
            min-height: 36px;
            gap: 0.4rem;
        }
        .btn-modern.btn-xs {
            padding: 0.15rem 0.7rem;
            font-size: 0.65rem;
            min-height: 28px;
            gap: 0.3rem;
        }

        .btn-primary-green {
            background: var(--primary-gradient);
            border-color: var(--primary);
            color: #fff;
            box-shadow: 0 4px 16px rgba(15, 151, 61, 0.3);
        }
        .btn-primary-green:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 28px rgba(15, 151, 61, 0.4);
            color: #fff;
        }

        .btn-success-green {
            background: var(--success);
            border-color: var(--success);
            color: #fff;
            box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
        }
        .btn-success-green:hover {
            background: #16A34A;
            border-color: #16A34A;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 28px rgba(34, 197, 94, 0.4);
            color: #fff;
        }

        .btn-outline-warning {
            background: transparent;
            border-color: var(--warning);
            color: var(--warning);
        }
        .btn-outline-warning:hover {
            background: #FFFBEB;
            border-color: var(--warning);
            color: #D97706;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
        }

        .btn-outline-danger {
            background: transparent;
            border-color: var(--danger);
            color: var(--danger);
        }
        .btn-outline-danger:hover {
            background: #FEF2F2;
            border-color: var(--danger);
            color: #DC2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
        }

        .btn-light {
            background: #fff;
            border-color: var(--border-color);
            color: var(--text-primary);
            box-shadow: var(--shadow-xs);
        }
        .btn-light:hover {
            background: var(--bg-body);
            border-color: #CBD5E1;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            color: var(--text-primary);
        }

        .btn-outline-green {
            background: transparent;
            border-color: var(--primary);
            color: var(--primary);
        }
        .btn-outline-green:hover {
            background: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 151, 61, 0.15);
        }

        /* ============================================================
           FILTER CARD
           ============================================================ */
        .filter-card {
            background: var(--bg-card);
            border-radius: var(--radius-card);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            padding: var(--space-5) var(--space-6);
            margin-bottom: var(--space-6);
            animation: fadeInUp 0.6s ease-out 0.1s both;
            transition: var(--transition);
        }
        .filter-card:hover {
            box-shadow: var(--shadow-md);
        }

        .filter-row-desktop {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            align-items: flex-end;
        }
        .filter-row-desktop .filter-search {
            flex: 2 1 220px;
        }
        .filter-row-desktop .filter-select {
            flex: 1 1 160px;
        }
        .filter-row-desktop .filter-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            align-items: center;
            flex: 0 1 auto;
        }

        .filter-search-mobile {
            display: none;
            width: 100%;
        }
        .filter-selects-mobile {
            display: none;
            width: 100%;
            flex-direction: column;
            gap: var(--space-3);
        }

        /* Floating Label Modern */
        .form-floating-modern {
            position: relative;
            margin-bottom: 0;
        }
        .form-floating-modern .form-control,
        .form-floating-modern .form-select {
            width: 100%;
            padding: 0.8rem 0.9rem 0.8rem 3rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
            background: #F1F5F9;
            border: 2px solid transparent;
            border-radius: var(--radius-input);
            transition: all var(--transition);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
            height: 54px;
            font-family: var(--font-family);
            -webkit-appearance: none;
            appearance: none;
        }
        .form-floating-modern .form-control:focus,
        .form-floating-modern .form-select:focus {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 5px rgba(15, 151, 61, 0.12);
            outline: none;
        }
        .form-floating-modern .form-control::placeholder {
            color: transparent;
        }
        .form-floating-modern .form-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 1.2rem;
            pointer-events: none;
            transition: color var(--transition);
            z-index: 2;
        }
        .form-floating-modern .form-control:focus ~ .form-icon,
        .form-floating-modern .form-select:focus ~ .form-icon {
            color: var(--primary);
        }
        .form-floating-modern .form-floating-label {
            position: absolute;
            left: 3rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
            pointer-events: none;
            transition: all var(--transition);
            background: transparent;
            padding: 0 0.25rem;
            white-space: nowrap;
        }
        .form-floating-modern .form-control:focus ~ .form-floating-label,
        .form-floating-modern .form-control:not(:placeholder-shown) ~ .form-floating-label,
        .form-floating-modern .form-select:focus ~ .form-floating-label,
        .form-floating-modern .form-select:not([value=""]) ~ .form-floating-label {
            top: -0.6rem;
            left: 1rem;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--primary);
            background: #fff;
            padding: 0 0.5rem;
            border-radius: 6px;
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        }
        .form-floating-modern .form-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1.2rem center;
            background-size: 12px 8px;
            padding-right: 3rem;
        }
        .form-floating-modern .form-select:focus {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F973D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        }

        /* Filter Chips */
        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 0.6rem 0.25rem 1rem;
            border-radius: var(--radius-btn);
            background: #F1F5F9;
            color: var(--text-primary);
            font-size: 0.75rem;
            font-weight: 600;
            border: 1px solid var(--border-color);
            transition: all var(--transition);
            box-shadow: var(--shadow-xs);
        }
        .filter-chip:hover {
            background: #E5EAEF;
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }
        .filter-chip .close-btn {
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1;
            color: var(--text-secondary);
            transition: color var(--transition);
            background: none;
            border: none;
            padding: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .filter-chip .close-btn:hover {
            color: var(--danger);
            background: rgba(239, 68, 68, 0.1);
        }

        /* ============================================================
           CARD GLASS – Main Container
           ============================================================ */
        .card-glass {
            background: var(--bg-card);
            border-radius: var(--radius-card);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            padding: var(--space-5);
            transition: var(--transition);
        }
        .card-glass:hover {
            box-shadow: var(--shadow-md);
        }

        /* ============================================================
           BULK ACTION BAR
           ============================================================ */
        .bulk-action-bar {
            display: none;
            background: var(--primary-light);
            border-radius: var(--radius-btn);
            padding: 0.6rem 1.2rem;
            margin-bottom: var(--space-5);
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-3);
            border: 1px solid rgba(15, 151, 61, 0.15);
            transition: var(--transition);
            animation: slideDown 0.3s ease-out;
        }
        .selection-mode .bulk-action-bar {
            display: flex;
        }

        .bulk-action-bar .form-select-sm {
            height: 38px;
            padding: 0.2rem 2rem 0.2rem 1rem;
            font-size: 0.8rem;
            border-radius: var(--radius-btn);
            border: 1px solid var(--border-color);
            background-color: #fff;
            min-width: 140px;
            font-weight: 500;
        }
        .bulk-action-bar .btn-modern {
            min-height: 38px;
            padding: 0.2rem 1.2rem;
            font-size: 0.8rem;
        }
        .bulk-action-bar .select-all-wrap {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-weight: 600;
            font-size: 0.8rem;
            color: var(--text-secondary);
            cursor: pointer;
        }
        .bulk-action-bar .select-all-wrap input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            cursor: pointer;
            border-radius: 4px;
        }
        .bulk-action-bar #selectedCount {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        /* ============================================================
           MEMBER LIST – Checkbox
           ============================================================ */
        .member-checkbox {
            display: none;
            flex-shrink: 0;
            align-items: center;
        }
        .selection-mode .member-checkbox {
            display: flex;
        }

        .member-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary);
            cursor: pointer;
            border-radius: 4px;
        }

        .card-list-wrapper {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            animation: fadeInUp 0.6s ease-out 0.15s both;
        }

        .card-member {
            border: 1px solid var(--border-color);
            border-radius: 16px;
            background: #fff;
            transition: all var(--transition);
            overflow: hidden;
            animation: fadeInUp 0.5s ease-out backwards;
            box-shadow: var(--shadow-xs);
            position: relative;
        }
        .card-member:nth-child(1) { animation-delay: 0.05s; }
        .card-member:nth-child(2) { animation-delay: 0.08s; }
        .card-member:nth-child(3) { animation-delay: 0.11s; }
        .card-member:nth-child(4) { animation-delay: 0.14s; }
        .card-member:nth-child(5) { animation-delay: 0.17s; }
        .card-member:nth-child(6) { animation-delay: 0.2s; }
        .card-member:hover {
            border-color: var(--primary-soft);
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        .card-member-header {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            padding: var(--space-4) var(--space-5);
            cursor: pointer;
            transition: background 0.2s ease;
            user-select: none;
            background: #FAFCFD;
            border-bottom: 1px solid transparent;
        }
        .card-member-header:hover {
            background: rgba(15, 151, 61, 0.02);
        }

        .member-avatar-small {
            flex-shrink: 0;
            width: 56px;
            height: 72px;
            border-radius: 12px;
            overflow: hidden;
            background: #E9EDF4;
            border: 2px solid var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            transition: var(--transition);
        }
        .card-member:hover .member-avatar-small {
            border-color: var(--primary);
            box-shadow: 0 6px 16px rgba(15, 151, 61, 0.12);
        }
        .member-avatar-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .member-avatar-small .avatar-fallback,
        .member-avatar-small .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.6rem;
            background: var(--primary-gradient);
            color: #fff;
        }

        .member-header-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }
        .member-header-info .member-name {
            font-size: 1.05rem;
            font-weight: 800;
            word-break: break-word;
            letter-spacing: -0.01em;
        }
        .member-header-info .member-id {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--bg-body);
            padding: 0.1rem 0.9rem;
            border-radius: var(--radius-btn);
            border: 1px solid var(--border-color);
            display: inline-block;
            width: fit-content;
            letter-spacing: 0.02em;
        }

        .toggle-icon-wrap {
            flex-shrink: 0;
            margin-left: auto;
            display: flex;
            align-items: center;
        }
        .toggle-icon-wrap i {
            font-size: 1.4rem;
            color: var(--primary);
            transition: transform var(--transition), color var(--transition), background var(--transition);
            background: var(--primary-light);
            border-radius: 50%;
            padding: 4px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .toggle-icon-wrap i.rotated {
            transform: rotate(180deg);
            background: var(--primary);
            color: #fff;
        }

        .card-member-detail-wrap {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-member-detail-wrap.open {
            max-height: 600px;
        }

        .card-member-detail {
            padding: 0 var(--space-5) var(--space-5) var(--space-5);
            border-top: 1px solid var(--border-color);
            background: #FAFCFD;
        }
        .card-member-detail .detail-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-5);
            align-items: flex-start;
            padding-top: var(--space-4);
        }

        .detail-info {
            flex: 1;
            min-width: 160px;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .detail-info .info-item {
            font-size: 0.875rem;
            color: var(--text-secondary);
            word-break: break-word;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .detail-info .info-item i {
            color: var(--primary);
            width: 1.2rem;
            text-align: center;
            font-size: 1rem;
        }

        .status-badge-wrap {
            flex-shrink: 0;
            margin-left: auto;
            align-self: center;
        }

        .badge-modern {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.25rem 1.2rem;
            border-radius: var(--radius-btn);
            font-weight: 700;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: var(--bg-body);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-xs);
        }
        .badge-modern::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.7;
        }
        .badge-modern-success {
            background: #DCFCE7;
            color: #166534;
            border-color: #86EFAC;
        }
        .badge-modern-success::before {
            background: #166534;
            opacity: 0.8;
        }
        .badge-modern-warning {
            background: #FEF3C7;
            color: #92400E;
            border-color: #FCD34D;
        }
        .badge-modern-warning::before {
            background: #92400E;
            opacity: 0.8;
        }
        .badge-modern-danger {
            background: #FEE2E2;
            color: #991B1B;
            border-color: #FCA5A5;
        }
        .badge-modern-danger::before {
            background: #991B1B;
            opacity: 0.8;
        }

        .member-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            align-items: center;
            padding-top: var(--space-3);
            margin-top: var(--space-3);
            width: 100%;
            border-top: 1px solid var(--border-color);
        }
        .member-actions .btn-modern {
            min-height: 34px;
            padding: 0.15rem 1rem;
            font-size: 0.75rem;
        }

        /* ============================================================
           EMPTY STATE
           ============================================================ */
        .empty-state {
            text-align: center;
            padding: var(--space-12) var(--space-5);
            animation: fadeInUp 0.5s ease-out;
        }
        .empty-state .empty-icon {
            font-size: 4.5rem;
            color: var(--primary-soft);
            margin-bottom: var(--space-4);
            opacity: 0.6;
        }
        .empty-state .empty-title {
            font-weight: 800;
            font-size: 1.3rem;
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }
        .empty-state .empty-sub {
            color: var(--text-secondary);
            margin-bottom: var(--space-5);
        }

        /* ============================================================
           PAGINATION
           ============================================================ */
        .pagination-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: var(--space-2) 0;
        }

        .pagination-custom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-1);
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .pagination-custom .page-item {
            display: inline-block;
        }

        .pagination-custom .page-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 0 0.85rem;
            border-radius: var(--radius-btn);
            border: 1px solid var(--border-color);
            background: #fff;
            color: var(--text-primary);
            font-weight: 600;
            font-size: 0.875rem;
            transition: all var(--transition);
            box-shadow: var(--shadow-xs);
            text-decoration: none;
            line-height: 1;
            cursor: pointer;
        }
        .pagination-custom .page-link:hover {
            background: var(--primary-light);
            border-color: var(--primary);
            transform: translateY(-2px);
            color: var(--primary);
            box-shadow: var(--shadow-md);
        }
        .pagination-custom .page-item.active .page-link {
            background: var(--primary-gradient);
            border-color: var(--primary);
            color: #fff;
            box-shadow: 0 4px 20px rgba(15, 151, 61, 0.35);
            transform: scale(1.05);
        }
        .pagination-custom .page-item.disabled .page-link {
            opacity: 0.4;
            pointer-events: none;
            cursor: default;
            transform: none !important;
        }
        .pagination-custom .page-link i {
            font-size: 1rem;
            line-height: 1;
        }

        .pagination-info {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
            padding: var(--space-1) 0;
        }

        /* ============================================================
           ALERT PREMIUM
           ============================================================ */
        .alert-premium {
            border-radius: var(--radius-card);
            border: none;
            box-shadow: var(--shadow-md);
            padding: var(--space-4) var(--space-5);
            margin-bottom: var(--space-5);
            display: flex;
            align-items: center;
            gap: var(--space-4);
            animation: fadeInUp 0.4s ease-out;
            border-left: 6px solid var(--danger);
            background: rgba(254, 242, 242, 0.92);
            backdrop-filter: blur(4px);
            color: #991B1B;
        }
        .alert-premium i {
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        .alert-premium strong {
            font-weight: 800;
        }

        /* ============================================================
           MODAL PREMIUM
           ============================================================ */
        .modal-premium .modal-content {
            border: none;
            border-radius: var(--radius-modal);
            box-shadow: var(--shadow-xl);
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        .modal-premium .modal-header {
            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
            padding: var(--space-5) var(--space-6);
            background: rgba(248, 250, 252, 0.5);
            border-radius: var(--radius-modal) var(--radius-modal) 0 0;
        }
        .modal-premium .modal-body {
            padding: var(--space-6);
        }
        .modal-premium .modal-footer {
            border-top: 1px solid rgba(226, 232, 240, 0.5);
            padding: var(--space-4) var(--space-6);
            background: rgba(248, 250, 252, 0.5);
            border-radius: 0 0 var(--radius-modal) var(--radius-modal);
        }
        .modal-premium .btn-close {
            width: 2rem;
            height: 2rem;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 50%;
            transition: var(--transition);
            opacity: 0.7;
        }
        .modal-premium .btn-close:hover {
            background: rgba(0, 0, 0, 0.1);
            opacity: 1;
            transform: rotate(90deg);
        }

        /* ============================================================
           RESPONSIVE – Mobile First
           ============================================================ */

        /* Tablet & below */
        @media (max-width: 991px) {
            .hero-section {
                padding: var(--space-5) var(--space-5);
            }
            .hero-section .header-text h1 {
                font-size: 1.4rem;
            }
            .header-icon {
                width: 50px;
                height: 50px;
                font-size: 1.6rem;
            }
            .stat-badge-hero {
                padding: 0.2rem 0.9rem;
                font-size: 0.7rem;
            }
        }

        /* Mobile */
        @media (max-width: 767px) {
            .hero-section {
                padding: var(--space-4) var(--space-4);
                border-radius: 16px;
                margin-bottom: var(--space-5);
            }
            .header-content {
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-3);
            }
            .header-left {
                flex-direction: row !important;
                align-items: flex-start;
                gap: var(--space-3);
            }
            .header-icon {
                width: 44px;
                height: 44px;
                font-size: 1.3rem;
                border-radius: 14px;
            }
            .header-text h1 {
                font-size: 1.15rem;
            }
            .header-text .subtitle {
                font-size: 0.75rem;
                margin-top: 0;
            }
            .stats-wrap {
                gap: var(--space-1);
                margin-top: var(--space-2);
            }
            .stat-badge-hero {
                font-size: 0.6rem;
                padding: 0.15rem 0.6rem;
                gap: 0.3rem;
            }
            .stat-badge-hero i {
                font-size: 0.8rem;
            }

            .desktop-actions {
                display: none !important;
            }
            .mobile-actions {
                display: flex !important;
                gap: var(--space-2);
                margin-top: var(--space-2);
            }
            .mobile-actions .btn-modern {
                min-width: 44px;
                height: 44px;
                padding: 0;
                font-size: 1.1rem;
                border-radius: var(--radius-btn);
            }

            .filter-card {
                padding: var(--space-4);
                margin-bottom: var(--space-5);
                border-radius: 16px;
            }
            .filter-row-desktop {
                display: none !important;
            }
            .filter-search-mobile {
                display: block !important;
            }
            .filter-selects-mobile {
                display: flex !important;
                gap: var(--space-3);
            }

            .form-floating-modern .form-control,
            .form-floating-modern .form-select {
                height: 46px;
                padding: 0.5rem 0.8rem 0.5rem 2.4rem;
                font-size: 0.8rem;
                border-radius: var(--radius-input);
            }
            .form-floating-modern .form-icon {
                font-size: 0.9rem;
                left: 0.7rem;
            }
            .form-floating-modern .form-floating-label {
                left: 2.4rem;
                font-size: 0.75rem;
            }
            .form-floating-modern .form-control:focus ~ .form-floating-label,
            .form-floating-modern .form-control:not(:placeholder-shown) ~ .form-floating-label,
            .form-floating-modern .form-select:focus ~ .form-floating-label,
            .form-floating-modern .form-select:not([value=""]) ~ .form-floating-label {
                font-size: 0.65rem;
                top: -0.5rem;
                left: 0.8rem;
                padding: 0 0.4rem;
            }
            .form-floating-modern .form-select {
                padding-right: 2.4rem;
                background-position: right 0.8rem center;
            }

            .card-glass {
                padding: var(--space-3);
                border-radius: 16px;
            }
            .card-member-header {
                padding: var(--space-3) var(--space-3);
                gap: var(--space-3);
            }
            .member-avatar-small {
                width: 44px;
                height: 56px;
                border-radius: 10px;
                border-width: 2px;
            }
            .member-avatar-small .avatar-placeholder,
            .member-avatar-small .avatar-fallback {
                font-size: 1.2rem;
            }
            .member-header-info .member-name {
                font-size: 0.9rem;
            }
            .member-header-info .member-id {
                font-size: 0.65rem;
                padding: 0.05rem 0.6rem;
            }
            .toggle-icon-wrap i {
                width: 30px;
                height: 30px;
                font-size: 1.1rem;
                padding: 3px;
            }

            .card-member-detail {
                padding: 0 var(--space-3) var(--space-3) var(--space-3);
            }
            .detail-row {
                flex-direction: column;
                align-items: stretch !important;
                gap: var(--space-3);
                padding-top: var(--space-3);
            }
            .status-badge-wrap {
                align-self: flex-start;
                margin-left: 0;
            }
            .badge-modern {
                font-size: 0.6rem;
                padding: 0.15rem 0.8rem;
                gap: 0.3rem;
            }
            .badge-modern::before {
                width: 6px;
                height: 6px;
            }
            .detail-info {
                min-width: 0;
                gap: 0.2rem;
            }
            .detail-info .info-item {
                font-size: 0.8rem;
            }
            .detail-info .info-item i {
                width: 1rem;
                font-size: 0.9rem;
            }

            .member-actions {
                gap: var(--space-2);
                padding-top: var(--space-2);
                margin-top: var(--space-2);
                flex-wrap: wrap;
            }
            .member-actions .btn-modern {
                flex: 1 1 auto;
                min-width: 0;
                font-size: 0.7rem;
                padding: 0.2rem 0.6rem;
                min-height: 32px;
                justify-content: center;
            }

            /* Bulk action mobile */
            .bulk-action-bar {
                padding: var(--space-3) var(--space-3);
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-2);
                border-radius: 16px;
            }
            .bulk-action-bar .select-all-wrap {
                justify-content: center;
            }
            .bulk-action-bar .form-select-sm {
                width: 100%;
            }
            .bulk-action-bar .btn-modern {
                width: 100%;
                justify-content: center;
            }
            .bulk-action-bar #selectedCount {
                text-align: center;
            }

            /* Pagination mobile */
            .pagination-wrapper {
                justify-content: center;
                flex-wrap: wrap;
            }
            .pagination-custom {
                gap: var(--space-1);
            }
            .pagination-custom .page-link {
                min-width: 34px;
                height: 34px;
                font-size: 0.75rem;
                padding: 0 0.5rem;
            }
            .pagination-info {
                font-size: 0.75rem;
                text-align: center;
                width: 100%;
                margin-bottom: var(--space-2);
            }
            .pagination-custom .page-link i {
                font-size: 0.8rem;
            }

            .member-checkbox input[type="checkbox"] {
                width: 18px;
                height: 18px;
            }
        }

        /* Small phones */
        @media (max-width: 400px) {
            .hero-section {
                padding: var(--space-3) var(--space-3);
            }
            .header-icon {
                width: 38px;
                height: 38px;
                font-size: 1rem;
                border-radius: 12px;
            }
            .header-text h1 {
                font-size: 1rem;
            }
            .header-text .subtitle {
                font-size: 0.65rem;
            }
            .stat-badge-hero {
                font-size: 0.55rem;
                padding: 0.1rem 0.5rem;
            }
            .stat-badge-hero i {
                font-size: 0.7rem;
            }
            .form-floating-modern .form-control,
            .form-floating-modern .form-select {
                height: 40px;
                font-size: 0.75rem;
                padding-left: 2rem;
            }
            .form-floating-modern .form-icon {
                font-size: 0.75rem;
                left: 0.6rem;
            }
            .form-floating-modern .form-floating-label {
                left: 2rem;
                font-size: 0.65rem;
            }
            .btn-modern {
                font-size: 0.7rem;
                padding: 0.3rem 0.8rem;
                min-height: 36px;
            }
            .btn-modern.btn-sm {
                font-size: 0.65rem;
                padding: 0.15rem 0.6rem;
                min-height: 28px;
            }
            .member-avatar-small {
                width: 38px;
                height: 48px;
            }
            .member-header-info .member-name {
                font-size: 0.8rem;
            }
            .member-header-info .member-id {
                font-size: 0.6rem;
                padding: 0.05rem 0.5rem;
            }
            .toggle-icon-wrap i {
                width: 26px;
                height: 26px;
                font-size: 0.9rem;
            }
            .card-member-header {
                gap: var(--space-2);
                padding: var(--space-2) var(--space-2);
            }
            .detail-info .info-item {
                font-size: 0.7rem;
            }
            .member-actions .btn-modern {
                font-size: 0.6rem;
                min-height: 26px;
                padding: 0.1rem 0.4rem;
            }
            .pagination-custom .page-link {
                min-width: 30px;
                height: 30px;
                font-size: 0.65rem;
                padding: 0 0.4rem;
            }
            .pagination-custom .page-link i {
                font-size: 0.7rem;
            }
        }

        /* QR Code internal fix */
        #cetak-qr img,
        #cetak-qr canvas,
        #cetak-qr svg,
        #dl-qr img,
        #dl-qr canvas,
        #dl-qr svg {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain;
        }

        /* Focus ring for accessibility */
        .btn-modern:focus-visible,
        .form-control:focus-visible,
        .form-select:focus-visible,
        .page-link:focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: 2px;
        }

        /* Utility */
        .fw-600 { font-weight: 600; }
        .fw-700 { font-weight: 700; }
        .fw-800 { font-weight: 800; }
        .text-muted-light { color: var(--text-muted); }
    </style>
@endpush

@section('content')
    <div class="container-fluid px-0 py-3 px-md-3" style="max-width:1400px;">

        {{-- HERO SECTION --}}
        <div class="hero-section" role="banner">
            <nav aria-label="Breadcrumb" class="breadcrumb-custom">
                <a href="{{ route('dashboard.index') }}"><i class="bi bi-house"></i> Dashboard</a>
                <span class="separator"> / </span>
                <a href="{{ route('anggota.index') }}"><i class="bi bi-people"></i> Data Anggota</a>
                <span class="separator"> / </span>
                <span class="active"><i class="bi bi-building"></i> {{ $pac->nama_pac }}</span>
            </nav>

            <div class="header-content">
                <div class="header-left">
                    <div class="header-icon"><i class="bi bi-people"></i></div>
                    <div class="header-text">
                        <h1>Data Anggota <span>{{ $pac->nama_pac }}</span></h1>
                        <div class="subtitle"><i class="bi bi-clock"></i> <span>Kelola Data Anggota</span></div>
                        <div class="stats-wrap">
                            <span class="stat-badge-hero"><i class="bi bi-people-fill" style="color:#198754;"></i> {{ $total }}</span>
                            <span class="stat-badge-hero" style="border-color:#a7f3d0;"><i class="bi bi-check-circle-fill" style="color:#198754;"></i> {{ $aktif }}</span>
                            <span class="stat-badge-hero" style="border-color:#fde68a;"><i class="bi bi-exclamation-circle-fill" style="color:#f59e0b;"></i> {{ $baru }}</span>
                            <span class="stat-badge-hero" style="border-color:#fecaca;"><i class="bi bi-x-circle-fill" style="color:#dc2626;"></i> {{ $nonaktif }}</span>
                        </div>
                    </div>
                </div>

                {{-- Desktop Actions --}}
                <div class="desktop-actions">
                    <a href="{{ route('anggota.index') }}" class="btn-modern btn-light"><i class="bi bi-arrow-left"></i> <span class="btn-label">Kembali</span></a>
                    @if($user->role === 'super_admin')
                        <button type="button" class="btn-modern btn-primary-green" data-bs-toggle="modal" data-bs-target="#modalDownloadMassal"><i class="bi bi-file-zip-fill"></i> <span class="btn-label">Download Massal</span></button>
                    @endif
                    <a href="{{ route('anggota.create', ['pac_id' => $pac->id]) }}" class="btn-modern btn-success-green"><i class="bi bi-person-plus-fill"></i> <span class="btn-label">Tambah Anggota</span></a>
                    <button type="button" class="btn-modern btn-outline-green" id="toggleSelectionMode">
                        <i class="bi bi-check2-square"></i> <span class="btn-label">Pilih Anggota</span>
                    </button>
                </div>

                {{-- Mobile Actions --}}
                <div class="mobile-actions">
                    <a href="{{ route('anggota.index') }}" class="btn-modern btn-light" title="Kembali"><i class="bi bi-arrow-left"></i></a>
                    @if($user->role === 'super_admin')
                        <button type="button" class="btn-modern btn-primary-green" data-bs-toggle="modal" data-bs-target="#modalDownloadMassal" title="Download Massal"><i class="bi bi-file-zip"></i></button>
                    @endif
                    <a href="{{ route('anggota.create', ['pac_id' => $pac->id]) }}" class="btn-modern btn-success-green" title="Tambah Anggota"><i class="bi bi-person-plus-fill"></i></a>
                    <button type="button" class="btn-modern btn-outline-green" id="toggleSelectionModeMobile" title="Pilih Anggota">
                        <i class="bi bi-check2-square"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- Alert Blanko --}}
        @if(!$activeBlanko && $user->role === 'super_admin')
            <div class="alert alert-premium" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i>
                <div><strong>Perhatian!</strong> Belum ada Blanko KTA yang aktif. Fitur Cetak tidak akan berfungsi.</div>
            </div>
        @endif

        {{-- FILTER CARD --}}
        <div class="filter-card mb-4">
            <form id="filterForm" method="GET" action="{{ route('anggota.pac', ['id' => $pac->id]) }}">

                {{-- Desktop Filter --}}
                <div class="filter-row-desktop d-none d-md-flex">
                    <div class="filter-search">
                        <div class="form-floating-modern">
                            <i class="bi bi-search form-icon"></i>
                            <input type="text" name="search" class="form-control" placeholder=" " value="{{ request('search') }}" id="searchInput" autocomplete="off">
                            <label for="searchInput" class="form-floating-label">Cari Anggota</label>
                        </div>
                    </div>

                    <div class="filter-select">
                        <div class="form-floating-modern">
                            <i class="bi bi-calendar3 form-icon"></i>
                            <select name="pengesahan" class="form-select" id="filterPengesahan">
                                <option value="">Semua Pengesahan</option>
                                @foreach($pengesahanList as $p)
                                    <option value="{{ $p->id }}" {{ request('pengesahan') == $p->id ? 'selected' : '' }}>
                                        {{ $p->tahun }} - {{ $p->tanggal_bulan }}
                                    </option>
                                @endforeach
                            </select>
                            <label for="filterPengesahan" class="form-floating-label">Pengesahan</label>
                        </div>
                    </div>

                    <div class="filter-select">
                        <div class="form-floating-modern">
                            <i class="bi bi-sort-alpha-down form-icon"></i>
                            <select name="sort" class="form-select" id="sortSelect" onchange="document.getElementById('filterForm').submit()">
                                <option value="">Default</option>
                                <option value="nama" {{ request('sort') == 'nama' ? 'selected' : '' }}>Nama (A-Z)</option>
                                <option value="nama_desc" {{ request('sort') == 'nama_desc' ? 'selected' : '' }}>Nama (Z-A)</option>
                                <option value="id_anggota" {{ request('sort') == 'id_anggota' ? 'selected' : '' }}>ID Anggota ↑</option>
                                <option value="id_anggota_desc" {{ request('sort') == 'id_anggota_desc' ? 'selected' : '' }}>ID Anggota ↓</option>
                                <option value="status" {{ request('sort') == 'status' ? 'selected' : '' }}>Status Aktif</option>
                            </select>
                            <label for="sortSelect" class="form-floating-label">Urutkan</label>
                        </div>
                    </div>

                    <div class="filter-actions">
                        <button type="submit" class="btn-modern btn-primary-green">
                            <i class="bi bi-funnel-fill"></i> Filter
                        </button>
                        <a href="{{ route('anggota.pac', ['id' => $pac->id]) }}" class="btn-modern btn-light" title="Reset filter">
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </a>
                    </div>
                </div>

                {{-- Mobile Filter --}}
                <div class="filter-mobile-wrapper d-block d-md-none mt-2 mb-2">
                    <div class="filter-search-mobile mb-3">
                        <div class="form-floating-modern">
                            <i class="bi bi-search form-icon"></i>
                            <input type="text" name="search" class="form-control" placeholder=" " value="{{ request('search') }}" id="searchInputMobile" autocomplete="off">
                            <label for="searchInputMobile" class="form-floating-label">Cari Anggota</label>
                        </div>
                    </div>

                    <div class="filter-selects-mobile d-flex flex-column gap-3">
                        <div class="form-floating-modern">
                            <i class="bi bi-calendar3 form-icon"></i>
                            <select name="pengesahan" class="form-select" id="filterPengesahanMobile">
                                <option value="">Semua Pengesahan</option>
                                @foreach($pengesahanList as $p)
                                    <option value="{{ $p->id }}" {{ request('pengesahan') == $p->id ? 'selected' : '' }}>
                                        {{ $p->tahun }} - {{ $p->tanggal_bulan }}
                                    </option>
                                @endforeach
                            </select>
                            <label for="filterPengesahanMobile" class="form-floating-label">Pengesahan</label>
                        </div>

                        <div class="form-floating-modern">
                            <i class="bi bi-sort-alpha-down form-icon"></i>
                            <select name="sort" class="form-select" id="sortSelectMobile" onchange="document.getElementById('filterForm').submit()">
                                <option value="">Default</option>
                                <option value="nama" {{ request('sort') == 'nama' ? 'selected' : '' }}>Nama (A-Z)</option>
                                <option value="nama_desc" {{ request('sort') == 'nama_desc' ? 'selected' : '' }}>Nama (Z-A)</option>
                                <option value="id_anggota" {{ request('sort') == 'id_anggota' ? 'selected' : '' }}>ID Anggota ↑</option>
                                <option value="id_anggota_desc" {{ request('sort') == 'id_anggota_desc' ? 'selected' : '' }}>ID Anggota ↓</option>
                                <option value="status" {{ request('sort') == 'status' ? 'selected' : '' }}>Status Aktif</option>
                            </select>
                            <label for="sortSelectMobile" class="form-floating-label">Urutkan</label>
                        </div>

                        <div class="d-flex gap-2 mt-1">
                            <button type="submit" class="btn-modern btn-primary-green flex-grow-1 d-flex justify-content-center align-items-center" style="min-height:48px;">
                                <i class="bi bi-funnel-fill me-2"></i> Filter
                            </button>
                            <a href="{{ route('anggota.pac', ['id' => $pac->id]) }}" class="btn-modern btn-light flex-grow-1 d-flex justify-content-center align-items-center" style="min-height:48px;" title="Reset filter">
                                <i class="bi bi-arrow-counterclockwise me-2"></i> Reset
                            </a>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        {{-- Filter Chips --}}
        @if(request('search') || request('pengesahan') || request('sort'))
            <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                <span class="text-muted small fw-600 me-1">Filter aktif:</span>
                @if(request('search'))
                    @php $searchVal = is_array(request('search')) ? request('search')[0] : request('search'); @endphp
                    <span class="filter-chip"><i class="bi bi-search"></i> "{{ $searchVal }}" <a href="{{ route('anggota.pac', array_merge(['id' => $pac->id], request()->except('search'))) }}" class="close-btn">&times;</a></span>
                @endif
                @if(request('pengesahan'))
                    @php $pengesahan = \App\Models\Pengesahan::find(request('pengesahan')); @endphp
                    <span class="filter-chip"><i class="bi bi-calendar3"></i> {{ optional($pengesahan)->tahun ?? '' }} - {{ optional($pengesahan)->tanggal_bulan ?? '' }} <a href="{{ route('anggota.pac', array_merge(['id' => $pac->id], request()->except('pengesahan'))) }}" class="close-btn">&times;</a></span>
                @endif
                @if(request('sort'))
                    <span class="filter-chip"><i class="bi bi-sort-alpha-down"></i> {{ ucwords(str_replace('_',' ', request('sort'))) }} <a href="{{ route('anggota.pac', array_merge(['id' => $pac->id], request()->except('sort'))) }}" class="close-btn">&times;</a></span>
                @endif
            </div>
        @endif

        {{-- MEMBER LIST --}}
        <div class="card-glass" id="cardGlassContainer">
            @if($anggota->count() > 0)
                {{-- Bulk Action Bar --}}
                @if($user->role === 'super_admin')
                <div class="bulk-action-bar" id="bulkActionBar">
                    <div class="select-all-wrap">
                        <input type="checkbox" id="selectAllCheckbox">
                        <label for="selectAllCheckbox">Pilih Semua</label>
                    </div>

                    <select class="form-select-sm" id="bulkStatusSelect">
                        <option value="">Ubah Status...</option>
                        <option value="Aktif">Aktif</option>
                        <option value="Baru">Baru</option>
                        <option value="Nonaktif">Nonaktif</option>
                    </select>

                    <button class="btn-modern btn-sm btn-primary-green" id="bulkUpdateBtn" disabled>
                        <i class="bi bi-check2-circle"></i> Update
                    </button>

                    <button class="btn-modern btn-sm btn-success-green" id="bulkDownloadBtn" disabled>
                        <i class="bi bi-download"></i> Download Terpilih
                    </button>

                    <span class="text-muted small ms-2" id="selectedCount">0 dipilih</span>
                </div>
                @endif

                <div class="card-list-wrapper">
                    @foreach($anggota as $item)
                        @php
                            $fotoUrl = $item->id_gambar ? route('proxy.image', $item->id_gambar) : '';
                            $initial = strtoupper(substr($item->nama, 0, 1));
                        @endphp
                        <div class="card-member" data-id="{{ $item->id }}">
                            <div class="card-member-header toggle-detail" data-target="detail-{{ $item->id }}">
                                {{-- Checkbox --}}
                                @if($user->role === 'super_admin')
                                <div class="member-checkbox">
                                    <input type="checkbox" class="member-checkbox-input" value="{{ $item->id }}">
                                </div>
                                @endif

                                <div class="member-avatar-small">
                                    @if($fotoUrl)
                                        <img src="{{ $fotoUrl }}" alt="Foto {{ $item->nama }}" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                        <div class="avatar-fallback" style="display:none;">{{ $initial }}</div>
                                    @else
                                        <div class="avatar-placeholder">{{ $initial }}</div>
                                    @endif
                                </div>
                                <div class="member-header-info">
                                    <span class="member-name">{{ $item->nama }}</span>
                                    <span class="member-id"><i class="bi bi-upc-scan me-1"></i> {{ $item->id_anggota }}</span>
                                </div>
                                <div class="toggle-icon-wrap">
                                    <i class="bi bi-chevron-down" id="icon-{{ $item->id }}"></i>
                                </div>
                            </div>

                            <div class="card-member-detail-wrap" id="detail-{{ $item->id }}">
                                <div class="card-member-detail">
                                    <div class="detail-row">
                                        <div class="detail-info">
                                            <span class="info-item"><i class="bi bi-calendar3"></i> {{ $item->ttl }}</span>
                                            <span class="info-item"><i class="bi bi-geo-alt"></i> {{ \Illuminate\Support\Str::limit($item->alamat, 80) }}</span>
                                        </div>
                                        <div class="status-badge-wrap">
                                            <span class="badge-modern 
                                                @if($item->status == 'Aktif') badge-modern-success 
                                                @elseif($item->status == 'Baru') badge-modern-warning 
                                                @else badge-modern-danger @endif">
                                                {{ $item->status }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="member-actions">
                                        @if($user->role === 'super_admin')
                                            <button type="button" class="btn-modern btn-sm btn-outline-green"
                                                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 ? route('proxy.image', $activeBlanko->file_gambar) : '' }}',
                                                    '{{ route('anggota.verify.public', $item->id) }}'
                                                )" {{ !$activeBlanko ? 'disabled' : '' }}>
                                                <i class="bi bi-printer-fill me-1"></i> Cetak
                                            </button>
                                        @endif
                                        <a href="{{ route('anggota.edit', $item->id) }}" class="btn-modern btn-sm btn-outline-warning"><i class="bi bi-pencil-square me-1"></i> Edit</a>
                                        <form action="{{ route('anggota.destroy', $item->id) }}" method="POST" class="m-0" style="display:contents;" onsubmit="return confirmDelete(event);">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn-modern btn-sm btn-outline-danger"><i class="bi bi-trash-fill me-1"></i> Hapus</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- PAGINATION --}}
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center px-2 py-3 gap-3 border-top border-light mt-3">
                    <div class="pagination-info text-muted small text-center text-md-start">
                        Menampilkan <strong>{{ $anggota->firstItem() ?? 0 }}</strong> – <strong>{{ $anggota->lastItem() ?? 0 }}</strong> dari <strong>{{ $anggota->total() }}</strong> data
                    </div>
                    <div class="pagination-wrapper">
                        <nav aria-label="Paginasi halaman">
                            <ul class="pagination-custom">
                                @if($anggota->onFirstPage())
                                    <li class="page-item disabled"><span class="page-link disabled"><i class="bi bi-chevron-left"></i> Prev</span></li>
                                @else
                                    <li class="page-item"><a class="page-link" href="{{ $anggota->previousPageUrl() }}" rel="prev"><i class="bi bi-chevron-left"></i> Prev</a></li>
                                @endif

                                @php
                                    $current = $anggota->currentPage();
                                    $last = $anggota->lastPage();
                                    $start = max(1, $current - 2);
                                    $end = min($last, $current + 2);
                                    if ($end - $start < 4) {
                                        if ($start > 1) $start = max(1, $last - 4);
                                        if ($end < $last) $end = min($last, $start + 4);
                                    }
                                @endphp

                                @if($start > 1)
                                    <li class="page-item"><a class="page-link" href="{{ $anggota->url(1) }}">1</a></li>
                                    @if($start > 2)
                                        <li class="page-item disabled"><span class="page-link disabled">…</span></li>
                                    @endif
                                @endif

                                @for($page = $start; $page <= $end; $page++)
                                    @if($page == $current)
                                        <li class="page-item active"><span class="page-link active">{{ $page }}</span></li>
                                    @else
                                        <li class="page-item"><a class="page-link" href="{{ $anggota->url($page) }}">{{ $page }}</a></li>
                                    @endif
                                @endfor

                                @if($end < $last)
                                    @if($end < $last - 1)
                                        <li class="page-item disabled"><span class="page-link disabled">…</span></li>
                                    @endif
                                    <li class="page-item"><a class="page-link" href="{{ $anggota->url($last) }}">{{ $last }}</a></li>
                                @endif

                                @if($anggota->hasMorePages())
                                    <li class="page-item"><a class="page-link" href="{{ $anggota->nextPageUrl() }}" rel="next">Next <i class="bi bi-chevron-right"></i></a></li>
                                @else
                                    <li class="page-item disabled"><span class="page-link disabled">Next <i class="bi bi-chevron-right"></i></span></li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                </div>

            @else
                <div class="empty-state text-center py-5">
                    <div class="empty-icon mb-3"><i class="bi bi-folder2-open"></i></div>
                    <div class="empty-title fw-bold mb-2">Tidak ada anggota</div>
                    <div class="empty-sub text-muted mb-4">Belum ada anggota yang terdaftar di PAC ini.</div>
                    <a href="{{ route('anggota.pac', ['id' => $pac->id]) }}" class="btn-modern btn-outline-green">Reset Filter</a>
                </div>
            @endif
        </div>

        {{-- MODAL DOWNLOAD MASSAL --}}
        @if($user->role === 'super_admin')
        <div class="modal fade modal-premium" id="modalDownloadMassal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title d-flex align-items-center gap-2"><i class="bi bi-file-zip-fill fs-4" style="color:var(--primary);"></i> Download Massal KTA</h5>
                        <button type="button" class="btn-close" id="closeMassalBtn" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted">Anda akan mengunduh semua KTA untuk <strong>{{ $pac->nama_pac }}</strong>.</p>

                        <div class="mb-3">
                            <label for="selectPengesahanMassal" class="form-label fw-600"><i class="bi bi-funnel me-1"></i> Filter Berdasarkan Pengesahan</label>
                            <select id="selectPengesahanMassal" class="form-select">
                                <option value="">Semua Pengesahan</option>
                                @foreach($pengesahanList as $p)
                                    <option value="{{ $p->id }}">{{ $p->tahun }} - {{ $p->tanggal_bulan }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div id="progressMassal" class="mt-3" style="display:none;">
                            <div class="d-flex justify-content-between mb-1"><span class="fw-600">Memproses...</span><span id="progressText" class="fw-bold" style="color:var(--primary);">0%</span></div>
                            <div class="progress rounded-pill" style="height:10px;background:#E2E8F0;">
                                <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated rounded-pill" style="width:0%;background:var(--primary-gradient);"></div>
                            </div>
                        </div>
                        <p class="text-danger small mt-2" id="massalError"></p>
                    </div>
                    <div class="modal-footer justify-content-center gap-3 flex-wrap">
                        <button type="button" class="btn-modern btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="button" id="btnProsesMassal" class="btn-modern btn-primary-green px-5"><i class="bi bi-box-arrow-down"></i> Proses & Download</button>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- MODAL CETAK KTA --}}
        @if($user->role === 'super_admin')
        <div class="modal fade modal-premium" id="modalCetakKta" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content" style="background:#F8FAFC;">
                    <div class="modal-header">
                        <h5 class="modal-title d-flex align-items-center gap-2" style="color:var(--primary);"><i class="bi bi-card-heading fs-4"></i> Preview & Download 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 px-2 px-md-4" style="overflow-x:auto;">
                        <div style="transform:scale(0.9);transform-origin:top center;margin-bottom:-50px;">
                            <div id="kta-print-area" style="width:900px;height:600px;position:relative;background:#fff;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.12);border-radius:12px;">
                                <div id="foto-container-preview" style="position:absolute;left:20px;top:168px;width:205px;height:275px;background:#fff;border:4px solid #FFD700;border-radius:12px;z-index:2;padding:4px;box-sizing:border-box;">
                                    <img id="cetak-foto" style="width:100%;height:100%;object-fit:cover;border-radius:8px;z-index:1;position:relative;">
                                </div>
                                <img id="cetak-blanko" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;object-fit:fill;">
                                <div id="cetak-qr" style="position:absolute;left:70px;top:415px;z-index:10;width:115px;height:115px;"></div>
                                <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:#000;-webkit-text-stroke:0.7px #fff;letter-spacing:.5px;"></div>
                                <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:#000;-webkit-text-stroke:0.7px #fff;text-transform:uppercase;"></div>
                                <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:#000;-webkit-text-stroke:0.6px #fff;"></div>
                                <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:#000;-webkit-text-stroke:0.5px #fff;width:440px;line-height:1.25;"></div>
                                <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:#000;-webkit-text-stroke:0.7px #fff;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center gap-3 flex-wrap">
                        <button type="button" class="btn-modern btn-light" data-bs-dismiss="modal">Tutup</button>
                        <button type="button" id="btnDownloadAction" onclick="downloadKTA()" class="btn-modern btn-success-green px-5" style="font-size:1.05rem;"><i class="bi bi-download"></i> Download KTA</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- HIDDEN DOWNLOAD AREA -->
        <div style="position:fixed;left:0;top:0;opacity:0;pointer-events:none;z-index:-9999;">
            <div id="kta-download-area" style="width:900px;height:600px;position:relative;background:#fff;overflow:hidden;">
                <div id="foto-container-download" style="position:absolute;left:20px;top:168px;width:205px;height:275px;background:#fff;border:4px solid #FFD700;border-radius:12px;z-index:2;padding:4px;box-sizing:border-box;">
                    <img id="dl-foto" crossorigin="anonymous" style="width:100%;height:100%;object-fit:cover;border-radius:8px;z-index:1;position:relative;">
                </div>
                <img id="dl-blanko" crossorigin="anonymous" style="position:absolute;top:0;left:0;width:900px;height:600px;z-index:3;object-fit:fill;">
                <div id="dl-qr" style="position:absolute;left:70px;top:415px;z-index:10;width:115px;height:115px;"></div>
                <div id="dl-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:#000;-webkit-text-stroke:0.7px #fff;letter-spacing:.5px;"></div>
                <div id="dl-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:#000;-webkit-text-stroke:0.7px #fff;text-transform:uppercase;"></div>
                <div id="dl-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:#000;-webkit-text-stroke:0.6px #fff;"></div>
                <div id="dl-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:#000;-webkit-text-stroke:0.5px #fff;width:440px;line-height:1.25;"></div>
                <div id="dl-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:#000;-webkit-text-stroke:0.7px #fff;"></div>
            </div>
        </div>
        @endif

    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // ============================================================
        // TOGGLE DETAIL
        // ============================================================
        document.addEventListener('DOMContentLoaded', function() {
            const headers = document.querySelectorAll('.toggle-detail');
            headers.forEach(header => {
                header.addEventListener('click', function(e) {
                    if (e.target.closest('.member-checkbox')) return;
                    const targetId = this.dataset.target;
                    const detailWrap = document.getElementById(targetId);
                    if (!detailWrap) return;

                    const isOpen = detailWrap.classList.contains('open');
                    const icon = this.querySelector('.toggle-icon-wrap i');

                    if (isOpen) {
                        detailWrap.classList.remove('open');
                        if (icon) icon.classList.remove('rotated');
                    } else {
                        detailWrap.classList.add('open');
                        if (icon) icon.classList.add('rotated');
                    }
                });
            });

            document.querySelectorAll('.card-member-detail-wrap').forEach(el => {
                el.classList.remove('open');
            });
            document.querySelectorAll('.toggle-icon-wrap i').forEach(icon => {
                icon.classList.remove('rotated');
            });
        });

        // ============================================================
        // REAL-TIME SEARCH
        // ============================================================
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('filterForm');
            if (!form) return;
            const searchDesktop = document.getElementById('searchInput');
            const searchMobile = document.getElementById('searchInputMobile');
            let timeout = null;

            function handleSearch(activeInput) {
                const other = activeInput === searchDesktop ? searchMobile : searchDesktop;
                if (other) other.value = activeInput.value;
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    if (searchDesktop && searchMobile) {
                        const desktopWrapper = searchDesktop.closest('.filter-row-desktop');
                        const isDesktop = desktopWrapper && window.getComputedStyle(desktopWrapper).display !== 'none';
                        searchDesktop.disabled = !isDesktop;
                        searchMobile.disabled = isDesktop;
                    }
                    form.submit();
                }, 500);
            }

            if (searchDesktop) searchDesktop.addEventListener('input', function() { handleSearch(this); });
            if (searchMobile) searchMobile.addEventListener('input', function() { handleSearch(this); });

            if (searchDesktop && searchMobile) {
                const enforce = () => {
                    const desktopWrapper = searchDesktop.closest('.filter-row-desktop');
                    const isDesktop = desktopWrapper && window.getComputedStyle(desktopWrapper).display !== 'none';
                    searchDesktop.disabled = !isDesktop;
                    searchMobile.disabled = isDesktop;
                };
                enforce();
                window.addEventListener('resize', enforce);
            }
        });

        // ============================================================
        // TOGGLE SELECTION MODE
        // ============================================================
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('toggleSelectionMode');
            const toggleBtnMobile = document.getElementById('toggleSelectionModeMobile');

            function toggleSelection() {
                document.body.classList.toggle('selection-mode');
                const isActive = document.body.classList.contains('selection-mode');
                const label = isActive ? 'Batal Pilih' : 'Pilih Anggota';
                const iconClass = isActive ? 'bi-x-square' : 'bi-check2-square';

                if (toggleBtn) {
                    toggleBtn.innerHTML = `<i class="bi ${iconClass}"></i> <span class="btn-label">${label}</span>`;
                }
                if (toggleBtnMobile) {
                    toggleBtnMobile.innerHTML = `<i class="bi ${iconClass}"></i>`;
                    toggleBtnMobile.title = label;
                }

                if (!isActive) {
                    document.querySelectorAll('.member-checkbox-input').forEach(cb => cb.checked = false);
                    const selectAll = document.getElementById('selectAllCheckbox');
                    if (selectAll) selectAll.checked = false;
                    const selectedCount = document.getElementById('selectedCount');
                    if (selectedCount) selectedCount.textContent = '0 dipilih';
                    const bulkUpdateBtn = document.getElementById('bulkUpdateBtn');
                    const bulkDownloadBtn = document.getElementById('bulkDownloadBtn');
                    if (bulkUpdateBtn) bulkUpdateBtn.disabled = true;
                    if (bulkDownloadBtn) bulkDownloadBtn.disabled = true;
                }
            }

            if (toggleBtn) toggleBtn.addEventListener('click', toggleSelection);
            if (toggleBtnMobile) toggleBtnMobile.addEventListener('click', toggleSelection);
        });

        // ============================================================
        // BULK SELECT / UPDATE / DOWNLOAD
        // ============================================================
        document.addEventListener('DOMContentLoaded', function() {
            const bulkBar = document.getElementById('bulkActionBar');
            if (!bulkBar) return;

            const checkboxes = document.querySelectorAll('.member-checkbox-input');
            const selectAll = document.getElementById('selectAllCheckbox');
            const bulkUpdateBtn = document.getElementById('bulkUpdateBtn');
            const bulkDownloadBtn = document.getElementById('bulkDownloadBtn');
            const selectedCount = document.getElementById('selectedCount');
            const bulkStatusSelect = document.getElementById('bulkStatusSelect');

            function updateButtons() {
                const checked = document.querySelectorAll('.member-checkbox-input:checked');
                const count = checked.length;
                selectedCount.textContent = count + ' dipilih';
                bulkUpdateBtn.disabled = count === 0;
                bulkDownloadBtn.disabled = count === 0;
                if (checkboxes.length > 0) {
                    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                    selectAll.checked = allChecked;
                }
            }

            checkboxes.forEach(cb => {
                cb.addEventListener('change', updateButtons);
            });

            selectAll.addEventListener('change', function() {
                const isChecked = this.checked;
                checkboxes.forEach(cb => cb.checked = isChecked);
                updateButtons();
            });

            bulkUpdateBtn.addEventListener('click', function() {
                const selected = document.querySelectorAll('.member-checkbox-input:checked');
                if (selected.length === 0) return;
                const status = bulkStatusSelect.value;
                if (!status) {
                    Swal.fire('Peringatan', 'Pilih status terlebih dahulu.', 'warning');
                    return;
                }

                const ids = Array.from(selected).map(cb => cb.value);
                Swal.fire({
                    title: 'Update Status',
                    text: `Anda akan mengubah status ${ids.length} anggota menjadi "${status}". Lanjutkan?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#16A34A',
                    cancelButtonColor: '#EF4444',
                    confirmButtonText: 'Ya, Update!',
                }).then(result => {
                    if (result.isConfirmed) {
                        bulkUpdateBtn.disabled = true;
                        bulkUpdateBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Memproses...';

                        fetch('{{ route("anggota.update-status-massal") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ ids, status })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire('Berhasil!', `${data.updated} anggota diperbarui.`, 'success');
                                setTimeout(() => window.location.reload(), 1500);
                            } else {
                                Swal.fire('Gagal', data.error || 'Terjadi kesalahan.', 'error');
                                bulkUpdateBtn.disabled = false;
                                bulkUpdateBtn.innerHTML = '<i class="bi bi-check2-circle"></i> Update';
                            }
                        })
                        .catch(err => {
                            Swal.fire('Error', 'Terjadi kesalahan: ' + err.message, 'error');
                            bulkUpdateBtn.disabled = false;
                            bulkUpdateBtn.innerHTML = '<i class="bi bi-check2-circle"></i> Update';
                        });
                    }
                });
            });

            bulkDownloadBtn.addEventListener('click', function() {
                const selected = document.querySelectorAll('.member-checkbox-input:checked');
                if (selected.length === 0) return;
                const ids = Array.from(selected).map(cb => cb.value);

                bulkDownloadBtn.disabled = true;
                bulkDownloadBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Memproses...';

                fetch('{{ route("anggota.bulk-download") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ ids })
                })
                .then(res => {
                    if (!res.ok) throw new Error('Gagal mengambil data');
                    return res.json();
                })
                .then(data => {
                    if (data.error) throw new Error(data.error);
                    if (!data.length) throw new Error('Tidak ada anggota yang dipilih.');

                    let progress = 0;
                    const total = data.length;
                    Swal.fire({
                        title: 'Mengunduh KTA Terpilih',
                        html: `<div class="progress" style="height:20px;margin-top:10px;">
                                <div id="bulkProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%;background:var(--primary-gradient);"></div>
                              </div>
                              <p id="bulkProgressText" class="mt-2">0%</p>`,
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            const container = document.createElement('div');
                            container.style.cssText = 'position:fixed;left:-9999px;top:0;width:900px;height:600px;background:#fff;z-index:9999;';
                            document.body.appendChild(container);

                            let blankoBase64 = null;
                            let blankoLoaded = false;
                            if (data.length && data[0].blanko_url) {
                                fetch(data[0].blanko_url, { mode: 'cors', cache: 'no-cache', credentials: 'include' })
                                    .then(r => r.blob())
                                    .then(blob => new Promise((res, rej) => { const reader = new FileReader();
                                        reader.onloadend = () => res(reader.result);
                                        reader.onerror = rej;
                                        reader.readAsDataURL(blob); }))
                                    .then(b64 => { blankoBase64 = b64; blankoLoaded = true; processNext(); })
                                    .catch(() => { blankoLoaded = true; processNext(); });
                            } else {
                                blankoLoaded = true;
                                processNext();
                            }

                            const zip = new JSZip();
                            let completed = 0;

                            function renderKTA(anggota, idx) {
                                return new Promise((resolveRender) => {
                                    const printArea = document.getElementById('kta-print-area').cloneNode(true);
                                    printArea.style.cssText = 'display:block;position:relative;width:900px;height:600px;background:#fff;overflow:hidden;';

                                    const idEl = printArea.querySelector('#cetak-id-anggota');
                                    if (idEl) idEl.innerText = anggota.id_anggota;
                                    const namaEl = printArea.querySelector('#cetak-nama');
                                    if (namaEl) namaEl.innerText = anggota.nama.toUpperCase();
                                    const ttlEl = printArea.querySelector('#cetak-ttl');
                                    if (ttlEl) ttlEl.innerText = anggota.ttl;

                                    let alamatFormatted = anggota.alamat;
                                    if (anggota.alamat.length > 30) {
                                        let words = anggota.alamat.split(' ');
                                        let line1 = '', line2 = '';
                                        words.forEach(w => {
                                            if ((line1 + w).length <= 35 && line2 === '') line1 += w + ' ';
                                            else line2 += w + ' ';
                                        });
                                        alamatFormatted = line1.trim() + '<br>' + line2.trim();
                                    }
                                    const alamatEl = printArea.querySelector('#cetak-alamat');
                                    if (alamatEl) alamatEl.innerHTML = alamatFormatted;
                                    const pacEl = printArea.querySelector('#cetak-pac');
                                    if (pacEl) pacEl.innerText = anggota.pac.replace(/pac/gi, '').trim().toUpperCase();

                                    const fotoImg = printArea.querySelector('#cetak-foto');
                                    const blankoImg = printArea.querySelector('#cetak-blanko');
                                    if (blankoImg && blankoBase64) blankoImg.src = blankoBase64;

                                    let fotoPromise = anggota.foto_url ? fetch(anggota.foto_url, { mode: 'cors', cache: 'no-cache', credentials: 'include' })
                                        .then(r => r.blob())
                                        .then(blob => new Promise((res, rej) => { const reader = new FileReader();
                                            reader.onloadend = () => res(reader.result);
                                            reader.onerror = rej;
                                            reader.readAsDataURL(blob); }))
                                        : Promise.resolve(null);

                                    const qrEl = printArea.querySelector('#cetak-qr');
                                    if (qrEl && anggota.detail_url) {
                                        qrEl.innerHTML = '';
                                        new QRCode(qrEl, {
                                            text: anggota.detail_url,
                                            width: 115,
                                            height: 115,
                                            colorDark: '#000000',
                                            colorLight: '#ffffff',
                                            correctLevel: QRCode.CorrectLevel.H
                                        });
                                    }

                                    fotoPromise.then(fotoBase64 => {
                                        if (fotoImg && fotoBase64) fotoImg.src = fotoBase64;
                                        else if (fotoImg) fotoImg.src = '';
                                        printArea.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
                                        container.innerHTML = '';
                                        container.appendChild(printArea);
                                        const images = printArea.querySelectorAll('img');
                                        const loadPromises = Array.from(images).map(img => new Promise(resolve => {
                                            if (img.complete && img.naturalWidth !== 0) resolve();
                                            else { img.onload = resolve; img.onerror = () => resolve(); setTimeout(resolve, 3000); }
                                        }));
                                        return Promise.all(loadPromises);
                                    }).then(() => html2canvas(printArea, { scale: 3, useCORS: true, allowTaint: false, backgroundColor: '#fff', width: 900, height: 600, logging: false }))
                                    .then(canvas => {
                                        const dataUrl = canvas.toDataURL('image/png');
                                        zip.file(`KTA_${anggota.id_anggota}.png`, dataUrl.split(',')[1], { base64: true });
                                        completed++;
                                        const percent = Math.round((completed / total) * 100);
                                        document.getElementById('bulkProgressBar').style.width = percent + '%';
                                        document.getElementById('bulkProgressText').textContent = percent + '%';
                                        resolveRender();
                                    })
                                    .catch(err => {
                                        console.error('Gagal render KTA untuk', anggota.id_anggota, err);
                                        completed++;
                                        const percent = Math.round((completed / total) * 100);
                                        document.getElementById('bulkProgressBar').style.width = percent + '%';
                                        document.getElementById('bulkProgressText').textContent = percent + '%';
                                        resolveRender();
                                    });
                                });
                            }

                            let currentIndex = 0;

                            function processNext() {
                                if (!blankoLoaded) { setTimeout(processNext, 100); return; }
                                if (currentIndex >= total) {
                                    document.body.removeChild(container);
                                    zip.generateAsync({ type: 'blob' })
                                        .then(blob => {
                                            saveAs(blob, `KTA_Terpilih_${new Date().getTime()}.zip`);
                                            Swal.close();
                                            bulkDownloadBtn.disabled = false;
                                            bulkDownloadBtn.innerHTML = '<i class="bi bi-download"></i> Download Terpilih';
                                        })
                                        .catch(err => {
                                            Swal.fire('Error', 'Gagal membuat ZIP: ' + err.message, 'error');
                                            bulkDownloadBtn.disabled = false;
                                            bulkDownloadBtn.innerHTML = '<i class="bi bi-download"></i> Download Terpilih';
                                        });
                                    return;
                                }
                                renderKTA(data[currentIndex], currentIndex)
                                    .then(() => { currentIndex++; processNext(); })
                                    .catch(err => { document.body.removeChild(container); Swal.fire('Error', err.message, 'error'); });
                            }
                        }
                    });
                })
                .catch(err => {
                    Swal.fire('Error', err.message, 'error');
                    bulkDownloadBtn.disabled = false;
                    bulkDownloadBtn.innerHTML = '<i class="bi bi-download"></i> Download Terpilih';
                });
            });

            updateButtons();
        });

        // ============================================================
        // CETAK PERORANGAN
        // ============================================================
        let currentIdAnggota = '',
            currentFotoUrl = '',
            currentBlankoUrl = '',
            currentDetailUrl = '';

        function bukaModalCetak(idAnggota, nama, ttl, alamat, pac, urlFoto, urlBlanko, detailUrl) {
            currentIdAnggota = idAnggota;
            currentFotoUrl = urlFoto;
            currentBlankoUrl = urlBlanko;
            currentDetailUrl = detailUrl;

            document.getElementById('cetak-id-anggota').innerText = idAnggota;
            document.getElementById('cetak-nama').innerText = nama.toUpperCase();
            document.getElementById('cetak-ttl').innerText = ttl;
            document.getElementById('dl-id-anggota').innerText = idAnggota;
            document.getElementById('dl-nama').innerText = nama.toUpperCase();
            document.getElementById('dl-ttl').innerText = ttl;

            let alamatFormatted = alamat;
            if (alamat.length > 30) {
                let words = alamat.split(' ');
                let line1 = '', line2 = '';
                words.forEach(w => {
                    if ((line1 + w).length <= 35 && line2 === '') line1 += w + ' ';
                    else line2 += w + ' ';
                });
                alamatFormatted = line1.trim() + '<br>' + line2.trim();
            }
            document.getElementById('cetak-alamat').innerHTML = alamatFormatted;
            document.getElementById('dl-alamat').innerHTML = alamatFormatted;

            let cleanPac = pac.replace(/pac/gi, '').trim();
            document.getElementById('cetak-pac').innerText = cleanPac.toUpperCase();
            document.getElementById('dl-pac').innerText = cleanPac.toUpperCase();

            document.getElementById('cetak-foto').src = '';
            document.getElementById('cetak-blanko').src = '';
            document.getElementById('dl-foto').src = '';
            document.getElementById('dl-blanko').src = '';
            document.getElementById('cetak-qr').innerHTML = '';
            document.getElementById('dl-qr').innerHTML = '';

            let modal = new bootstrap.Modal(document.getElementById('modalCetakKta'));
            modal.show();
            setTimeout(() => {
                loadImagesBase64();
                if (currentDetailUrl) {
                    new QRCode(document.getElementById('cetak-qr'), {
                        text: currentDetailUrl,
                        width: 115,
                        height: 115,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    });
                    new QRCode(document.getElementById('dl-qr'), {
                        text: currentDetailUrl,
                        width: 115,
                        height: 115,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }
            }, 100);
        }

        function loadImagesBase64() {
            const fotoPreview = document.getElementById('cetak-foto');
            const blankoPreview = document.getElementById('cetak-blanko');
            const fotoDl = document.getElementById('dl-foto');
            const blankoDl = document.getElementById('dl-blanko');

            function fetchAsBase64(url) {
                return fetch(url, { mode: 'cors', cache: 'no-cache', credentials: 'include', headers: { 'Cache-Control': 'no-cache' } })
                    .then(r => { if (!r.ok) throw new Error('Gagal fetch'); return r.blob(); })
                    .then(blob => new Promise((resolve, reject) => {
                        const reader = new FileReader();
                        reader.onloadend = () => resolve(reader.result);
                        reader.onerror = reject;
                        reader.readAsDataURL(blob);
                    }));
            }
            let promises = [];
            if (currentFotoUrl) promises.push(fetchAsBase64(currentFotoUrl).then(b64 => { fotoPreview.src = b64; fotoDl.src = b64; }).catch(e => console.warn('Foto gagal:', e)));
            if (currentBlankoUrl) promises.push(fetchAsBase64(currentBlankoUrl).then(b64 => { blankoPreview.src = b64; blankoDl.src = b64; }).catch(e => console.warn('Blanko gagal:', e)));
            Promise.all(promises).then(() => console.log('Gambar siap'));
        }

        function downloadKTA() {
            const area = document.getElementById('kta-download-area');
            const btn = document.getElementById('btnDownloadAction');
            const orig = btn.innerHTML;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Memproses...';
            btn.disabled = true;

            const imgs = area.querySelectorAll('img');
            const loadPromises = Array.from(imgs).map(img => new Promise((resolve, reject) => {
                if (img.complete && img.naturalWidth !== 0) resolve();
                else { img.onload = resolve; img.onerror = () => reject(new Error('Gagal load')); }
            }));

            Promise.all(loadPromises)
                .then(() => html2canvas(area, { scale: 3, useCORS: true, allowTaint: false, backgroundColor: '#fff', width: 900, height: 600, logging: false }))
                .then(canvas => {
                    const link = document.createElement('a');
                    link.download = `KTA-${currentIdAnggota}.png`;
                    link.href = canvas.toDataURL('image/png');
                    link.click();
                    btn.innerHTML = orig;
                    btn.disabled = false;
                })
                .catch(err => {
                    alert('Gagal mengunduh KTA: ' + err.message);
                    btn.innerHTML = orig;
                    btn.disabled = false;
                });
        }

        // ============================================================
        // DOWNLOAD MASSAL
        // ============================================================
        let massalInProgress = false;
        document.addEventListener('DOMContentLoaded', function() {
            const modalMassal = document.getElementById('modalDownloadMassal');
            if (modalMassal) {
                modalMassal.addEventListener('hide.bs.modal', function(e) { if (massalInProgress) e.preventDefault(); });
                document.getElementById('closeMassalBtn')?.addEventListener('click', function(e) {
                    if (massalInProgress) { e.preventDefault(); e.stopPropagation(); return false; }
                });
            }
        });

        document.getElementById('btnProsesMassal')?.addEventListener('click', function() {
            const pacId = {{ $pac->id }};
            const pengesahanId = document.getElementById('selectPengesahanMassal').value;
            let url = `/anggota/pac/${pacId}/data`;
            if (pengesahanId) url += `?pengesahan=${pengesahanId}`;

            document.getElementById('massalError').textContent = '';
            const progressDiv = document.getElementById('progressMassal');
            progressDiv.style.display = 'block';
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            progressBar.style.width = '0%';
            progressText.textContent = '0%';
            this.disabled = true;
            massalInProgress = true;
            const closeBtn = document.getElementById('closeMassalBtn');
            if (closeBtn) closeBtn.style.display = 'none';

            fetch(url, { credentials: 'include' })
                .then(res => { if (!res.ok) throw new Error('Gagal ambil data'); return res.json(); })
                .then(list => {
                    if (!list.length) throw new Error('Tidak ada anggota dengan filter tersebut.');
                    return prosesMassal(list, progressBar, progressText);
                })
                .then(zipBlob => {
                    saveAs(zipBlob, `KTA_{{ $pac->nama_pac }}.zip`);
                    progressDiv.style.display = 'none';
                    this.disabled = false;
                    massalInProgress = false;
                    if (closeBtn) closeBtn.style.display = '';
                    bootstrap.Modal.getInstance(document.getElementById('modalDownloadMassal')).hide();
                    setTimeout(() => window.location.reload(), 1500);
                })
                .catch(err => {
                    document.getElementById('massalError').textContent = 'Error: ' + err.message;
                    progressDiv.style.display = 'none';
                    this.disabled = false;
                    massalInProgress = false;
                    if (closeBtn) closeBtn.style.display = '';
                });
        });

        function prosesMassal(anggotaList, progressBar, progressText) {
            const zip = new JSZip();
            const total = anggotaList.length;
            let completed = 0;

            return new Promise((resolve, reject) => {
                const container = document.createElement('div');
                container.style.cssText = 'position:fixed;left:-9999px;top:0;width:900px;height:600px;background:#fff;z-index:9999;';
                document.body.appendChild(container);

                let blankoBase64 = null, blankoLoaded = false;
                if (anggotaList.length && anggotaList[0].blanko_url) {
                    fetch(anggotaList[0].blanko_url, { mode: 'cors', cache: 'no-cache', credentials: 'include' })
                        .then(r => r.blob())
                        .then(blob => new Promise((res, rej) => { const reader = new FileReader();
                            reader.onloadend = () => res(reader.result);
                            reader.onerror = rej;
                            reader.readAsDataURL(blob); }))
                        .then(b64 => { blankoBase64 = b64; blankoLoaded = true; processNext(); })
                        .catch(() => { blankoLoaded = true; processNext(); });
                } else {
                    blankoLoaded = true;
                    processNext();
                }

                function renderKTA(anggota, idx) {
                    return new Promise((resolveRender) => {
                        const printArea = document.getElementById('kta-print-area').cloneNode(true);
                        printArea.style.cssText = 'display:block;position:relative;width:900px;height:600px;background:#fff;overflow:hidden;';

                        const idEl = printArea.querySelector('#cetak-id-anggota');
                        if (idEl) idEl.innerText = anggota.id_anggota;
                        const namaEl = printArea.querySelector('#cetak-nama');
                        if (namaEl) namaEl.innerText = anggota.nama.toUpperCase();
                        const ttlEl = printArea.querySelector('#cetak-ttl');
                        if (ttlEl) ttlEl.innerText = anggota.ttl;

                        let alamatFormatted = anggota.alamat;
                        if (anggota.alamat.length > 30) {
                            let words = anggota.alamat.split(' ');
                            let line1 = '', line2 = '';
                            words.forEach(w => {
                                if ((line1 + w).length <= 35 && line2 === '') line1 += w + ' ';
                                else line2 += w + ' ';
                            });
                            alamatFormatted = line1.trim() + '<br>' + line2.trim();
                        }
                        const alamatEl = printArea.querySelector('#cetak-alamat');
                        if (alamatEl) alamatEl.innerHTML = alamatFormatted;
                        const pacEl = printArea.querySelector('#cetak-pac');
                        if (pacEl) pacEl.innerText = anggota.pac.replace(/pac/gi, '').trim().toUpperCase();

                        const fotoImg = printArea.querySelector('#cetak-foto');
                        const blankoImg = printArea.querySelector('#cetak-blanko');
                        if (blankoImg && blankoBase64) blankoImg.src = blankoBase64;
                        else if (blankoImg) blankoImg.src = '';

                        let fotoPromise = anggota.foto_url ? fetch(anggota.foto_url, { mode: 'cors', cache: 'no-cache', credentials: 'include' })
                            .then(r => r.blob())
                            .then(blob => new Promise((res, rej) => { const reader = new FileReader();
                                reader.onloadend = () => res(reader.result);
                                reader.onerror = rej;
                                reader.readAsDataURL(blob); }))
                            : Promise.resolve(null);

                        const qrEl = printArea.querySelector('#cetak-qr');
                        if (qrEl && anggota.detail_url) {
                            qrEl.innerHTML = '';
                            new QRCode(qrEl, {
                                text: anggota.detail_url,
                                width: 115,
                                height: 115,
                                colorDark: '#000000',
                                colorLight: '#ffffff',
                                correctLevel: QRCode.CorrectLevel.H
                            });
                        }

                        fotoPromise.then(fotoBase64 => {
                            if (fotoImg && fotoBase64) fotoImg.src = fotoBase64;
                            else if (fotoImg) fotoImg.src = '';
                            printArea.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
                            container.innerHTML = '';
                            container.appendChild(printArea);
                            const images = printArea.querySelectorAll('img');
                            const loadPromises = Array.from(images).map(img => new Promise(resolve => {
                                if (img.complete && img.naturalWidth !== 0) resolve();
                                else { img.onload = resolve; img.onerror = () => resolve(); setTimeout(resolve, 3000); }
                            }));
                            return Promise.all(loadPromises);
                        }).then(() => html2canvas(printArea, { scale: 3, useCORS: true, allowTaint: false, backgroundColor: '#fff', width: 900, height: 600, logging: false }))
                        .then(canvas => {
                            const dataUrl = canvas.toDataURL('image/png');
                            zip.file(`KTA_${anggota.id_anggota}.png`, dataUrl.split(',')[1], { base64: true });
                            completed++;
                            const percent = Math.round((completed / total) * 100);
                            progressBar.style.width = percent + '%';
                            progressText.textContent = percent + '%';
                            resolveRender();
                        })
                        .catch(err => {
                            console.error('Gagal render KTA untuk', anggota.id_anggota, err);
                            completed++;
                            const percent = Math.round((completed / total) * 100);
                            progressBar.style.width = percent + '%';
                            progressText.textContent = percent + '%';
                            resolveRender();
                        });
                    });
                }

                let currentIndex = 0;

                function processNext() {
                    if (!blankoLoaded) { setTimeout(processNext, 100); return; }
                    if (currentIndex >= total) {
                        document.body.removeChild(container);
                        resolve(zip.generateAsync({ type: 'blob' }));
                        return;
                    }
                    renderKTA(anggotaList[currentIndex], currentIndex)
                        .then(() => { currentIndex++; processNext(); })
                        .catch(err => { document.body.removeChild(container); reject(err); });
                }
            });
        }

        // ============================================================
        // CONFIRM DELETE
        // ============================================================
        function confirmDelete(event) {
            event.preventDefault();
            const form = event.target;
            Swal.fire({
                title: 'Yakin hapus anggota?',
                text: "Data yang dihapus tidak dapat dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#16A34A',
                cancelButtonColor: '#EF4444',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal',
                customClass: { popup: 'rounded-4 shadow-lg' }
            }).then(result => { if (result.isConfirmed) form.submit(); });
            return false;
        }
    </script>
@endpush