@extends('layouts/gnr_layout')
@section('title', '| Configure SMS Service')

@section('content')

{{-- template --}}
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-2"></div>

        {{-- fullbody start  --}}
        <div class="col-md-8 fullbody">

            {{-- title  --}}
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{url('smsConfig/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>View Config</a>
            </div>
            {{-- title end  --}}

            {{-- panel start  --}}
            <div class="panel panel-default panel-border">

                <div class="panel-heading">
                    <div class="panel-title">SMS Provider Configuration</div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">

                            {{-- form start  --}}
                            <div class="col-md-12">
                                {!! Form::open(array('url' => '', 'id'=>'dataForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}                                                              
                                

                                {{-- Provider  --}}
                                <div class="form-group">
                                    {!! Form::label('selectedProvider', 'SMS Provider :', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">                                        
                                        {!! Form::select('selectedProvider', array('' => 'Select') + ($providers), null, array('class'=>'form-control', 'id' => 'selectedProvider')) !!}
                                        <p id='selectedProviderE' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- Credentials  --}}
                                <div class="creds">
                                </div>

                                {{-- Customize Field Option --}}
                                <div class="form-group">
                                    {!! Form::label('customizeField', 'Customize Field :', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">                                       
                                        {!! Form::checkbox('customizeField', '', false,['class'=>'checkItem']) !!}                                                            
                                    </div>
                                </div>

                                <div class="form-group">
                                    {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']); !!}                                        
                                        <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                                    </div>
                                </div>

                                {!! Form::close() !!}
                            </div>
                            {{-- form end  --}}

                            <!-- <div class="col-md-4 emptySpace vert-offset-top-9"><img src="images/image15.png" width="90%" height="" style="float:right"></div> -->

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

            </div>
            {{-- panel end  --}}


            <div class="footerTitle" style="border-top:1px solid white"></div>

        </div>
        {{-- fullbody end  --}}

        <div class="col-md-2"></div>
    </div>
</div>
{{-- template end  --}}

@endsection




{{-- scripts --}}

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        
        $(".creds").empty()

        $("#customizeField").change(function() {            
            this.value = this.checked ? 1 : 0                
        })

        $('form').submit(function(event) {
            event.preventDefault()
            let csrf = "{{csrf_token()}}"
            let data = $('#dataForm').serialize()           

            $.ajax({
                url: '{{route('sms.provider.credentials.store')}}',
                type: 'post',                
                dataType: 'json',
                data: {csrf:csrf, data:data},
                async: false,
                cache: false,               
                success: function( _response ){                    
                    toastr.success(_response.responseText, _response.responseTitle, {timeOut: 5000})
                    window.location.href = '{{url('smsConfig/ ')}}'
                },
                error: function( _response ){
                    toastr.error(_response.responseText, _response.responseTitle, {timeOut: 5000})
                }
            });
        });

        
        $('#selectedProvider').on('change', function(e) {
            event.preventDefault()
            
            $(".creds").empty()
            let providerId  = $("#selectedProvider").val()
            let csrf        = "{{csrf_token()}}"
            let data        = {id:providerId,  _token:csrf}

            $.ajax({
                url: '{{route('sms.provider.credentials')}}',
                type: 'post',                
                dataType: 'json',
                data: data,
                async: false,
                cache: false,               
                success: function( _response ) {

                    if( _response.customizeField ) $("#customizeField").prop( 'checked', true ).val(1)
                    
                    let credentials = JSON.parse( _response.credentials )
                    let credKeys    = Object.keys( credentials )
                    let credValues  = Object.values( credentials )
                    
                    let credsForm = `
                        <div class="form-group">
                            <label class='col-sm-3 control-label' for="url">API URL</label>
                            <div class="col-sm-9">
                                <input class='form-control' type="text" id="url" name="url" value="${_response.url}">
                            </div>
                        </div>
                    `
                    credKeys.forEach( key => {                        
                        credsForm += `
                            <div class="form-group">
                                <label class='col-sm-3 control-label' for="${key}">${key.toUpperCase()}</label>
                                <div class="col-sm-9">
                                    <input class='form-control' type="text" id="${key}" name="${key}" value="${credentials[key]}" required>
                                </div>
                            </div>
                        `
                    })

                    $(".creds").prepend(credsForm)
                },
                error: function( _response ){
                    //alert("Select Image please");
                }
            });
            
        });

    });
</script>