@extends('layouts.mainlayout')
@section('title', 'Workspace Module')

@section('main')

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">

            <div class="card">

                <!-- =========================
                     CARD HEADER
                ========================= -->

                <div class="card-header d-flex justify-content-between align-items-center">

                    <h4 class="mb-0">
                        Workspace Module
                    </h4>

                    <button
                        class="btn btn-primary"
                        data-toggle="modal"
                        data-target="#workspaceModal">

                        ADD WORKSPACE

                    </button>

                </div>


                <!-- =========================
                     WORKSPACE TABLE
                ========================= -->

                <div class="card-body">

                    <div id="workspaceTableData"></div>

                </div>

            </div>

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



<!-- =========================================================
     ADD WORKSPACE MODAL
========================================================= -->

<div
    class="modal fade"
    id="workspaceModal"
    tabindex="-1"
    role="dialog"
    aria-hidden="true">

    <div
        class="modal-dialog"
        role="document">

        <div class="modal-content">


            <!-- MODAL HEADER -->

            <div class="modal-header">

                <h5 class="modal-title">
                    Add Workspace
                </h5>

                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close">

                    <span>&times;</span>

                </button>

            </div>



            <!-- MODAL BODY -->

            <div class="modal-body">


                <!-- WORKSPACE NAME -->

                <div class="form-group">

                    <label>
                        Workspace Name
                    </label>

                    <input
                        type="text"
                        id="workspace_name"
                        class="form-control"
                        placeholder="e.g. Head Office">

                </div>



                <!-- WORKSPACE URL -->

                <div class="form-group">

                    <label>
                        Workspace URL
                    </label>

                    <input
                        type="text"
                        id="workspace_url"
                        class="form-control"
                        placeholder="https://mms.nablle.app">

                </div>



                <!-- API BASE URL -->

                <div class="form-group">

                    <label>
                        API Base URL
                    </label>

                    <input
                        type="text"
                        id="api_url"
                        class="form-control"
                        placeholder="https://mms.nablle.app/api">

                    <small class="text-muted">
                        Enter the API Base URL of the workspace.
                    </small>

                </div>


            </div>



            <!-- =================================================
                 MODAL FOOTER
            ================================================= -->

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal">

                    Close

                </button>


                <!-- SAVE BUTTON -->

                <button
                    type="button"
                    class="btn btn-success"
                    onclick="saveWorkspace()">

                    Save Workspace

                </button>

            </div>


        </div>

    </div>

</div>



<!-- =========================================================
     FETCH DATA MODAL
========================================================= -->

<div
    class="modal fade"
    id="fetchDataModal"
    tabindex="-1"
    role="dialog"
    aria-hidden="true">

    <div
        class="modal-dialog modal-xl"
        role="document">

        <div class="modal-content">


            <!-- MODAL HEADER -->

            <div class="modal-header">

                <h5 class="modal-title">

                    API Data —

                    <span
                        id="fetchWorkspaceName"
                        class="text-primary">
                    </span>

                </h5>


                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close">

                    <span>&times;</span>

                </button>

            </div>



            <!-- MODAL BODY -->

            <div class="modal-body">


                <!-- CONNECTION STATUS -->

                <div
                    id="connectionStatus"
                    class="d-none mb-3">
                </div>



                <!-- LOADING -->

                <div
                    id="fetchLoading"
                    class="text-center py-5 d-none">

                    <div
                        class="spinner-border text-primary"
                        role="status">
                    </div>

                    <p class="mt-3 text-muted">
                        Connecting to API...
                    </p>

                </div>



                <!-- API RESULTS -->

                <div id="fetchResults"></div>


            </div>



            <!-- MODAL FOOTER -->

            <div class="modal-footer">

                <button
                    class="btn btn-info"
                    onclick="fetchAllData()">

                    <i class="fas fa-sync-alt"></i>

                    Refresh

                </button>


                <button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal">

                    Close

                </button>

            </div>


        </div>

    </div>

</div>



<!-- =========================================================
     JAVASCRIPT
========================================================= -->

<script>


/* =========================================================
   CURRENT WORKSPACE
========================================================= */

let currentWorkspaceId = null;



/* =========================================================
   PAGE LOAD
========================================================= */

document.addEventListener("DOMContentLoaded", function () {

    loadWorkspaces();

});



/* =========================================================
   LOAD WORKSPACES
========================================================= */

