@extends('layouts.app')
@section('title', 'Add DID')
@section('content')
<style>
    .header-wrapper {
    display: flex;
    flex-direction: column; /* मोबाइल पर ऊपर-नीचे */
    align-items: flex-start;
    gap: 10px; /* heading और button में space */
    margin-bottom: 15px;
}

.header-wrapper .show-btn {
    align-self: flex-start; /* default left */
}

/* Medium और उससे बड़े स्क्रीन पर row layout */
@media (min-width: 768px) {
    .header-wrapper {
        flex-direction: row; /* heading left, button right */
        justify-content: space-between;
        align-items: center;
    }

    .header-wrapper .show-btn {
        align-self: center;
    }
}

    </style>
<section class="content">
			<div class="row">
				<div class="col-lg-12 col-12">
					  <div class="box">

						<!-- /.box-header -->
                        <form enctype="multipart/form-data" class="form-horizontal" method="post" action="{{url('did/saveDid')}}">
                        @csrf
                                <input type="hidden" name="operator_check" value="0" />
                                <input type="hidden" name="operator" value="0" />
							 <div class="box-body">
					<div class="header-wrapper">
    <h4 class="box-title text-info mb-0">
        <i class="fa fa-edit me-2"></i> Add Phone Number
    </h4>
    <a href="{{ url('/did') }}"
       class="btn btn-primary btn-rounded btn-sm show-btn">
        <i class="fa fa-eye fa-sx"></i> Show Phone Number
    </a>
