<div class="modal fade" id="myModal_open" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="box">
                <div class="box-header with-border">
                    <h4><i class="icon-Chat"><span class="path1"></span><span class="path2"></span></i> SMS <button style="padding: 5px 11px 5px 11px;" type="button" class="btn btn-danger float-end" data-bs-dismiss="modal">X</button></h4>
                </div>

                <div class=" sms_popup_send" style="padding: 5px 5px 5px 20px;" role="alert"></div>

                <div class="row" id="sms_box_1">
                    <form class="form">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="form-label">Lead Contact No.</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="ti-user"></i></span>
                                    <input id="send_phone" type="text" class="form-control" name="send_phone" id="send_phone" readonly="true" value=""placeholder="Enter sender conatct number">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Agent Contact No.</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="ti-email"></i></span>
                                    <Select id="agent_phone" class="form-select" name="agent_phone">
                                        <option value="">--SELECT NUMBER--</option>
                                    </Select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Template</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="ti-lock"></i></span>
                                    <Select id="sms_template_list" class="form-select"
                                                            name="sms_template_list">
                                                            <option value="">--SELECT SMS TEMPLATE--</option>
                                                        </Select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Message</label>
                                <div class="input-group mb-3">
                                    <textarea name="preview_sms_id" maxlength="190" id="preview_sms_id" style="width:540px;height: 94px;"></textarea>
                                </div>
                            </div>
                            <div class="count_sms_len" style=""><i id="count_word_pop">192</i>Characters left </div>

                            <div class="form-group">
                            <img id="previewImage1" src="#" alt="File Preview" style="display:none; max-width: 80%; max-height: 100px;">  
                            <embed id="previewPDF1" src="#" type="application/pdf" style="display:none; max-width: 70%; max-height: 100px;">                           
                              </div>
                <div class="form-group">
                                <label class="form-label">File</label>
                                <div class="input-group mb-3">
                                <input type="file" class="form-control" name="sms_file" id="sms_file1" accept="image/*,application/pdf">
                            </div>  
                        </div>
                        </div>
                    </form>
                </div>

                <div class="row" id="sms_box_2" style="display:none">
                    <div class="err_sms" style="margin: 60px;font-size: 16px;">You don't have any DID associated with your extension.</div>
                </div>

                <div class="box-footer text-end">
                    <button id="singlebutton" type="button" class="btn btn-primary">
                        <i class="ti-save-alt"></i> Send SMS
                    </button>

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



<div class="modal fade" id="myModal_open_call" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="box">
                <div class="box-header with-border" style="padding: 15px 5px 8px 24px;">
                    <h4><i class="icon-Phone"><span class="path1"></span><span class="path2"></span></i> Call Transfer <button style="padding: 5px 10px 5px 10px;float: right;margin: 0px 15px 5px 5px;" type="button" class="btn btn-danger float-end" data-bs-dismiss="modal">X</button></h4>
                </div>

                <div class=" call_transfer_message" role="alert"></div>

                <div class="row" id="warm_call_show">
                    <form class="form">
                        <div class="box-body">
                            <div class="col-md-12">
                                <div class="row">
                            <div class="col-md-6">

                            <p style="margin-bottom:0.5rem">
                                <input type="radio" class="with-gap-transfer call_transfer" id="disposition-radio-1-call-transfer" name="call_transfer" value="extension">
                                <label for="disposition-radio-1-call-transfer" class="disposition-label">Extension</label>

                             
                            </p>



                          <!--   <p style="margin-bottom:0.5rem">
                                <input type="radio" class="with-gap-transfer call_transfer" id="disposition-radio-2-call-transfer" name="call_transfer" value="ring_group">
                                <label for="disposition-radio-2-call-transfer" class="disposition-label">Ring Group</label>
                            </p> -->

                            <p style="margin-bottom:0.5rem">
                                <input type="radio" class="with-gap-transfer call_transfer" id="disposition-radio-3-call-transfer" name="call_transfer" value="did">
                                <label for="disposition-radio-3-call-transfer" class="disposition-label">Mobile Number</label>
                            </p>
                        </div>

                            <div class="col-md-6">
                            <p id="select_extension_box" style="margin-bottom:0.5rem;display:none;">

   <select class="form-select" id="alt_extension_call_transfer">
    <option value="">Select Extension</option>
    @if(!empty($extension_list))
                                    @foreach($extension_list as $extension)
                                                 <option value="{{$extension->alt_extension}}">   {{$extension->first_name}} {{$extension->last_name}} - {{$extension->extension}} </option>
                                            @endforeach
                                            @endif
                                </select>
                            </p>
                            <p id="select_ring_group_box" style="margin-bottom:0.5rem;display:none;">



                                <select class="form-select" id="ring_group_call_transfer">
    <option value="">Select Ring Group</option>
    @if(!empty($ring_group_list))


                                    @foreach($ring_group_list as $ring)
                                    <option value="{{$ring->id}}">   {{$ring->description}} - {{$ring->title}} </option>
                                        
                                    @endforeach
                                    @endif
                                </select>
                            </p>

                             <p id="select_mobile_number_box" style="margin-bottom:0.5rem;display:none;">



                               <input type="text" id="did_call_transfer" class="form-control" />
                            </p>
                           
                            </div>
                            </div>
                            </div>


                        </div>
                    </form>

              
                <div class="box-footer text-end">
                    <button id="warm_transfer_call" type="button" class="btn btn-sm btn-primary">
                        <i class="ti-save-alt"></i> Transfer Call
                    </button>

                     <button id="connecting_transfer_call" style="display: none;"  type="button" class="btn btn-sm btn-danger">
                        <i class="ti-save-alt"></i> Conference With Customer
                    </button>

                      <button id="leave_conference" type="button" style="display: none;"  class="btn btn-sm btn-danger">
                        <i class="ti-save-alt"></i> Leave Conference
                    </button>

                   <!--  <button id="direct_transfer_call" type="button" class="btn btn-sm btn-danger">
                        <i class="ti-save-alt"></i> Direct Transfer
                    </button> -->

                </div>  

                </div>


                
            </div>
        </div>
    </div>
</div>
<script src="{{asset('assets/vendor_plugins/input-mask/jquery.inputmask.js')}}"></script>
<script>
 
    $('#send_phone').inputmask("(999) 999-9999");
    
    </script>
<script>
    
    $("#disposition-radio-1-call-transfer").click(function(){
        $("#select_extension_box").show();
        $("#select_ring_group_box").hide();
        $("#select_mobile_number_box").hide();

    });

    $("#disposition-radio-2-call-transfer").click(function(){
        $("#select_extension_box").hide();
        $("#select_ring_group_box").show();
        $("#select_mobile_number_box").hide();

    });

     $("#disposition-radio-3-call-transfer").click(function(){
         $("#select_extension_box").hide();
        $("#select_ring_group_box").hide();
        $("#select_mobile_number_box").show();
        
    });
</script>
    <script>
    $(document).ready(function () {
        // Preview image or PDF when a file is selected
        $('#sms_file1').change(function () {
            readURL(this);
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    if (input.files[0].type.startsWith('image')) {
                        // Display image preview
                        $('#previewImage1').attr('src', e.target.result).show();
                        $('#previewPDF1').hide();
                    } else if (input.files[0].type === 'application/pdf') {
                        // Display PDF preview
                        $('#previewPDF1').attr('src', e.target.result).show();
                        $('#previewImage1').hide();
                    } else {
                        // Handle other file types here
                        console.log('Unsupported file type');
                    }
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    });
</script>



