<div class="h-full w-full">
<?php if (isset($component)) { $__componentOriginal166a02a7c5ef5a9331faf66fa665c256 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal166a02a7c5ef5a9331faf66fa665c256 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'filament-panels::components.page.index','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('filament-panels::page'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div wire:ignore>
        <script src="<?php echo e(asset('js/balkan/familytree.js')); ?>"></script>

        <div class="rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-800" style="height: calc(100vh - 10rem); min-height: 500px; width: 100%;">
            <div id="tree" style="width: 100%; height: 100%;"></div>
        </div>

        <script>
            document.addEventListener('livewire:initialized', () => {
                const data = <?php echo json_encode($this->getTreeData(), 15, 512) ?>;
                
                if (data.length > 0) {
                    // Customize templates for a modern card design
                    ['hugo', 'hugo_male', 'hugo_female'].forEach(function(tmpl) {
                        if (FamilyTree.templates[tmpl]) {
                            var isFemale = tmpl === 'hugo_female';
                            var accentColor = isFemale ? '#f472b6' : '#38bdf8'; // Pink for female, Blue for male
                            
                            FamilyTree.templates[tmpl].size = [320, 150];
                            
                            // Modern Card Background
                            FamilyTree.templates[tmpl].node = '<rect x="0" y="0" height="150" width="320" fill="#1e293b" stroke-width="2" stroke="' + accentColor + '" rx="12" ry="12"></rect>';
                            
                            // WhatsApp and Call Icons
                            FamilyTree.templates[tmpl].link_0 = '<a href="{val}"><g transform="translate(245, 100)" cursor="pointer"><circle cx="15" cy="15" r="15" fill="#3b82f6"></circle><path fill="white" transform="translate(7, 7) scale(0.65)" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></g></a>';
                            FamilyTree.templates[tmpl].link_1 = '<a href="{val}" target="_blank"><g transform="translate(280, 100)" cursor="pointer"><circle cx="15" cy="15" r="15" fill="#25d366"></circle><path fill="white" transform="translate(5, 5) scale(0.6)" d="M12.031 21.031l-4.53 1.17 1.2-4.48c-.762-1.31-1.2-2.844-1.2-4.48 0-4.97 4.03-9 9-9s9 4.03 9 9-4.03 9-9 9z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></a>';
                            
                            // Avatar on the left side
                            FamilyTree.templates[tmpl].img_0 = 
                                '<clipPath id="clip_{id}"><circle cx="65" cy="75" r="40"></circle></clipPath>' +
                                '<circle cx="65" cy="75" r="42" fill="' + accentColor + '"></circle>' + 
                                '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#clip_{id})" xlink:href="{val}" x="25" y="35" width="80" height="80"></image>';
                                
                            // Text fields on the right side
                            FamilyTree.templates[tmpl].field_0 = '<text style="font-size: 15px; font-weight: bold; font-family: sans-serif;" fill="#ffffff" x="125" y="45" text-anchor="start" data-width="170" data-text-overflow="multiline">{val}</text>'; // Name
                            FamilyTree.templates[tmpl].field_1 = '<text style="font-size: 12px; font-family: sans-serif;" fill="#cbd5e1" x="125" y="90" text-anchor="start">Jantina: {val}</text>'; // Gender
                            FamilyTree.templates[tmpl].field_2 = '<text style="font-size: 12px; font-family: sans-serif;" fill="#cbd5e1" x="125" y="110" text-anchor="start">Umur: {val}</text>'; // Umur
                            FamilyTree.templates[tmpl].field_3 = '<text style="font-size: 12px; font-family: sans-serif; font-weight: bold;" fill="' + accentColor + '" x="125" y="130" text-anchor="start">{val}</text>'; // Status
                            
                            // Adjust connection lines and expand/collapse icons
                            FamilyTree.templates[tmpl].pointer = '<g data-pointer="pointer" transform="matrix(0,0,0,0,160,75)"><circle cx="0" cy="0" r="5" fill="' + accentColor + '" stroke-width="1" stroke="' + accentColor + '"></circle></g>';
                            
                            FamilyTree.templates[tmpl].plus = '<circle cx="0" cy="0" r="15" fill="#1e293b" stroke="' + accentColor + '" stroke-width="2"></circle>' +
                                '<line x1="-8" y1="0" x2="8" y2="0" stroke-width="2" stroke="' + accentColor + '"></line>' +
                                '<line x1="0" y1="-8" x2="0" y2="8" stroke-width="2" stroke="' + accentColor + '"></line>';
                                
                            FamilyTree.templates[tmpl].minus = '<circle cx="0" cy="0" r="15" fill="#1e293b" stroke="' + accentColor + '" stroke-width="2"></circle>' +
                                '<line x1="-8" y1="0" x2="8" y2="0" stroke-width="2" stroke="' + accentColor + '"></line>';
                        }
                    });
                    
                    var family = new FamilyTree(document.getElementById("tree"), {
                        mode: 'dark',
                        template: 'hugo',
                        toolbar: {
                            zoom: true,
                            fit: true,
                            fullScreen: true
                        },
                        nodeBinding: {
                            field_0: "name",
                            field_1: "jantina",
                            field_2: "umur",
                            field_3: "status",
                            link_0: "call_url",
                            link_1: "wa_url",
                            img_0: "img"
                        },
                        nodeMenu: {
                            call: { text: "📞 Panggil (Call)" },
                            whatsapp: { text: "💬 WhatsApp" }
                        },
                        editForm: {
                            readOnly: true,
                            generateElementsFromFields: false,
                            elements: [
                                { type: 'textbox', label: 'Nama Penuh', binding: 'name' },
                                { type: 'textbox', label: 'Jantina', binding: 'jantina' },
                                { type: 'textbox', label: 'Umur', binding: 'umur' },
                                { type: 'textbox', label: 'Status', binding: 'status' },
                                { type: 'textbox', label: 'No Telefon', binding: 'phone' }
                            ],
                            buttons: {
                                edit: null,
                                share: null,
                                pdf: null
                            }
                        }
                    });
                    
                    family.on('nodeMenuClick', function(args) {
                        var data = family.get(args.nodeId);
                        var phone = data.phone;
                        
                        if (!phone) {
                            alert('Tiada nombor telefon direkodkan untuk ahli keluarga ini.');
                            return;
                        }
                        
                        if (args.menuItem.text === "📞 Panggil (Call)") {
                            window.open('tel:' + phone, '_self');
                        }
                        
                        if (args.menuItem.text === "💬 WhatsApp") {
                            var formatted = phone.replace(/[^0-9]/g, '');
                            if (formatted.startsWith('0')) {
                                formatted = '6' + formatted;
                            }
                            window.open('https://wa.me/' + formatted, '_blank');
                        }
                    });
                    
                    family.load(data);
                } else {
                    document.getElementById("tree").innerHTML = '<div class="flex items-center justify-center h-full text-gray-500">Tiada rekod ahli keluarga lagi.</div>';
                }
            });
        </script>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal166a02a7c5ef5a9331faf66fa665c256)): ?>
<?php $attributes = $__attributesOriginal166a02a7c5ef5a9331faf66fa665c256; ?>
<?php unset($__attributesOriginal166a02a7c5ef5a9331faf66fa665c256); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal166a02a7c5ef5a9331faf66fa665c256)): ?>
<?php $component = $__componentOriginal166a02a7c5ef5a9331faf66fa665c256; ?>
<?php unset($__componentOriginal166a02a7c5ef5a9331faf66fa665c256); ?>
<?php endif; ?>
</div>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/jejakwaris/resources/views/filament/pages/family-tree-page.blade.php ENDPATH**/ ?>