@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Registry
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif

        {{-- Sections are rendered dynamically by JS after a single AJAX call --}}
        <div id="registry-global-loading" class="text-center py-5">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2 text-muted">Loading registry...</p>
        </div>
        <div id="registry-global-error" class="alert alert-danger" style="display:none;">
            Failed to load registry. Please refresh the page.
        </div>
        <div id="registry-root"></div>

    </div>
</div>

@include("admin.layouts.footer")

<script>
    var REGISTRY_ICONS = ['fa-handshake-o', 'fa-upload', 'fa-list', 'fa-th', 'fa-cog', 'fa-bar-chart'];

    function buildCards(items) {
        if (!items || items.length === 0) {
            return '<p class="text-muted">No items found.</p>';
        }

        var colClass = items.length === 1 ? 'col-md-6'
                     : items.length === 2 ? 'col-md-6'
                     : 'col-md-4';

        return items.map(function (item, index) {
            var name       = $('<div>').text(item.name    || '').html();
            var summary    = $('<div>').text(item.summary || '').html();
            var url        = item.url  || null;
            var icon       = item.icon || REGISTRY_ICONS[index] || 'fa-th';
            var arrowColor = url ? '#716aca' : '#d0d0d0';
            var cursor     = url ? 'pointer' : 'default';
            var cardOpen   = url ? '<a href="' + url + '" style="text-decoration:none; display:block;">' : '<div>';
            var cardClose  = url ? '</a>' : '</div>';

            return (
                '<div class="' + colClass + ' mb-4" style="display:flex;">' +
                    cardOpen +
                    '<div class="m-portlet m-portlet--border-bottom-brand"' +
                         ' style="border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.08);' +
                                ' width:100%; height:160px; position:relative; overflow:hidden;' +
                                ' display:flex; flex-direction:column; justify-content:flex-start;' +
                                ' padding:20px 20px 40px 20px; box-sizing:border-box; margin:0;">' +

                        '<div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">' +
                            '<div style="width:36px; height:36px; border-radius:8px; background:#f0eeff;' +
                                       ' display:flex; align-items:center; justify-content:center; flex-shrink:0;">' +
                                '<i class="fa ' + icon + '" style="font-size:1rem; color:#716aca;"></i>' +
                            '</div>' +
                            '<h4 style="font-weight:600; font-size:0.95rem; color:#333; margin:0; line-height:1.3;">' +
                                name +
                            '</h4>' +
                        '</div>' +

                        '<p style="font-size:0.82rem; color:#888; margin:0 0 0 48px; line-height:1.5;' +
                                  ' overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;' +
                                  ' -webkit-box-orient:vertical;">' +
                            summary +
                        '</p>' +

                        '<div style="position:absolute; bottom:14px; right:16px;">' +
                            '<span style="color:' + arrowColor + '; font-size:1.1rem; cursor:' + cursor + ';"' +
                                  ' title="' + (url ? 'Open' : 'Coming soon') + '">' +
                                '<i class="fa fa-arrow-right"></i>' +
                            '</span>' +
                        '</div>' +

                    '</div>' +
                    cardClose +
                '</div>'
            );
        }).join('');
    }

    function buildSection(key, service) {
        return (
            '<div class="m-portlet m-portlet--mobile">' +
                '<div class="m-portlet__head">' +
                    '<div class="m-portlet__head-caption">' +
                        '<div class="m-portlet__head-title">' +
                            '<h3 class="m-portlet__head-text">' + $('<div>').text(service.label).html() + '</h3>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="m-portlet__body">' +
                    '<div class="row">' + buildCards(service.items) + '</div>' +
                '</div>' +
            '</div>'
        );
    }

    $(document).ready(function () {
        $.ajax({
            url: '/admin/registry/all',
            method: 'GET',
            success: function (response) {
                $('#registry-global-loading').hide();

                var data = response.data || {};
                var keys = Object.keys(data);

                if (keys.length === 0) {
                    $('#registry-global-error').text('No registry services found.').show();
                    return;
                }

                var html = keys.map(function (key) {
                    return buildSection(key, data[key]);
                }).join('');

                $('#registry-root').html(html);
            },
            error: function () {
                $('#registry-global-loading').hide();
                $('#registry-global-error').show();
            }
        });
    });
</script>