@extends('layouts.app')

@section('content')

<style>
    
    .common-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 35%;
        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;
    max-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: 15px;
    height: 22px;
}
.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: 50%;
}
.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 {
    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;
  }
  
  .primary_settings, .basic-information {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
.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;
    margin-top: 7px;
    padding: 5px 12px !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;
}
.select2-selection__choice {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.basic-information {
    border:1px solid #ccc; 
    padding:10px;
}
legend {
    width: 25%;
    font-size: 16px;
    font-weight: bold;
}
.bulk-update-subtitle {
    margin-bottom: 0px;
}	
.fs-label-wrap {
    text-align: center !important;
    border-radius: 20px !important;
}
.fs-search input {
    text-align: center !important;
}
.fs-wrap.multiple  {
    width: 50%;
}
.fs-search input {
    width: auto;
}
.check-to-update {
    height: auto !important;
    width: 30px !important;
}
select {
    margin-right: 0px;
}
.info-message {
    display: flex;
    gap: 12px;
}

.info-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #0b5ed7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
</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>Bulk Update</h4>
                    <p class="bulk-update-subtitle">All values shown here will be applied to the selected numbers when you click “Update Changes,” including unchanged fields.</p>
                </div>
            </div>
        </div>
        <div class="card-body" id="admin-console-traffic-monitor">

            <div class="bulk-header">
                <div class="back" id="backBtn">← Back</div>
            </div>

            <div class="row mb-3">
                <div class="col-md-12">
                    <div class="section">
                        <label>Selected Number(s)</label>

                        <div class="tag-box">
                            
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-md-12 mb-3 info-message">
                    <span class="info-icon">ℹ</span>
                    <span class="info-text">
                        Only checked fields will be updated. All other fields will retain their current values for the selected numbers.
                    </span>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    
                    <fieldset class="basic-information">
                        <legend>Basic Details</legend>
                        <div class="form-group hide" id="entity">
                            <label>Entity</label>
                            <select name="entity" class="entity">
                                @foreach ($user_entity as $entity)
                                    <option value="{{ $entity->id }}">{{ $entity->entity }}</option>
                                @endforeach
                            </select>
                            <input type="checkbox" name="entity_chk" value="entity" class="check-to-update">
                        </div>

                        <div class="form-group hide" id="carriergroup">
                            <label>Carrier Group</label>
                            <select name="carrier_group" class="carrier_group" id="carrier_group" multiple="multiple"></select>
                            <input type="checkbox" name="carrier_group_chk" value="carrier_group" class="check-to-update">
                        </div>

                        <div class="form-group hide" id="preferred_business_name">
                            <label>Preferred Business Name</label>
                            <input type="text" name="preferred_business_name" class="preferred_business_name" placeholder="Preferred Business Name" readonly>
                            <input type="checkbox" name="preferred_business_name_chk" value="preferred_business_name" class="check-to-update">
                        </div>

                        <div class="form-group" id="number_description">
                            <label>Description</label>
                            <input type="text" name="number_description" class="number_description" placeholder="Description">
                            <input type="checkbox" name="number_description_chk" value="number_description" class="check-to-update">
                        </div>

                        <div class="form-group" id="branded">
                            <label>Branded</label>
                            <select name="branded" class="branded">
                                <option value="1" selected="">Yes</option>
                                <option value="0">No</option>
                            </select>
                            <input type="checkbox" name="branded_chk" value="branded" class="check-to-update">
                        </div>

                        <div class="form-group" id="brand_name">
                            <label>Brand Name</label>
                            <input type="text" name="brand_name" class="brand_name" placeholder="Brand Name">
                            <input type="checkbox" name="brand_name_chk" value="brand_name" class="check-to-update">
                        </div>

                        <div class="form-group" id="is_guarded">
                            <label>Is Guarded</label>
                            <select name="is_guarded" class="is_guarded">
                                <option value="1">Yes</option>
                                <option value="0" selected="">No</option>
                            </select>
                            <input type="checkbox" name="is_guarded_chk" value="is_guarded" class="check-to-update">
                        </div>

                        <div class="form-group" id="select_plan_name">
                            <label>Select Plan Name</label>
                            <select name="select_plan_name" class="select_plan_name">
                                @foreach ($user_plans as $key => $val)
                                    @if($val != 'numbershield')
                                        <option value="{{ $key }}" selected>{{ $val }}</option>
                                    @else
                                        <option value="{{ $key }}">{{ $val }}</option>
                                    @endif
                                @endforeach
                            </select>
                            <input type="checkbox" name="select_plan_name_chk" value="select_plan_name" class="check-to-update">
                        </div>

                        <div class="form-group" id="test_status">
                            <label>Guard Status</label>
                            <select name="test_status" class="test_status">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                                <option value="2">Pending</option>
                                <option value="3">Ready Pool</option>
                                <option value="5">Cool Down</option>
                                @if($isGuardWithWarmup)
                                    <option value="4">Warm UP</option>
                                @endif
                            </select>
                            <input type="checkbox" name="test_status_chk" value="test_status" class="check-to-update">
                        </div>

                        
                    </fieldset>
                </div>

                <div class="col-md-6">  
                    
                    <fieldset class="primary_settings mb-2" style="margin-top: 12px;">
                        <div class="form-group incoming_call_control_dd">
                            <label>Incoming Call Control</label>
                            <select name="incoming_call_control" class="incoming_call_control">
                                <option value="10" selected="">Loadshare</option>
                                <option value="9">Weighted</option>
                                <option value="4">Overflow</option>
                            </select>
                            <input type="checkbox" name="incoming_call_control_chk" value="incoming_call_control" class="check-to-update">
                        </div>
                        <div class="form-group" id="status">
                            <label>Shield Status</label>
                            <select name="status" class="status">
                                <option value="21">Assigned Routed</option>
                                <option value="22">Assigned Standard</option>
                                <option value="23">Reserved</option>
                                <option value="24">Pending</option>
                                <option value="25">Ready</option>
                                <option value="28">Released</option>
                            </select>
                            <input type="checkbox" name="status_chk" value="status" class="check-to-update">
                        </div>
                    </fieldset>

                    <fieldset class="primary_settings mb-2">
                        <legend>Primary Routing</legend>
                        <div class="form-group" id="primary_incomming_call_type">
                            <label>Primary Routing Type</label>
                            <select name="primary_incomming_call_type" class="primary_incomming_call_type">
                                <option value="number">Route Number</option>
                                <option value="IP">IP Address</option>
                            </select>
                            <input type="checkbox" name="primary_incomming_call_type_chk" value="primary_incomming_call_type" class="check-to-update">
                        </div>

                        <div class="form-group" id="primary_inc_call">
                            <label>Primary Number Routing</label>
                            <input type="text" name="primary_inc_call" class="primary_inc_call" placeholder="Primary Number Routing">
                            <input type="checkbox" name="primary_inc_call_chk" value="primary_inc_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="primary_ip_port" style="display: none;">
                            <label>IP Port</label>
                            <select name="primary_ip_port" class="primary_ip_port">
                                <option value="5060" selected>5060</option>
                                <option value="5061">5061</option>
                                <option value="5062">5062</option>
                            </select>
                            <input type="checkbox" name="primary_ip_port_chk" value="primary_ip_port" class="check-to-update">
                        </div>

                        <div class="form-group" id="primary_max_call">
                            <label>Primary Max Call Per Hour</label>
                            <input type="text" name="primary_max_call" class="primary_max_call" placeholder="Primary Max Call">
                            <input type="checkbox" name="primary_max_call_chk" value="primary_max_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="primary_caller_type">
                            <label>Primary Incoming Caller Number Type</label>
                            <select name="primary_caller_type" class="primary_caller_type">
                                <option value="A">ANIS</option>
                                <option value="D">DNIS</option>
                            </select>
                            <input type="checkbox" name="primary_caller_type_chk" value="primary_caller_type" class="check-to-update">
                        </div>
                    </fieldset>

                    <fieldset class="primary_settings mb-2">
                        <legend>Second Routing</legend>
                        <div class="form-group" id="second_incomming_call_type">
                            <label>Second Routing Type</label>
                            <select name="second_incomming_call_type" class="second_incomming_call_type">
                                <option value="number">Route Number</option>
                                <option value="IP">IP Address</option>
                            </select>
                            <input type="checkbox" name="second_incomming_call_type_chk" value="second_incomming_call_type" class="check-to-update">
                        </div>

                        <div class="form-group" id="second_inc_call">
                            <label>Second Number Routing</label>
                            <input type="text" name="second_inc_call" class="second_inc_call" placeholder="Second Number Routing">
                            <input type="checkbox" name="second_inc_call_chk" value="second_inc_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="second_ip_port" style="display: none;">
                            <label>IP Port</label>
                            <select name="second_ip_port" class="second_ip_port">
                                <option value="5060" selected>5060</option>
                                <option value="5061">5061</option>
                                <option value="5062">5062</option>
                            </select>
                            <input type="checkbox" name="second_ip_port_chk" value="second_ip_port" class="check-to-update">
                        </div>

                        <div class="form-group" id="second_max_call">
                            <label>Second Max Call Per Hour</label>
                            <input type="text" name="second_max_call" class="second_max_call" placeholder="Second Max Call">
                            <input type="checkbox" name="second_max_call_chk" value="second_max_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="second_caller_type">
                            <label>Second Incoming Caller Number Type</label>
                            <select name="second_caller_type" class="second_caller_type">
                                <option value="A">ANIS</option>
                                <option value="D">DNIS</option>
                            </select>
                            <input type="checkbox" name="second_caller_type_chk" value="second_caller_type" class="check-to-update">
                        </div>
                    </fieldset>


                    {{--  <fieldset class="primary_settings mb-2" style="display: none;">
                        <legend>Third Routing</legend>
                        <div class="form-group" id="third_incomming_call_type">
                            <label>Third Routing Type</label>
                            <select name="third_incomming_call_type" class="third_incomming_call_type">
                                <option value="number">Route Number</option>
                                <option value="IP">IP Address</option>
                            </select>
                            <input type="checkbox" name="third_incomming_call_type_chk" value="third_incomming_call_type" class="check-to-update">
                        </div>

                        <div class="form-group" id="third_inc_call">
                            <label>Third Number Routing</label>
                            <input type="text" name="third_inc_call" class="third_inc_call" placeholder="Third Number Routing">
                            <input type="checkbox" name="third_inc_call_chk" value="third_inc_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="third_ip_port" style="display: none;">
                            <label>IP Port</label>
                            <select name="third_ip_port" class="third_ip_port">
                                <option value="5060" selected>5060</option>
                                <option value="5061">5061</option>
                                <option value="5062">5062</option>
                            </select>
                            <input type="checkbox" name="third_ip_port_chk" value="third_ip_port" class="check-to-update">
                        </div>

                        <div class="form-group" id="third_max_call">
                            <label>Third Max Call Per Hour</label>
                            <input type="text" name="third_max_call" class="third_max_call" placeholder="Third Max Call">
                            <input type="checkbox" name="third_max_call_chk" value="third_max_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="third_caller_type">
                            <label>Third Incoming Caller Number Type</label>
                            <select name="third_caller_type" class="third_caller_type">
                                <option value="A">ANIS</option>
                                <option value="D">DNIS</option>
                            </select>
                            <input type="checkbox" name="third_caller_type_chk" value="third_caller_type" class="check-to-update">
                        </div>
                    </fieldset>


                    <fieldset class="primary_settings" style="display: none;">
                        <legend>Fourth Routing</legend>
                        <div class="form-group" id="fourth_incomming_call_type">
                            <label>Fourth Routing Type</label>
                            <select name="fourth_incomming_call_type" class="fourth_incomming_call_type">
                                <option value="number">Route Number</option>
                                <option value="IP">IP Address</option>
                            </select>
                            <input type="checkbox" name="fourth_incomming_call_type_chk" value="fourth_incomming_call_type" class="check-to-update">
                        </div>

                        <div class="form-group" id="fourth_inc_call">
                            <label>Fourth Number Routing</label>
                            <input type="text" name="fourth_inc_call" class="fourth_inc_call" placeholder="Fourth Number Routing">
                            <input type="checkbox" name="fourth_inc_call_chk" value="fourth_inc_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="fourth_ip_port" style="display: none;">
                            <label>IP Port</label>
                            <select name="fourth_ip_port" class="fourth_ip_port">
                                <option value="5060" selected>5060</option>
                                <option value="5061">5061</option>
                                <option value="5062">5062</option>
                            </select>
                            <input type="checkbox" name="fourth_ip_port_chk" value="fourth_ip_port" class="check-to-update">
                        </div>

                        <div class="form-group" id="fourth_max_call">
                            <label>Fourth Max Call Per Hour</label>
                            <input type="text" name="fourth_max_call" class="fourth_max_call" placeholder="Fourth Max Call">
                            <input type="checkbox" name="fourth_max_call_chk" value="fourth_max_call" class="check-to-update">
                        </div>

                        <div class="form-group" id="fourth_caller_type">
                            <label>Fourth Incoming Caller Number Type</label>
                            <select name="fourth_caller_type" class="fourth_caller_type">
                                <option value="A">ANIS</option>
                                <option value="D">DNIS</option>
                            </select>
                            <input type="checkbox" name="fourth_caller_type_chk" value="fourth_caller_type" class="check-to-update">
                        </div>

                    </fieldset>  --}}

                </div>
            </div>
            <button class="btn-update mt-3 mb-3">Update Changes</button>
        </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>Proceed with Changes?</h4>
        <p class="msg-text">Are you sure you want to continue? Changes will be applied to all selected<span id="count"></span> numbers. Please make sure the correct information and numbers are selected before proceeding.</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">
                Proceed
            </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>

<script>
    var baseURL = "{{ URL::to('/') }}" + "/";
    var user_id = {{ $user_id }};
    var settingData = {};
    const sipPattern = /^sip:[\w\d.]+$/i;
    const ipPattern = /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/;
    var planName = @json($user_plans);
    var npaNxxData = @json($npaNxxData);
    var highCostNpaNxx = @json($highCostNpaNxx);

    var carrierGroups = @json($carrier_groups);

    $(document).ready(function () {
        jQuery('#entity .entity').select2({
            placeholder: "Select Entity",
            allowClear: true,
            multiple: true,
        });
        jQuery('#entity .entity').val([]).trigger('change');

        $('#carrier_group').fSelect({
            placeholder: 'Select Carrier Group',
            numDisplayed: 1,
            overflowText: '{n} Carrier Group selected',
            noResultsText: 'No Group found',
            searchText: 'Search Carrier Group',
            showSearch: true
        });

        jQuery('.check-to-update').prop('checked', true);
        
        var bulkNumbers = JSON.parse(localStorage.getItem('bulk_numbers')) || [];

        $('.tag-box').html('');
        bulkNumbers.forEach(function(col, index) {
            var didNum = col.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
            $('.tag-box').append(`
                <span class="tag">
                        ${didNum}
                        <span class="remove" data-value="${col}">×</span>
                </span>
            `);
        });
        
        let selectedColumns = JSON.parse(localStorage.getItem('selected_columns')) || [];
        selectedColumns.forEach(function(col, index) {
            $('#' + col).addClass('active');
        });

        const routes = ['primary', 'second', 'third', 'fourth'];
        routes.forEach(route => {
            $('#' + route + '_max_call').hide();
        });

        $('#entity .entity').on('change', function () {
            var entities = $(this).val();
            var optionsHtml = '';
            $.each(entities, function(index, value) {
                console.log(carrierGroups[value]);
                if(typeof carrierGroups[value] !== 'undefined') {
                    optionsHtml += '<optgroup label="'+ carrierGroups[value][0]['Entity'] +'">';
                    $.each(carrierGroups[value], function(index, value) {
                        var grpId = value.group_id + '_' + value.entity_id;
                        optionsHtml += '<option value="' + grpId + '" ' + (value.group_name == 'Default Group' ? 'selected' : '') + '>' + value.group_name + '</option>';
                    });
                    optionsHtml += '</optgroup>';
                }
            });

            $('#carrier_group').html(optionsHtml);
            $('#carrier_group').fSelect('reload');
            
        });

        $('.btn-update').on('click', function () {
            let isValidData = validateFields();
            if(isValidData) {
                $('.confirm-modal').fadeIn(200);
            }  
        });
        
        $('#backBtn').on('click', function () {
            window.history.back();
        });

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

        // Confirm button
        $('.confirm').on('click', function () {
            $('.confirm-modal').fadeOut(200);

            // 👉 Call your bulk update logic here
            console.log('Updating records...');

            var needToUpdateColumns = $('input.check-to-update:checked')
                                        .map(function () {
                                            return $(this).val();
                                        })
                                        .get();

            // Get all input values
            $('.form-group input').each(function () {
                var name = $(this).attr('name');
                var value = $(this).val();
                if (name && needToUpdateColumns.includes(name)) {
                    
                    settingData[name] = value;
                }
            });

            // Get all select values
            $('.form-group select').each(function () {
                var name = $(this).attr('name');
                var value = $(this).val();
                if (name && needToUpdateColumns.includes(name)) {
                    settingData[name] = value;
                }
            });

            settingData['incoming_call_control'] = Number($('.incoming_call_control').val());

            

            jQuery('#loaderModal').show();
            jQuery.ajax({
                url: baseURL + 'didBulkUpdateSubmit',
                type: 'POST',
                data: {
                    user_id: user_id,
                    bulk_numbers: JSON.stringify(bulkNumbers),
                    setting_val: JSON.stringify(settingData)
                },
                success: function (response, textStatus, jQxhr) {
                    jQuery('#loaderModal').hide();
                    if (response.status_code == 200) {
                        localStorage.removeItem('bulk_numbers');
                        localStorage.removeItem('selected_columns');
                        localStorage.removeItem('incoming_call_control');
                        
                        jQuery('.simple-success-modal').show();
                        jQuery('.simple-success-modal .msg-text').html(response.message);
                        localStorage.setItem('bulk_update_resp_id', response.ID);
                        setTimeout(function () {
                            window.location.href = "/kJd5Olsp3dDPeuj5Uhe";
                        }, 5000);
                    } else {
                        showErrorModal(response.status_code == 401 ?
                        `${response.conflicting_routes} — These Incoming Call Routes are already present in another user's account. Please Connect with Care team?` :
                        'Something went wrong!');
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    jQuery('#loaderModal').show();
                    console.log('Response Text:', jqXhr.responseText);
                },
            });
        });

        $('.tag-box .remove').on('click', function () {
            if(bulkNumbers.length < 2) {
                alert('At least one number is required to update the details.');
                return;
            }
            let number = $(this).data('value');
            bulkNumbers = bulkNumbers.filter(num => num != number);
            localStorage.setItem('bulk_numbers', JSON.stringify(bulkNumbers));
            $(this).closest('.tag').remove();
        });

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

        jQuery(document).on('input', '.brand_name, .preferred_business_name', function () {
            // Get the current value of the input field
            let value = jQuery(this).val();

            // Check if the length exceeds 15 characters
            if (value.length > 15) {
                // Trim the value to 15 characters if it exceeds the limit
                jQuery(this).val(value.substring(0, 15));
            }
        });

        jQuery(document).on('keyup keypress', '.brand_name', function () {
            
            var brandNameValue = jQuery(this).val().trim();
            // Check if the 'branded' value is 1 or 0 to determine editability
            const isBranded = $('.branded').val() == 1;
            if (isBranded) {
                $('.preferred_business_name').val(brandNameValue);
            } else {
                $('.preferred_business_name').val(brandNameValue);
            }
        });

        jQuery(document).on('change', '.branded', function () {
            var valueInBrandLabel = jQuery(this).val();
            if (valueInBrandLabel == 0) {
                $('.brand_name').attr('readonly', true);
                $('.brand_name, .preferred_business_name').val('');
            } else {
                $('.brand_name').removeAttr('readonly');
            }
        });

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

        jQuery(document).on('keypress', '.primary_max_call, .second_max_call, .third_max_call, .fourth_max_call', function (e) {
            // Check if the current content already has 3 digits
            let currentValue = jQuery(this).text();
            if (currentValue.length >= 3 || !/^\d$/.test(e.key)) {
                e.preventDefault(); // Prevent further input if 3 digits are reached or a non-digit is typed
            }
        });

        jQuery(document).on('change', '.status', function () {
            
        });

        function showErrorModal(message) {
            jQuery('#loaderModal').hide();
            jQuery('.error-modal').show();
            jQuery('.error-modal .msg-text').html(message);
        }

        function validateFields() {
            let isValid = true;
            let isIncomingCallNull = false;
            let isGatewayIdMissing = false;
            let invalidCall = '';
            let isMaxCallHrMissing = false;
            let isOptionIcnCallRequired = false;
            let isBrandNameYesValid = true;
            let isBrandNameNoValid = true;
            let isValidWeight = true;
            let isHighCostNpaNXX = false;

            const callFields = [{
                    call: 'primary'
                },
                {
                    call: 'second'
                },
                {
                    call: 'third'
                },
                {
                    call: 'fourth'
                }
            ];

            let incoming_call_control = Number($('.incoming_call_control').val());

            /* let brandName = $('.brand_name').val();
            if ($('.branded').val() == 1) {
                if (!brandName || brandName.trim() === '') {
                    isBrandNameYesValid = false;
                }
            } else {
                if (brandName && brandName.trim() !== '') {
                    isBrandNameNoValid = false;
                }
            }

            if (!isBrandNameYesValid) {
                showErrorModal('Brand Name required when Branded is Yes.');
                isValid = false;
                return isValid;
            } */

            let entities = $('#entity .entity').val();

            if(entities.length == 0 && $('input[name="entity_chk"]').is(':checked')) {
                showErrorModal('Entity is required.');
                isValid = false;
                return isValid;
            }
            
            let primary_incomming_call_type = $('.primary_incomming_call_type').val();
            let primary_inc_call = $('.primary_inc_call').val();

            if(primary_inc_call == '' && $('input[name="primary_inc_call_chk"]').is(':checked')) {
                showErrorModal('Primary Number Routing is required.');
                isValid = false;
                return isValid;
            }

            let second_incomming_call_type = $('.second_incomming_call_type').val();
            let second_inc_call = $('.second_inc_call').val();
            

            if (incoming_call_control == 9) {
                if ($('.second_incomming_call_type').val() == 'number' && $('.second_inc_call').val() == '' && $('input[name="second_inc_call_chk"]').is(':checked')) {
                    showErrorModal('Second Number Routing is required.');
                    isValid = false;
                    return isValid;
                }

                const totalWeight = callFields.reduce((sum, field) => {
                    return sum + (parseFloat($('.' + field.call + '_max_call').val()) || 0);
                }, 0);
                if (totalWeight !== 100) {
                    showErrorModal('Total weight percentage must be 100% for weighted call control..');
                    isValid = false;
                    return isValid;
                };

                if ($('.third_incomming_call_type').val() == 'number' && $('.third_inc_call').val() && $('.third_max_call').val() == '') {
                    showErrorModal('Third Number Routing is required.');
                    isValid = false;
                    return isValid;
                }
            }

            if (incoming_call_control == 4) {
                if ($('.third_incomming_call_type').val() == 'number' && $('.third_inc_call').val() && $('.third_max_call').val() == '') {
                    showErrorModal('Third Max Call Per Hour is required.');
                    isValid = false;
                    return isValid;
                }

                if ($('.fourth_incomming_call_type').val() == 'number' && $('.fourth_inc_call').val() && $('.fourth_max_call').val() == '') {
                    showErrorModal('Fourth Max Call Per Hour is required.');
                    isValid = false;
                    return isValid;
                }
            }

            let third_incomming_call_type = $('.third_incomming_call_type').val();
            let third_inc_call = $('.third_inc_call').val();
            if ($('.third_incomming_call_type').val() == 'number' && $('.third_inc_call').val() == '') {
                // showErrorModal('Third Number Routing is required.');
                // isValid = false;
                // return isValid;
            }

            let fourth_incomming_call_type = $('.fourth_incomming_call_type').val();
            let fourth_inc_call = $('.fourth_inc_call').val();
            if ($('.fourth_incomming_call_type').val() == 'number' && $('.fourth_inc_call').val() == '') {
                // showErrorModal('Fourth Number Routing is required.');
                // isValid = false;
                // return isValid;
            }

            if ([4, 9].includes(incoming_call_control)) {
                const hasPrimary = !!primary_inc_call;
                const hasSecond = !!second_inc_call;

                if (hasPrimary && !hasSecond) {
                    showErrorModal('At least two incoming calls required for Overflow/Weighted algorithms.');
                    isValid = false;
                    return isValid;
                }
                
                isMaxCallHrMissing = callFields.some(field => {
                    if(field.call == 'primary' || field.call == 'second') {
                        const call = $('.' + field.call + '_inc_call').val();
                        const max = $('.' + field.call + '_max_call').val();
                        return call && (max === '' || max === null || max === undefined);
                    }
                });

                if(isMaxCallHrMissing) {
                    showErrorModal('Max Call Per Hour is required for all incoming calls.');
                    isValid = false;
                    return isValid;
                }
            }

            $('.error-message').remove();
            const didStatus = $('.status').val();
            isMaxCallHrMissing = callFields.some(field => {
                const callType = $('.' + field.call + '_incomming_call_type').val();
                const incCall = $('.' + field.call + '_inc_call').val();
                const element = $('.' + field.call + '_inc_call');

                if (callType === 'number' && incCall != '') {
                    var number = incCall.replace(/[\s\-()]/g, '');

                    if (!/^\d+$/.test(number)) {
                        element.after(
                            '<div class="error-message" style="color:red;">Invalid Number! Only digits are allowed.</div>'
                        );
                        showErrorModal('Invalid Number! Only digits are allowed.');
                        isValid = false;
                        return isValid;
                    }

                    if (number.length !== 10) {
                        element.after(
                            '<div class="error-message" style="color:red;">Invalid Number!</div>'
                        );
                        showErrorModal('Invalid Number!');
                        isValid = false;
                        return isValid;
                    }

                    const firstThreeDigits = incCall.substring(0, 3);
                    const firstSixDigits = incCall.substring(0, 6);
                    // Validate first 3 digits (NPA)
                    if ((npaNxxData['NPA_381'] && npaNxxData['NPA_381'].includes(firstThreeDigits)) || firstThreeDigits < 200) {
                        element.after(
                            '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
                        );
                        showErrorModal('NPA-NXX is invalid!');
                        isValid = false;
                        return isValid;
                    }
                    // Validate first 6 digits (NPA-NXX)
                    const npaNxxArray = npaNxxData['NPA_NXX_7885'];
                    let errorFound = false;

                    for (let i = 0; i < npaNxxArray.length; i++) {
                        const storedValue = npaNxxArray[i].replace(/-/g, ''); // Remove any dashes
                        if (firstSixDigits === storedValue) {
                            element.after(
                                '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
                            );
                            showErrorModal('NPA-NXX is invalid!');
                            let errorFound = true;
                            isValid = false;
                            return isValid;
                        }
                    }

                    // If no error found in NPA-NXX, check for High Cost NPA-NXX
                    if (!errorFound) {
                        if (highCostNpaNxx && highCostNpaNxx.includes(firstSixDigits)) {
                            element.after(
                                '<div class="error-message" style="color:blue;">High Cost NPA-NXX!</div>'
                            );
                        }
                    }
                    
                }

                if (callType == 'IP') {
                    if (!incCall.match(ipPattern)) {
                        element.after(
                            '<div class="error-message" style="color:red;">Invalid IP Address!</div>'
                        );
                        showErrorModal('Invalid IP Address!');
                        isValid = false;
                        return isValid;
                    }
                }

            });

            return isValid;
        }

        function validateIncCallField(element, value) {
            const didStatus = $('.status').val();

            const firstThreeDigits = value.substring(0, 3);
            const firstSixDigits = value.substring(0, 6);
            jQuery('.error-message').remove();

            if (didStatus === '21') {
                // Validate first 3 digits (NPA)
                if ((npaNxxData['NPA_381'] && npaNxxData['NPA_381'].includes(firstThreeDigits)) || firstThreeDigits < 200) {
                    element.after(
                        '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
                    );
                } else {
                    
                }

                // Validate first 6 digits (NPA-NXX)
                const npaNxxArray = npaNxxData['NPA_NXX_7885'];
                let errorFound = false;

                for (let i = 0; i < npaNxxArray.length; i++) {
                    const storedValue = npaNxxArray[i].replace(/-/g, ''); // Remove any dashes
                    if (firstSixDigits === storedValue) {
                        element.after(
                            '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
                        );
                        errorFound = true;
                        break;
                    }
                }

                // If no error found in NPA-NXX, check for High Cost NPA-NXX
                if (!errorFound) {
                    if (highCostNpaNxx && highCostNpaNxx.includes(firstSixDigits)) {
                        element.after(
                            '<div class="error-message" style="color:blue;">High Cost NPA-NXX!</div>'
                        );
                    } else {
                        console.log('Number passed high cost check too');
                    }
                }
            } else {
                // Remove any existing error message
                jQuery('.error-message').remove();
            }
        }

        jQuery(document).on('change', '.primary_incomming_call_type, .second_incomming_call_type, .third_incomming_call_type, .fourth_incomming_call_type', function () {
            var selectedValue = jQuery(this).val();
            var elementName = jQuery(this).attr('name');
            // Placeholder handling for all dropdowns
            if (selectedValue === 'IP') {
                if (elementName === 'primary_incomming_call_type') {
                    $('#primary_ip_port').show();
                    $('.primary_inc_call').attr('placeholder', '192.168.1.1');
                } else if (elementName === 'second_incomming_call_type') {
                    $('#second_ip_port').show();
                    $('.second_inc_call').attr('placeholder', '192.168.1.1');
                } else if (elementName === 'third_incomming_call_type') {
                    $('#third_ip_port').show();
                    $('.third_inc_call').attr('placeholder', '192.168.1.1');
                } else if (elementName === 'fourth_incomming_call_type') {
                    $('#fourth_ip_port').show();
                    $('.fourth_inc_call').attr('placeholder', '192.168.1.1');
                }
            } else {
                if (elementName === 'primary_incomming_call_type') {
                    $('#primary_ip_port').hide();
                    $('.primary_inc_call').attr('placeholder', 'Primary Number Routing');
                } else if (elementName === 'second_incomming_call_type') {
                    $('#second_ip_port').hide();
                    $('.second_inc_call').attr('placeholder', 'Second Number Routing');
                } else if (elementName === 'third_incomming_call_type') {
                    $('#third_ip_port').hide();
                    $('.third_inc_call').attr('placeholder', 'Third Number Routing');
                } else if (elementName === 'fourth_incomming_call_type') {
                    $('#fourth_ip_port').hide();
                    $('.fourth_inc_call').attr('placeholder', 'Fourth Number Routing');
                }
            }
        });
        
        jQuery(document).on('change', '.incoming_call_control', function () {
            var selectedOption = jQuery(this).val();
            const routes = ['primary', 'second', 'third', 'fourth'];
            settingData['incoming_call_control'] = selectedOption;
            if (selectedOption == 10) {
                routes.forEach(route => {
                    $('#' + route + '_max_call').hide();
                });
            } else {
                // Show all
                routes.forEach(route => {
                    $('#' + route + '_max_call').show();
                });

                // Set label text based on option
                let labelText = '';

                if (selectedOption == 9) {
                    labelText = '% of Calls';
                } else if (selectedOption == 4) {
                    labelText = 'Max Call Per Hour';
                }

                routes.forEach(route => {
                    let label = route.charAt(0).toUpperCase() + route.slice(1);
                    $('#' + route + '_max_call label').text(label + ' ' + labelText);
                    $('.' + route + '_max_call').attr('placeholder', label + ' ' + labelText);
                });
            }
        });

        jQuery(document).on('keyup keypress input', '.primary_inc_call, .second_inc_call, .third_inc_call, .fourth_inc_call', function () {
            $('.error-message').remove();
            var $this = jQuery(this);
            var value = $this.val().trim();
            var elementName = jQuery(this).attr('name');
            const didStatus = $('.status').val();
            var callType;

            if (elementName === 'primary_inc_call') {
                callType = $('.primary_incomming_call_type').val();
            } else if (elementName === 'second_inc_call') {
                callType = $('.second_incomming_call_type').val();
            } else if (elementName === 'third_inc_call') {
                callType = $('.third_incomming_call_type').val();
            } else if (elementName === 'fourth_inc_call') {
                callType = $('.fourth_incomming_call_type').val();
            }

            if (callType === 'number' && value != '') {
                var number = value.replace(/[\s\-()]/g, '');

                if (!/^\d+$/.test(number)) {
                    $('.error-message').remove();
                    $this.after(
                        '<div class="error-message" style="color:red;">Invalid Number! Only digits are allowed.</div>'
                    );
                }

                if (number.length !== 10) {
                    $('.error-message').remove();
                    $this.after(
                        '<div class="error-message" style="color:red;">Invalid Number!</div>'
                    );
                }

                const firstThreeDigits = value.substring(0, 3);
                const firstSixDigits = value.substring(0, 6);
                // Validate first 3 digits (NPA)
                if ((npaNxxData['NPA_381'] && npaNxxData['NPA_381'].includes(firstThreeDigits)) || firstThreeDigits < 200) {
                    $('.error-message').remove();
                    $this.after(
                        '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
                    );
                }
                // Validate first 6 digits (NPA-NXX)
                const npaNxxArray = npaNxxData['NPA_NXX_7885'];
                let errorFound = false;

                for (let i = 0; i < npaNxxArray.length; i++) {
                    const storedValue = npaNxxArray[i].replace(/-/g, ''); // Remove any dashes
                    if (firstSixDigits === storedValue) {
                        $('.error-message').remove();
                        $this.after(
                            '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
                        );
                    }
                }

                // If no error found in NPA-NXX, check for High Cost NPA-NXX
                if (!errorFound) {
                    if (highCostNpaNxx && highCostNpaNxx.includes(firstSixDigits)) {
                        $this.after(
                            '<div class="error-message" style="color:blue;">High Cost NPA-NXX!</div>'
                        );
                    }
                }
            }

            if (callType == 'IP') {
                if (!value.match(ipPattern)) {
                    $this.after(
                        '<div class="error-message" style="color:red;">Invalid IP Address!</div>'
                    );
                }
            }

        });
        
        jQuery(document).on('change', '.is_guarded', function () {
            var is_guarded = parseInt($(this).val());
            let selectedPlanId = null;
            if(is_guarded) {
                Object.keys(planName).forEach(function (planId) {
                    if (planName[planId].toLowerCase() === 'numbershield') {
                        selectedPlanId = planId;
                    }
                });
            } else {
                Object.keys(planName).forEach(function (planId) {
                    if (planName[planId].toLowerCase() != 'numbershield') {
                        selectedPlanId = planId;
                    }
                });
            }
            $('.select_plan_name').val(selectedPlanId);
        });

        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
                ) {
                    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');
                        var userId = $('#userSelect').val();
                        if (userId) {
                            currentUserId = userId;
                            var ProvisioningTableObj = jQuery('#numberProvisioningTable').DataTable();
                            ProvisioningTableObj.ajax.reload(); // false to prevent resetting paging
                        } else {
                            alert('Please select a user.');
                        }
                    });
                    jQuery('.icon_close.simple-success-modal-close').css(
                    'display',
                    'block'
                    );
                } else if (response.cname_response_code == 207) {
                    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) {
                    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) {
                    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