function loadWorkspaces() {

    fetch('{{ route("workspace.list") }}')

        .then(response => {

            if (!response.ok) {

                throw new Error(
                    'Failed to load workspaces.'
                );

            }

            return response.text();

        })

        .then(html => {

            document.getElementById(
                'workspaceTableData'
            ).innerHTML = html;

        })

        .catch(error => {

            console.error(error);

            document.getElementById(
                'workspaceTableData'
            ).innerHTML = `

                <div class="alert alert-danger">

                    Unable to load workspaces.

                </div>

            `;

        });

}



/* =========================================================
   SAVE WORKSPACE
========================================================= */

function saveWorkspace() {


    /* -----------------------------------------
       GET VALUES
    ----------------------------------------- */

    const workspace_name =
        document
            .getElementById('workspace_name')
            .value
            .trim();


    const workspace_url =
        document
            .getElementById('workspace_url')
            .value
            .trim();


    const api_url =
        document
            .getElementById('api_url')
            .value
            .trim();



    /* -----------------------------------------
       VALIDATION
    ----------------------------------------- */

    if (
        !workspace_name ||
        !workspace_url ||
        !api_url
    ) {

        alert(
            'Please fill in all fields.'
        );

        return;

    }



    /* -----------------------------------------
       SAVE
    ----------------------------------------- */

    fetch(
        '{{ route("workspace.store") }}',
        {

            method: 'POST',

            headers: {

                'Content-Type':
                    'application/json',

                'X-CSRF-TOKEN':
                    '{{ csrf_token() }}'

            },

            body: JSON.stringify({

                workspace_name:
                    workspace_name,

                workspace_url:
                    workspace_url,

                api_url:
                    api_url

            })

        }
    )

    .then(response => {

        if (!response.ok) {

            throw new Error(
                'Failed to save workspace.'
            );

        }

        return response.json();

    })

    .then(data => {


        if (data.success) {


            /* Close modal */

            $('#workspaceModal').modal(
                'hide'
            );


            /* Reload workspace list */

            loadWorkspaces();


            /* Clear form */

            resetModal();


            alert(
                'Workspace saved successfully!'
            );


        } else {


            alert(
                data.message ||
                'Something went wrong.'
            );

        }

    })

    .catch(error => {

        console.error(error);

        alert(
            error.message ||
            'Error occurred while saving workspace.'
        );

    });

}



/* =========================================================
   RESET ADD WORKSPACE MODAL
========================================================= */

function resetModal() {

    document.getElementById(
        'workspace_name'
    ).value = '';


    document.getElementById(
        'workspace_url'
    ).value = '';


    document.getElementById(
        'api_url'
    ).value = '';

}



/* =========================================================
   OPEN FETCH DATA MODAL
========================================================= */

function openFetchModal(
    workspaceId,
    workspaceName
) {

    currentWorkspaceId =
        workspaceId;


    document.getElementById(
        'fetchWorkspaceName'
    ).textContent =
        workspaceName;


    document.getElementById(
        'fetchResults'
    ).innerHTML = '';


    document.getElementById(
        'connectionStatus'
    ).className =
        'd-none mb-3';


    $('#fetchDataModal').modal(
        'show'
    );


    fetchAllData();

}



/* =========================================================
   FETCH ALL API DATA
========================================================= */

