@extends('layouts/layoutMaster')

@section('title', 'API Config')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/bs-stepper/bs-stepper.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/bs-stepper/bs-stepper.js', 'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js'])
@endsection

@section('content')
    <style>
        .dataTables_scroll {
            max-height: 200px;
        }
       .skeleton-loader {
            background: #f0f0f0;
            height: 200px;
            margin: 15px;
            border-radius: 8px;
            animation: pulse 1.5s infinite ease-in-out;
        }

        @keyframes pulse {
            0% {
                background-color: #f0f0f0;
            }
            50% {
                background-color: #e0e0e0;
            }
            100% {
                background-color: #f0f0f0;
            }
        }

        


    </style>

    <!-- Lead List Table -->
    <div class="card card-action">
        <div class="card-header pb-1">
            <ul class="nav nav-tabs flex-nowrap" role="tablist">
                <div class="scroll-container-wrapper">
                    <button class="scroll-btn left" id="scrollLeftBtn"><span class="scroll-arrow"><i class="mdi mdi-chevron-left fs-2 text-white"></i></span></button>
                    <div class="scroll-container" id="scrollContainer">
                        <li class="item nav-item">
                            <a href="{{ url('/settings/general_settings') }}"
                                type="button"
                                class="nav-link scroll-link "
                                role="tab">
                                General Settings
                            </a>
                        </li>        
                        <li class="item nav-item">
                            <a
                                href="{{ url('/settings/broadcast_theme') }}"
                                type="button"
                                class="nav-link scroll-link"
                                aria-selected="true">
                                Common
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/credential_book') }}" type="button"
                                class="nav-link scroll-link ">
                                Entity
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/document') }}" type="button" class="nav-link scroll-link ">
                                HRM
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/applicant_status') }}" type="button"
                                class="nav-link scroll-link ">
                                Recruitment
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('/settings/department') }}" type="button"
                                class="nav-link scroll-link ">
                                Management
                            </a>
                        </li>
                        <li class="nav-item">
                                <a href="{{ url('/settings/business/department') }}" type="button"
                                    class="nav-link scroll-link ">
                                    Business
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ url('/settings/api_config') }}" type="button"
                                    class="nav-link scroll-link active">
                                    API Config
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ url('/admin/webhooks') }}" type="button"
                                    class="nav-link scroll-link ">
                                    Webhook Moniter
                                </a>
                            </li>
                    </div>
                    <button class="scroll-btn right" id="scrollRightBtn" style="display: block;"><i class="mdi mdi-chevron-right fs-2 text-white"></i></button>
                </div>  
            </ul>
        </div>
        <div class="card-body">
            <h4 class="ms-2">API Config</h4>
            <div class="d-flex justify-content-end align-items-center mb-2">
                <a href="javascript:;" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal"
                    data-bs-target="#kt_modal_add_integrations">
                    <span class="me-2"><i class="mdi mdi-plus"></i></span>Add Integration
                </a>
            </div>
           <!-- Display Skeleton Loader -->
            <div id="loader" class="d-none">
                <div class="skeleton-loader"></div>
                <div class="skeleton-loader"></div>
                <div class="skeleton-loader"></div>
            </div>

            <!-- Integration Cards will be inserted here -->
            <div class="row" id="integration_cards_container">
                <!-- Data will be dynamically inserted here -->
            </div>

            <!-- Pagination -->
            <ul id="pagination_container" class="pagination justify-content-end">
                <!-- Pagination links will be inserted here -->
            </ul>
        </div>
    </div>


    <!---------------- Integrations--------------->

