@extends('layout.app')
@section('title', 'Servers Info')
@section('style')
    <style>
        .user-card-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .user-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 10px 15px;
            transition: 0.2s;
        }

        .user-card:hover {
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        .user-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #4f46e5;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-weight: 600;
            font-size: 14px;
        }

        .user-meta {
            font-size: 12px;
            color: #6b7280;
        }

        .user-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-actions button {
            margin-left: 5px;
        }

        .child-row {
            background: #f9fafb;
        }
        .user-password {
            margin-top: 5px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .user-password span {
            font-family: monospace;
            background: #f3f4f6;
            padding: 2px 6px;
            border-radius: 5px;
        }
    </style>

@endsection
@section('main')
    <div class="py-4">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#">
                        <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </a></li>
                <li class="breadcrumb-item"><a href="#">Servers</a></li>
                <li class="breadcrumb-item active" aria-current="page">Servers Info</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between w-100 flex-wrap">
            <div class="mb-3 mb-lg-0"><h1 class="h4">Servers Information's</h1>
                <p class="mb-0">Find All types of Servers details information</p>
            </div>
            <div>
                <a href="{{url('servers/create')}}" class="btn btn-outline-gray-600 d-inline-flex align-items-center">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Add New Servers
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="table-responsive py-4">
            <table class="table table-flush" id="user-datatable">
                <thead class="thead-light">
                <tr>
                    <th></th>
                    <th>SL</th>
                    <th>Server Name</th>
                    <th>Type</th>
                    <th>OS</th>
                    <th>IP</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody id="table-body"></tbody>
            </table>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('assets/js/simple-datatables.js') }}"></script>
    <script>
        function initializeDataTable() {
            var el = document.getElementById('user-datatable');
            if (el) {
                new simpleDatatables.DataTable(el);
            }
        }

        const ACCESS_COLORS = {
            'ssh': 'bg-primary',
            'sftp': 'bg-success',
            'remote desktop': 'bg-warning',
            'mysql': 'bg-info',
            'oracle': 'bg-danger'
        };

        function accessBadge(type, level) {
            if (!type) return '-';
            let cls = ACCESS_COLORS[type.toLowerCase()] || 'bg-secondary';

            return `<span class="badge ${cls}">${type}</span>
            <span class="badge bg-dark">${level ?? ''}</span>`;
        }

        // Expand toggle
        function toggleRow(id) {
            let row = $('#child-' + id);

            if (row.is(':visible')) {
                row.hide();
                $('#icon-' + id).text('+');
            } else {
                row.show();
                $('#icon-' + id).text('-');
            }
        }

        function loadTableData() {
            $.ajax({
                url: '{{ route('servers.data') }}',
                type: 'GET',
                dataType: 'json',
                success: function (data) {

                    $('#table-body').empty();

                    $.each(data, function (index, item) {

                        // Parent row
                        let parentRow = `
                    <tr>
                        <td onclick="toggleRow(${item.id})" class="expand-btn">
                            <span id="icon-${item.id}">+</span>
                        </td>
                        <td>${index + 1}</td>
                        <td><strong class="text-primary">${item.server_name}</strong></td>
                        <td>${item.server_type ?? '-'}</td>
                        <td>${item.os_info ?? '-'}</td>
                        <td>${item.ip_address ?? '-'}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary" onclick="editServer(${item.id})">Edit</button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteServer(${item.id})">Delete</button>
                        </td>
                    </tr>
                `;

                        // Child (Users Cards)
                        let usersHtml = '<div class="user-card-container">';

                        if (item.users && item.users.length > 0) {

                            item.users.forEach((u, i) => {

                                let pwdId = `pwd-${item.id}-${i}`;

                                usersHtml += `
        <div class="user-card">
            <div class="row">

                <div class="col-md-2">
                    <div class="user-avatar">
                        ${u.user_name ? u.user_name.charAt(0).toUpperCase() : 'U'}
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="user-name">${u.user_name}</div>

                    <div class="user-meta">
                        Port: ${u.port ?? '-'}
                    </div>

                    <div class="user-password">
                        <span id="${pwdId}" data-password="${u.password_hash ?? ''}">
                            ••••••••
                        </span>

                        <button class="btn btn-sm btn-light"
                                onclick="togglePassword('${pwdId}')">👁</button>

                        <button class="btn btn-sm btn-light"
                                onclick="copyPassword('${pwdId}')">📋</button>
                    </div>
                </div>

                <div class="col-md-4">
                    remark data is here
                </div>

                <div class="user-right">
                    ${accessBadge(u.access_type, u.access_level)}
                </div>

            </div>
        </div>
        `;
                            });
                        } else {
                            usersHtml += `<div class="text-muted">No users found</div>`;
                        }

                        usersHtml += '</div>';

                        let childRow = `
                    <tr id="child-${item.id}" class="child-row" style="display:none;">
                        <td colspan="7">
                            ${usersHtml}
                        </td>
                    </tr>
                `;

                        $('#table-body').append(parentRow + childRow);
                    });

                    initializeDataTable();
                },
                error: function (xhr) {
                    console.error(xhr.responseText);
                }
            });
        }

        // Actions

        function editServer(userId) {
            var url = "{{ route('servers.edit', ':id') }}";
            var fullUrl = url.replace(':id', userId);
            window.location.href = fullUrl;
        }
        function deleteServer(id) {
            if (!confirm('Delete this server?')) return;

            $.ajax({
                url: "{{ url('servers/delete') }}/" + id,
                type: "DELETE",
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function () {
                    loadTableData();
                }
            });
        }

        // User actions (placeholder)
        function editUser(serverId) {
            alert("Edit user under server ID: " + serverId);
        }

        function deleteUser(serverId) {
            if (!confirm('Delete this user?')) return;
            alert("Delete user under server ID: " + serverId);
        }

        // Init
        $(document).ready(function () {
            loadTableData();
        });

        function togglePassword(id) {
            let el = document.getElementById(id);
            let real = el.getAttribute('data-password');

            if (el.innerText === '••••••••') {
                el.innerText = real || 'N/A';
            } else {
                el.innerText = '••••••••';
            }
        }

        function copyPassword(id) {
            let el = document.getElementById(id);
            let text = el.getAttribute('data-password');

            if (!text) return alert('No password');

            navigator.clipboard.writeText(text).then(() => {
                alert('Password copied!');
            });
        }
    </script>
@endsection