@extends('layouts.app')
@section('title', 'Add  CRM Sms Template')
@section('content')


<section class="content">
			<div class="row">			  
				<div class="col-lg-12 col-12">
					  <div class="box">
						
						<!-- /.box-header -->
                        <form method="post" name="userform" id="userform" action="">
                            @csrf

							<div class="box-body">
                                <h4 class="box-title text-info mb-0"><i class="fa fa-plus me-15"></i> Add SMS Template</h4>
                                <a href="{{url('/crm-sms-templates')}}" type="button" style="float:right" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-eye fa-sx"></i> Sms Templates</a>
								<hr class="my-15">
								<div class="row">
								  <div class="col-md-3">
                                  <div class="form-group">
									<label class="form-label">Template Name </label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <input type="text" class="form-control" name="template_name" id="template_name">

                                    </div>
								 </div>
								  </div>
                                  <div class="col-md-3">
                                  <div class="form-group">
                                  <label class="form-label"> Lead Placeholders </label>
                                  <div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <span id="setBoxValue" style="display:none;"></span>
                                            <select id="multiple_labels" class="form-select" autocomplete="off">
                                                <option value="">Select to Insert</option>
                                                @foreach($label_list as $list)
                                                <option value="[[{{ $list->label_title_url }}]]">{{ $list->label_title_url }}</option>
                                                @endforeach;
                                                <option value="[[signature_image]]">signature_image</option>

                                            </select>
                                </div>
                                </div>
                                </div>
                                <div class="col-md-3 form-group">
                                        <label for="" class="form-label">Sender Placeholders</label>
                                        <div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select id="multiple_names" class="form-select" autocomplete="off" >
                                                <option value="">Select to Insert</option>
                                                @foreach($user_column as $user_list)
                                                <option value="[{{ $user_list }}]">{{$user_list}}</option>
                                                @endforeach;
                                            </select>                                  
                                         </div>
                                    </div>
                                    <div class="col-md-3 form-group">
                                        <label for="" class="form-label">Lead Status </label>
                                        <div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select id="lead_status" class="form-select" autocomplete="off" name="lead_status" >
                                                <option value="">Select</option>
                                                @foreach($lead_status as $list)
                                                <option value="{{ $list->lead_title_url }}">{{$list->title}}</option>
                                                @endforeach;
                                            </select>                                
                                         </div>
                                         </div>
                                       
                                </div>
                         
                            
           

<div class="row">
                           
                           <div class="col-sm-12" style="padding-top: 10px;">
                               <label for="" class="form-label">Template Preview  </label>
                               <textarea type="text" class="form-control" name="template_html" value="" id="message" ></textarea>

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

                          
                      
                          
                           
							<!-- /.box-body -->
							<div class="box-footer text-end">
								<a href="/crm-sms-templete"><button type="button" class="btn btn-warning me-1">
								  <i class="ti-trash"></i></a> Cancel
								</button>
								<button type="submit" name="submit" value="add" class="btn btn-primary">
								  <i class="ti-save-alt"></i> Save
								</button>
							</div>  
						</form>
					  </div>
					  <!-- /.box -->			

                    </div>  

		
		  </div>
		  <!-- /.row -->

		</section>

        <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>


        

<script language="javascript">

 

$(document).ready(function() {
    $("#multiple_labels").on('change', function() {
        displayVals();
    });
});

function displayVals() {
    var singleValues = $("#message").val();
    var multipleValues = $("#multiple_labels").val() || [];
    
    // Join multipleValues only if it's an array
    var joinedValues = Array.isArray(multipleValues) ? multipleValues.join(" ") : multipleValues;

    $("#message").val(singleValues + ' ' + joinedValues);

    $("#multiple_labels").val('');
}

$("#multiple_labels").on('change', function() {
    displayVals();
});



   

$(document).ready(function() {
    $("#multiple_names").on('change', function() {
        displayValsName();
    });
});

function displayValsName() {
    var singleValues = $("#message").val();
    var multipleValues = $("#multiple_names").val() || [];
    
    // Join multipleValues only if it's an array
    var joinedValues = Array.isArray(multipleValues) ? multipleValues.join(" ") : multipleValues;

    $("#message").val(singleValues + ' ' + joinedValues);

    $("#multiple_names").val('');
}

$("#multiple_names").on('change', function() {
    displayValsName();
});






</script>


@endsection