</div>


								<hr class="my-15">
							    <div class="row">
                                <div class="col-md-3">
                                    <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-user"></i></span>
                                                <select class="form-select"  name="country_code_cli" id="country_code_cli">
                                                    @if (is_array($phone_country) && !empty($phone_country))
                                                    @foreach($phone_country as $code)
                                                    <option  value={{$code->phone_code}} {{ $code->phone_code == '1' ? 'selected' : '' }}>{{$code->country_name}} (+{{$code->phone_code}})
                                                    </option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                        </div>
                                    </div>
                                </div>
								  <div class="col-md-3">
                                    <div class="form-group">
									    <label class="form-label">Phone Number</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="cli" value=""
                                            id="cli" required="" placeholder="Enter Phone Number">
                                        </div>
                                        </div>
								    </div>
								    <div class="col-md-6">
                                        <div class="form-group">
                                        <label class="form-label">Caller Name </label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text @error('caller_id') text-danger border-danger @enderror"><i class="ti-user"></i></span>

                                                <input type="text" class="form-control" name="cnam" value="" id="cnam" required=""
                                            placeholder="Enter Caller Name">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group @error('description') has-error @enderror">
                                        <label class="form-label">Set this number as your mainline ?</label>
                                            <div class="input-group mb-3">
                                                    <span class="input-group-text @error('caller_id') text-danger border-danger @enderror"><i class="ti-user"></i></span>
                                                    <select class="form-select"  id="default_did" name="default_did" >
                                                        <option value="1">Yes</option>
                                                        <option  value="0">No</option>
                                                    </select>
                                                </div>
                                            </div>
                                    </div>
								  <div class="col-md-6">
									<div class="form-group">
									  <label class="form-label">Redirect to Last Spoke Agent</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text @error('caller_id') text-danger border-danger @enderror"><i class="ti-user"></i></span>

                                            <select class="form-select"  id="redirect_last_agent" name="redirect_last_agent" >
                                            <option  value="1">Yes</option>
                                            <option  value="0">No</option>
                                        </select>
                                        </div>
								  </div>
								  </div>

                                  </div>

                            <div class="row"id="showRow">
								<div class="col-md-6">
                                    <div class="form-group">
                                        <label id="label_id"class="form-label">Destination Type</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  name="dest_type" id="dest_type" onchange="return showData(this.value)">
                                            <option value="">Select</option>
                                                @if (!empty($dest_type))
                                                @foreach($dest_type as $item)
                                                    <option value={{$item->dest_id}}
                                                        > {{$item->dest_type}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                 <div class="col-md-6 hideMe inner_div" id="12_div">
                                        <div class="form-group">
                                            <label class="form-label">Voice Ai</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text"><i class="ti-user"></i></span>
                                                <select class="form-select" name="voice_ai" id="voice_ai">
                                                    <option>Select Prompt</option>
                                                    @if (isset($prompts) && is_array($prompts) && !empty($prompts))
                                                        @foreach($prompts as $prompt)
                                                            <option value={{$prompt->id}}>{{$prompt->title}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                             </div>
                                <div class="col-md-6 hideMe inner_div" id="0_div">
                                    <div class="form-group">
                                        <label id="label_id_duration" class="form-label">Destination </label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="ti-user"></i></span>
                                                <select class="form-select"  name="ivr_id" id="ivr_id">
                                                @if (isset($ivr_list) && is_array($ivr_list) && !empty($ivr_list))
                                                    @foreach($ivr_list as $ivr_lst)
                                                    <option  value={{$ivr_lst->id}}>{{$ivr_lst->ivr_desc}} - {{$ivr_lst->ivr_id}}
                                                    </option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 hideMe inner_div"id="1_div" >
                                        <div class="form-group">
                                            <label class="form-label">Destination</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text"><i class="ti-user"></i></span>
                                                    <select class="form-select"  name="extension" id="extension">
                                                        @if (is_array($extension_list)  && !empty($extension_list))
                                                        @foreach($extension_list as $ext_lst)
                                                        <option  value={{$ext_lst->id}}>{{$ext_lst->first_name}} {{$ext_lst->last_name}} - {{$ext_lst->extension}}
                                                        </option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                        </div>
                                </div>
                                <div id="2_div" class="col-md-6 hideMe inner_div"  >
                                    <div class="form-group">
                                        <label class="form-label">Destination </label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  name="voicemail_id" id="voicemail_id">
                                                    @if (is_array($extension_list) && !empty($extension_list) )
                                                    @foreach($extension_list as $ext_lst)
                                                    <option  value={{$ext_lst->id}}>{{$ext_lst->first_name}} {{$ext_lst->last_name}} - {{$ext_lst->extension}}
                                                    </option>
                                                    @endforeach
                                                    @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 hideMe inner_div 4_div" id="4_div" >
                                    <div class="form-group">
                                        <label class="form-label">Country Phone Code </label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="ti-user"></i></span>
                                                <select class="form-select"  name="country_code" id="country_code">
                                                    @if (is_array($phone_country) && !empty($phone_country))
                                                    @foreach($phone_country as $code)
                                                    <option  value={{$code->phone_code}} {{ $code->phone_code == '1' ? 'selected' : '' }}>{{$code->country_name}} (+{{$code->phone_code}})
                                                    </option>
                                                    @endforeach
                                                    @endif
                                                </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3 hideMe inner_div 4_div" id="4_div"f>
                                    <div class="form-group">
                                        <label class="form-label">Phone Number  </label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="ti-user"></i></span>
                                            <input type="text" class="form-control" value=""  name="forward_number" id="forward_number" placeholder="(999) 999-9999">

                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 hideMe inner_div" id="5_div">
                                    <div class="form-group">
                                        <label class="form-label">Destination </label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  name="conf_id" id="conf_id">
                                                    @if (is_array($conferencing) && !empty($conferencing))
                                                    @foreach($conferencing as $conf)
                                                    <option  value={{$conf->id}}>{{$conf->title}} - {{$conf->conference_id}}</option>
                                                    @endforeach
                                                    @endif
                                                </select>

                                        </div>
                                    </div>
                                </div>
                                <div id="8_div"class="col-md-6 hideMe inner_div">
                                  <div class="form-group">
									<label class="form-label">Destination</label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select class="form-select"  name="ingroup" id="ingroup">
                                                @if (isset($ring_group_list) && !empty($ring_group_list))
                                                @foreach($ring_group_list as $rgroup_lst)
                                                <option  value={{$rgroup_lst->id}}>{{$rgroup_lst->description}} - {{$rgroup_lst->title}}
                                                </option>
                                                @endforeach
                                                @endif
                                            </select>>
                                	</div>
								</div>
                            </div>

                                <div class="col-md-6 hideMe inner_div" id="6_div" >
                                        <div class="form-group">
                                            <label class="form-label">Destination </label>
                                            <div class="input-group mb-3">
                                                    <select class="form-select select2" multiple  name="fax_did[]" id="fax_did" style="width:100%">
                                                        @if (is_array($extension_list) && !empty($extension_list))
                                                        @foreach($extension_list as $ext_lst_1)
                                                        <option value={{$ext_lst_1->id}} >{{$ext_lst_1->first_name}} {{$ext_lst_1->last_name}} - {{$ext_lst_1->email}} - {{$ext_lst_1->extension}}
                                                        </option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                        </div>
                                </div>
                                </div>
                                <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                      <label class="form-label">Enable SMS</label>
                                        <div class="input-group mb-3">
                                          <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  id="chk_sms" name="chk_sms" >
                                                <option  value="">No</option>
                                                <option    value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                      <label class="form-label">Enable SMS AI</label>
                                        <div class="input-group mb-3">
                                          <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  id="sms_type" name="sms_type">
                                                <option  value="0">No</option>
                                                <option  value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 sms_grid">
                                    <div class="form-group">
                                      <label class="form-label">Assign To User  </label>
                                        <div class="input-group mb-3">
                                          <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  name="sms_email" id="sms_email">
                                                @if (is_array($extension_list) && !empty($extension_list))
                                                @foreach($extension_list as $ext_lst_1)
                                                <option  value={{$ext_lst_1->id}} >{{$ext_lst_1->first_name}} {{$ext_lst_1->last_name}} - {{$ext_lst_1->extension}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6" >
                                    <div class="form-group">
                                      <label class="form-label">Set Exclusive For User </label>
                                        <div class="input-group mb-3">
                                          <span class="input-group-text"><i class="ti-user"></i></span>
                                          <select class="form-select"  name="set_exclusive_for_user" id="set_exclusive_for_user">
                                                <option value="1" >Yes</option>
                                                <option value="0">No</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                              <div class="col-md-6" >
                                    <div class="form-group">
                                      <label class="form-label">Apply Call Times  </label>
                                        <div class="input-group mb-3">
                                          <span class="input-group-text"><i class="ti-user"></i></span>
                                            <select class="form-select"  name="call_time_department_id" id="call_time_department">
                                                    <option value="0" >No</option>
                                                    @if (isset($department_list->data) && !empty($department_list->data))
                                                        @foreach($department_list->data as $item)
                                                            <option value="{{$item->id}}"> {{$item->name}}</option>
                                                        @endforeach
                                                    @endif
                                            </select>
                                        </div>
                                    </div>
                              </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                      <label class="form-label">Apply Holiday Calendar  </label>
                                      <div class="input-group mb-3">
                                          <span class="input-group-text"><i class="ti-user"></i></span>
                                          <select class="form-select"  name="call_time_holiday" id="holiday">
                                                <option value="0">No</option>
                                                <option value="1" >Yes</option>
                                            </select>
                                      </div>
                                    </div>
                                </div>

                                    <div class="row"id="OutOfHours" style="">
                                        <div class="col-md-6" >
                                            <div class="form-group">
                                                <label class="form-label">Destination Type (Out Of Hours)</label>
                                                <div class="input-group mb-3">
                                                    <span class="input-group-text"><i class="ti-user"></i></span>
                                                    <select class="form-select"  name="dest_type_ooh" id="dest_type_ooh" onchange="return showDataOoh(this.value)">
                                                        <option value="">Select</option>
                                                        @if (!empty($dest_type))
                                                        @foreach($dest_type as $item)
                                                            <option value="{{$item->dest_id}}"  > {{$item->dest_type}}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 hideMe ooh_div" id="0_div_ooh">
                                            <div class="form-group">
                                                    <label class="form-label">Destination (Out Of Hours) </label>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                                            <select class="form-select"   name="ivr_id_ooh" id="ivr_id">
                                                            @if (isset($ivr_list) && is_array($ivr_list) && !empty($ivr_list))
                                                                @foreach($ivr_list as $ivr_lst)
                                                                <option value={{$ivr_lst->id}} >{{$ivr_lst->ivr_desc}} - {{$ivr_lst->ivr_id}}
                                                                </option>
                                                                @endforeach
                                                                @endif
                                                            </select>
                                                    </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 hideMe ooh_div" id="1_div_ooh">
                                            <div class="form-group">
                                                <label class="form-label">Destination (Out Of Hours)</label>
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                                        <select class="form-select"  name="extension_ooh" id="extension">
                                                            @if (is_array($extension_list) && !empty($extension_list))
                                                            @foreach($extension_list as $ext_lst)
                                                            <option   value={{$ext_lst->id}}>{{$ext_lst->first_name}} {{$ext_lst->last_name}} - {{$ext_lst->extension}}
                                                            </option>
                                                            @endforeach
                                                            @endif
                                                        </select>
                                                    </div>
                                            </div>
                                         </div>
                                <div class="col-md-6 hideMe ooh_div" id="2_div_ooh"  >
                                  <div class="form-group">
									<label class="form-label">Destination (Out Of Hours)</label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select class="form-select"  name="voicemail_id_ooh" id="voicemail_id">
                                                @if (is_array($extension_list) && !empty($extension_list))
                                                @foreach($extension_list as $ext_lst)
                                                <option value={{$ext_lst->id}}>{{$ext_lst->first_name}} {{$ext_lst->last_name}} - {{$ext_lst->extension}}
                                                </option>
                                                @endforeach
                                                @endif
                                            </select>
                                	</div>
								</div>
                              </div>

                              <div id="5_div_ooh" class="col-md-6 hideMe ooh_div" >
                                  <div class="form-group">
									<label class="form-label">Destination (Out Of Hours) </label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select class="form-select"  name="conf_id_ooh" id="conf_id">
                                                @if (is_array($conferencing) && !empty($conferencing))
                                                @foreach($conferencing as $conf)
                                                <option   value={{$conf->id}}>{{$conf->title}} - {{$conf->conference_id}}</option>
                                                @endforeach
                                                @endif
                                            </select>
                                	</div>
								</div>
                                </div>

                              <div class="col-md-3 hideMe inner_div ooh_div"id="4_div_ooh">
                                  <div class="form-group">
									<label class="form-label">Country Phone Code</label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select class="form-select"  name="country_code_ooh" id="country_code_ooh">
                                                @if (is_array($phone_country)  && !empty($phone_country))
                                                @foreach($phone_country as $code)
                                                <option value={{$code->phone_code}}{{ $code->phone_code == '1' ? 'selected' : '' }}>{{$code->country_name}} (+{{$code->phone_code}})
                                                </option>
                                                @endforeach
                                                @endif
                                            </select>
                                	</div>
								</div>
                                </div>

                                <div id="4_div_ooh"class="col-md-3 hideMe ooh_div 4_div_ooh"  >
                                  <div class="form-group">
									<label class="form-label">Phone Number  </label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <input type="text" class="form-control" value=""  name="forward_number_ooh" id="forward_number_ooh" placeholder="(999) 999-9999">

                                	</div>
								</div>
                              </div>
                              <div  id="8_div_ooh"class="col-md-6 hideMe ooh_div"  >
                                  <div class="form-group">
									<label class="form-label">Destination (Out Of Hours)</label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select class="form-control"  name="ingroup_ooh" id="ingroup">
                                                @if (isset($ring_group_list)  && !empty($ring_group_list))
                                                @foreach($ring_group_list as $rgroup_lst)
                                                <option  value={{$rgroup_lst->id}}>{{$rgroup_lst->description}} - {{$rgroup_lst->title}}
                                                </option>
                                                @endforeach
                                                @endif
                                            </select>
                                	</div>
								</div>
                                </div>

                                <div id="6_div_ooh"class="col-md-6 hideMe ooh_div"  >
                                  <div class="form-group">
									<label class="form-label">Destination (Out Of Hours)  </label>
									<div class="input-group mb-3">
                                        <select class="form-select select2" multiple  name="fax_did_ooh[]" id="fax_did_ooh" style="width:100%">
                                                @if (is_array($extension_list) && !empty($extension_list))
                                                @foreach($extension_list as $ext_lst_1)
                                                <option  value={{$ext_lst_1->id}} >{{$ext_lst_1->first_name}} {{$ext_lst_1->last_name}} - {{$ext_lst_1->email}} - {{$ext_lst_1->extension}}
                                                </option>
                                                @endforeach
                                                @endif
                                            </select>
                                	</div>
								</div>
                              </div>
                                  <div class="col-md-6 hideMe ooh_div" id="12_div_ooh">
                                        <div class="form-group">
                                            <label class="form-label">Voice Ai</label>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text"><i class="ti-user"></i></span>
                                                    <select class="form-select"  name="voice_ai_ooh" id="voice_ai_ooh">
                                                        <option>Select Prompt</option>
                                                        @if (isset($prompts) && is_array($prompts) && !empty($prompts))
                                                            @foreach($prompts as $prompt)
                                                                <option value={{$prompt->id}}>{{$prompt->title}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                        </div>
                                    </div>
                              <input type="hidden" class="form-control" name="old_ann_id" value="" id="ann_id">

                                    </div>





                                <div id="9_div_ooh"class="col-md-6 hideMe ooh_div">
                                  <div class="form-group">
									<label class="form-label">Destination (Out Of Hours) </label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select class="form-select"  name="queue_id_ooh"></select>

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



                            <div class="col-md-6">
                                    <div class="form-group">
                                    <label class="form-label">Call Screening Audio</label>
                                    <div class="input-group mb-3">
                                        <select class="form-select" name="call_screening_status" id="call_screening_status">
                                            <option value="0">No</option>
                                            <option  value="1">Yes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                <div class="form-group @error('group_id') has-error @enderror">
                  <label class="form-label">Voip Providers</label>
                  <div class="input-group mb-3">
                  <span class="input-group-text @error('caller_id') text-danger border-danger @enderror"><i class="ti-world"></i></span>
                    <select class="form-select" name="voip_provider" autocomplete="off" data-placeholder="Select Providers"id="voip_provider"required>
                        <option value="">Select Provider</option>
                        <option value="didforsale">DidForSale</option>
                        <option value="plivo">Plivo</option>
                        <option value="telnyx">Telnyx</option>
                        <option value="twilio">Twilio</option>
                        <option value="tata">Tata</option>




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

                                <div  id="show_call_screen" style="display:none;">
                                <hr class="my-15">
                                <div class="form-group">
                                    <div class="ivr-input-types">
                                        <div class="col-sm-6 radio ivr_type_file">
                                                <div class="demo-radio-button">
                                                    <input  type="radio" id="ivr_audio_option_upload_file"name="ivr_audio_option" value="upload" checked onclick="selectIvrUploadFileOption('upload_file_div');"/>
                                                    <label for="ivr_audio_option_upload_file">Upload File</label>
                                                    <input type="radio" id="ivr_audio_option_audio" name="ivr_audio_option" value="text_to_speech" onclick="selectIvrUploadFileOption('text_to_speech_div');">
                                                    <label for="ivr_audio_option_audio">Convert Text to Audio</label>

                                                </div>

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

                                <div class="col-md-6"id="upload_file_div">
                                    <div class="form-group" >
                                        <label for="" class="form-label">Upload File<span style="color:red;">* &nbsp; (Only mp3 or wav file type is allowed)</span></label>
                                        <input type="file" accept="audio/*"  class="form-control"   name="ann_id"  placeholder="Please Upload file" style="width:100%" />
                                    </div>
                                </div>



                          <div class="row" id="text_to_speech_div" style="display: none;">

                                <div class="col-md-6" >
                                  <div class="form-group">
									<label class="form-label">Language </label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select id="language_ddl" name="language" class="form-select" onchange="selectVoiceNameOnLanugageChange();">
                                            <option value="">--Select Language--</option>
                                            @if(!empty($arrLang))
                                            @foreach($arrLang as $key => $val)
                                            <option value="{{$key}}">{{base64_decode($key)}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                	</div>
								</div>
                            </div>



								  <div class="col-md-6" >
                                  <div class="form-group">
									<label class="form-label">Voice Name</label>
									<div class="input-group mb-3">
										<span class="input-group-text"><i class="ti-user"></i></span>
                                        <select id="voice_name_ddl" name="voice_name" class="form-select">
                                            <option value="">--Select Voice Name--</option>
                                        </select>
                                	</div>
								</div>
                                </div>
                                <div class="col-md-10">
                                  <div class="form-group">
									<label class="form-label">Text </label>
                                    <textarea id="speech_text" class="form-control" name="speech_text"
                                            placeholder="Type what you like your customers to hear and click on Listen button to listen"></textarea>
                                        <audio style="display:none;" id="test_audio" controls preload ='none'>
                                            <source src="" type='audio/mp3'>
                                        </audio>
								</div>
                                </div>
                                <div class="col-md-2"style="margin-top:25px;">
                                  <div class="form-group">
									<div class="input-group mb-3">
                                    <a class="btn btn-primary" href="javascript:void(0);" onclick="getAudioOnText();">Listen</a>

                                	</div>
								</div>
                            </div>
                            </div>
                            </div>
                            <div class="row">

								  <div class="col-md-6"id="record_audio" style="display: none;">
                                  <div class="form-group">

									<div class="input-group mb-3">
                                    <button type="button" id="record" class="btn"><i class="fa fa-microphone"></i></button>
                                        <button type="button" id="stopRecord" class="btn" disabled><i class="fa fa-stop"></i></button>
                                        <span class="recording-status">Voice recording...</span>
                                        <audio id=recordedAudio></audio>
                                	</div>
								</div>
                                </div>

                            </div>



							<!-- /.box-body -->
							<div class="box-footer text-end">
								<a href="/did"><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 class="modal fade" id="models" tabindex="-1" aria-labelledby="modelsLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Confirm Changes</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

                                  <div class="modal-body">
                                  <p>< <span id="view"></span> > is currently the default CLI for your account.</p>                                    <p>Do you want to proceed?</p>
                                  <p>Do you want to set < <span id="viewCurrentCLI"></span> > as your default CLI ?</p>


                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary btn-sm changeDefault" data-bs-dismiss="modal">No</button>
                                  <button type="button" class="btn btn-success btn-ok  btn-sm" data-bs-dismiss="modal">Yes</button>

                                </div>

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

		</section>

        <style>
.row-margin-15
{
    margin-top: 1.5em;
}

.hideMe
{
    display: none;
}

.hide_show
{
    display:none;
}

.operator_txt
{
    display:none;
}



.fax_email_grid
{
    display:none;
}

</style>


<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/imask"></script>
<script>
      var phoneInput = document.getElementById('forward_number');
    var phoneMask = new IMask(phoneInput, {
        mask: '(000) 000-0000'
    });
    var phoneInputforward = document.getElementById('forward_number_ooh');
    var phoneMaskforward = new IMask(phoneInputforward, {
        mask: '(000) 000-0000'
    });
    var phoneInputCli = document.getElementById('cli');
    var phoneMaskCli = new IMask(phoneInputCli, {
        mask: '(000) 000-0000'
    });
    </script>
<script>
    $("#call_screening_status").change(function()
    {
        if($("#call_screening_status").val() == 0)
        {
            $("#show_call_screen").hide();
        }
        else
        if($("#call_screening_status").val() == 1)
        {
            $("#show_call_screen").show();
        }

    });
</script>

<script>

        var csrfToken = $('meta[name="csrf-token"]').attr('content');


    $(document).ready(function () {
        setTimeout(function() {
            selectVoiceNameOnLanugageChange();
        }, 1000);

        $(".edit_ivr_form").submit(function () {
            if ($("#ivr_audio_option_audio").prop("checked") && !$("#test_audio").attr("src")) {
                toastr.info("Please listen to the audio before submitting");
                return false;
            }
        });



        if(prompt_option == 2){
            $("#ivr_audio_option_audio_record").prop("checked", true);
            $("#upload_file_div").hide();
            $("#text_to_speech_div").hide();
            $("#record_audio").show();
        } else if(prompt_option == 1){
            $("#ivr_audio_option_audio").prop("checked", true);
            $("#upload_file_div").hide();
            $("#record_audio").hide();
            $("#text_to_speech_div").show();

            setTimeout(function() {
                selectVoiceNameOnLanugageChange(voice_name);
            }, 2000);
        } else{
            $("#ivr_audio_option_upload_file").prop("checked", true);
            $("#record_audio").hide();
            $("#upload_file_div").show();
            $("#text_to_speech_div").hide();
        }
    });

    function selectIvrUploadFileOption(option) {
        if (option == 'text_to_speech_div') {
            $("#text_to_speech_div").show();
            $("#upload_file_div").hide();
            $("#record_audio").hide();
        } else if(option == 'audio_record') {
            getAudioRecordPermission();
            $("#record_audio").show();
            $("#upload_file_div").hide();
            $("#text_to_speech_div").hide();
        } else {
            $("#upload_file_div").show();
            $("#text_to_speech_div").hide();
            $("#record_audio").hide();
        }
    }

    function selectVoiceNameOnLanugageChange(defaultSelected = null) {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: '/get-voice-name-on-lanugage',
            type: 'post',
            headers: {
            'X-CSRF-TOKEN': csrfToken // Include the CSRF token in the headers
        },
            data: {'language': $('#language_ddl').val()},
            success: function (response) {
                var html = '';
                $.each(response, function (index, value) {
                    var optionValue = value.language_code + " ## " + value.voice_name + " ## " + value.ssml_gender;
                    html += '<option value="'+ optionValue +'" ';
                    html += (defaultSelected == optionValue) ? 'selected >' : '>';
                    html += optionValue + '</option>';
                });
                $("#voice_name_ddl").html('');
                $("#voice_name_ddl").html(html);
            }
        });

    }

    function getAudioOnText() {
        if ($('#speech_text').val() == '') {
            toastr.error("Please Type Text");
            return;
        }
        if ($('#language_ddl').val() == '') {
            toastr.error("Please Select Language");
            return;
        }
        if ($('#voice_name_ddl').val() == '' || $('#voice_name_ddl').val() == null) {
            toastr.error("Please Select Voice Name");
            return;
        }

        $("#test_audio").attr('src', "");
        $.ajax({
            url: '/get-audio-on-text',
            type: 'post',
           /* headers: {
            'X-CSRF-TOKEN': csrfToken // Include the CSRF token in the headers
        },*/
            data: {'language': $('#language_ddl').val(),
                'voice_name_ddl': $('#voice_name_ddl').val(),
                'speech_text': $('#speech_text').val(),
                'prompt_for' : 'announcements',
                '_token': $('meta[name="csrf-token"]').attr('content') // Add the CSRF token here


            },

            success: function (response) {
                if (typeof (response.file) != 'undefined') {
                    var file = "{{env('FILE_UPLOAD_URL')}}" + "{{env('ANNOUNCEMENTS_FILE_UPLOAD_FOLDER_NAME')}}" + "/" + response.file;
                     var d = new Date();
                    $("#test_audio").attr('src', file+"?"+d.getTime());
                    var x = document.getElementById("test_audio");
                    x.play();
                } else {

                }
            }
        });
    }

    function getAudioRecordPermission(){
        navigator.mediaDevices.getUserMedia({audio:true})
            .then(stream => {handlerFunction(stream)});
    }

    function handlerFunction(stream) {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive"){
                let blob = new Blob(audioChunks,{type:'audio/wav'});
                recordedAudio.src = URL.createObjectURL(blob);
                recordedAudio.controls=true;
                recordedAudio.autoplay=true;
                sendData(blob)
            }
        }
    }

    function sendData(data) {
        var fd = new FormData();
        fd.append('data', data);

        $.ajax({
            url: '/save-recorded-audio-announcements',
            type: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function (response){
                // console.log(response);
            },
            error: function (response) {
                console.log(response);
            }
        });
    }

    record.onclick = e => {
        record.disabled = true;
        $(".recording-status").show();
        stopRecord.disabled=false;
        audioChunks = [];
        rec.start();
    }
    stopRecord.onclick = e => {
        record.disabled = false;
        stop.disabled=true;
        $(".recording-status").hide();
        rec.stop();
    }
</script>

<script>
    function showData(id)
    {
        $('.inner_div').hide();
        $('#' + id + '_div').css("display", "block");
        $('.' + id + '_div').css("display", "block");

    }

    function showDataOoh(id)
    {
        $('.ooh_div').hide();
        $('#' + id + '_div_ooh').css("display", "block");
        $('.' + id + '_div_ooh').css("display", "block");

    }

    function checkPhoneNo()
    {
        var mobile = document.getElementById('sms_phone');
        var message = document.getElementById('sms_message');
        var goodColor = "#dd4b39";
        var badColor = "";

        if(sms_phone.value.length < 9)
        {
            sms_phone.style.backgroundColor = badColor;
            sms_message.style.color = goodColor;
            sms_message.innerHTML = "required 10 digits!";
            $("#message").show();
            $("#submit").attr("disabled", true);
            return false;
        }

        if(sms_phone.value.length >9)
        {
            sms_phone.style.backgroundColor = badColor;
            sms_message.style.color = badColor;
            $("#message").hide();
            $("#submit").removeAttr("disabled");
        }
    }

    // function check()
    // {
    //     var mobile = document.getElementById('cli');
    //     var message = document.getElementById('message');
    //     var goodColor = "#dd4b39";
    //     var badColor = "";

    //     if(cli.value.length < 9)
    //     {
    //         cli.style.backgroundColor = badColor;
    //         message.style.color = goodColor;
    //         message.innerHTML = "required 10 digits!";
    //         $("#message").show();
    //         $("#submit").attr("disabled", true);
    //         return false;
    //     }

    //     if(cli.value.length >9)
    //     {
    //         cli.style.backgroundColor = badColor;
    //         message.style.color = badColor;
    //         $("#message").hide();
    //         $("#submit").removeAttr("disabled");
    //     }
    // }

    $(document).ready(function()
    {
        $('#default_did').change(function()
        {
            default_did = $('#default_did').val();
            $.ajax({
                url: '/findDefaultDid/' + default_did,
                type: 'get',
                success: function (response)
                {
                    if(response[0].cli)
                    {
                        cli = $("#cli").val();
                        $("#view").html(response[0].cli);
                        $("#viewCurrentCLI").html(cli);


                        $("#models").modal('show');
                    }
                }
            });
        });

        $(document).on("click", ".changeDefault" , function()
        {
            $("#default_did").val('0');
        });

        $('#operator_check').change(function()
        {
            operator = $('#operator_check').val();
            if(operator == 0)
            {
                $('.operator_txt').hide();
            }

            else if(operator == 1)
            {
                $('.operator_txt').show();
            }
        });

        $('#veh1').change(function()
        {
            veh1 = $('#veh1').val();
            if(veh1 == 'v')
            {
                $('.fax_email_grid').hide();
            }

            else if(veh1 == 'f')
            {
                $('.fax_email_grid').show();
            }
        });


        chk_sms = $('#chk_sms').val();
        if(chk_sms == '1')
        {
            $('.sms_grid').show();
        }
        else
            $('.sms_grid').hide();



        $('#chk_sms').change(function()
        {
            chk_sms = $('#chk_sms').val();
            if(chk_sms == 0)
            {
                $('.sms_grid').hide();
            }
            else
            if(chk_sms == 1)
            {
                $('.sms_grid').show();
            }
        });

        redirect_last_agent = $('#redirect_last_agent').val();
        if(redirect_last_agent == '1')
        {
            $('#showRow').hide();
        }
        else
            $('#showRow').show();

        $('#redirect_last_agent').change(function()
        {
            redirect_last_agent = $('#redirect_last_agent').val();
            if(redirect_last_agent == 1)
            {
                $('#showRow').hide();
            }
            else
            if(redirect_last_agent == 0)
            {
                $('#showRow').show();

            }
        });

        $('#fax_did').select2()
        $('#fax_did_ooh').select2()

        //Toggle ooh inputs
        $("#call_time_department").on('change', function(){
            toggleOutOfHousDiv();
        });
        //Toggle ooh inputs
        $("#holiday").on('change', function(){
            toggleOutOfHousDiv();
        });
    });

    /**
    * Toggle ooh inputs
    * @returns {undefined}
    */
    function toggleOutOfHousDiv() {
        if($("#call_time_department").val() == '0' && $("#holiday").val() == '0') {
            $("#OutOfHours").hide();
        } else {
            $("#OutOfHours").show();
        }
    }

    </script>





@endsection