<!-- Modal to add integration -->
<!-- Modal for Add Integration -->
<div class="modal fade" id="kt_modal_add_integrations" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
    <div class="modal-dialog modal-md">
        <div class="modal-content rounded">
            <!-- Modal Header -->
            <div class="modal-header justify-content-end border-0 pb-0">
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <!-- Close Icon -->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>

            <!-- Modal Body -->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                <h3 class="text-center mb-4 text-black">Create Integration</h3>
                <form id="add_integration_form" action="{{ route('add_integration') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <!-- API Name -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">API Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter API Name" name="api_name" id="api_name" />
                        <div id="api_name_err" class="text-danger mt-1"></div>
                    </div>

                    <!-- API Key -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">API Key<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter API Key" id="api_key" name="api_key" />
                        <div id="api_key_err" class="text-danger mt-1"></div>
                    </div>

                    <!-- Developer Link -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">Developer Link<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Developer Link" id="developer_link" name="developer_link" />
                        <div id="developer_link_err" class="text-danger mt-1"></div>
                    </div>

                    <!-- Dynamic API Fields -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">API Config Fields (Key-Value pairs)</label>
                        <div id="api_config_fields">
                            <div class="row mb-2">
                                <div class="col-md-5">
                                    <input type="text" class="form-control" placeholder="Enter Field Name" name="config_fields[0][key]" />
                                </div>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" placeholder="Enter Field Value" name="config_fields[0][value]" />
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-danger remove-config-field"><span class="mdi mdi-trash-can"></span></button>
                                </div>
                            </div>
                        </div>
                        <button type="button" id="add_config_field" class="btn btn-sm btn-primary">Add More Fields</button>
                    </div>

                    <!-- Image Upload -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">Image<span class="text-danger">*</span></label>
                        <div class="align-items-sm-center gap-4">
                            <img src="{{asset('assets/phdizone_images/def_img.png')}}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded border border-gray-600 border-solid" id="uploadedlogo" />
                            <div class="button-wrapper">
                                <div class="d-flex align-items-start mt-2 mb-2">
                                    <label for="upload" class="btn btn-sm btn-primary me-2" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload Logo">
                                        <i class="mdi mdi-tray-arrow-up"></i>
                                        <input type="file" id="upload" class="file-in" hidden name="api_image" accept="image/png, image/jpeg" />
                                    </label>
                                </div>
                                <div class="small">Allowed JPG, PNG. Max size of 800K</div>
                            </div>
                            <div id="api_image_err" class="text-danger mt-1"></div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="d-flex justify-content-center align-items-center mt-4">
                        <button type="reset" class="btn btn-secondary me-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" id="submitCreateBtn" class="btn btn-primary me-3" onclick="validation_form()">
                            <span id="yesBtnText">Create Integration</span>
                            <span id="yesBtnLoader" style="display: none;" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--end::Modal - Add Integrations-->

<!-- Modal for Edit Integration -->
<div class="modal fade" id="kt_modal_update_integrations" tabindex="-1" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
    <div class="modal-dialog modal-md">
        <div class="modal-content rounded">
            <!-- Modal Header -->
            <div class="modal-header justify-content-end border-0 pb-0">
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                        </svg>
                    </span>
                </div>
            </div>
            <!-- Modal Body -->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                <h3 class="text-center mb-4 text-black">Update Integration</h3>
                <form id="update_integration_form" method="POST" action="{{ route('update_integration') }}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="edit_id" id="edit_id">
                    
                    <!-- API Name -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">API Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter API Name" id="api_name_edit" name="api_name_edit" />
                        <div id="api_name_edit_err" class="text-danger mt-1"></div>
                    </div>
                    
                    <!-- API Key -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">API Key<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter API Key" id="api_key_edit" name="api_key_edit" />
                        <div id="api_key_edit_err" class="text-danger mt-1"></div>
                    </div>

                    <!-- Developer Link -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">Developer Link<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Enter Developer Link" id="developer_link_edit" name="developer_link_edit" />
                        <div id="developer_link_edit_err" class="text-danger mt-1"></div>
                    </div>

                    <!-- API Config Fields (Dynamic Fields) -->
                    <div class="col-lg-12 mb-3">
                        <label class="text-black mb-1 fs-6 fw-semibold">API Config Fields (Key-Value pairs)</label>
                        <div id="api_config_fields_edit">
                            <!-- Dynamically added fields will go here -->
                        </div>
                        <button type="button" id="add_config_field_edit" class="btn btn-sm btn-primary">Add More Fields</button>
                    </div>

                    <!-- Image Upload -->
                    <div class="col-lg-12 mb-3">
                        <div class="row">
                            <label class="col-lg-6 text-black fs-6 fw-semibold">Image<span class="text-danger">*</span></label>
                            <div class="align-items-sm-center gap-4">
                                <img src="{{asset('assets/phdizone_images/task.png')}}" alt="user-avatar" class="d-block w-px-100 h-px-100 rounded border border-gray-600 border-solid" id="uploadedlogoimage" />
                                <div class="button-wrapper">
                                    <div class="d-flex align-items-start mt-2 mb-2">
                                        <label for="imageUpload" class="btn btn-sm btn-primary me-2" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="top" title="Upload Logo">
                                            <i class="mdi mdi-tray-arrow-up"></i>
                                            <input type="file" id="imageUpload" name="image_upload_edit" class="file-in_edit" hidden accept="image/png, image/jpeg" />
                                        </label>
                                        <button type="button" class="btn btn-sm btn-outline-danger file-reset_edit" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset Logo">
                                            <i class="mdi mdi-reload"></i>
                                        </button>
                                    </div>
                                    <div class="small">Allowed JPG, PNG. Max size of 800K</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="d-flex justify-content-center align-items-center mt-4">
                        <button type="reset" class="btn btn-secondary me-3" data-bs-dismiss="modal">Cancel</button>
                         <button type="button" id="submitUpdateBtn" class="btn btn-primary me-3" onclick="validation_edit_form()">
                            <span id="yesBtnTextEdit">Update Integration</span>
                            <span id="yesBtnLoaderEdit" style="display: none;" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<!--begin::Modal - Delete Integration-->
