@extends('layouts.app')
@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title')
WhatsApp Template  List
@endsection
<style>
    .dataTables_scroll{
        overflow:auto;
    }
    .modal-content{
        width:140%;
    }
</style>
<div class="container-fluid">
    @include('sms_templates.add_whatsapp_header')
        <div class="card-header flex">
            <h3>WhatsApp Template Details </h3>
            <form class="flex m-auto">
                <div class="btn-outline-success active count-div" id="countfilter3" data-toggle="tooltip">
                    <label> Total:</label>
                    <small id="total_count0"></small>
                </div>
                <div class="count-div" id="countfilter1" data-toggle="tooltip">
                    <label>Approved: </label>
                    <small id="approved_count1"></small>
                </div>
                <div class="count-div" id="countfilter2" data-toggle="tooltip">
                    <label>Rejected: </label>
                    <small id="rejected_count2"></small>
                </div>
                <div class="count-div" id="countfilter0" data-toggle="tooltip">
                    <label>Pending: </label>
                    <small id="pending_count2"></small>
                </div>
            </form>
            @can('hasExcelPermission')
            <form action="{{ url('export_whatsapp_promotional') }}" 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
        </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>Organization Name</th>
                                <th>Email</th>
                                <th>WhatsApp Account Name</th>
                                <th>Platform Type</th>
                                <th>Previous Category</th>
                                <th>Category</th>
                                <th>Template Name </th>
                                <th>Template Id</th>
                                <th>Created On</th>
                                <th>Display Status</th>
                                <th>Approval Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="suggestedContent" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><strong>Template Details</strong></h5>
                    <div class="pull-right inline-block">
                        <label class="float-lg-right"><b>Account Name:</b> <span class="template-account-name"></span></label><br>
                        <label class="float-lg-right"><b>Template Name:</b> <span class="template-template-name"></span></label>
                        <input type="hidden" name="">
                    </div>
                </div>
                <div class="modal-body"> 
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Header: </b></label>
                        <div class="col-sm-9"><p class="word-break-all whatsapp-header-view">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Media URL: </b></label>
                        <div class="col-sm-9"><p class="word-break-all media-url-view">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Body Sample: </b></label>
                        <div class="col-sm-9"><p class="word-break-all boday-sample-view">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Content : </b></label>
                        <div class="col-sm-9"><p class="word-break-all modal-link-view">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Footer: </b></label>
                        <div class="col-sm-9"><p class="word-break-all whatsapp-footer-view">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Action Button: </b></label>
                        <div class="col-sm-9"><p class="word-break-all whatsapp-action"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer footerwidth">
                    <a type="button" class="btn btn-secondary btn-sm text-white close_icon" id="close" data-dismiss="modal">Close</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Edit Template Content -->
    <div class="modal fade" tabindex="-1" role="dialog" id="editContent" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><strong>Edit Template Content </strong></h5>
                    <div class="pull-right inline-block">
                        <label class="float-lg-right"><b>Account Name:</b> <span class="template-account-name"></span></label><br>
                        <label class="float-lg-right"><b>Template Name:</b> <span class="template-template-name"></span></label>
                        <input type="hidden" name="">
                    </div>
                </div>
                <div class="modal-body"> 
                <input type="hidden" name="template_id" id="template_id" class="template_id">
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Header : </b></label>
                        <div class="col-sm-9"><p class="word-break-all whatsapp-header">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Media URL: </b></label>
                        <div class="col-sm-9"><p class="word-break-all media-url">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Body Sample: </b></label>
                        <div class="col-sm-9"><p class="word-break-all boday-sample">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Content : </b></label>
                        <div class="col-sm-9">
                            <textarea name="template_content" id="temp_content" rows="4" class="form-control modal-link"> </textarea>
                            </div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Footer : </b></label>
                        <div class="col-sm-9"><p class="word-break-all whatsapp-footer">NA</p></div>
                    </div>
                    <div class="row mb-1">
                        <label class="col-sm-3 control-label"><b>Action Button : </b></label>
                        <div class="col-sm-9"><p class="word-break-all whatsapp-modal-button-json">NA</p></div>
                    </div>
                </div>
                <div class="modal-footer footerwidth">
                    <a type="button" class="btn btn-secondary btn-sm text-white close_icon" id="close" data-dismiss="modal">Close</a>
                    <a type="button" class="btn btn-primary text-white btn-sm " id="edit_prom_Content">Submit</a>
                </div>
            </div>
        </div>
    </div>    
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>

    // filter for 0 PENDING,1 APPROVED,2 REJECTED,3 TOTAL
    var template_state = 3;
    $(document).ready(function () {
        whatsapptemplates(template_state);
        whatsapp_promo_template_count();
    });
    // function for the export of the dashboard report
    $(".export_template_excel").on("click",function(){
        $('#template_state_hidden').val(template_state);
        $(this).submit();
    });
    // show template list
    function whatsapptemplates(template_state = null){
		$("#datalist").DataTable().clear().destroy();
        $('#datalist').DataTable({
            "processing": true,
            "serverSide": true,
			"paging": true,
            "searching": true,
            "autoWidth":true,
            "ordering": true,
            "scrollX": true,
            "scrollY":  400,
            "pageLength": 20,
            "scrollCollapse": true,
            "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('whatsapp_promotional_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": "org_name",
                    render: function(data, type, row, meta) {
                        return ((row.org_name) ? row.org_name : "NA")
                    }
                },
                { "data": "email",
                    render: function(data, type, row, meta) {
                        return ((row.email) ? row.email : "NA")
                    }
                },
                { "data": "account_name",
                    render: function(data, type, row, meta) {
                        return ((row.account_name) ? row.account_name : "NA")
                    }
                },
                { "data": "platform_type",
                    render: function(data, type, row, meta) {
                        return ((row.platform_type) ? row.platform_type : "NA")
                    }
                },
                {"data": "previous_category",
                    render: function(data, type, row, meta) {
                        return ((row.previous_category) ? row.previous_category : "NA")
                    }
                },
                {"data": "category",
                    render: function(data, type, row, meta) {
                        return ((row.category) ? row.category : "NA")
                    }
                },
                { "data": "payload_temp_name",
                    render:function(data, type, row, meta){
                    return row.payload_temp_name ?? 'NA';
                    }
                },
                { "data": "temp_name",
                    render:function(data, type, row, meta){
                    return row.temp_name + '&nbsp&nbsp&nbsp<span class="custom-tooltip suggestedContent" data-toggle="tooltip" title="View Template Details" data-temp_name ='+row.temp_name+' data-acc_name='+row.account_name+' data-id = '+row.id+' "><i class="fa fa-eye" aria-hidden="true"></i>';
                    }
                },
                { "data": "created_on",
                    render: function(data, type, row, meta){
                        return row.created_on;
                    }
                },
                { data: "status",
                        render: function(data, type, row, meta){
                        data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event event" data-toggle="toggle" data-offstyle="danger" data-on="Active" data-off="In-Active" data-size="small" data-info="'+row.id+'" >';
                        return data;
                        }
                },
                { data: "is_approved",
                    render: function(data, type, row, meta){
                        if(row.is_approved == 0) {
                        data = '<input id="'+row.id+'" type="checkbox" '+(row.is_approved ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="warning" data-on="Approved" data-off="Pending" data-size="small" data-info="'+row.id+'" >';
                        } else if (row.is_approved == 1) {
                            data = '<input id="'+row.id+'" type="checkbox" '+(row.is_approved ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="danger" data-on="Approved" data-off="Rejected" data-size="small" data-info="'+row.id+'" >';
                        }else if (row.is_approved == 2) {
                            data = '<input id="'+row.id+'" type="checkbox" '+(row.is_approved ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event action" data-toggle="toggle" data-offstyle="danger" data-on="Approved" data-off="Rejected" data-size="small" data-info="'+row.id+'" >';
                        }
                        return data;
                        }
                },
                { "data": "",
                    render:function(data, type, row, meta){
                    return '<span class="custom-tooltip edit_content" data-toggle="tooltip" title="View Template Details"   data-temp_name ='+row.temp_name+' data-acc_name='+row.account_name+' data-id = '+row.id+'  data-is_approved='+row.is_approved +' "><i class="btn btn-info fa fa-pencil-square-o '+(row.is_approved == 2 ? 'disabled':'active')+'" aria-hidden="true" ></i>';
                    }
                },
            ],
            "fnDrawCallback": function() {
                jQuery('.toggle-event').bootstrapToggle();
            }

        });
    }
    $(".export_template_excel").click(function(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        $('#from_date_hidden').val(start_date);
        $('#to_date_hidden').val(end_date);
        $(this).submit();
    });

    function whatsapp_promo_template_count(){
        $.ajax({
            "url": "{{ url('whatsapp_promo_template_count') }}",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
            },
            "dataType": "json",
            success: function(response) {
                $("#total_count0").html(response[0].total);
                $("#approved_count1").html(response[0].approved);
                $("#rejected_count2").html(response[0].rejected);
                $("#pending_count2").html(response[0].pending);
            }
        });
    }
    $('.count-div').on('click', function (e) {
        e.preventDefault();
        template_state = parseInt(this.id.slice(-1));
        whatsapptemplates(template_state);
        $('.count-div').removeClass('btn-outline-success active');
        $(this).addClass('btn-outline-success active');
    });
    $(document).on('click', '.close_icon', function(){
        $('#datalist').DataTable().ajax.reload();
    })

    function embolden(str) {
        var openBold = false;
        var openItalic = false;
        var ret = str.replace(/(\*|_)/g, function (match, p1) {
            if (p1 == '*') {
                // Toggle bold tags
                openBold = !openBold;
                return openBold ? '<b>' : '</b>';
            } else if (p1 == '_') {
                // Toggle italic tags
                openItalic = !openItalic;
                return openItalic ? '<i>' : '</i>';
            }
        });
        // Replace newline characters with <br> tags
        ret = ret.replace(/\\n/g, '<br>').replace(/\n/g, ' ').replace(/\s+/g, ' ');
        return ret;
    }

    $(document).on('click', '.suggestedContent', function() {
        $('.loading').css('display','block');
        let tempid = $(this).data('id');
        let temp_name = $(this).data('temp_name');
        let account_name = $(this).data('acc_name');
        $("#suggestedContent").modal("show");
        $('.template-account-name').html(account_name);
        $('.template-template-name').html(temp_name);
        $('.whatsapp-action').empty();
        $.ajax({
            url: "{{ url('getWhatsappContent') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                "_token": "{{ csrf_token() }}",
                "tempid": tempid
            },
            success: function(data) {
                $('.loading').css('display','none');
                var jsonString =  ((data["data"][0]["button_json"]));
                if(jsonString==undefined ||jsonString.length==0){
                    $('.whatsapp-action').html("NA")
                }
                else $('.whatsapp-action').html(jsonString);
                $('.whatsapp-header-view').html(data.data[0].wa_header ? data.data[0].wa_header :data.data[0].wa_media_type);
                var content = data.data[0].suggested_content ? data.data[0].suggested_content : 'NA';
                let decoded_data = decodeURIComponent(embolden(content));
                decoded_data = decoded_data.replace(/\+/g, ' ');
                decoded_data = decoded_data.replace(/\\n/g, '\n');
                $('.modal-link-view').html(decoded_data);
                $('.whatsapp-footer-view').html(data.data[0].wa_footer ? data.data[0].wa_footer :'NA');
                $('.boday-sample-view').html(data.data[0].body_samples ? '<a href ="'+data.data[0].body_samples+'" target="_blank">'+data.data[0].body_samples+'</a>' :'NA');
                $('.media-url-view').html(data.data[0].wa_media_type ? '<a href ="'+data.data[0].wa_media_url+'" target="_blank">'+data.data[0].wa_media_url+'</a>' :'NA');                
            },
        });
    });

    $(document).on('click', '.edit_content', function() {
        var is_approved = $(this).data('is_approved');
        if (is_approved == 2) {
            return false;
        }
        let tempid = $(this).data('id');
        let temp_name = $(this).data('temp_name');
        let account_name = $(this).data('acc_name');
        $("#editContent").modal("show");
        $('.template-account-name').html(account_name);
        $('.template-template-name').html(temp_name);
        $.ajax({
            url: "{{ url('getWhatsappContent') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                "_token": "{{ csrf_token() }}",
                "tempid": tempid
            },
            success: function(data) {
                $('.loading').css('display','none');
                var jsonString =  ((data["data"][0]["button_json"]));
                if(jsonString==undefined ||jsonString.length==0){
                    $('.whatsapp-modal-button-json').html("NA")
                }
                else $('.whatsapp-modal-button-json').html(jsonString);

                $('.template_id').html(data.data[0].id ? data.data[0].id :'NA');
                $('.whatsapp-header').html(data.data[0].wa_header ? data.data[0].wa_header :data.data[0].wa_media_type);
                let content = data.data[0].suggested_content ? data.data[0].suggested_content : 'NA';
                let decoded_data = decodeURIComponent(embolden(content));
                decoded_data = decoded_data.replace(/\+/g, ' ');
                decoded_data = decoded_data.replace(/\\n/g, '\n');
                decoded_data = decoded_data.replace(/<\/?b>/g, ' ');
                $('.modal-link').val(decoded_data);
                $('.whatsapp-footer').html(data.data[0].wa_footer ? data.data[0].wa_footer :'NA');
                $('.boday-sample').html(data.data[0].body_samples ? data.data[0].body_samples :'NA');
                $('.media-url').html(data.data[0].wa_media_type ? '<a href ="'+data.data[0].wa_media_url+'" target="_blank">'+data.data[0].wa_media_url+'</a>' :'NA');
            },
        });
    })

    $(document).on('change', '.event', function (e) { 
        let click_val = $(this).prop('checked');
        let id_val = $(this).attr('data-info');
        let url;
        if (click_val) {
            click_val = 1;
            $message = "Are you sure you want to Activate this Template?";
        } else {
            click_val = 0;
            $message = "Are you sure you want to Deactive this Template?";
        }
        if (confirm($message)) {
            $.ajax({
                type: "POST",
                url: "{{ url('/WaPromoTransStatus') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : id_val,
                    "action" : click_val
                },
                dataType:'json',
                success: function(data) {
                    if(click_val){
                        toastr.success('Activated Successfully !!');
                    }else{
                        toastr.error('De-Activated Successfully !!');
                    }
                    $('#datalist').DataTable().ajax.reload();
                }
            });
        } else {
            if(click_val == 1){
                $(this).prop('checked', false);
                $(this).parent().removeClass('btn-sm btn-success').addClass('btn-danger off btn-sm');
            }else{
                $(this).prop('checked', true);
                $(this).parent().removeClass('btn-danger off btn-sm').addClass('btn-sm btn-success');
            }
        }
    });

    $(document).on('change', '.action', function (e) { 
        let click_val = $(this).prop('checked');
        console.log(click_val);
        let id_val = $(this).attr('data-info');
        let url;
        if (click_val) {
            click_val = 1;
            $message = "Are you sure you want to Approve this Template?";
        } else {
            click_val = 2;
            $message = "Are you sure you want to Reject this Template?";
        }
        if (confirm($message)) {
            $.ajax({
                type: "POST",
                url: "{{ url('/WaPromoTransAction') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : id_val,
                    "action" : click_val
                },
                dataType:'json',
                success: function(data) {
                    if(click_val != 2){
                        console.log(click_val);
                        toastr.success('Approved Successfully !!');
                    }else{
                        toastr.error('Rejected Successfully !!');
                    }
                    $('#datalist').DataTable().ajax.reload();
                }
            });
        }else {
            if(click_val == 1){
                $(this).prop('checked', false);
                $(this).parent().removeClass('btn-sm btn-success').addClass('btn-danger off btn-sm');
            }else{
                $(this).prop('checked', true);
                $(this).parent().removeClass('btn-danger off btn-sm').addClass('btn-sm btn-success');
            }
        }   
    });
    
    $('#edit_prom_Content').on('click', function() {
        $message = "Are you sure you want to Edit this Content?";
        if(confirm($message)){
            var tempid = $('#template_id').text();
            var temp_content   = $("#temp_content").val().trim();
            $('.loading').css('display','block');
            $.ajax({
                    type: "POST",
                    url: "{{url('updateWhatsappPromoContent')}}",
                    data: {
                        "_token" : "{{ csrf_token() }}",
                        "tempid" : tempid,
                        "temp_content" : temp_content
                    },
                    dataType:'json',
                    success: function(data) {
                        if(data.status=='SUCCESS'){
                            toastr.success(data.message);
                            $("#editContent").modal("hide");
                            $('.loading').css('display','none');
                        }else{
                            toastr.error(data.message);
                            $("#editContent").modal("show");
                        }
                    }
            });
        }
    });
</script>
@endsection