@extends('layouts.app') @section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection @section('content') @section('page_title') SMS Template
Details list @endsection
<style>
    .dataTables_scroll{
    overflow:auto;
    }
</style>
<script>
    $(document).ready(function() {
        $('.toggle-event').bootstrapToggle();
        $(document).on('change', '.toggle-event', function (e) {
            var click_val = $(this).prop('checked');
            let id_val = $(this).attr('data-info');
            let serverid_val = $(this).attr('server-id');
            let org_id_val = $(this).attr('org-id');
            let sender_val = $(this).attr('sender-name');
            let language = $(this).attr('language');
            let temp_id = $(this).attr('sms_template_id');
            let template = $(this).attr('sms_template');
            let url;

            if(click_val){
                click_val = 1;
                $(this).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
            }else{
                click_val = 0;
                $(this).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
            }
            $.ajax({
                type: "POST",
                url: "{{ url('/sms_templates/transactional_update_status') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : id_val,
                    "action" : click_val,
                    "server" : serverid_val,
                    "org_id" : org_id_val,
                    "sender" : sender_val,
                    "language" : language,
                    "temp_id" : temp_id,
                    "template" : template
                },
                dataType:'json',
                success: function(data) {
                    if(click_val){
                        $('#'+data.row_id).parent().removeClass("btn-danger off").addClass('btn-success');
                        $('#edit'+data.row_id).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
                        toastr.success('Activated Successfully !!');
                    }else{
                        $('#'+data.row_id).parent().removeClass("btn-success").addClass('btn-danger off');
                        $('#edit'+data.row_id).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
                        toastr.error('De-Activated Successfully !!');
                    }
                    //$("#usernamepass").html('<option value="'+data[0].server_account_id+'">'+data[0].username+' - '+data[0].password+'</option>');
                }
            });
        });
    });
</script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<div class="container-fluid">
    @include('sms_templates.template_header')
    <div class="card-header flex"><h3> Transactional Template Details </h3>
        <!-- count section start-->
        <form class="flex m-auto">
            <div class="btn-outline-success active count-div" id="countfilter2" data-toggle="tooltip">
                <label> Total:</label>
                <small id="total_count0"></small>
            </div>
            <div class="count-div" id="countfilter1" data-toggle="tooltip">
                <label>Active: </label>
                <small id="active_count1"></small>
            </div>
            <div class="count-div" id="countfilter0" data-toggle="tooltip">
                <label>In-Active: </label>
                <small id="inactive_count2"></small>
            </div>
        </form>
        <!-- count section end -->
        <!-- excel start -->
        @can('hasExcelPermission')
            <form action="{{ url('exporttransactionllist') }}" class="pull-right" method="post">
                @csrf
                <input type="hidden" name="template_state" id="template_state_hidden">
                <button type="submit" class="export_template_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
            </form>
        @endcan
        <!-- excel end -->
    </div>
	<div class="card">
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-bordered table-hover" id="datalist">
					<thead>
						<tr>
							<th>Sl.No</th>
                            <th>Transactional ID</th>
							<th>Account Name</th>
							<th>Email</th>
							<th>Gateway Name</th>
							<th>Sender ID</th>
							<th>Language</th>
							<th>SMS Template Id</th>
							<th>SMS Template</th>
                            <th>Created On</th>
							@can('hasUpdatePermission')
							<th>Status</th>
							<th data-orderable="false">Actions</th>
							@endcan
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>
<script>
    // template state 2 is for total count , 1 is for active and 0 for inactive 
    var template_state = 2;
    $(document).ready(function () {
        listtemplate(template_state);
        trans_template_count();
    });
    // function for the export of the dashboard report 
    $(".export_template_excel").click(function(){
        $('#template_state_hidden').val(template_state);
        $(this).submit();
    });
    // function for getting transactional  template count for the above tabs in header 
    function trans_template_count(){
        $.ajax({
            "url": "{{ url('trans_template_count') }}",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
            },
            "dataType": "json",
            success: function(response) {
                $("#total_count0").html(response[0].total);
                $("#active_count1").html(response[0].active);
                $("#inactive_count2").html(response[0].inactive);
            }
        });
    }
    $('.count-div').click(function (e) {
        e.preventDefault();
        template_state = parseInt(this.id.slice(-1));
        listtemplate(template_state);
        $('.count-div').removeClass('btn-outline-success active');
        $(this).addClass('btn-outline-success active');
    });
    function listtemplate(template_state = null){
		$("#datalist").DataTable().clear().destroy();
        $('#datalist').DataTable({
            "processing": true,
            "serverSide": true,
			"paging": true,
            "searching": true,
            "autoWidth":true,
            "ordering": true,
            "scrollY":  400,
            "scrollCollapse": true,
            "scrollX": true,
            "pageLength": 20,
            "order": [[0, "desc"]],
            "language": { search: '', searchPlaceholder: "Search...", 
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top:50px;"></i><span class="sr-only">Loading...</span> '
             },
            "ajax":{
                    "url": "{{ url('transactional_list') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data":{
                        _token: "{{csrf_token()}}",
                        template_state : template_state
                    }
                   },
            "columns": [
            	{ data: "id",
                    render: function(data, type, row, meta){
                    	return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: "id",
                    render: function(data, type, row, meta){
                        return row.id;
                    }
                },
                { "data": "account_name" },
                { "data": "email" },
                { data: "alias_server_name",
                    render: function(data, type, row, meta){
                        return row.alias_server_name;
                    }
                },
                { "data": "sender_name" },
                { data: "language",
                    render: function(data, type, row, meta){
                        if(row.language == 2){
                            data = '&nbsp;&nbsp;Unicode&nbsp;';
                        }else{
                            data = '&nbsp;&nbsp;English&nbsp;&nbsp;';
                        }
                        return data;
                    }
                },
                { "data": "sms_template_id" },
                { "data": "suggested_content",
                    render: function(data, type, row, meta){
                        data = _.escape(row.suggested_content);
                        return data;
                    }
                },
                { "data": "created_on",
                    render: function(data, type, row, meta){
                        return row.created_on;
                    }
                },
                 @can('hasUpdatePermission')
                { data: "status",
                    render: function(data, type, row, meta){
                        var suggested_content = row.suggested_content.replace(/"/g, '');
                        data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event" data-toggle="toggle" data-offstyle="danger" data-on="Active" data-off="De-Active" data-size="small" data-info="'+row.id+'" server-id="'+row.new_server_id+'" org-id="'+row.parent_id+'" sender-name="'+row.sender_name+'", language="'+row.language+'", sms_template_id="'+row.sms_template_id+'", sms_template="'+suggested_content+'">';
                        return data;
                    }
                },
                { data: "",
                    render: function(data, type, row, meta){
                        data = '<a id="edit'+row.id+'" title="Edit Campaign Data" href="editTransactionalTemplate/'+row.id +'" class="btn btn-info edit-data fa fa-edit cursor-pointer greyIcon creditbtn '+(row.status == 0 ? 'disabled':'active')+'">Edit</a>';
                        return data;
                    }
                },
                @endcan
            ],
            "fnDrawCallback": function() {
                jQuery('.toggle-event').bootstrapToggle();
            }

        });
}
</script>
@endsection