<div class="modal fade" id="kt_modal_delete_integration" tabindex="-1" aria-hidden="true" data-bs-keyboard="false"
    data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-m">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <div class="swal2-icon swal2-danger swal2-icon-show" style="display: flex;">
                <div class="swal2-icon-content">?</div>
            </div>
            <div class="swal2-html-container" id="swal2-html-container" style="display: block;">
                <span id="delete_message"></span>
            </div>
            <div class="d-flex justify-content-center align-items-center pt-8 pb-8">
                <button type="submit" class="btn btn-danger me-3" onclick="deleteIntegration()">Yes</button>
                <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
            </div>
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Delete Internal CUG -->


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <style>
        /* Customize Toastr container */
        .toast {
            background-color: #39484f;
        }

        /* Customize Toastr notification */
        .toast-success {
            background-color: green;
        }

        /* Customize Toastr notification */
        .toast-error {
            background-color: red;
        }
    </style>

    <script>
        // Display Toastr messages
        @if (Session::has('toastr'))
            var type = "{{ Session::get('toastr')['type'] }}";
            var message = "{{ Session::get('toastr')['message'] }}";
            toastr[type](message);
        @endif
    </script>

    <script>
        // Fetch integrations with pagination via AJAX
        function loadIntegrations(page = 1) {
            let perPage = 25; // Adjust this value for items per page
            $('#loader').removeClass('d-none'); // Show loader while data is being fetched
            $.ajax({
                url: '/settings/api_config',  // Your API URL
                method: 'GET',
                data: { page: page, perpage: perPage, search_filter: $('#search_filter').val() },
                success: function(response) {
                    $('#loader').addClass('d-none'); // Hide loader when data is loaded
                    $('#integration_cards_container').html(''); // Clear previous data
                    if (response.data.length > 0) {
                        response.data.forEach(function(integration) {
                            let integrationCard = `
                                            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                                                <div class="card border shadow-sm rounded hover-shadow-lg">
                                                    <div class="card-body d-flex align-items-center p-4">
                                                        <!-- Image Container -->
                                                        <div class="image-container me-3">
                                                            <img src="${integration.image}" class="rounded-circle" width="60" height="60" alt="Integration Image">
                                                        </div>

                                                        <!-- Content Container -->
                                                        <div class="content-container">
                                                            <h5 class="card-title mb-1 text-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="${integration.api_name}">
                                                                ${integration.api_name.length > 20 ? integration.api_name.substring(0, 20) + '...' : integration.api_name}
                                                            </h5>
                                                            <p class="card-text text-muted fs-7" data-bs-toggle="tooltip" data-bs-placement="top" title="${integration.api_key}">
                                                                ${integration.api_key.length > 20 ? integration.api_key.substring(0, 20) + '...' : integration.api_key}
                                                            </p>
                                                            <p class="card-text text-muted fs-7" data-bs-toggle="tooltip" data-bs-placement="top" title="${integration.developer_link}">
                                                                <a href="${integration.developer_link}" target="_blank" class="text-primary">
                                                                    ${integration.developer_link.length > 30 ? integration.developer_link.substring(0, 30) + '...' : integration.developer_link}
                                                                </a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="card-footer border-top py-2">
                                                        <div class="d-flex justify-content-between">
                                                            <div>
                                                                <span class="text-start">
                                                                    <a href="javascript:;" class="btn btn-icon btn-sm p-0 me-2" onclick="Edit_Fetch('${integration.sno}')"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#kt_modal_update_integrations">
                                                                        <span data-bs-toggle="tooltip"
                                                                            data-bs-placement="bottom" title="Edit"><i
                                                                                class="mdi mdi-square-edit-outline fs-3 text-black"></i></span>
                                                                    </a>
                                                                    <a href="javascript:;" class="btn btn-icon btn-sm p-0 me-2" onclick="confirmDelete('${integration.sno}', '${integration.api_name}')"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#kt_modal_delete_integration">
                                                                        <span data-bs-toggle="tooltip"
                                                                            data-bs-placement="bottom" title="Delete"><i
                                                                                class="mdi mdi-delete-outline fs-3 text-black"></i></span>
                                                                    </a>

                                                                </span>
                                                            </div>
                                                            <div class="me-3">
                                                                <label class="switch switch-square">
                                                                    <input type="checkbox" class="switch-input" ${integration.status == 0 ? 'checked' : ''} onchange="updateIntegrationStatus('${integration.sno}', this.checked)" />
                                                                    <span class="switch-toggle-slider">
                                                                        <span class="switch-on"></span>
                                                                        <span class="switch-off"></span>
                                                                    </span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        `;


                            $('#integration_cards_container').append(integrationCard);
                        });
                    } else {
                        $('#integration_cards_container').html('<p>No API Configurations found</p>'); // Show message if no data
                    }

                    setupPagination(response.current_page, response.last_page);
                },
                error: function() {
                    $('#loader').addClass('d-none');
                    $('#integration_cards_container').html('<p>Failed to load data. Please try again later.</p>');
                }
            });
        }

        // Setup pagination dynamically
        function setupPagination(currentPage, lastPage) {
            let paginationContainer = $('#pagination_container');
            paginationContainer.html(''); // Clear existing pagination links

            for (let i = 1; i <= lastPage; i++) {
                let pageLink = `<li class="page-item ${i === currentPage ? 'active' : ''}">
                                    <a class="page-link" href="javascript:void(0);" onclick="loadIntegrations(${i})">${i}</a>
                                </li>`;
                paginationContainer.append(pageLink);
            }
        }

        // Initial call to load integrations on page load
        $(document).ready(function() {
            loadIntegrations(); // Load integrations for the first page
        });
    </script>
   