function fetchAllData() {


    if (!currentWorkspaceId) {

        return;

    }



    /* -----------------------------------------
       SHOW LOADING
    ----------------------------------------- */

    document.getElementById(
        'fetchLoading'
    ).classList.remove(
        'd-none'
    );


    document.getElementById(
        'fetchResults'
    ).innerHTML = '';


    document.getElementById(
        'connectionStatus'
    ).className =
        'd-none mb-3';



    /* -----------------------------------------
       API REQUEST
    ----------------------------------------- */

    fetch(
        `/workspace/fetch-data/${currentWorkspaceId}`
    )

    .then(response => {

        if (!response.ok) {

            throw new Error(
                'Failed to fetch API data.'
            );

        }

        return response.json();

    })

    .then(data => {


        /* Hide loading */

        document.getElementById(
            'fetchLoading'
        ).classList.add(
            'd-none'
        );



        const statusDiv =
            document.getElementById(
                'connectionStatus'
            );



        /* =====================================
           CONNECTION SUCCESS
        ===================================== */

        if (
            data.connection_status ===
            'connected'
        ) {


            statusDiv.className =
                'alert alert-success mb-3';


            statusDiv.innerHTML = `

                <i class="fas fa-check-circle"></i>

                <strong>
                    Connected Successfully
                </strong>

                —

                ${
                    data.connection_message ||
                    'API connection successful.'
                }

            `;

        }



        /* =====================================
           CONNECTION FAILED
        ===================================== */

        else {


            statusDiv.className =
                'alert alert-danger mb-3';


            statusDiv.innerHTML = `

                <i class="fas fa-times-circle"></i>

                <strong>
                    Connection Failed
                </strong>

                —

                ${
                    data.message ||
                    'Unable to connect to API.'
                }

            `;

        }



        /* =====================================
           API REQUEST FAILED
        ===================================== */

        if (!data.success) {

            return;

        }



        /* =====================================
           BUILD RESULTS
        ===================================== */

        let html = '';



        for (
            let [label, result]
            of Object.entries(
                data.results || {}
            )
        ) {


            const isOk =
                result.success;


            const badgeCls =
                isOk
                    ? 'bg-success'
                    : 'bg-danger';


            const badgeTxt =
                isOk
                    ? `${result.count} records`
                    : 'Error';



            const safeLabel =
                String(label)
                    .replace(
                        /[^a-zA-Z0-9_-]/g,
                        '_'
                    );


            const collapseId =
                `collapse_${safeLabel}`;



            let bodyHtml;



            /* =================================
               SUCCESS DATA
            ================================= */

            if (
                isOk &&
                result.data
            ) {

                bodyHtml = `

                    <pre
                        class="bg-light p-3 rounded mb-0"
                        style="
                            max-height:250px;
                            overflow:auto;
                            font-size:12px;
                        "
                    >${escapeHtml(
                        JSON.stringify(
                            result.data,
                            null,
                            2
                        )
                    )}</pre>

                `;

            }



            /* =================================
               ERROR DATA
            ================================= */

            else {

                bodyHtml = `

                    <p class="text-danger mb-0">

                        ${
                            result.error ||
                            'No data returned'
                        }

                    </p>

                `;

            }



            /* =================================
               RESULT CARD
            ================================= */

            html += `

                <div class="card mb-2">


                    <div
                        class="
                            card-header
                            d-flex
                            justify-content-between
                            align-items-center
                            py-2
                        "

                        style="cursor:pointer"

                        data-toggle="collapse"

                        data-target="#${collapseId}"
                    >

                        <strong>
                            ${escapeHtml(label)}
                        </strong>


                        <span
                            class="
                                badge
                                ${badgeCls}
                                text-white
                            "
                        >

                            ${badgeTxt}

                        </span>

                    </div>



                    <div
                        class="collapse"
                        id="${collapseId}"
                    >

                        <div class="card-body py-2">

                            ${bodyHtml}

                        </div>

                    </div>


                </div>

            `;

        }



        /* =================================
           DISPLAY RESULTS
        ================================= */

        document.getElementById(
            'fetchResults'
        ).innerHTML = html;

    })



    /* =====================================
       REQUEST ERROR
    ===================================== */

    .catch(error => {


        document.getElementById(
            'fetchLoading'
        ).classList.add(
            'd-none'
        );


        const statusDiv =
            document.getElementById(
                'connectionStatus'
            );


        statusDiv.className =
            'alert alert-danger mb-3';


        statusDiv.innerHTML = `

            <i class="fas fa-times-circle"></i>

            <strong>
                Error
            </strong>

            —

            ${escapeHtml(
                error.message
            )}

        `;

    });

}



/* =========================================================
   ESCAPE HTML
========================================================= */

function escapeHtml(value) {

    return String(value)

        .replace(
            /&/g,
            '&amp;'
        )

        .replace(
            /</g,
            '&lt;'
        )

        .replace(
            />/g,
            '&gt;'
        )

        .replace(
            /"/g,
            '&quot;'
        )

        .replace(
            /'/g,
            '&#039;'
        );

}



/* =========================================================
   DELETE WORKSPACE
========================================================= */

function deleteWorkspace(id) {


    if (
        !confirm(
            'Are you sure you want to delete this workspace?'
        )
    ) {

        return;

    }



    fetch(
        `/workspace/destroy/${id}`,
        {

            method: 'DELETE',

            headers: {

                'X-CSRF-TOKEN':
                    '{{ csrf_token() }}'

            }

        }
    )

    .then(response => {

        if (!response.ok) {

            throw new Error(
                'Failed to delete workspace.'
            );

        }

        return response.json();

    })

    .then(data => {


        if (data.success) {


            alert(
                data.message ||
                'Workspace deleted successfully.'
            );


            loadWorkspaces();

        }

        else {

            alert(
                data.message ||
                'Unable to delete workspace.'
            );

        }

    })

    .catch(error => {

        console.error(error);

        alert(
            error.message ||
            'Error occurred while deleting workspace.'
        );

    });

}

</script>

@endsection