@extends('layouts.app')
@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">

@endsection
@section('content')
@section('page_title')
Email Dashboard
@endsection

<style>
    .view_log_btn{
        background-color: #4CAF50;
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 10px;
        padding: 4px;
    }
</style>

<div class="container-fluid" >
    <div class="card-header flex justify-content-between">
        <h3>Email Dashboard</h3>
    </div>
    <div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="dashboardemail">
                <thead>
                    <tr>
                        <th>Sl. NO.</th>
                        <th>Launch ID</th>
                        <th>Brand Name</th>
                        <th>Industry</th>
                        <th>Campaign group</th>
                        <th>Campaign sub group</th>
                        <th>Campaign data</th>
                        <th>Username</th>
                        <th>Total pushed</th>
                        <th>Total Submitted</th>
                        <th>Blacklist count</th>
                        <th>Duplicate count</th>
                        <th>Exclude Unsubscribe count</th>
                        <th>Exclude Invalid count</th>
                        <th>Invalid count</th>
                        <th>Unsubscribe count</th>
                        <th>Bounced count</th>
                        <th>Dropped count</th>
                        <th>Total open</th>
                        <th>Total clicks</th>
                        <th>Total unique clicks</th>
                        <th>Mail Server</th>
                        <th>Account Name</th>
                        <th>Template ID</th>
                        <th>Sender Name</th>
                        <th>From Mail</th>
                        <th>X API Header</th>
                        <th>Submitted On</th>
                        <th>Executed On</th>
                        <th>UCR%</th>
                        <th>CTR%</th>
                        @can('hasLogsPermission')
                        <th>View Logs</th>
                        @endcan
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<!-- --- view log Section Start -->
<div class="modal fade" id="logModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content logmodelcontent">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body logmodalbody">
            <p id="logdata"></p>
            </div>
            <div class="modal-footer logmodalfooter">
            </div>
        </div>
    </div>
</div>
<!-- --- view log Section end-->
<script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>
    dashboardemail();