<script>
    let currentPage = 1;
    let isLoading = false;
    let abortController = new AbortController();

    function formatDate(date) {
        const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true };
        return new Date(date).toLocaleDateString('en-GB', options);
    }


    function updatePagination(currentPage, lastPage, total, perpage) {
        let paginationContainer = document.getElementById('pagination-container');
        paginationContainer.innerHTML = ''; // Clear old pagination

        // Set the pagination container style
        paginationContainer.style.display = "flex";
        paginationContainer.style.justifyContent = "space-between";
        paginationContainer.style.alignItems = "center";

        // Showing result count info (e.g., Showing 1 to 25 of 3556 results)
        let start = (currentPage - 1) * perpage + 1;
        let end = Math.min(currentPage * perpage, total);
        let showingInfo = `Showing ${start} to ${end} of ${total} results`;
        paginationContainer.insertAdjacentHTML('beforeend', showingInfo);

        // Create Pagination Buttons

        // << First button
        let firstButton = `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top" title="First Page"><button class=" page-link" onclick="loadThemes(1)" >«</button> </li>`;
        
        // < Previous button
        let prevButton = `<li class="page-item ${currentPage > 1 ? '' : 'disabled'}" data-bs-toggle="tooltip" data-bs-placement="top" title="Previous"><button class=" page-link" onclick="loadThemes(${currentPage - 1})" >‹</button> </li>`;
        
        // Next button
        let nextButton = `<li class="page-item ${currentPage < lastPage ? '' : 'disabled'}" data-bs-toggle="tooltip" data-bs-placement="top" title="Next"><button class="page-link" onclick="loadThemes(${currentPage + 1})" >›</button> </li>`;
        
        // >> Last button
        let lastButton = `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}" data-bs-toggle="tooltip" data-bs-placement="top" title="Last Page"><button class=" page-link" onclick="loadThemes(${lastPage})" >»</button> </li>`;

        // Page Number Buttons (Dynamically show a range of pages around the current page)
        let pageButtons = '';
        let range = 2; // Show 2 pages before and after the current page
        let startPage = Math.max(1, currentPage - range);
        let endPage = Math.min(lastPage, currentPage + range);

        // Generate page numbers
        for (let i = startPage; i <= endPage; i++) {
            pageButtons += `<li class="page-item ${i === currentPage ? 'active' : ''}"><button class="page-link " onclick="loadThemes(${i})">${i}</button> </li>`;
        }

        // Add the pagination buttons and page numbers
        paginationContainer.insertAdjacentHTML('beforeend', `
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    ${firstButton}
                    ${prevButton}
                    ${pageButtons}
                    ${nextButton}
                    ${lastButton}
                </ul>
            </nav>
        `);

        // Update perpage dropdown if changed
        document.getElementById('perpage').value = perpage;
    }

  

