<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>
               <input  type="hidden" id="lead_id_crm" type="text" class="form-control" name="lead_id_crm"  readonly="true" value=""placeholder="">
                <div class="row" id="sms_box_1">
                    <form class="form"enctype="multipart/form-data">
                        <div class="box-body">
                              <div class="form-group">
                                <label class="form-label">Country Code</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="ti-email"></i></span>
                                    <Select id="country_code" class="form-select" name="country_code">
                                            @foreach($countries as $c)
                            <option value="{{ $c['code'] }}">
                                {{ $c['flag'] }} +{{ $c['code'] }} ({{ $c['name'] }})
                            </option>
                        @endforeach                                    </Select>
                                </div>
                            </div>
                            <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_crm" type="text" class="form-control" name="send_phone_crm"   value=""placeholder="Enter sender contact 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">192</i> Characters left </div>
                             <!-- <div class="form-group">
                                <label class="form-label">MMS Url</label>
                                <div class="input-group mb-3">
                                    <textarea name="mms_url"  id="mms_url" style="width:540px;height: 50px;"></textarea>
                                </div>
                            </div>  -->
                               <div class="form-group">
                            <img id="previewImage" src="#" alt="File Preview" style="display:none; max-width: 100%; max-height: 100px;">  
                            <embed id="previewPDF" src="#" type="application/pdf" style="display:none; max-width: 100%; max-height: 100px;"> 
                            <!-- Video Preview -->
                                <video id="previewVideo" controls style="display:none;max-width: 100%; max-height: 200px;"></video>  
                                                        
                                                            </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_file" accept="image/*,application/pdf,video/*">
                            </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 Phone Number associated with your Credential.</div>
                </div>

                <div class="box-footer text-end">
                    <button id="singlebuttonCrm" 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=" sms_popup_send" role="alert"></div>

                <div class="row" id="sms_box_1">
                    <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" id="disposition-radio-1-call-transfer" name="call_transfer" value="1">
                                <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" id="disposition-radio-2-call-transfer" name="call_transfer" value="2">
                                <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" id="disposition-radio-3-call-transfer" name="call_transfer" value="2">
                                <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">
    <option value="">Select Extension</option>
    @if(!empty($extension_list))
                                    @foreach($extension_list as $extension)
                                                 <option value="{{$extension->id}}">   {{$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">
    <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" class="form-control" />
                            </p>
                           
                            </div>
                            </div>
                            </div>


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

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

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

                </div>  

                
            </div>
        </div>
    </div>
</div> -->	<script src="{{asset('assets/vendor_plugins/input-mask/jquery.inputmask.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
 
    $('#send_phone_crm').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_file').change(function () {
            readURL(this);
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                const file = input.files[0]; 
                reader.onload = function (e) {
                    if (input.files[0].type.startsWith('image')) {
                        // Display image preview
                        $('#previewImage').attr('src', e.target.result).show();
                        $('#previewPDF').hide();
                        $('#previewVideo').hide();

                    } else if (input.files[0].type === 'application/pdf') {
                        // Display PDF preview
                        $('#previewPDF').attr('src', e.target.result).show();
                        $('#previewImage').hide();
                        $('#previewVideo').hide();

                    } 
                    else if (file.type.startsWith('video')) {
                    // Display video preview
                    displayVideoPreview(file);
                } else {
                        // Handle other file types here
                        console.log('Unsupported file type');
                    }
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        function displayVideoPreview(file) {
        const url = URL.createObjectURL(file); // Create an object URL for the video
        console.log('Generated video URL:', url);
        $('#previewVideo').attr('src', url).show(); // Set the source of the video preview
        $('#previewVideo')[0].load(); // Reload the video element
        $('#previewImage, #previewPDF').hide();
    }
    });
</script>