function dashboardemail() {
    $("#dashboardemail").DataTable().clear().destroy();
    $("#dashboardemail").DataTable({
        "autoWidth": false,
        "processing": true,
        "serverSide": true,
        "paging": true,
        "searching": true,
        "scrollX": true,
        "scrollCollapse": true,
        "scrollY":  400,
        "lengthChange": false,
        "pageLength":20,
        "bLengthChange": true,
        "ordering": true,
        "language": {
            search: '',
            searchPlaceholder: "Search..."
        },
        "order": [
            [1, "desc"]
        ],
        "ajax": {
            "url": "{{ url('/emailDashboard') }}",
            "dataType": "json",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
            },
        },
        "columns": [
            { 
                data: null, 
                orderable: false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: "id",
                render: function(data, type, row, meta) {
                    return ((row.id) ? row.id : "NA")
                }
            },
            { 
                data: "campaign_name", 
                render: function(data, type, row, meta) {
                    return ((row.campaign_name) ? row.campaign_name : "NA")
                }
            },
            { 
                data: "type_name",
                render: function(data, type, row, meta) {
                    return ((row.type_name) ? row.type_name : "NA")
                }
            },
            { 
                data: "group_name", 
                render: function(data, type, row, meta) {
                    return ((row.group_name) ? row.group_name : "NA")
                }
            },
            { 
                data: "sub_group_name", 
                render: function(data, type, row, meta) {
                    return ((row.sub_group_name) ? row.sub_group_name : "NA")
                }
            },
            { 
                data: "type",
                render: function(data, type, row, meta) {
                    return ((row.type) ? row.type : "NA")
                }
            },
            { 
                data: "username", 
                render: function(data, type, row, meta) {
                    return ((row.username) ? row.username : "NA")
                }
            },
            { 
                data: "pushed_volume", 
                render: function(data, type, row, meta) {
                    return ((row.pushed_volume) ? row.pushed_volume : "NA")
                }
            },
            { 
                data: "volume_count",
                render: function(data, type, row, meta) {
                    return ((row.volume_count) ? row.volume_count : "NA")
                }
            },
            { 
                data: "blacklist_count", 
                render: function(data, type, row, meta) {
                    return ((row.blacklist_count) ? row.blacklist_count : "NA")
                }
            },
            { 
                data: "duplicate_count", 
                render: function(data, type, row, meta) {
                    return ((row.duplicate_count) ? row.duplicate_count : "NA")
                }
            },
            { 
                data: "unsubscribed_count", 
                render: function(data, type, row, meta) {
                    return ((row.unsubscribed_count) ? row.unsubscribed_count : "NA")
                }
            },
            { 
                data: "invalid_count", 
                render: function(data, type, row, meta) {
                    return ((row.invalid_count) ? row.invalid_count : "NA")
                }
            },
            { 
                data: "cam_invalid_count", 
                render: function(data, type, row, meta) {
                    return ((row.cam_invalid_count) ? row.cam_invalid_count : "NA")
                }
            },
            { 
                data: "cam_unsubscribed_count", 
                render: function(data, type, row, meta) {
                    return ((row.cam_unsubscribed_count) ? row.cam_unsubscribed_count : "NA")
                }
            },
            { 
                data: "cam_bounce_count", 
                render: function(data, type, row, meta) {
                    return ((row.cam_bounce_count) ? row.cam_bounce_count : "NA")
                }
            },
            { 
                data: "cam_drop_count", 
                render: function(data, type, row, meta) {
                    return ((row.cam_drop_count) ? row.cam_drop_count : "NA")
                }
            },
            { 
                data: "opens", 
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            { 
                data: "clicks", 
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            { 
                data: "unique_clicks", 
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "server_name",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "account_name",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "template_id",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "sender_name",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "from_mail",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "x_api_header",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "created_on",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            {
                data: "executed_on",
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            { 
                data: "UCR", 
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            { 
                data: "CTR", 
                render: function(data, type, row, meta) {
                    return (data !== null) ? data : "NA";
                }
            },
            @can('hasLogsPermission')
                {
                    data: "logfile_name",
                    render: function(data, type, row, meta) {
                        let log_file = row.logfile_name;
                        let d = `<button class='view_log_btn' data-toggle='modal' data-info=${row.logfile_name}><span class='glyphicon glyphicon-edit'></span>View log</button>`;
                        let download_button = `<button class="log-modal-download" data-info="${row.logfile_name}"><i class="fa fa-download" aria-hidden="true"></i></button>`;

                        if(log_file!=null){
                            return d+=download_button;
                        }
                        return `<button class='view_log_btn_disabled' disabled ><span class='glyphicon glyphicon-edit'></span>View log</button>`;
                    }
                },
            @endcan
        ],
    });
}
/* fetch logs records*/
$(document).on('click', '.view_log_btn', function() {
        var logfile_name = $(this).data('info');
        $('.loading').css('display','block');
        $.ajax({
            type: 'post',
            url: 'logfile',
            data: {
                "_token": "{{ csrf_token() }}",
                "logfile": logfile_name
            },
            success: function(data) {
                $('.loading').css('display','none');
                if(data){
                    $('#logModal').modal('show');
                    $('#logdata').text(data);
                } else{
                    alert('log file not found.');
                }
            },
            error: function(xhr, status, error) {
            $('.loading').css('display','none');
            // Show an error message to the user
            alert('log file not found.');
            }
        });
    });

// Download the log file when clicked
$(document).on('click', '.log-modal-download', function() {
        var logfile_name = $(this).data('info');
        $('.loading').css('display','block');
        $.ajax({
            type: 'post',
            url: 'logfile',
            data: {
                "_token": "{{ csrf_token() }}",
                "logfile": logfile_name
            },
            success: function(data) {
                $('.loading').css('display','none');
            var blob = new Blob([data], { type: 'text/plain' });
            var downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(blob);
            downloadLink.download = logfile_name + '.log';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            },
            error: function(xhr, status, error)
            {
                $('.loading').css('display','none');
                alert('log file not found.');
            }
        });
    });
</script>
@endsection