@extends('backend.layout.main') @section('content')
@if(session()->has('message'))
  <div class="alert alert-success alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{ session()->get('message') }}</div>
@endif
@if(session()->has('not_permitted'))
  <div class="alert alert-danger alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{ session()->get('not_permitted') }}</div>
@endif
<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h4>{{trans('file.SMS Setting')}}</h4>
                    </div>
                    <div class="card-body">
                        <p class="italic"><small>{{trans('file.The field labels marked with * are required input fields')}}.</small></p>
                        {!! Form::open(['route' => 'setting.smsStore', 'method' => 'post']) !!}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="hidden" name="type" value="sms">
                                        <input type="hidden" id="smsId" name="sms_id">
                                        @if($tonkra)<input type="hidden" id="tonkraId" value="{{ $tonkra['sms_id'] }}">@endif
                                        @if($twilio)<input type="hidden" id="twilioId" value="{{ $twilio['sms_id'] }}">@endif
                                        @if($clickatell)<input type="hidden" id="clickatellId" value="{{ $clickatell['sms_id'] ?? '' }}">@endif
                                        <input type="hidden" name="gateway_hidden" value="">
                                        <label>{{trans('file.Gateway')}} *</label>
                                        <select class="form-control" name="gateway">
                                            <option selected disabled>{{trans('file.Select SMS gateway...')}}</option>
                                            @if($tonkra)<option value="tonkra" data-active="{{ $tonkra['active'] }}" {{ $tonkra['active'] == true ? 'selected' : '' }} >Tonkra</option>@endif
                                            @if($twilio)<option value="twilio" data-active="{{ $twilio['active'] }}" {{ $twilio['active'] == true ? 'selected' : '' }} >Twilio</option>@endif
                                            @if($clickatell)<option value="clickatell" data-active="{{ $clickatell['active'] }}" {{ $clickatell['active'] == true ? 'selected' : '' }} >Clickatell</option>@endif
                                        </select>
                                    </div>
                                    <div class="form-group tonkra">
                                        <label>API Token *</label>
                                        <input type="text" name="api_token" class="form-control tonkra-option" value="{{ $tonkra['api_token'] }}" />
                                    </div>
                                    <div class="form-group tonkra">
                                        <label>Sender ID *</label>
                                        <input type="text" name="sender_id" class="form-control tonkra-option" value="{{ $tonkra['sender_id']  }}" />
                                    </div>
                                    <div class="form-group twilio">
                                        <label>ACCOUNT SID *</label>
                                        <input type="text" name="account_sid" class="form-control twilio-option" value="{{ $twilio['account_sid'] ?? '' }}" />
                                    </div>
                                    <div class="form-group twilio">
                                        <label>AUTH TOKEN *</label>
                                        <input type="text" name="auth_token" class="form-control twilio-option" value="{{  $twilio['auth_token'] ?? '' }}" />
                                    </div>
                                    <div class="form-group twilio">
                                        <label>Twilio Number *</label>
                                        <input type="text" name="twilio_number" class="form-control twilio-option" value="{{  $twilio['twilio_number'] ?? '' }}" />
                                    </div>
                                    <div class="form-group clickatell">
                                        <label>API Key *</label>
                                        <input type="text" name="api_key" class="form-control clickatell-option" value="{{  $clickatell['api_key'] ?? '' }}" />
                                    </div>
                                    <div class="form-group">
                                        <input class="mt-2 default" type="checkbox" name="active" value="1">
                                        <label class="mt-2"><strong>{{trans('file.Default')}}</strong></label>
                                      </div>
                                    <div class="form-group">
                                        <input type="submit" value="{{trans('file.submit')}}" class="btn btn-primary">
                                        <a href="https://sms.tonkra.com/account/top-up" type="button" target="_blank" class="btn btn-secondary tonkra">{{ trans('file.Top Up') }}</a>
                                    </div>
                                </div>
                            </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script type="text/javascript">
    $("ul#setting").siblings('a').attr('aria-expanded','true');
    $("ul#setting").addClass("show");
    $("ul#setting #sms-setting-menu").addClass("active");

    $(document).ready(function(){
        var selectedOption = $(this).find(':selected').val();
        if( selectedOption == 'twilio' ){
            $('select[name="gateway"]').val('twilio');
            $('.clickatell').hide();
            $('.tonkra').hide();
            var dataAtive = $(this).find(':selected').data('active');
            dataAtive == true ? $(".default").prop("checked",true) : $(".default").prop("checked", false);
        }
        else if(selectedOption == 'clickatell' ){
            $('select[name="gateway"]').val('clickatell');
            $('.twilio').hide();
            $('.tonkra').hide();
            var dataAtive = $(this).find(':selected').data('active');
            dataAtive == true ? $(".default").prop("checked",true) : $(".default").prop("checked", false);
        }
        else if( selectedOption == 'tonkra' ){
            $('select[name="gateway"]').val('tonkra');
            $('.twilio').hide();
            $('.clickatell').hide();
            var dataAtive = $(this).find(':selected').data('active');
            dataAtive == true ? $(".default").prop("checked",true) : $(".default").prop("checked", false);
        }
        else{
            $('.clickatell').hide();
            $('.twilio').hide();
            $('.tonkra').hide();
        }
    });

    $('select[name="gateway"]').on('change', function(){
        if( $(this).val() == 'twilio' ){
            $('.clickatell').hide();
            $('.tonkra').hide();
            $('.twilio').show(500);
            $('.twilio-option').prop('required',true);
            $('.clickatell-option').prop('required',false);
            $('.tonkra-option').prop('required',false);
            $('#smsId').val($('#twilioId').val());
            var selectedOption = $(this).find(':selected');
            var dataId = selectedOption.data('active');
            dataId == true ? $(".default").prop("checked",true) : $(".default").prop("checked", false);
        }
        else if( $(this).val() == 'clickatell' ){
            $('.twilio').hide();
            $('.tonkra').hide();
            $('.clickatell').show(500);
            $('.twilio-option').prop('required',false);
            $('.tonkra-option').prop('required',false);
            $('.clickatell-option').prop('required',true);
            $('#smsId').val($('#clickatellId').val());
            var selectedOption = $(this).find(':selected');
            var dataId = selectedOption.data('active');
            dataId == true ? $(".default").prop("checked",true) : $(".default").prop("checked", false);
        }
        else if( $(this).val() == 'tonkra' ){
            $('.twilio').hide();
            $('.clickatell').hide();
            $('.tonkra').show(500);
            $('.tonkra-option').prop('required',true);
            $('.twilio-option').prop('required',false);
            $('.clickatell-option').prop('required',false);
            $('#smsId').val($('#tonkraId').val());
            var selectedOption = $(this).find(':selected');
            var dataId = selectedOption.data('active');
            dataId == true ? $(".default").prop("checked",true) : $(".default").prop("checked", false);
        }
    });

</script>
@endpush