</script>

<!-- Add Validation -->

<script>
    // Adding dynamic fields
    let fieldIndex = 1;
    $('#add_config_field').on('click', function() {
        let fieldHtml = `
            <div class="row mb-2">
                <div class="col-md-5">
                    <input type="text" class="form-control" placeholder="Enter Field Name" name="config_fields[${fieldIndex}][key]" />
                </div>
                <div class="col-md-5">
                    <input type="text" class="form-control" placeholder="Enter Field Value" name="config_fields[${fieldIndex}][value]" />
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger remove-config-field"><span class="mdi mdi-trash-can"></span></button>
                </div>
            </div>
        `;
        $('#api_config_fields').append(fieldHtml);
        fieldIndex++;
    });

    // Remove dynamically added fields
    $(document).on('click', '.remove-config-field', function() {
        $(this).closest('.row').remove();
    });

    // Form Validation before submitting
    function validation_form() {
        let isValid = true;

        // Clear errors
        $('#api_name_err').text('');
        $('#api_key_err').text('');
        $('#developer_link_err').text('');
        $('#api_image_err').text('');

        // Validate required fields
        if($('#api_name').val() === '') {
            isValid = false;
            $('#api_name_err').text('Enter API Name.');
        }
        if($('#api_key').val() === '') {
            isValid = false;
            $('#api_key_err').text('Enter API Key.');
        }
        if($('#developer_link').val() === '') {
            isValid = false;
            $('#developer_link_err').text('Enter Developer Link.');
        }
        if($('#upload').val() === '') {
            isValid = false;
            $('#api_image_err').text('Upload Image.');
        }

        // Check if there are any empty key-value pairs
        $('#api_config_fields input').each(function() {
            if($(this).val() === '') {
                isValid = false;
            }
        });

        if (isValid) {
           submit_form()
        }
    }

     function submit_form() {
        const form = document.getElementById("add_integration_form");
        const submitBtn = document.getElementById("submitCreateBtn");
        const submitBtnText = document.getElementById("yesBtnText");
        const submitBtnLoader = document.getElementById("yesBtnLoader");

        if (form) {
            // Disable the button to prevent duplicate submission
            submitBtn.disabled = true;
            submitBtnText.style.display = "none"; // Hide "Yes"
            submitBtnLoader.style.display = "inline-block"; // Show loader

 
           
            // ✅ Create FormData manually
            const formData = new FormData(form);

            // ✅ Send via AJAX (so files are sent correctly)
            $.ajax({
                url: form.action,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    toastr.success('APi Intergration Created successfully!');
                    window.location.href = '/settings/api_config';
                    // loadIntegrations(); 
                },
                error: function(err) {
                    console.error("Error:", err);
                     toastr.error("Error:", err);
                    // In case of an error, re-enable the button and reset the text
                    submitBtn.disabled = false;
                    submitBtnText.style.display = "inline-block"; // Show "Yes" again
                    submitBtnLoader.style.display = "none"; // Hide loader
                }
            });
        }
    }

