@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
<style>
   #liveads-dashboard-table_length{
display: block;
    }
    .dataTables_scroll {
        overflow: auto;
    }
</style>
@section('page_title') SMS Campaign @endsection
@include('whistle_feed.feed_reports.feed_log_header')
<div class="container-fluid">
	<div class="card">
        <div class="card-header"><h4> <b>Live Ads Dashboard</b>
        @can('hasExcelPermission')
        <form class="pull-right mb-0" action="{{ url('devops/devopsexportliveads') }}" method="POST">
                @csrf
                <button type="submit" class="export-sms-excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
            </form>
            @endif
            </h4>
        </div>
        <div class="card-body table-responsive" >
                    <table class="table table-bordered table-hover" id="liveads-dashboard-table">
                        <thead>
                           <tr>
                            <th scope="col">Sl no</th>
				            <th scope="col">Campaign ID</th>
                            <th scope="col">Creative ID</th>
                            <th scope="col">User ID</th>
                            <th scope="col">Inventory Type</th>
                            <th scope="col">Audience Type</th>
				            <th scope="col">Industry</th>
                            <th scope="col">Brand Name</th>
                            <th scope="col">Language</th>
				            <th scope="col">Headline</th>
                            <th scope="col">Subtext</th>
                            <th scope="col">Background color</th>
				            <th scope="col">Tracker</th>
				            <th scope="col">States</th>
                            <th scope="col">Cities</th>
                            <th scope="col">Platform</th>
				            <th scope="col">Devices</th>
                            <th scope="col">Mobile Brands</th>
                            <th scope="col">Bid Price</th>
                            <th scope="col">Start Date</th>
				            <th scope="col">End Date</th>
                            <th scope="col">CTA</th>
                        </tr>
                        </thead>
                    </table>
                </div>
	</div>
</div>

<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script>
    /* call function while DOM get ready to get all records.*/
getliveadsreport();

// export gateway type report
$(".export-sms-excel").click(function(){
$(this).submit();
});

function getliveadsreport() {
    $.ajax({
        type: "POST",
        url: 'devopDisplayLiveAds',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function (data) {
            var liveadsdata = data['liveadsdata'];
            $("#liveads-dashboard-table").DataTable().clear().destroy();
            $('#liveads-dashboard-table').DataTable({
                data: liveadsdata,
                "autoWidth": false,
                "bLengthChange": true,
                'iDisplayLength': 10,
                "bPaginate": true,
                "scrollY": true,
                "scrollX": true,
                "order": [[0, "asc"]],
                "language": { search: '', searchPlaceholder: "Search..." },
                aoColumns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    { data: "campaign_id" },
                    { data: "creative_id" },
                    { data: "user_id" },
                    { data: "inventory_type" },
                    { data: "audience_type" },
                    { data: "industry" },
                    { data: "brandname" },
                    { data: "language" },
                    { data: "headline" },
                    { data: "subtext" },
                    { data: "background_color" },
                    { data: "tracker" },
                    { data: "states" },
                    { data: "cities" },
                    { data: "platform" },
                    { data: "devices" },
                    { data: "mobile_brands" },
                    { data: "bidprice" },
                    { data: "startdate" },
                    { data: "enddate" },
                    { data: "CTA" }
                ],
                fnRowCallback: function (nRow, aData) {
                    return nRow;
                },
                fnDrawCallback: function (settings) {
                    $('.paginate_button').click(function () {
                        $('.dataTables_scrollBody').scrollTop(0);
                    });
                },
            });
        }
    });
}

</script>
@endsection