@extends('layout.app')

@push('styles')
    <style>
        .nd-wrap { display: flex; gap: 24px; align-items: flex-start; }
        .nd-tree { flex: 1 1 0; min-width: 0; }
        .nd-panel { flex: 0 0 360px; }

        .nd-node {
            position: relative;
            background: #fff;
            border: 2px solid #d1d5db;
            border-radius: 12px;
            padding: 14px 18px;
            margin: 0 auto 16px;
            max-width: 480px;
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            text-align: center;
        }
        .nd-node:hover {
            border-color: #2563eb;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
            transform: translateY(-1px);
        }
        .nd-node.active {
            border-color: #2563eb;
            background: #eff6ff;
        }
        .nd-node + .nd-node::before {
            content: '';
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 16px;
            background: #94a3b8;
        }
        .nd-node + .nd-node::after {
            content: '';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #94a3b8;
        }
        .nd-node .nd-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6b7280;
            font-weight: 600;
        }
        .nd-node .nd-name {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
            margin-top: 2px;
        }

        .nd-node[data-type="client"]   { border-color: #2563eb; }
        .nd-node[data-type="box"]      { border-color: #7c3aed; }
        .nd-node[data-type="olt"]      { border-color: #db2777; }
        .nd-node[data-type="switch"]   { border-color: #ea580c; }
        .nd-node[data-type="mikrotik"] { border-color: #16a34a; }
        .nd-node[data-type="pop"]      { border-color: #0891b2; }

        .nd-info-card { position: sticky; top: 16px; }
        .nd-info-card .card-header { font-weight: 600; }
        .nd-info-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
        .nd-info-rows .k { color: #6b7280; font-size: 12px; }
        .nd-info-rows .v { font-size: 13px; word-break: break-word; }
        .nd-empty { color: #9ca3af; font-style: italic; padding: 12px 0; }

        @media (max-width: 991px) {
            .nd-wrap { flex-direction: column; }
            .nd-panel { width: 100%; flex: 1 1 auto; }
            .nd-info-card { position: static; }
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">
                    Network Diagram &mdash;
                    {{ optional($client->clientsinfo)->clients_name ?? $client->userid }}
                    <small class="text-muted">({{ $client->userid }})</small>
                </h5>
                <a href="{{ route('diagram-view.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-arrow-left"></i> Back to list
                </a>
            </div>

            @if (count($chain) === 1)
                <div class="alert alert-warning">
                    This client has no Network Diagram Box assigned. Edit the client and select a box to see the full diagram.
                </div>
            @endif

            <div class="nd-wrap">
                <div class="nd-tree">
                    @foreach ($chain as $node)
                        <div class="nd-node" data-type="{{ $node['type'] }}" data-id="{{ $node['id'] }}">
                            <div class="nd-label">{{ $node['label'] }}</div>
                            <div class="nd-name">{{ $node['name'] }}</div>
                        </div>
                    @endforeach
                </div>

                <div class="nd-panel">
                    <div class="card nd-info-card">
                        <div class="card-header" id="nd-info-title">Click a node to view details</div>
                        <div class="card-body" id="nd-info-body">
                            <div class="nd-empty">No node selected.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function () {
            const infoUrl = "{{ url('admin/diagram-view-info') }}";
            const $title = $('#nd-info-title');
            const $body = $('#nd-info-body');

            $('.nd-node').on('click', function () {
                const $node = $(this);
                const type = $node.data('type');
                const id = $node.data('id');

                $('.nd-node').removeClass('active');
                $node.addClass('active');

                $title.text('Loading...');
                $body.html('<div class="nd-empty">Fetching details...</div>');

                $.getJSON(`${infoUrl}/${type}/${id}`)
                    .done(function (resp) {
                        if (!resp.ok) {
                            $title.text('Not found');
                            $body.html('<div class="nd-empty">Details not available.</div>');
                            return;
                        }
                        $title.text(resp.data.title);

                        const rows = resp.data.rows || {};
                        const keys = Object.keys(rows);
                        if (keys.length === 0) {
                            $body.html('<div class="nd-empty">No information.</div>');
                            return;
                        }

                        let html = '<div class="nd-info-rows">';
                        keys.forEach(function (k) {
                            const v = rows[k];
                            html += `<div class="k">${k}</div><div class="v">${v ?? '-'}</div>`;
                        });
                        html += '</div>';
                        $body.html(html);
                    })
                    .fail(function () {
                        $title.text('Error');
                        $body.html('<div class="nd-empty">Could not load details.</div>');
                    });
            });

            // auto-open the client node so the panel isn't empty on load
            $('.nd-node').first().trigger('click');
        });
    </script>
@endpush