@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title') Transactional IP list @endsection

<div id="alert_sub" class="alert" style='display:none;text-align: center;'>
   <button type="button" class="close" aria-hidden="true">&times;</button>
   <strong class='alert_sub'></strong>
</div>
<script>
    $(document).ready(function() {
        whitelistip_list();
    });
</script>
<style>
    .field_wrapper div{
	    margin-bottom:10px;
    }
</style>
<div class="container">
    @include('ip_list_header')
    @include('ip_login_api_header')
    @include('adding_ip_sms_trans')
	<div class="card">
        <div class="card-header">
            <h5 class="card-title">API IP's
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-sm btn-secondary float-right" data-toggle="modal" data-target="#ipAddApiModal">
                    Add IP
                </button>
            </h5>
        </div>
		<div class="card-body">
			<div class="table-responsive">
			<table class="table table-bordered text-center" id="iplist">
                <thead>
                    <tr>
                        <th>Message Type</th>
                        <th>IP</th> 	
                        <th>Created on</th> 	
                        <th>Status</th> 
                        @can('hasUpdatePermission')
                        <th>Actions</th> 
                        @endcan
                    </tr>
                </thead>
                <tbody>            
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    function whitelistip_list(){
        var parent_id = $('#parent_id').val();
        $.ajax({
            type: "POST",
            url: "{{url('/transactionalip_list')}}",
            data: {
                "_token" : "{{ csrf_token() }}",
                "parent_id" : parent_id
            },
            success: function(data) {
                var clientdata = data['data'];
                $("#iplist").DataTable().clear().destroy();
                $('#iplist').DataTable({data: clientdata, "bLengthChange": false, orderable: false, targets: '_all',
                aoColumns: [
                    { data: "msg_type",
                        render: function(data, type, row, meta){
                              data = (row.msg_type == 1 ? 'SMS' : 'WhatsApp');      
                            return data;
                        }
                    },
                    { data: "whitelisted_ip"},
                    { data: "created_on"},
                    { data: "",
                        render: function(data, type, row, meta){
                            if(row.status == 0){
                                data = '<label class="badge badge-danger">In-active&nbsp;</label>';
                            }else{
                                data = '<label class="badge badge-success">&nbsp;&nbsp;Active&nbsp;&nbsp;</label>';
                            }            
                            return data;
                        }
                    },                    
                    @can('hasUpdatePermission')
                    { data: "",
                        render: function(data, type, row, meta){
                            if(row.status == 0){
                                data = `<a data-toggle="modal" title="Activate" class="btn btn-success fa fa-check update_status" href="#update_status_confirm" data-title="Activate" data-id="${row.id}" data-status="${row.status}"></a> <a data-toggle="modal" title="Edit" class="btn btn-info fa fa-pencil-square-o edit-ip" href="#edit-ip" data-id="${row.id}" data-whitelisted_ip="${row.whitelisted_ip}"></a>`
                            }else{
                                data = `<a data-toggle="modal" title="De-activate" class="btn btn-danger fa fa-close update_status" href="#update_status_confirm" data-title="De-Activate" data-id="${row.id}" data-status="${row.status}"></a> <a data-toggle="modal" title="Edit" class="btn btn-info fa fa-pencil-square-o edit-ip" href="#edit-ip" data-id="${row.id}" data-whitelisted_ip="${row.whitelisted_ip}"></a>`
                            }        
                            return data;
                        }
                    }
                    @endcan
                ]
                });
            }
        });
    }
    function whitelistip_edit() {
       var id = $('#id').val();
       var whitelisted_ip = $('#whitelisted_ip').val();
       var parent_id = $('#parent_id').val();
       $.ajax({
           type: 'post',
            url: "{{url('/transactionalip_edit')}}",
           data: {
               "_token": "{{ csrf_token() }}",
               "id":id,
               "parent_id":parent_id,
               "whitelisted_ip":whitelisted_ip
           },
           success: function(data){
                if(data.status){
                    $('.alert').hide();
                    $('#alert_sub').addClass('alert-success').css('display','block');
                    $('.alert_sub').html(data.message);
                    $('#edit-ip').modal('hide');
                }else {
                    $('#error_div').show().addClass('alert alert-block alert-danger').css('display','block');
                    $('#error_message').html('');
                    $('#error_message').show().append(data.message);
                }
                whitelistip_list();
                setTimeout(function() {
                   $('.alert').fadeOut('fast');
                }, 5000);
           }
       });
    }


    function upadte_status() {
        var id = $('#id').val();
        var parent_id = $('#parent_id').val();
        var status = $('#status').val();
        $.ajax({
            type: 'POST',
            url: "{{url('/transactionalip_staus_update')}}",
            data: {
               "_token": "{{ csrf_token() }}",
               "id":id,
               "parent_id":parent_id,
               "status":status
            },
            success: function(data){
               if(data.status){
                   $('.alert').hide();
                   $('#alert_sub').addClass('alert-success').css('display','block');
                   $('.alert_sub').html(data.message);
                   $('#update_status_confirm').modal('hide');
               }else{
                   $('#alert_sub').addClass('alert-danger').css('display','block');
                   $('.alert_sub').html(data.message);
               }
               whitelistip_list();                
               setTimeout(function() {
                   $('.alert').fadeOut('fast');
               }, 5000);
            }
        });
    }
</script>
@endsection