@extends('layouts.admin.master')

@section('title')Settings
 {{ $title }}
@endsection


@push('css')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/date-picker.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/select2.css') }}">
@endpush

@section('content')	   
	<div class="container-fluid">
    <div class="page-header">
      <div class="row">
        <div class="col-lg-6">
          <h3>Setting</h3>
          <ol class="breadcrumb">
            <!-- <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li> -->
            <li class="breadcrumb-item"><a href="javascript:void(0)">Settings</a></li>    
            <li class="breadcrumb-item"><a href="{{route('apiList')}}">Api endpoint</a></li>            
            <li class="breadcrumb-item"><a href="javascript:void(0)">Api</a></li>            

          </ol>
        </div>
        
      </div>
    </div>
</div>
	<div class="container-fluid">
	    <div class="row justify-content-center">
	        <div class="col-sm-8">
	            <div class="card">
	                <div class="card-body">
                    <form method="post" action="@if(base64_decode(request()->get('action'))!='add') {{route('updateApi')}} @else {{route('saveApi')}} @endif" name="BatchForm" id="BatchForm">
                        @csrf
	                    <div class="form theme-form">	 
                              @if(base64_decode(request()->get('action'))=='edit')
                                <div class="row d-none">
                                    <div class="col">
                                        <div class="mb-3">
                                            <label>Id</label>
                                            <input class="form-control" type="hidden"  name="Id" id ="Id" placeholder="Name *" value="{{encrypt_decrypt('encrypt',$data->api_Id)}}" />
                                            <span id="nameError" class="addError"></span>
                                        </div>
                                    </div>
                                </div>
                                @endif   
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Api Name</label>
	                                    <input class="form-control" type="text" placeholder="Api Name " id="template" name="template" value="{{$data->name ?? ''}}"/>
	                                </div>
	                            </div>
	                        </div>
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Api endpoint</label>
	                                    <input class="form-control" type="text" placeholder="Endpoint " id="endpoint" name="endpoint" value="{{$data->endpoint ?? ''}}"/>
                                        <span>Replace number -> [Number],message->[Message]</span>
                                    </div>
	                            </div>
	                        </div>	                      
                            <div class="row">
	                            <div class="col">
	                                <div class="mb-3">
	                                    <label>Template Type</label>                                        
                                        <select class="form-select col-sm-12" name ="apiType" id="apiType">
                                            <option value="">select Type</option> 
                                            <option value="Whatsapp">Whatsapp</option> 
                                            <option value="SMS">SMS</option>                                                                                         
                                            <option value="Email">Email</option>                                                 
                                        </select>
	                                </div>
	                            </div>
	                        </div>      
                            <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>Auth Token</label>
                                    <input class="form-control" type="text" placeholder="Test Number message " id="authToken" name="authToken"/>                                    
                                </div>
                            </div>
                        </div> 
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>TenantId</label>
                                    <input class="form-control" type="text" placeholder="Tenant Id" id="tenantId" name="tenantId"/>                                    
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>App key</label>
                                    <input class="form-control" type="text" placeholder="App Key" id="apiKey" name="apiKey"/>                                    
                                </div>
                            </div>
                        </div> 
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>App Secret</label>
                                    <input class="form-control" type="text" placeholder="App Secret" id="apiSecret" name="apiSecret"/>                                    
                                </div>
                            </div>
                        </div>  
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>Access Key</label>
                                    <input class="form-control" type="text" placeholder="Access Key" id="accessKey" name="accessKey"/>                                    
                                </div>
                            </div>
                        </div> 
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>Port</label>
                                    <input class="form-control" type="text" placeholder="Port" id="port" name="port"/>                                    
                                </div>
                            </div>
                        </div>                                                                                                            
                            <div class="row">	                            	                            
                                <div class="mb-3">
                                    <label>Status</label>
                                    <select class="form-select" name="status" id="status">
                                        <option value="Active">Active</option>
                                        <option value="Inactive">Inactive</option>
                                    </select>
                                </div>                            
	                        </div>                                                              	                        
	                        <div class="row">                                                            
	                            <div class="col justify-content-center">
	                                <div class="text-center"><button class="btn btn-primary" type="submit">Save</button></div>
	                            </div>
	                        </div>
	                    </div>
                        </form>
	                </div>
	            </div>
	        </div>  
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>Template message </label>
                                    <textarea name="testTemplate" class="form-control" id="testTemplate" cols="30" rows="10"  placeholder="Test template message "></textarea>
                                    <!-- <input class="form-control" type="text" placeholder="Test template message " id="testTemplate" name="testTemplate"/> -->
                                </div>
                            </div>
                        </div>	
                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label>Number</label>
                                    <input class="form-control" type="text" placeholder="Test Number message " id="testNumber" name="testNumber"/>
                                    <span>Multiple number with comman separated</span>
                                </div>
                            </div>
                        </div>   
                        <div class="row">                                                            
                            <div class="col justify-content-center">
                                <div class="text-center"><button class="btn btn-primary" type="button" id="testConnection">Test Connection</button></div>
                            </div>
                        </div>                     
                    </div>
                </div>
            </div>          
	    </div>
	</div>

	
	@push('scripts')	
    <script src="{{asset('assets/js/notify/bootstrap-notify.min.js')}}"></script>
    <script src="{{asset('assets/js/setting/notify.js')}}"></script>
    <script src="{{asset('assets/functions/common.js')}}"></script>

    <script>             
        $(function(){
            $("#testConnection").click(function(){
                var endpoint = $("#endpoint").val()
                var template = $("#testTemplate").val();   
                var apiType = $("#apiType").val()
                var number = $("#testNumber").val(); 
                var token = $("#authToken").val()
                var tenantId = $("#tenantId").val()
                var accessKey = $("#accessKey").val()
                var url =''
                if(endpoint=="")
                {
                    notifyF("Error","Endpoint required",'danger',2000)
                    return false
                }

                if(template=="")
                {
                    notifyF("Error","Test template required",'danger',2000)
                    return false
                }                
                if(apiType == "Whatsapp")
                {
                    url = "{{route('testWhatsappInhance')}}"
                    data = {'endpoint':endpoint,'template':template,'number':number,'authToken':token,'tenantId':tenantId,'accessKey':accessKey}
                }
               if(apiType == "SMS")
               {
                  url ="{{route('testApiConnection')}}"
                  data = {'endpoint':endpoint,'template':template,'number':number}
               }
                
                // var data = {'endpoint':endpoint,'template':template,'number':number}
                ajaxWait(url,data).then(result => {   
                    console.log(result,"result")
                    notifyF("Success","Msg sent",'primary',2000)
                })

            })
        })

        @if(Session()->has('Response'))
                notifyF("{{Session('Response')}}","{{Session('Msg')}}",'primary',2000)
        @endif
        @if(isset($data))
            $(function(){
                $("#status").val('{{$data->status}}').attr("selected","selected");                
                $("#apiType").val('{{$data->apiType}}').attr("selected","selected");                   
            })           
        @endif
    </script>
	@endpush

@endsection