@extends('layouts.admin.master')
@section('content')
    <div class="row g-3">
        <div class="col-xl-4">
            @include('pages.admin.member.profile.partials.basic')
            @include('pages.admin.member.profile.partials.address')
        </div>
        <div class="col-xl-8">
            @include('pages.admin.member.profile.partials.detail')
            <div class="row g-3">
                @include('pages.admin.member.profile.partials.google')
                @include('pages.admin.member.profile.partials.kontak')
                @include('pages.admin.member.profile.partials.relasi')
                @include('pages.admin.member.profile.partials.pendidikan')
                @include('pages.admin.member.profile.partials.pengalaman')
                @include('pages.admin.member.profile.partials.hobi')
            </div>
        </div>
    </div>

    @include('pages.admin.member.profile.modals.kontak')
    @include('pages.admin.member.profile.modals.relasi')
    @include('pages.admin.member.profile.modals.family_tree')
    @include('pages.admin.member.profile.modals.pendidikan')
    @include('pages.admin.member.profile.modals.pengalaman_kerja')
    @include('pages.admin.member.profile.modals.pengalaman_organisasi')
    @include('pages.admin.member.profile.modals.pengalaman_lain')
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.css">
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/input-tags/css/tagsinput.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/profile-maps/css/profile.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/relasi-keluarga/css/tree.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/relasi-keluarga/css/tree-render.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/relasi-keluarga/css/tree-form.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/relasi-keluarga/css/tree-utils.css') }}" />

@endsection
@section('javascript')
    {{-- Library eksternal --}}
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    {{-- Plugin lokal --}}
    <script src="{{ asset('assets/templates/admin/plugins/d3-flextree/d3.v7.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/d3-flextree/d3-org-chart.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/d3-flextree/d3-flextree.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/select2/js/select2-custom.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/input-tags/js/tagsinput.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/profile-maps/js/profile.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/relasi-keluarga/js/tree.js') }}"></script> <!-- untuk central loadFamilyTree() & koordinasi -->
    <script src="{{ asset('assets/templates/admin/plugins/relasi-keluarga/js/tree-render.js') }}"></script> <!-- untuk render D3-flextree -->
    <script src="{{ asset('assets/templates/admin/plugins/relasi-keluarga/js/tree-form.js') }}"></script> <!-- untuk handle form tambah relasi -->
    <script src="{{ asset('assets/templates/admin/plugins/relasi-keluarga/js/tree-utils.js') }}"></script> <!-- helper: wrap text, formatting -->
    {{-- Script dinamis dari backend --}}
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: ['penduduk_id' => $penduduk->id],
        );
    @endphp
    {{-- Data mapping untuk JS --}}
    <script>
        const levelHubunganMap = @json(App\Models\Kependudukan\PendudukRelasi::hubunganLevelMapping());
        toastr.options = {
            closeButton: true,
            progressBar: true,
            positionClass: "toast-top-right"
        };
    </script>
    {{-- Load JS dinamis dari backend --}}
    <script src="{{ $resource }}"></script>
@endsection
<!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/d3-org-chart@3"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script> -->