</script>



{{-- Department Status --}}
<script>
    function updateIntegrationStatus(CompanyId, isChecked) {
            const status = isChecked ? 0 : 1; // Set status based on checkbox state

            fetch(`/integration_status/${CompanyId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token
                },
                body: JSON.stringify({
                    status: status
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    console.log('Integration updated successfully:', data.message);
                    toastr.success('Integration Updated successfully!');
                } else {
                    console.error('Error updating Integration:', data.message);
                    toastr.error('Error updating Integration');
                }
            })
            .catch(error => {
                console.error('Error updating Integration:', error);
            });
        }
</script>

{{-- Delete Integration --}}
<script>
    function confirmDelete(sno, name) {
        document.querySelector('#kt_modal_delete_integration .btn-danger').setAttribute(
            'data-id', sno);
        $('#delete_message').html('Are you sure you want to delete <br> <b class="text-danger"> ' + name +'</b> Integration ?');
        }

    function deleteIntegration() {

            var categoryId = document.querySelector('#kt_modal_delete_integration .btn-danger').getAttribute('data-id');

            fetch('/delete_integration/' + categoryId, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    toastr.success('Integration Deleted successfully!');
                    location.reload();
                } else {

                    console.error(data.error_msg);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }   
</script>

{{-- Edit Data Fetch --}}
{{-- Validation --}}
<script>
    // Add Validation
    function validation_edit_form(){
        let hasErr = true;

        $('#api_name_edit_err').text('');

        if($('#api_name_edit').val() === '') {
            hasErr = false;
            $('#api_name_edit_err').text('Enter API Name.');
        }

        $('#api_key_edit_err').text('');
        
        if($('#api_key_edit').val() === '') {
            hasErr = false;
            $('#api_key_edit_err').text('Enter API Key.');
        }

        $('#developer_link_edit_err').text('');
        
        if($('#developer_link_edit').val() === '') {
            hasErr = false;
            $('#developer_link_edit_err').text('Enter Developer Link.');
        }
      
        if(hasErr) {
           update_submit_form();
        }

    }
    function update_submit_form() {
        const form = document.getElementById("update_integration_form");
        const submitBtn = document.getElementById("submitUpdateBtn");
        const submitBtnText = document.getElementById("yesBtnTextEdit");
        const submitBtnLoader = document.getElementById("yesBtnLoaderEdit");
 
        if (form) {
            // Disable the button to prevent duplicate submission
            submitBtn.disabled = true;
            submitBtnText.style.display = "none"; // Hide "Yes"
            submitBtnLoader.style.display = "inline-block"; // Show loader

          
           
            // ✅ Create FormData manually
            const formData = new FormData(form);

            // ✅ Send via AJAX (so files are sent correctly)
            $.ajax({
                url: form.action,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    toastr.success('APi Intergration Created successfully!');
                    window.location.href = '/settings/api_config';
                    // loadIntegrations(); 
                },
                error: function(err) {
                    console.error("Error:", err);
                     toastr.error("Error:", err);
                    // In case of an error, re-enable the button and reset the text
                    submitBtn.disabled = false;
                    submitBtnText.style.display = "inline-block"; // Show "Yes" again
                    submitBtnLoader.style.display = "none"; // Hide loader
                }
            });
        }
    }
</script>
<script>
let fieldIndexEdit = 0;  // Keep track of the field index

// Fetch data for the edit modal
function Edit_Fetch(id) {
    fetch('/integration_edit/' + id, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200) {
            var integrationData = data.data;

            // Set form values with the fetched data
            $('#edit_id').val(integrationData.sno);
            $('#api_name_edit').val(integrationData.api_name);
            $('#api_key_edit').val(integrationData.api_key);
            $('#developer_link_edit').val(integrationData.developer_link);

            // Set image URL if it exists, else set a default image
            if (integrationData.image) {
                const imagePath = '/settings/integrations/' + integrationData.image;
                $('#uploadedlogoimage').attr('src', imagePath);
            } else {
                $('#uploadedlogoimage').attr('src', "{{asset('assets/phdizone_images/task.png')}}");
            }

            // Handle dynamic API fields (key-value pairs)
            if (integrationData.api_fields) {
                let fields = JSON.parse(integrationData.api_fields); // Parsing JSON string to an object
                $('#api_config_fields_edit').empty(); // Clear any existing fields

                // Set fieldIndexEdit based on the number of fields fetched
                fieldIndexEdit = fields.length;

                // Loop through the fields and append them to the modal
                fields.forEach((field, index) => {
                    addFieldToEdit(index, field.key, field.value); // Add each field dynamically
                });
            }

            // Initialize tooltips after modal open
            $('[data-bs-toggle="tooltip"]').tooltip();
        } else {
            console.error(data.error_msg);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Function to add a dynamic field to the edit modal
function addFieldToEdit(index, key = '', value = '') {
    let fieldHtml = `
        <div class="row mb-2" id="field-${index}">
            <div class="col-md-5">
                <input type="text" class="form-control" placeholder="Enter Field Name" name="config_fields[${index}][key]" value="${key}" />
            </div>
            <div class="col-md-5">
                <input type="text" class="form-control" placeholder="Enter Field Value" name="config_fields[${index}][value]" value="${value}" />
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger remove-config-field" onclick="removeField(${index})"><span class="mdi mdi-trash-can"></span></button>
            </div>
        </div>
    `;
    $('#api_config_fields_edit').append(fieldHtml); // Append the new field row
}

// Function to remove a field
function removeField(index) {
    $(`#field-${index}`).remove(); // Remove the field row

    // Update fieldIndexEdit if necessary
    fieldIndexEdit--;  // Adjust index if a field is removed
}

// Add dynamic key-value fields for the edit modal
$('#add_config_field_edit').on('click', function() {
    addFieldToEdit(fieldIndexEdit);  // Call the function to add a new field
    fieldIndexEdit++;  // Increment the index for the next field
});

</script>

<script>
    let logofile = document.getElementById('uploadedlogo');
    const fileInput = document.querySelector('.file-in'),
    resetFileInput = document.querySelector('.file-reset');

  if (logofile) {
    const resetImage = logofile.src;
    fileInput.onchange = () => {
      if (fileInput.files[0]) {
        logofile.src = window.URL.createObjectURL(fileInput.files[0]);
      }
    };
    if(resetFileInput){
        resetFileInput.onclick = () => {
            fileInput.value = '';
            logofile.src = resetImage;
        };
    }
    
  }
  $(document).ready(function() {
    // Initialize tooltips on page load
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let logofile_edit = document.getElementById('uploadedlogoimage');
        const fileInput_edit = document.querySelector('.file-in_edit');
        const resetFileInput_edit = document.querySelector('.file-reset_edit');

        if (logofile_edit && fileInput_edit && resetFileInput_edit) {
            const resetImage_edit = logofile_edit.src;

            fileInput_edit.onchange = () => {
                if (fileInput_edit.files[0]) {
                    logofile_edit.src = window.URL.createObjectURL(fileInput_edit.files[0]);
                }
            };

            resetFileInput_edit.onclick = () => {
                fileInput_edit.value = '';
                logofile_edit.src = resetImage_edit;
            };
        }
    });
</script>



@endsection