@extends('layout.app')


@section('content')
    {{-- add mikrotik --}}
    <x-mikrotik.addMikrotik />



    <div class="card mx-auto">
        <div class="d-flex justify-content-between border p-2">
            <h1 class="card-title float-left">Mikrotiks information
            </h1>
            <div class="">

                @can('mikrotik_create')
                    <button type="button" class="btn" data-toggle="modal" data-target="#form"
                        style="background: #FF9F43; color:#FFFFFF;">
                        <span><i class="fa-solid fa-plus"></i></span> Add Mikrotik
                    </button>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive ">
                <table id="dataTable" class=" table-bordered">
                    <thead style="background: #78716C !important;color:#FFFFFF;">
                        <tr class="table-head-info">
                            <th scope="col">
                                ID
                            </th>
                            <th scope="col" class="text-center">
                                Mikrotik IP
                            </th>
                            @if (!checkAPI())
                                <th scope="col">
                                    Secret
                                </th>
                            @endif
                            <th scope="col">
                                Mikrotik Name
                            </th>
                            {{-- <th scope="col">
                                Type
                            </th> --}}

                            <th scope="col">
                                Description
                            </th>

                            @if (checkAPI() || checkSettings('mikrotik_test_connection') == 'enable')
                                @can('test-mikrotik')
                                    <th scope="col" class="text-center">
                                        API Status
                                    </th>
                                @endcan
                            @endif

                            <th scope="col" class="text-center">
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach ($nas as $item)
                            <tr>
                                <td class="text-center">
                                    {{ $item->id }}
                                </td>
                                <td class="text-start">

                                    @if (auth()->user()->email !== 'limitedyetfix@gmail.com' && $item->nasname == '103.126.151.206')
                                        <p>Not Available</p>
                                    @else
                                        {{ $item->nasname }}
                                    @endif
                                </td>
                                @if (!checkAPI())
                                    <td class="text-start">
                                        {{ $item->secret }}
                                    </td>
                                @endif
                                <td class="text-start">

                                    @if (auth()->user()->email !== 'limitedyetfix@gmail.com' && $item->nasname == '103.126.151.206')
                                        <p>Not Available</p>
                                    @else
                                        {{ $item->shortname }}
                                    @endif

                                </td>

                                <td>
                                    @if (auth()->user()->email !== 'limitedyetfix@gmail.com' && $item->nasname == '103.126.151.206')
                                        <p>Not Available</p>
                                    @else
                                        {{ $item->description }}
                                    @endif

                                </td>

                                @if (checkAPI() || checkSettings('mikrotik_test_connection') == 'enable')
                                    @can('test-mikrotik')
                                        <td class="text-center">
                                            @if (auth()->user()->email !== 'limitedyetfix@gmail.com' && $item->nasname == '103.126.151.206')
                                                <p>Not Available</p>
                                            @else
                                                <span class="mk-api-status mk-status-loading" id="mk-status-{{ $item->id }}"
                                                    data-id="{{ $item->id }}">
                                                    <i class="fa-solid fa-circle-notch fa-spin"></i> Checking…
                                                </span>
                                            @endif
                                        </td>
                                    @endcan
                                @endif

                                @if (auth()->user()->email !== 'limitedyetfix@gmail.com' && $item->nasname == '103.126.151.206')
                                    <td>
                                        <p>Not Available</p>
                                    </td>
                                @else
                                    <td class="d-flex justify-content-center align-items-center" style="gap: 0.95px ">
                                        @if (checkAPI() || checkSettings('mikrotik_test_connection') == 'enable')
                                            @can('test-mikrotik')
                                                <a href="{{ route('mikrotik.combined-analysis', $item->id) }}"
                                                    class="btn border noc-analyze-btn"><span
                                                        style="font-size: 12px !important;"><i class="fa-solid fa-bolt"></i>
                                                        Analyze</span>
                                                </a>
                                            @endcan
                                        @endif
                                        @if (auth()->user()->email == 'limitedyetfix@gmail.com' &&
                                                (checkAPI() || globalPermission('radiusClientOnlineCheckThroughApi')))
                                            <a href="{{ route('mikrotiks.secrets', $item->id) }}" class="btn border"
                                                style="background:#280d94bd; color:#FFFFFF;"><span
                                                    style="font-size: 12px !important;"> <span><i
                                                            class="fa-solid fa-users"></i></span> Secrets</span>
                                            </a>
                                        @endif
                                        @if (auth()->user()->email == 'limitedyetfix@gmail.com' &&
                                                (checkAPI() || globalPermission('radiusClientOnlineCheckThroughApi')))
                                            <a href="{{ route('mikrotiks.active-connections', $item->id) }}" class="btn border"
                                                style="background:#280d94bd; color:#FFFFFF;"><span
                                                    style="font-size: 12px !important;"> <span><i
                                                            class="fa-solid fa-users"></i></span> Active Connections</span>
                                            </a>
                                        @endif

                                        @can('mikrotik_edit')
                                            <button onclick="editMiktorik({{ $item->id }}, '{{ auth()->user()->email }}')"
                                                class="btn border btn-success text-light " type="button" data-toggle="modal"
                                                data-target="#edit-mikrotik-{{ $item->id }}" data-toggle="tooltip"
                                                data-placement="bottom" title="Edit">
                                                <span><i class="fa-solid fa-pen-to-square "></i></span>
                                            </button>
                                        @endcan



                                        <div class="modal fade " id="edit-mikrotik-{{ $item->id }}" tabindex="-1"
                                            role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered " role="document">
                                                <div class="modal-content p-3">
                                                    <div class="modal-header border-bottom-0">
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true" class="text-danger">&times;</span>

                                                        </button>

                                                    </div>
                                                    <div class="border p-1 text-center rounded"
                                                        style="width: 95% !important; margin:auto !important">
                                                        <h4>Edit Mikrotik Information {{ $item->id }}</h1>

                                                            {{-- @if (auth()->user()->email == 'limitedyetfix@gmail.com')
                                                                <p class="" id="mikrotik-port-info"
                                                                    style="margin-top:-5px;"></p>
                                                            @endif --}}

                                                    </div>
                                                    <div id="formElements-{{ $item->id }}">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                        @can('view-nas-log-history')
                                            <a href="{{ route('editLog-history', ['id' => $item->id, 'type' => 'Mikrotik']) }}"
                                                class="btn border btn-warning text-light" data-toggle="tooltip"
                                                data-placement="bottom" title="History"> <span><i
                                                        class="fa-solid fa-timeline"></i></span> </a>
                                        @endcan


                                        @can('mikrotik_destroy')
                                            <form action="{{ route('mikrotiks.destroy', $item->id) }}" method="POST"
                                                style="margin-top: 14px !important;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn border bg-danger "
                                                    onclick="return confirm('Are you sure to delete it?')" data-toggle="tooltip"
                                                    data-placement="bottom" title="Delete"> <span><i
                                                            class="fa-solid fa-trash-can text-light"></i></span> </button>
                                            </form>
                                        @endcan


                                    </td>
                                @endif
                            </tr>


                            <p id="auth-{{ $item->id }}" class="sr-only">
                                @if (auth()->user()->email == 'limitedyetfix@gmail.com')
                                    Auth
                                @else
                                    Unauth
                                @endif
                            </p>
                        @endforeach

                        <!-- More items... -->
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            {{ $nas->links() }}

        </div>
    </div>
    <style>
        .modal-backdrop {
            pointer-events: none !important;
        }
    </style>
