@extends('admin.layouts.app')

@section('content')

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- HTML element to display the groups -->
<!-- Your HTML file -->
<div class="container mt-5">

        @if(session()->has('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        @endif

        @if(session()->has('error'))
            <div class="alert alert-danger" role="alert">
                {{ session('error') }}
            </div>
        @endif
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">Please Select Groups from Stored Data to Retrieve Associated Users:</h5>
                    <div class="card-actions">
                    <div class="d-flex align-items-center">
            <div class="spinner-border text-primary mr-2" role="status" id="longPollingSpinner" style="display: none;"></div>
            <div id="loadingMessage" style="display: none;">Retrieving groups, please wait...</div>
            <button id="longPollingButton" class="btn btn-primary">Retrieve Groups</button>
        </div>
                    </div>
                </div>
                <div class="card-body">
                <form action="{{ route('fetchUserLogins') }}" method="post">
            @csrf
                    <div class="form-check">
                        <input type="checkbox" id="checkAll" class="form-check-input"> 
                        <label for="checkAll" class="form-check-label">Check All</label>
                    </div>

                    @forelse ($groups as $group)
                        <div class="form-check">
                            <input type="checkbox" name="selectedGroups[]" value="{{ $group->group_name }}" id="{{ $group->group_name }}" class="form-check-input">
                            <label for="{{ $group->group_name }}" class="form-check-label">{{ $group->group_name }}</label>
                        </div>
                    @empty
                        <p>No Stored Group Data Available</p>
                    @endforelse
                    
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">Retrieve Users</button>
                </div>
                </form>
            </div>     
    </div>

    <div class="modal modal-blur fade" id="modal-simple" tabindex="-1" role="dialog" aria-labelledby="modal-simpleLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Retrieved Groups:</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="groupForm" method="post" action="{{ route('save-group') }}">
                        @csrf
                        <div class="modal-body">
                        <ul id="groupList"></ul>
                            <input type="hidden" name="group_name" id="groupDataInput" value="">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Store Group Data</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <div class="modal fade" id="modal-small" tabindex="-1" role="dialog" aria-labelledby="modal-simpleLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content p-5" id="loadingMessage">
                <div class="d-flex align-items-center">
  <div class="col-md-10"><strong>Retrieveing groups from MT5 Server Please Do not reload this page...</strong></div>
  <div class="col-md-2 d-flex justify-content-end"><div class="spinner-border float-right" role="status" aria-hidden="true"></div></div>
</div>
        </div>
<script>
    // Initialize an array to store groupData
    const groupDataArray = [];
    let longPollingActive = false;

    function updateGroupList(groupDataArray) {
        // Assuming 'groupList' is the ID of the <ul> element
        const groupList = $('#groupList');

        // Clear the existing content of the list
        groupList.empty();

        const groupNames = [];

        let groupName;

        // Iterate over each array in groupDataArray
        groupDataArray.forEach(groupData => {
            // Extract the "Group" property from the "nextGroup" property in the response
            const groupName = groupData.nextGroup.Group;

            // Create a new list item for each group and append it to the list
            const listItem = $('<li>').text(groupName);
            groupList.append(listItem);

            groupNames.push(groupName);
            
        });

        $('#groupDataInput').val(JSON.stringify(groupNames));
        //console.log('Form Data:', $('#groupForm').serialize());

            // Submit the form (optional, based on your requirements)
            //$('#groupForm').submit();

            //e.preventDefault();
    }

    function fetchNextGroup(pos) {
        if (longPollingActive) {
        $.ajax({
            url: '/fetch-next-group/' + pos,
            method: 'GET',
            beforeSend: function () {
                // Show the spinner before making the AJAX request
                $('#modal-small').modal('show');
                //$('#loadingMessage').show();
            },
            success: function(response) {
                console.log('Fetching groups data...');

                // Extract the "Group" property from the "nextGroup" property in the response
                const groupName = response.nextGroup.Group;

                // Store the groupName in the array
                groupDataArray.push({ nextGroup: { Group: groupName } });

                // Display or use the groupDataArray as needed
                // For example, you can update a list in your HTML
                updateGroupList(groupDataArray);

                // Trigger the next long-polling request with an updated position
                fetchNextGroup(response.nextPos);
            },
            error: function(xhr, status, error) {
                console.error(error);

                //$('#longPollingSpinner').hide();
                //$('#loadingMessage').hide();

                // Check for a specific error condition in the response
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    console.error("Backend error:", xhr.responseJSON.error);
                    $('#modal-small').modal('hide');
                    $('#modal-simple').modal('show');
                    longPollingActive = false;
                    $('#longPollingButton').text('Retrieve Groups').removeClass('btn-danger').addClass('btn-primary');
                }

                if (longPollingActive) {
                        // Trigger the next long-polling request with an updated position
                        fetchNextGroup(pos);
                    }
                }
            });
        }
    }
    

    function startLongPolling() {
        longPollingActive = true;
        fetchNextGroup(0);
        $('#longPollingButton').text('Cancel').removeClass('btn-primary').addClass('btn-danger');
    }

    // Stop long-polling
    function stopLongPolling() {
        longPollingActive = false;
        $('#longPollingButton').text('Retrieve Groups').removeClass('btn-danger').addClass('btn-primary');
        location.reload();
    }

    // Bind click events to the start/stop button
    $('#longPollingButton').click(function () {
        if (longPollingActive) {
            stopLongPolling();
        } else {
            startLongPolling();
        }
    });

    $(document).ready(function () {
        $('#modal-small').modal('hide');
    });

    $(document).ready(function () {
        $('#modal-simple').modal('hide');
    });

    // Hide the modal when the close button is clicked
    $('#modal-simple').on('hidden.bs.modal', function () {
        // Do additional cleanup if needed
    });


    document.getElementById('checkAll').addEventListener('change', function () {
        const checkboxes = document.querySelectorAll('input[name="selectedGroups[]"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

</script>

@endsection