@extends('layouts.app')

@section('content')

<style>
    
    .common-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        border-radius: 5px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        border: 1px solid #e2e2e2;
        text-align: center;
        background-color: #f8f8f8;
        box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
        z-index: 999;
        -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    }

    .permissions-table {
        margin-top: 20px;
    }

    .pop-up-heading {
        text-align: left;
        text-transform: uppercase;
        font-size: 17px;
    }

    .close {
        color: #aaaaaa;
        font-size: 28px;
        font-weight: bold;
        text-align: right;
        margin: -50px -15px 0px 0px;
    }

    .close-btn {
        margin-top: 30px;
        margin-bottom: -10px;
    }

    body {
    font-family: Arial, sans-serif;
    background: #f4f6f9;
    }

/* Container */
.bulk-container {
    width: 90%;
    margin: 40px auto;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}

/* Header */
.bulk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bulk-header h2 {
    margin: 0;
}

.back {
    color: #3f5d8a;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
}

/* Button */
.btn-update {
    background: #3f5d8a;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 20px;
    cursor: pointer;
}

/* Section */
.section {
    margin-bottom: 20px;
}

.section label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: left;
}

/* Tags */
.tag-box {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: 200px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.tag {
  background: #e5e7eb;
  padding: 0px 5px;
  border-radius: 15px;
  display: inline-block;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  height: 20px;
}
.tag .remove {
  cursor: pointer;
  font-weight: bold;
}

/* Form Grid */
.form-grid {
    /*display: grid;*/
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 13px;
    margin-bottom: 5px;
    width: 250px;
    font-weight: bold;
}

/* Inputs */
.form-group input,
.form-group select {
    height: 36px;
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 5px 12px;
    width: 260px;
}
.form-group {
  display: none;
}
.form-group.active {
    display: block;
}

.btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

/* Cancel button */
.btn.cancel {
  background: #fff;
  border: 1px solid #3b5fa0;
  color: #3b5fa0;
}

/* Confirm button */
.btn.confirm {
  background: #3b5fa0;
  color: #fff;
}

.modal-actions {
    display: inline-block;
}
.confirm-modal, .continue-confirm-modal {
    display: none;
}
.simple-success-modal {
    width: 420px;
    display: none;
  }

  .simple-release-modal,
  .simple-disconnect-modal {
    width: 450px;
    display: none;
  }

  .simple-error-modal {
    width: 420px;
    /* font-family: 'Nunito', sans-serif; */
    display: none;
  }

  .table-error-modal {
    width: 50%;
    /* font-family: 'Nunito', sans-serif; */
    display: none;
  }

  .simple-delete-modal {
    width: 420px;
    display: none;
  }

  .simple-success-modal-close,
  .simple-error-modal-close,
  .table-error-modal-close,
  .simple-release-modal-close,
  .simple-disconnect-modal-close {
    cursor: pointer;
    font-size: 20px;
    line-height: 25px;
    margin-left: 98%;
    color: #64677a;
    font-weight: 100;
    z-index: 2;
  }
  .table-error-modal-div {
    max-height: 25rem;
    overflow: auto;
  }

  .msg-header {
    color: #008000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .error-msg-header {
    color: red !important;
  }

  .success-msg-header {
    color: green !important;
  }

  .fa-check {
    border: 1px solid green;
    border-radius: 50%;
    padding: 1px 1px 1px 1px;
  }
  input[readonly] {
    background-color: gainsboro;
    color: #4e4e4e !important;
    opacity: 1 !important;
  }
  .error-modal {
    display: none;
    width: 420px;
  }

  .error-modal-close {
    cursor: pointer;
    font-size: 18px;
    line-height: 20px;
    margin-left: 98%;
    color: #64677a;
    font-weight: 100;
    z-index: 2;
  }
  .error-msg-header {
    color: red !important;
  }

  .msg-header {
    color: #008000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .msg-text {
    font-size: 16px;
    margin-top: 15px;
  }

  .close-btn {
    min-width: 100px !important;
    outline: none !important;
    margin-top: 20px;
  }
  .close-icon {
    border: 1px solid #008000;
    border-radius: 50%;
    padding: 2px 4px 0px 4px;
  }
  .form-group {
    display: inline-block;
    width: 100%;
    text-align: left;
  }
  .form-group.incoming_call_control_dd {
    display: flex;
    width: auto;
    text-align: center;
  }
  .info-message {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eef5ff;
    border: 1px solid #cfe2ff;
    color: #0b5ed7;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
}

.info-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0b5ed7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}
.numbers_label {
    float: left;
}
.search_number_container {
    float: left;
}
.outbound-numbers {
    height: 150px;
    width: 70%;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 10px;
}
#did_count {
    font-weight: bold;
}
.required_or_optional {
    font-size: 10px;
    color: #F9A035;
}
.select2-selection.select2-selection--single, .select2-selection.select2-selection--multiple {
    min-height: 36px !important;
    border-radius: 20px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 10px !important;
}
.select2-container .select2-search--inline .select2-search__field {
    height: 20px !important;
    padding: 5px 12px;
    text-align: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 20px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 20px !important;
}
.select2-selection__choice__remove {
    float: right !important;
    margin-left: 5px !important;
    margin-right: 0 !important;
}
.form-card { 
    border: 1px solid #e0e0e0; 
    padding: 30px; 
    border-radius: 12px; 
    max-width: 100%;
    width: 50%;
}
.form-row { 
    margin-bottom: 20px; 
    display: grid; 
    grid-template-columns: 200px 1fr; 
    align-items: center; 
}
.form-input { 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    width: 100%; 
}
.toggle-group { 
    display: flex; 
    gap: 10px; 
}
.toggle-btn { 
    padding: 8px 24px; 
    border: 1px solid #ccc; 
    border-radius: 20px; 
    background: white; 
    cursor: pointer; 
}
.toggle-btn.active { 
    background: #f0f0f0; 
}
.search-btn { 
    border: none; 
    padding: 10px 30px; 
    float: right; 
    cursor: pointer; 
}
.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px;
}
.card-body select {
    width: 100%;
    text-align: center;
}
.form-row label {
    font-weight: bold;
    text-align: left;
}
.fs-label-wrap {
    text-align: center !important;
    border-radius: 20px !important;
}
.fs-search input {
    text-align: center !important;
}
#bulk-update-history-modal .modal-content {
    width: 65%;
}
#bulkUpdateHistory_filter input, #bulkUpdateHistory_filter input
{
  border-radius: 35px!important;
  padding: 10px;
  outline:none;
  margin-top: -40px;
  margin-bottom: 11px;
  width: 100%;
}
.paginate_button
{
  border: 2px solid #d7d7d7!important;
  color: #ebe7e7!important;
  font-weight: bold;
}
.paginate_button:hover
{
  border: 2px solid #34548A!important;;
  background: #34548A!important;
  border-color: #34548A!important;
  color: #ebe7e7!important;
  font-weight: bold!important;
}
.paginate_button.disabled:hover
{
  color: #ebe7e7!important;
  font-weight: bold!important;
}
.dataTables_paginate a.current
{
  color: #ebe7e7!important;
  background: #34548A!important;
  border-color: #34548A!important;
}
.daily-calling-status-table-container
{
  padding-right: 5%;
  padding-left: 5%;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
{
  color: #ebe7e7!important;
  font-weight: bold!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active
{
  color: #ebe7e7!important;
}
.dataTables_info
{
  color: #34548A!important;
  font-size: 16px;
  font-weight: bold;
}
.dataTables_wrapper .dataTables_paginate .paginate_button
{
  color: #34548A !important;
}
table.dataTable
{
  border: none!important;
}
table.dataTable thead
{
  background-color:#34548A!important;
  border: 0!important;
  padding: 5px!important;
  color: #ebe7e7!important;
  padding-top: 10px;
  padding-bottom: 10px;
}
table.dataTable thead th
{
  border: none!important;
}
table.dataTable tbody td
{
  border: none!important;
}
table.dataTable tbody th, table.dataTable tbody td
{
  padding: 5px 5px;
}
.action-items {
    width: 50%;
}
</style>



<div class="container-fluid" >
    <div id="loaderModal" class="modal">
        <img class="loader-img" src="../images/ajax-spinner.gif">
        <span class="loader-text">Please wait ...</span>
    </div>
    <div class="card shadow-lg">
        <div class="card-header">
            <div class="row">
                <div class="col-md-12">
                    <h4>Number Provisioning</h4>
                </div>
            </div>
        </div>

        <div class="info-message">
            <span class="info-icon">ℹ</span>
            <span class="info-text">
                {{ 'Use following filters to narrow down the list of DIDs.' }}
            </span>
        </div>
        <div class="card-body" id="admin-console-traffic-monitor">
            <div class="action-items">
                <button class="download-bulk-history float-left">Download History</button>
                <a href="{{ route('audit.history') }}" class="ml-2 float-right" >View Logs</a>
            </div>
            <div class="form-card">
                <div class="form-row partner_dd">
                    <label for="partnerSelect">Partners <span class="required_or_optional">(Required)</span></label>
                    <select class="user_dropdown select2" id="partnerSelect">
                        <option value="" selected>Select Partner</option>
                        @foreach ($partners as $customer)
                            <option value="{{ $customer['user_id'] }}" data-id="{{ $customer['id'] }}">{{ $customer['account_name'] . ' (' . $customer['email'] . ')' }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-row account_dd" style="display: none;">
                    <label for="accountSelect">Accounts <span class="required_or_optional">(Optional)</span></label>
                    <select class="user_dropdown select2" id="accountSelect">
                        <option value="" selected>Select Account</option>
                        
                    </select>
                </div>

                <div class="form-row service_instance_dd" style="display: none;">
                    <label for="userSelect">Service Instances <span class="required_or_optional">(Optional)</span></label>
                    <select class="user_dropdown select2" id="userSelect">
                        <option value="" selected>Select Instance</option>
                        
                    </select>
                </div>

                <div class="form-row salesOrderId">
                    <label for="sales_order_id">Sales Order ID <span class="required_or_optional">(Optional)</span></label>
                    <select class="sales_order_id" placeholder="Select Seles OrderId" name="sales_order_id[]" id="sales_order_id" multiple="multiple">
                        <option value="" selected>Select Sales Order Id</option>
                    </select>
                </div>

                <div class="form-row hide" id="entity">
                    <label>Entity <span class="required_or_optional">(Optional)</span></label>
                    <select name="entity[]" class="entity" id="customer_entity">
                    </select>
                </div>

                <div class="form-row" id="shield_status">
                    <label>Shield Status <span class="required_or_optional">(Optional)</span></label>
                    <select name="shield_status" class="shield_status">
                        <option value="" selected>Select</option>
                        <option value="21">Assigned Routed</option>
                        <option value="22">Assigned Standard</option>
                        <option value="24">Pending</option>
                        <option value="25">Ready Pool</option>
                        <option value="28">Released</option>
                    </select>
                </div>

                <div class="form-row" id="search_number_box">
                    <label>Numbers <span class="required_or_optional">(Optional)</span></label>
                    <div class="search_number_container">
                        <p class="desc">
                            Paste or manually enter Numbers, separated by characters such as space, comma, semicolon, or paragraph return.
                        </p>
                        <textarea id="outbound_numbers" class="outbound-numbers form-input" placeholder="Enter values..." rows="5"></textarea>
                        <div class="char-limit">(Add up to 1000 numbers)</div>
                    </div>
                </div>

                <button class="apply_filters_button search-btn" id="apply_filters_button">Search</button>
            </div>

            
            
        </div>


    </div>
</div>



<div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
</div>
<div id="daily-calling-status-count-table_processing" class="dataTables_processing" style="display: none;">Loading...</div>



<div class="confirm-modal common-modal">
    <div class="">
        <h4>Update Changes</h4>
        <p class="msg-text">Are you sure you want to update <span id="count"></span> numbers?</p>
        <div id="modal-actions" class="modal-actions">
            <button class="btn cancel" id="cancelBtn" type="button">Cancel</button>
            <button class="btn confirm" id="confirmBtn" type="button">
                Yes, Update
            </button>
        </div>
    </div>
</div>

<div class="continue-confirm-modal common-modal">
    <div class="">
        <h4>Search Result</h4>
        <p class="msg-text"><span id="did_count"></span> Found. Are you sure you want to continue?</p>
        <div id="modal-actions" class="modal-actions">
            <button class="btn cancel" id="cancelBtn" type="button">Cancel</button>
            <button class="btn continue" id="continueBtn" type="button">
                Continue
            </button>
        </div>
    </div>
</div>

<div class="custom-modal-wrapper simple-success-modal common-modal">
    <i class="fa fa-times simple-success-modal-close" aria-hidden="true"></i>
    <div class="">
        <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Success</p>
        <p class="msg-text simple-success-modal-msg-text"></p>
        <div class="close-button" id="close-button">
            <button type="button" class="close-btn" id="closeSimpleSuccessModal">OK</button>
        </div>
    </div>
</div>

<div class="error-modal common-modal">
    <i class="fa fa-times error-modal-close" aria-hidden="true"></i>
    <div class="">
        <p class="error-msg-header msg-header">
            <i class="fa fa-times close-icon" aria-hidden="true"></i>Error
        </p>
        <p class="msg-text"></p>
        <div style="margin-top: 20px;" id="close-button" class="close-button">
            <!-- <button id="closeSimpleErrorModal" class="close-btn close-error" type="button">proceed</button></div> -->
            <button id="closeSimpleErrorModal" class="close-btn close-error" type="button">
                Cancel
            </button>
        </div>
    </div>
</div>

<div id="bulk-update-history-modal" class="modal" style="display:none">
    <div class="modal-content">
        <span class="close close-popup">&times;</span>
        <div class="modal-body">
            <div id="tableHeader" class="table-header" style="display:none;">
                <h3>Download Update History</h3>
                <span class="close close-popup">&times;</span>
            </div>
            <table id="bulkUpdateHistory" class="bulk-update-history">
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th>Date & Time</th>
                        <th>Action</th>
                </thead>
                <tbody class="maintenance-device">
                    @foreach($bulk_hostory as $historyFile)
                        <tr>
                            <td>{{ $historyFile['name'] }}</td>
                            <td>{{ date('Y-m-d H:i', strtotime($historyFile['created_at'])) }}</td>
                            <td><div class="label-text download" title="Download"><a href="{{ $historyFile['template_aws_url'] }}" download="">Download</a></div></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

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

<script>
    var baseURL = "{{ URL::to('/') }}" + "/";
    let usersShieldNumbers = @json($shieldNumbers);
    let accounts = @json($accounts);
    let serviceInstance = @json($serviceInstance);
    let user_entity = @json($user_entity);
    let sales_order_ids = @json($sales_order_ids);

    var bulkUpdateRespId = localStorage.getItem('bulk_update_resp_id') || 0;
    
    var userId = 0;
    
    $(document).ready(function () {

        if(bulkUpdateRespId > 0) {
            checkForBulkDIDUpdateResponse(bulkUpdateRespId);
        }

        $('#sales_order_id').fSelect({
            placeholder: 'Select Seles OrderId',
            numDisplayed: 1,
            overflowText: '{n} Orders selected',
            noResultsText: 'No Orders found',
            searchText: 'Search Orders',
            showSearch: true
        });

        $('.select2').select2({
            // width: '210px'
        });

        $('.download-bulk-history').on('click', function () {
            $('#bulk-update-history-modal').fadeIn(200);
        });

        $('#bulkUpdateHistory').DataTable({
            bLengthChange:false,
            pageLength:10,
            language: { search: "", searchPlaceholder:"Search", background: "none"},
            order: [[1, 'desc']],
            "aoColumnDefs": [
                { bSortable: false, aTargets: [2] },
                { bSearchable: false, aTargets: [2] },
            ],
            initComplete: function () {
                $('#tableHeader').show();
            }
        });

        $(document).on('click', '.close-popup', function () {
            $('#bulk-update-history-modal').fadeOut(200);
        });

        jQuery(document).on('change', '#partnerSelect', function (event) {
            var partnerID = $(this).find(':selected').data('id');
            var allAccounts = accounts[partnerID];
            userId = $(this).val();
            var customerEntt = user_entity[userId];
            var customerSalesOrderIds = sales_order_ids[userId];

            if (typeof allAccounts != 'undefined' && allAccounts.length > 0) {
                var options = '<option value="">Select Account</option>';

                allAccounts.forEach(function (account) {
                    options += `<option value="${account.user_id}" data-id="${account.id}">${account.account_name} (${account.email})</option>`;
                });

                $('#accountSelect').html(options);
                $('#accountSelect').select2();
                $('.account_dd').show();
            } else {
                $('.account_dd').hide();
                $('.service_instance_dd').hide();
            }

            if (typeof customerEntt != 'undefined' && customerEntt.length > 0) {
                var options = '<option value="">Select Entity</option>';
                customerEntt.forEach(function (entt) {
                    options += `<option value="${entt.id}">${entt.entity}</option>`;
                });

                $('#customer_entity').html(options);
                $('#customer_entity').select2({
                    placeholder: 'Select Entity'
                });
            }

            if (typeof customerSalesOrderIds != 'undefined' && customerSalesOrderIds.length > 0) {
                var options = '<option value="" selected>Select Sales Order Id</option>';

                customerSalesOrderIds.forEach(function (saleOrdId) {
                    options += `<option value="${saleOrdId.sales_order_id}">${saleOrdId.sales_order_id}</option>`;
                });

                $('#sales_order_id').html(options);
                $('#sales_order_id').fSelect('reload');
            }
        });

        jQuery(document).on('change', '#accountSelect', function (event) {
            var accountID = $(this).find(':selected').data('id');
            var allServiceInstance = serviceInstance[accountID];
            userId = $(this).val();
            var customerEntt = user_entity[userId];
            var customerSalesOrderIds = sales_order_ids[userId];

            if (typeof allServiceInstance != 'undefined' && allServiceInstance.length > 0) {
                var options = '<option value="" selected>Select Instance</option>';

                allAccounts.forEach(function (account) {
                    options += `<option value="${account.user_id}">${account.account_name} (${account.email})</option>`;
                });

                $('#accountSelect').html(options);
                $('#accountSelect').select2();
                $('.service_instance_dd').show();
            } else {
                $('.service_instance_dd').hide();
            }

            if (typeof customerEntt != 'undefined' && customerEntt.length > 0) {
                var options = '<option value="">Select Entity</option>';

                customerEntt.forEach(function (entt) {
                    options += `<option value="${entt.id}">${entt.entity}</option>`;
                });

                $('#customer_entity').html(options);
                $('#customer_entity').select2({
                    placeholder: 'Select Entity'
                });
            }

            if (typeof customerSalesOrderIds != 'undefined' && customerSalesOrderIds.length > 0) {
                var options = '<option value="" selected>Select Sales Order Id</option>';

                customerSalesOrderIds.forEach(function (saleOrdId) {
                    options += `<option value="${saleOrdId.sales_order_id}">${saleOrdId.sales_order_id}</option>`;
                });

                $('#sales_order_id').html(options);
                $('#sales_order_id').fSelect('reload');
            }
        });

        jQuery(document).on('change', '#userSelect', function (event) {
            userId = $(this).val();
            var customerEntt = user_entity[userId];
            var customerSalesOrderIds = sales_order_ids[userId];

            if (typeof customerEntt != 'undefined' && customerEntt.length > 0) {
                var options = '<option value="" selected>Select Entity</option>';

                customerEntt.forEach(function (entt) {
                    options += `<option value="${entt.id}">${entt.entity}</option>`;
                });

                $('#customer_entity').html(options);
                $('#customer_entity').select2({
                    placeholder: 'Select Entity'
                });
            }

            if (typeof customerSalesOrderIds != 'undefined' && customerSalesOrderIds.length > 0) {
                var options = '<option value="" selected>Select Sales Order Id</option>';

                customerSalesOrderIds.forEach(function (saleOrdId) {
                    options += `<option value="${saleOrdId.sales_order_id}">${saleOrdId.sales_order_id}</option>`;
                });

                $('#sales_order_id').html(options);
                $('#sales_order_id').fSelect('reload');
            }
        });

        jQuery('#entity .entity').select2({
            placeholder: "Select Entity",
            allowClear: true,
            multiple: true,
        });

        // Close modal (Cancel button)
        $('.cancel').on('click', function () {
            $('.continue-confirm-modal').fadeOut(200);
        });

        // Confirm button
        $('.continue').on('click', function () {
            $('.continue-confirm-modal').fadeOut(200);
            window.location.href = "/didBulkUpdate/" + userId;
        });

        $('#closeSimpleSuccessModal, .simple-success-modal-close').click(function () {
            $('.simple-success-modal').css("display", "none");
        });

        jQuery('body').on('click', '.error-modal-close, #closeSimpleErrorModal', function () {
            jQuery('.error-modal').hide();
        });

        jQuery(document).on('click', '#apply_filters_button', function (event) {
            
            var isValid = true;
            var salesOrderId = $('.sales_order_id').val();
            var entities = $('#customer_entity').val();
            


            var bulkInput = $('#outbound_numbers').val();
            var bulkNumbers = bulkInput
                // .split(/[\s,;]+/)
                .split(/[\n,;|]+/) // Split by newline, comma, semicolon, pipe
                .map(v => v.replace(/\D/g, '')) // Remove all non-digits
                .map(v => {
                    // Remove leading country code (1) for USA numbers
                    if (v.length === 11 && v.startsWith('1')) {
                        v = v.slice(1);
                    }

                    // Always take last 10 digits if longer
                    if (v.length > 10) {
                        v = v.slice(-10);
                    }

                    // Validate final length
                    return v.length === 10 ? v : null;
                })
                .filter(v => v !== null);

            console.log(bulkNumbers);
            
                bulkNumbers = [...new Set(bulkNumbers)]; // Remove Duplicates

            if(bulkNumbers.length > 1000) {
                showErrorModal('You can search a maximum of 1000 numbers at a time.');
                isValid = false;
                return;
            }

            if(!userId) {
                showErrorModal('Please select Partner.');
                isValid = false;
                return;
            }

            /* if(!userId && !bulkNumbers.length && !entities.length && salesOrderId == '') {
                showErrorModal('At least one field value is required.');
                isValid = false;
                return;
            } */

            var postData = {
                user_id: userId,
                sales_order_id: salesOrderId,
                entity: entities,
                shield_status: $('.shield_status').val(),
                numbers: JSON.stringify(bulkNumbers),
            };

            jQuery('#loaderModal').show();
            jQuery.ajax({
                url: baseURL + 'searchDidForUpdate',
                type: 'POST',
                data: postData,
                success: function (response, textStatus, jQxhr) {
                    jQuery('#loaderModal').hide();
                    if(response.success && response.code == 200 && response.data.number.length > 0) {
                        localStorage.setItem('bulk_numbers', JSON.stringify(response.data.number));
                        if(response.data.number.length > 1) {
                            $('#did_count').text(response.data.number.length + " DID's");
                        } else {
                            $('#did_count').text(response.data.number.length + " DID");
                        }
                        $('.continue-confirm-modal').show();
                    } else {
                        jQuery('.error-modal').show();
                        jQuery('.error-modal .msg-text').html("No records were found to update. Please check the applied filters and try again.");
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    jQuery('#loaderModal').show();
                    console.log('Response Text:', jqXhr.responseText);
                },
            });
        });

        function showErrorModal(message) {
            jQuery('#loaderModal').hide();
            jQuery('.error-modal').show();
            jQuery('.error-modal .msg-text').html(message);
        }
        
        function checkForBulkDIDUpdateResponse(id) {
            jQuery.ajax({
            url: baseURL + 'checkForBulkDIDUpdateResponseWeb',
            type: 'GET',
            dataType: 'json',
            data: {
                id: id
            },
            success: function(response, textStatus, jQxhr) {

                if (response.status_code != null && response.cname_response_code != null) {
                if (
                    response.status_code == 200 &&
                    response.switch_code == 200 &&
                    response.cname_response_code != 207
                ) {
                    localStorage.removeItem('bulk_update_resp_id');
                    var msg = response.message;
                    jQuery('#loaderModal1').hide();
                    jQuery('.simple-success-modal').show();
                    jQuery('.simple-success-modal .msg-text').html(msg);
                    changedNumbersData = {};
                    jQuery('.simple-success-modal-close, .close-btn').addClass('new-close-trigger');
                    jQuery(document).on('click', '.new-close-trigger', function() {
                        jQuery('.simple-success-modal').hide();
                        jQuery('.simple-success-modal-close, .close-btn').removeClass('new-close-trigger');
                    });
                    jQuery('.icon_close.simple-success-modal-close').css(
                    'display',
                    'block'
                    );
                } else if (response.cname_response_code == 207) {
                    localStorage.removeItem('bulk_update_resp_id');
                    jQuery('#loaderModal1').hide();
                    var msg =
                    response.failedNumber +
                    ' This Numbers are Failed to update cname, Check with care team';
                    jQuery('#loaderModal1').css('display', 'none');
                    jQuery('.error-modal').show();
                    jQuery('.error-modal .msg-text').html(msg);
                    jQuery('body').on(
                        'click',
                        '.error-modal-close, #closeSimpleErrorModal',
                        function() {
                            jQuery('.error-modal').hide();
                        }
                    );
                } else if (response.status_code == 200 && response.switch_code != 200) {
                    localStorage.removeItem('bulk_update_resp_id');
                    var msg =
                    'We have encountered an Error while updating the DID(s) on the Switch. Please connect with the Number Sentry Care Team.';
                    jQuery('#loaderModal1').hide();
                    jQuery('.error-modal').show();
                    jQuery('.error-modal .msg-text').html(msg);
                    jQuery('body').on(
                        'click',
                        '.error-modal-close, #closeSimpleErrorModal',
                        function() {
                            jQuery('.error-modal').hide();
                        }
                    );
                } else if (response.status_code == 500) {
                    localStorage.removeItem('bulk_update_resp_id');
                    jQuery('#loaderModal1').hide();
                    jQuery('.error-modal').show();
                    jQuery('.error-modal .msg-text').html(
                    'something went wrong! Connect With Dev Team.'
                    );
                    jQuery('body').on(
                        'click',
                        '.error-modal-close, #closeSimpleErrorModal',
                        function() {
                            jQuery('.error-modal').hide();
                        }
                    );
                }
                } else {
                setTimeout(() => {
                    checkForBulkDIDUpdateResponse(id);
                }, 10000);
                }
            },
            error: function(jqXhr, textStatus, errorThrown) {
                console.error(
                'Error occurred during the AJAX request:',
                textStatus,
                errorThrown
                );
            },
            });
        }

    });
</script>
@endsection