@endsection


@push('styles')
    <link rel="stylesheet" href="{{ asset('css/mikrotik/mikrotiklist.css') }}">
    <style>
        .noc-analyze-btn {
            background: linear-gradient(135deg, #0e7490, #6d28d9) !important;
            color: #fff !important;
            border-color: transparent !important;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .noc-analyze-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(109, 40, 217, 0.4);
            color: #fff !important;
        }

        .noc-analyze-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            animation: shimmer 3s ease-in-out infinite;
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }

            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        /* API status badges (list page) */
        .mk-api-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
            cursor: default;
        }

        .mk-status-loading {
            background: #f1f5f9;
            color: #64748b;
        }

        .mk-status-online {
            background: rgba(34, 197, 94, 0.12);
            color: #15803d;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .mk-status-auth-failed {
            background: rgba(234, 179, 8, 0.15);
            color: #a16207;
            border: 1px solid rgba(234, 179, 8, 0.35);
        }

        .mk-status-port-closed {
            background: rgba(249, 115, 22, 0.12);
            color: #c2410c;
            border: 1px solid rgba(249, 115, 22, 0.3);
        }

        .mk-status-offline {
            background: rgba(239, 68, 68, 0.12);
            color: #b91c1c;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
    </style>
@endpush

@push('js')
    <script>
        (function() {
            function applyStatus(badge, data) {
                badge.classList.remove('mk-status-loading');
                var map = {
                    online: {
                        cls: 'mk-status-online',
                        icon: 'fa-circle-check',
                        text: 'API Connected'
                    },
                    auth_failed: {
                        cls: 'mk-status-auth-failed',
                        icon: 'fa-user-lock',
                        text: 'Login Failed'
                    },
                    offline: {
                        cls: 'mk-status-offline',
                        icon: 'fa-triangle-exclamation',
                        text: 'Offline'
                    },
                };
                var s = map[data.status] || map.offline;
                badge.classList.add(s.cls);
                var label = s.text;
                if (data.status === 'online' && data.identity) {
                    label = 'API Connected (' + data.identity + ')';
                }
                badge.innerHTML = '<i class="fa-solid ' + s.icon + '"></i> ' + label;
                badge.setAttribute('title', data.reason || label);
            }

            var STATUS_URL = "{{ route('mikrotik.quick-api-status', ['id' => '__ID__']) }}";

            function fetchStatus(badge) {
                var id = badge.getAttribute('data-id');
                fetch(STATUS_URL.replace('__ID__', id), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(data) {
                        if (data && data.status) {
                            applyStatus(badge, data);
                        } else {
                            applyStatus(badge, {
                                status: 'offline',
                                reason: 'No response.'
                            });
                        }
                    })
                    .catch(function() {
                        applyStatus(badge, {
                            status: 'offline',
                            reason: 'Status check request failed.'
                        });
                    });
            }

            document.addEventListener('DOMContentLoaded', function() {
                var badges = Array.prototype.slice.call(document.querySelectorAll('.mk-status-loading'));
                // Run a few at a time so we don't fire dozens of router probes at once.
                var concurrency = 4;
                var index = 0;

                function runNext() {
                    if (index >= badges.length) return;
                    var badge = badges[index++];
                    Promise.resolve().then(function() {
                        return fetchStatus(badge);
                    }).finally(runNext);
                }
                for (var i = 0; i < concurrency && i < badges.length; i++) {
                    runNext();
                }
            });
        })();
    </script>
@endpush




<script>
    async function editMiktorik(mikrotikId, email) {
        const url = `/api/mikrotik-information/${mikrotikId}/${email}`;
        const response = await fetch(url);
        const data = await response.json();
        const loginUser = document.getElementById(`auth-${mikrotikId}`).textContent;
        const mikrotikInfo = document.getElementById("mikrotik-port-info");

        console.log(loginUser);

        // if (data.services && loginUser.trim() == 'Auth'.trim()) {
        //     const mikrotikNameAndPort = data.services.find((items) => items.name === 'winbox');
        //     mikrotikInfo.innerHTML =
        //         `<p> <strong>Winbox Port : </strong> ${mikrotikNameAndPort.port}</p>`;
        // }
        /* dom operation */
        const domForOperation = document.getElementById(`edit-mikrotik-${mikrotikId}`);

        const formElement = document.getElementById(`formElements-${mikrotikId}`);



        formElement.innerHTML = `<form action="{{ url('admin/mikrotiks/${mikrotikId}') }}" method="POST">

               @method('PUT')
               @csrf
                <div class="modal-body" style="z-index: 1000;">
                    <div class="d-flex justify-content-between mobile-column" style="gap:2px;">
                        <div class="form-group" style="width: 48%;">
                            <label for="mikrotik name">Mikrotik Name <span class="text-danger"
                                    style="font-size: 1.25rem; display:inline-block;">*</span> </label>
                            <input type="text" name="shortname" class="form-control" id="shortname"
                                value="${data.nas.shortname}" placeholder="Mikrotik Name">

                            @error('shortname')
                                <small class="form-text  text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group" style="width: 48%;">
                            <label for="mikrotikip">Mikrotik IP <span class="text-danger"
                                    style="font-size: 1.25rem; display:inline-block;">*</span> </label>
                            <input type="text" name="nasname" class="form-control" placeholder="Mikrotik IP"
                                value="${data.nas.nasname}" autocomplete="off">
                            @error('nasname')
                                <small class="form-text  text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    @if (!checkAPI())
                        <div class="form-group">
                            <label for="secret" class="">
                                Secret*
                            </label>
                            <input type="text" name="secret" id="secret" class="form-control"
                                placeholder="" value="${data.nas.secret}" autocomplete="off"
                                required>
                            @error('secret')
                                <small class="form-text text-danger">
                                    {{ $message }}
                                </small>
                            @enderror
                        </div>
                    @endif

                    <div class="form-group">
                        <label for="username">Mikrotik User Name </label>
                        <input type="text" name="mickrotik_user_name" value="${data.nas.mikrotick_user}" class="form-control"
                            placeholder="Mikrotik Username">
                        @error('mickrotik_user_name')
                            <small class="form-text  text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="d-flex flex-row-reverse justify-content-between mobile-column">
                        <div class="form-group " style="width: 48%;">
                            <label for="mikrotik port">Mikrotik Port</label>
                            <input type="text" name="mickrotik_port" value="${data.nas.mikrotick_port}"
                                class="form-control border rounded border-primary" placeholder="Mikrotik Port">
                            @error('mickrotik_port')
                                <small class="form-text  text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group " style="width: 48%;">
                            <label for="password">Password</label>
                            <input type="text" name="mickrotik_user_password"
                                value="${data.nas.mikrotick_user_password}" class="form-control"
                                id="password1" placeholder="Password">
                            @error('mickrotik_user_password')
                                <small class="form-text  text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password1">Description <span class="text-danger"
                                style="font-size: 1.25rem; display:inline-block;">*</span> </label>
                        <textarea class="form-control" name="description"  cols="3" rows="2">${data.nas.description}</textarea>
                        @error('description')
                            <small class="form-text  text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    @if (checkSettings('static_ip_manage') == 'enable')
                        <div class="form-group">



                            <div class="d-flex justify-content-between align-items-center">
                                <button type="button" class=" btn btn-color" id="static_ip_button-edit-${data.nas.id}">Add Static Ip
                            </button>

                            </div>


                            <div class="w-100 p-2 border rounded mt-2 d-none" id="staticIpContainer-edit-${data.nas.id}"
                                style="height: 160px; overflow-y: auto;">
                                <ul class="list-group" id="staticIpList-edit-${data.nas.id}">

                                </ul>
                            </div>

                        </div>
                    @endif
                </div>
                <div class="modal-footer border-top-0 d-flex justify-content-center">
                    <button type="submit" class="btn btn-submit w-100">Submit</button>
                </div>
            </form>`;



        const staticIpCreator = document.getElementById(`static_ip_button-edit-${mikrotikId}`);
        const staticIpContainer = document.getElementById(`staticIpContainer-edit-${mikrotikId}`);
        const staticIpList = document.getElementById(`staticIpList-edit-${mikrotikId}`);



        if (data.nas.ip_block) {

            const ipBlocks = JSON.parse(data.nas.ip_block);
            staticIpContainer.classList.remove('d-none');
            staticIpContainer.classList.add('d-block');
            staticIpCreator.textContent = "Add More";

            ipBlocks.forEach((item) => {
                const ipNode = document.createElement('li');
                ipNode.className = "list-group-item d-flex justify-content-between";
                ipNode.style.gap = "2px";
                ipNode.innerHTML = `
                <input type="text" name="port[]" value="${item.port}" class="form-control" placeholder="Ethernet Interface" required>
                <input type="text" name="ip_block[]" value="${item.ip_block}" class="form-control" placeholder="Ip Block" required>
                <button class="text-danger p-1 border rounded delete-button">X</button>`;

                staticIpContainer.appendChild(ipNode);
                staticIpList.appendChild(ipNode);


                const deleteButton = ipNode.querySelector('.delete-button');

                deleteButton.addEventListener('click', function() {
                    staticIpList.removeChild(ipNode);
                    if (staticIpList.children.length <= 3) {
                        staticIpList.classList.remove("scrollable-list");
                    }
                    if (staticIpList.children.length === 0) {
                        staticIpContainer.classList.remove("d-block");
                        staticIpContainer.classList.add('d-none');
                        staticIpCreator.textContent = "Add Static Ip";
                    }
                });
            });

            staticIpCreator.addEventListener("click", function() {
                if (staticIpContainer.classList.contains('d-none')) {
                    staticIpContainer.classList.remove('d-none');
                    staticIpContainer.classList.add("d-block");
                    staticIpCreator.textContent = "Add More";
                }

                const newListItem = document.createElement('li');
                newListItem.className = "list-group-item d-flex justify-content-between";
                newListItem.style.gap = "2px";

                newListItem.innerHTML = `
                    <input type="text" name="port[]" class="form-control" placeholder="Ethernet Interface" required>
                    <input type="text" name="ip_block[]" class="form-control" placeholder="Ip Block" required>
                    <button class="text-danger p-1 border rounded delete-button">X</button>`;


                const deleteButton = newListItem.querySelector('.delete-button');

                deleteButton.addEventListener('click', function() {
                    staticIpList.removeChild(newListItem);
                    if (staticIpList.children.length <= 3) {
                        staticIpList.classList.remove("scrollable-list");
                    }
                    if (staticIpList.children.length === 0) {
                        staticIpContainer.classList.remove("d-block");
                        staticIpContainer.classList.add('d-none');
                        staticIpCreator.textContent = "Add Static Ip";
                    }
                });
                staticIpList.appendChild(newListItem);

            });


        } else {

            staticIpCreator.addEventListener("click", function() {
                if (staticIpContainer.classList.contains('d-none')) {
                    staticIpContainer.classList.remove('d-none');
                    staticIpContainer.classList.add("d-block");
                    staticIpCreator.textContent = "Add More";
                }

                const newListItem = document.createElement('li');
                newListItem.className = "list-group-item d-flex justify-content-between";
                newListItem.style.gap = "2px";

                newListItem.innerHTML = `
            <input type="text" name="port[]" class="form-control" placeholder="Ethernet Interface" required>
            <input type="text" name="ip_block[]" class="form-control" placeholder="Ip Block" required>
            <button class="text-danger p-1 border rounded delete-button">X</button>`;

                const deleteButton = newListItem.querySelector('.delete-button');

                deleteButton.addEventListener('click', function() {
                    staticIpList.removeChild(newListItem);
                    if (staticIpList.children.length <= 3) {
                        staticIpList.classList.remove("scrollable-list");
                    }
                    if (staticIpList.children.length === 0) {
                        staticIpContainer.classList.remove("d-block");
                        staticIpContainer.classList.add('d-none');
                        staticIpCreator.textContent = "Add Static Ip";
                    }
                });
                staticIpList.appendChild(newListItem);

            });
        }


    }
</script>