@extends('layouts.master')

@section('content')
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">{{ $page->name }}</h1>
        </div>

        <div class="page-content">
            <div class="panel">
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="panel-body container-fluid">
                            @if ($page->has_create == 1)
                                <a href="{{ route('page.data.create', $page->slug) }}" target="__blank"
                                    class="btn btn-outline btn-primary" style="margin-bottom:30px">
                                    <i class="icon wb-plus" aria-hidden="true"></i>Add
                                </a>
                            @endif

                            <div id="order" class="row row-lg tree-list-group">
                                @php
                                    $input_name = optional($page->inputs->firstWhere('table_view', 1))->input_name;
                                @endphp

                                @php
                                function renderTreeChildren($children, $input_name, $page, $level = 1) {
                                    foreach ($children as $key => $ch_item) {
                                        $ch_data = json_decode($ch_item->data, true);
                                        $hasGrandchildren = !empty($ch_item->children) && count($ch_item->children) > 0;
                                        echo '<li class="list-group-item'.($level > 1 ? ' p-0' : '').'">';
                                        echo '<i class="fa fa-sort handle_'.$level.'" style="cursor: move;" aria-hidden="true"></i> ';
                                        echo ($key + 1).'. '.($ch_data[$input_name] ?? '');
                                        echo '<div style="float: right;">';
                                        if ($page->has_update == 1) {
                                            echo '<a href="'.route('page.data.edit', [$page->slug, $ch_item->id]).'" target="__blank" class="edit-click" title="Redaktə Et" style="color: grey;cursor:pointer"><i class="icon wb-pencil" aria-hidden="true"></i></a>';
                                        }
                                        if ($page->has_delete == 1) {
                                            echo '<a data-id="'.$ch_item->id.'" class="delete-click" title="Sil" style="color: grey;cursor:pointer"><i class="icon wb-trash" aria-hidden="true"></i></a>';
                                        }
                                        if ($hasGrandchildren) {
                                            echo '<a href="javascript:void(0);" class="toggle-grandchildren" data-target="#grandchildren-'.$ch_item->id.'" style="margin-left: 5px; cursor:pointer; color: grey;"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>';
                                        }
                                        echo '</div>';
                                        if ($hasGrandchildren) {
                                            echo '<ul id="grandchildren-'.$ch_item->id.'" class="list-group grandchildren mt-2 ml-4" style="display: none;">';
                                            renderTreeChildren($ch_item->children, $input_name, $page, $level+1);
                                            echo '</ul>';
                                        }
                                        echo '</li>';
                                    }
                                }
                                @endphp

                                @foreach ($pageData as $item)
                                    @php
                                        $data = json_decode($item->data, true);
                                        $hasChildren = !empty($item->children) && count($item->children) > 0;
                                    @endphp

                                    <div id="sorts_{{ $item->id }}" class="col-md-4 col-xl-4">
                                        <div class="example-wrap">
                                            <div id="cat">
                                                <ul id="order_{{ $item->id }}" data-id="order_{{ $item->id }}" class="list-group list-group-bordered">
                                                    <li class="list-group-item list-group-item-action active"
                                                        title="Elektronika">
                                                        <i class="fa fa-arrows handle" style="cursor: move;"
                                                            aria-hidden="true"></i>

                                                        {{ $data[$input_name] ?? '' }}

                                                        <div style="float: right">
                                                            @if ($page->has_update == 1)
                                                                <a href="{{ route('page.data.edit', [$page->slug, $item->id]) }}"
                                                                    class="edit-click" title="Redaktə Et"
                                                                    style="cursor:pointer;color:white"><i
                                                                        class="icon wb-pencil" aria-hidden="true"></i></a>
                                                            @endif
                                                            @if ($page->has_delete == 1)
                                                                <a data-id="{{ $item->id }}" class="delete-click"
                                                                    title="Sil" style="cursor:pointer"><i
                                                                        class="icon wb-trash" aria-hidden="true"></i></a>
                                                            @endif
                                                            @if($hasChildren)
                                                                <a href="javascript:void(0);" class="toggle-children"
                                                                   data-target="#children-{{ $item->id }}"
                                                                   style="margin-left: 5px; cursor:pointer; color:white;">
                                                                    <i class="fa fa-chevron-up" aria-hidden="true"></i>
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </li>

                                                    <div id="children-{{ $item->id }}" class="children-container">
                                                        @if($hasChildren)
                                                            <ul class="list-group">
                                                                @php renderTreeChildren($item->children, $input_name, $page, 1); @endphp
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    $('#order').sortable({
        handle: '.handle',
        update: function() {
            let orders = $('#order').sortable('serialize');
            console.log(orders);
            $.get("{{ route('page.data.order') }}?" + orders, function(data, status) {})
        }
    });
</script>
<script>
    $(document).ready(function() {
        // Toggle children visibility
        $('.toggle-children').on('click', function() {
            var target = $($(this).data('target'));
            target.toggle();

            // Toggle icon
            var icon = $(this).find('i');
            if (icon.hasClass('fa-chevron-down')) {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            } else {
                icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }
        });

        // Toggle grandchildren visibility
        $('.toggle-grandchildren').on('click', function() {
            var target = $($(this).data('target'));
            target.toggle();

            // Toggle icon
            var icon = $(this).find('i');
            if (icon.hasClass('fa-chevron-down')) {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            } else {
                icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }
        });

        // Add CSS to remove borders from grandchildren
        $('<style>.grandchildren .list-group-item { border: none; }</style>').appendTo('head');
    });
</script>
@endpush