@extends('layouts.app')

@section('title', 'شجرة النسب')

@section('content')
@include('components.page-header', ['title' => 'شجرة نسب العشيرة'])
<section class="tree-page">
    <div class="container">
        <div class="tree-toolbar glass-card">
            <i class="fa-solid fa-magnifying-glass icon-gold"></i>
            <input type="text" id="tree-search" placeholder="ابحث عن اسم في الشجرة...">
            <div class="tree-zoom-controls">
                <button type="button" id="tree-zoom-out" class="btn-outline" title="تصغير"><i class="fa-solid fa-minus"></i></button>
                <span id="tree-zoom-level">100%</span>
                <button type="button" id="tree-zoom-in" class="btn-outline" title="تكبير"><i class="fa-solid fa-plus"></i></button>
                <button type="button" id="tree-zoom-reset" class="btn-outline" title="إعادة"><i class="fa-solid fa-rotate-left"></i></button>
            </div>
            <a href="{{ route('search') }}" class="btn-outline"><i class="fa-solid fa-magnifying-glass-plus"></i> بحث متقدم</a>
        </div>

        <div class="tree-chart-wrap glass-card">
            <div id="tree-chart" class="tree-chart" aria-live="polite">
                <p class="tree-loading">جاري تحميل شجرة النسب...</p>
            </div>
        </div>

        <div id="member-detail" class="member-detail-panel"></div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('js/family-tree.js') }}"></script>
@endpush