@extends('expert.master')

@section('title', 'Bagan Akun - ' . $settingsinfo->company_name . ' - ' . $settingsinfo->soft_name)

@section('content')
@include('expert.sidebar')
@include('expert.topbar')

<style>
/* ======================================================
   ULTRA PREMIUM TREEVIEW THEME
   ====================================================== */

   #treeview5{
    font-family:'Segoe UI',sans-serif;
}

/* TREE RESET */
#treeview5 ul{
    padding-left:20px !important;
}

/* NODE */
#treeview5 li{
    list-style:none;
    position:relative;
    margin:6px 0;
}

/* CONNECTING LINE */
#treeview5 li::before{
    content:"";
    position:absolute;
    left:-12px;
    top:-6px;
    bottom:0;
    width:1px;
    background:linear-gradient(to bottom,#1da1ff,#062b4f);
    opacity:.35;
}

#treeview5 li::after{
    content:"";
    position:absolute;
    left:-12px;
    top:19px;
    width:12px;
    height:1px;
    background:#1da1ff;
    opacity:.35;
}

/* ITEM CARD */
#treeview5 .list-group-item{
    background:linear-gradient(135deg,#041a36,#062b4f);
    border:1px solid rgba(29,161,255,.25);
    border-radius:12px;

    padding:10px 14px;
    display:flex;
    align-items:center;

    box-shadow:
        inset 0 0 10px rgba(255,255,255,.03),
        0 5px 14px rgba(0,0,0,.25);

    transition:.2s ease;
}

#treeview5 .list-group-item:hover{
    background:linear-gradient(135deg,#062b4f,#094a8f);
    transform:translateY(-1px);
}

/* LEFT AREA */
.node-left{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
}

/* ARROW */
.tree-arrow{
    width:12px;
    text-align:center;
    font-size:10px;
    color:#1da1ff;
    transition:.25s ease;
}

.rotate{
    transform:rotate(90deg);
}

/* NODE TITLE TEXT */
.node-text{
    font-weight:600;
    color:#ffffff;
    letter-spacing:.4px;
}

/* BADGES */
.badge-level{
    font-size:10px;
    padding:2px 7px;
    border-radius:6px;
    font-weight:700;
}

/* TYPE */
.badge-type{
    background:linear-gradient(135deg,#1da1ff,#0a4ea3);
    color:#ffffff;
}

/* GENERAL */
.badge-general{
    background:linear-gradient(135deg,#28d17c,#0e9f54);
    color:#ffffff;
}

/* SUBSIDIARY */
.badge-subsidiary{
    background:linear-gradient(135deg,#ffcb3f,#a06a00);
    color:#000;
}

/* RIGHT ACTION AREA */
.node-actions{
    display:flex;
    gap:6px;
}

/* BUTTON STYLE */
.node-actions button{
    font-size:11px;
    padding:4px 7px;
    border-radius:8px;
}

/* EDIT */
.node-actions .btn-primary{
    background:#ffc107;
    color:#000;
    border:none;
    transition:.2s;
}
.node-actions .btn-primary:hover{
    background:#ffd84f;
}

/* DELETE */
.node-actions .btn-danger{
    background:#dc3545;
    color:#fff;
    border:none;
    transition:.2s;
}
.node-actions .btn-danger:hover{
    background:#ff4d5e;
}

</style>

<div class="content-wrapper">
<div class="container-fluid">

<div class="dashboard-box">
    <div class="box-title text-white" style="background:#062445;">
        <i class="fa fa-share"></i> Bagan Akun
    </div>

    <div class="box-body">

    <!--
        <button class="btn btn-primary btn-sm mb-3"
        data-toggle="modal" data-target="#modalAddAkun">
            <i class="fa fa-plus"></i> Tambah Akun
        </button>
    -->
        <div id="treeview5"></div>

    </div>
</div>

</div>
</div>

@endsection


@section('js')
<script>
$(function(){

    loadTree();

    function loadTree(){
        $.getJSON("{{ route('api.tree-akun') }}", function(data){

            formatNodes(data);

            $('#treeview5').treeview({
                data: data,
                expandIcon   : 'fa fa-angle-right',
                collapseIcon : 'fa fa-angle-down'
            });

        });
    }

    function formatNodes(nodes){

        nodes.forEach(function(n){

            let level = n.data.level;
            let id    = n.data.id;
            let text  = n.text;

            let badge =
                level === 'type'
                ? '<span class="badge-level badge-type">TYPE</span>'
                : level === 'general'
                    ? '<span class="badge-level badge-general">GENERAL</span>'
                    : '<span class="badge-level badge-subsidiary">SUBSIDIARY</span>';

            let arrow = n.nodes
                ? '<span class="tree-arrow fa fa-angle-right"></span>'
                : '<span class="tree-arrow"></span>';

            n.text = `
                <div class="node-left">
                    ${arrow}
                    <span class="node-text">${text}</span>
                    ${badge}
                </div>

                <div class="node-actions">
                    <button
                        class="btn btn-primary btn-xs btn-edit"
                        data-id="${id}"
                        data-level="${level}">
                        <i class="fa fa-edit"></i>
                    </button>

                    <button
                        class="btn btn-danger btn-xs btn-delete"
                        data-id="${id}"
                        data-level="${level}"
                        data-text="${text.replace(/"/g,'&quot;')}">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            `;

            if(n.nodes){
                formatNodes(n.nodes);
            }

        });

    }


    // ========================
    // ARROW ROTATE
    // ========================
    $('#treeview5').on('nodeExpanded', function(event, node){
        $(node.element).find('.tree-arrow').addClass('rotate');
    });

    $('#treeview5').on('nodeCollapsed', function(event, node){
        $(node.element).find('.tree-arrow').removeClass('rotate');
    });


    // ========================
    // EDIT
    // ========================
    $(document).on('click','.btn-edit', function(e){

        e.stopPropagation();

        let id    = $(this).data('id');
        let level = $(this).data('level');

        $.getJSON("{{ url('/api/akun') }}/"+id, { kind: level }, function(res){

            $('#edit_id').val(res.id);
            $('#edit_kind').val(level);
            $('#edit_level').val(level);

            $('#edit_kode').val(
                res.type_code ??
                res.ledger_code ??
                res.subsidiary_code
            );

            $('#edit_nama').val(
                res.type_name ??
                res.ledger_head ??
                res.subsidiary_head
            );

            $('#modalEditAkun').modal('show');
        });

    });


    // ========================
    // DELETE
    // ========================
    $(document).on('click','.btn-delete', function(e){

        e.stopPropagation();

        let id    = $(this).data('id');
        let level = $(this).data('level');
        let text  = $(this).data('text');

        $('#delete_id').val(id);
        $('#delete_kind').val(level);
        $('#delete_label').text(text);

        $('#modalDeleteAkun').modal('show');

    });

});
</script>
@endsection