@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Dashboard @endsection
<div class="container-fluid">
    <div class="card-header">
        <h3>App Notification Dashboard
            @can('hasExcelPermission')
            <form class="pull-right" method="post" action="{{ url('export_app_notification_dashboard') }}">
                @csrf
                <button type="submit" class="export-app-notification-dashboard-excel btn  btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                <input type="hidden" name="fromdate" id="from_date_hidden" />
                <input type="hidden" name="todate" id="to_date_hidden" />
            </form>
            @endcan
        </h3>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <form class="flex">
                    <div class="form-group col-md-2">
                        <label for="start_date">From Date</label>
                        <input type="text" class="form-control" id="start_date" name="start_date">
                    </div>
                    <div class="form-group col-md-2">
                        <label for="end_date">To Date</label>
                        <input type="text" class="form-control" id="end_date" name="end_date">
                    </div>
                </form>
                <table class="table-bordered table-hover" id="app_notification_dashboard">
                    <thead>
                        <tr>
                            <th>Launch Id</th>
                            <th>Industry</th>
                            <th>Brand Name</th>
                            <th>Campaign Group</th>
                            <th>Campaign Sub Group</th>
                            <th>Campaign Data</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Logo</th>
                            <th>Navigation Screen</th>
                            <th>Image</th>
                            <th>App Name</th>
                            <th>App Id</th>
                            <th>Submitted On</th>
                            <th>Executed On</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </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>
    $(document).ready(function() {
        $('#app_notification_dashboard').DataTable({
            "scrollX": true,
            "bLengthChange": false
        });
        $('#start_date,#end_date').datepicker('setDate', 'today');
        $('#start_date,#end_date').datepicker({
            maxDate: new Date()
        });

        $(".export-app-notification-dashboard-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();
        });
        app_notification_dashboard_data();
    });
    /**select from date here***/
    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function(selectedDate) {
            var startDate = $('#start_date').datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            app_notification_dashboard_data();
        }
    });

    /**select to date here***/
    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: $("#start_date").datepicker("getDate"),
        maxDate: 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function() {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (startDate == null) {
                $('#start_date').datepicker('setDate', endDate);
            }
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
            app_notification_dashboard_data();
        },
    });
    //all records displaying here
    function app_notification_dashboard_data() {
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        $("#app_notification_dashboard").DataTable().clear().destroy();
        $('#app_notification_dashboard').DataTable({
            "processing": true,
            "lengthChange": false,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "scrollX": true,
            "ordering": true,
            "lengthChange": false,
            "language": {
                search: "",
                searchPlaceholder: "Search..."
            },
            "order": [
                [0, "desc"]
            ],
            "ajax": {
                "url": "{{ url('app_notification_dashboard') }}",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                    "start_date": start_date,
                    "end_date": end_date,
                },
                "dataType": "json",
            },
            "columnDefs": [{
                orderable: false,
                targets: 0
            }],
            "columns": [{
                    data: "id",
                    render: function(data, type, row, meta) {
                        return ((row.id) ? row.id : "NA")
                    }
                },
                {
                    data: "type_name",
                    render: function(data, type, row, meta) {
                        return ((row.type_name) ? row.type_name : "NA")
                    }
                },
                {
                    data: "campaign_name",
                    render: function(data, type, row, meta) {
                        return ((row.campaign_name) ? row.campaign_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: "title",
                    render: function(data, type, row, meta) {
                        return ((row.title) ? row.title : "NA")
                    }
                },
                {
                    data: "description",
                    render: function(data, type, row, meta) {
                        return ((row.description) ? row.description : "NA")
                    }
                },
                {
                data: "logo",
                render: function(data, type, row, meta) {
                    let new_data = '<a href="' + (row.logo ? row.logo : "#!") + '" '+(row.logo ? "target='_blank'" : "No Image")+' > '+(row.logo ? "View Logo" : "NA")+'</a>';
                    return new_data;
                }
                },
                {
                    data: "landing_page",
                    render: function(data, type, row, meta) {
                        return ((row.landing_page) ? row.landing_page : "NA")
                    }
                },
                {
                    data: "upload_image",
                    render: function(data, type, row, meta) {
                        let new_data = '<a href="' + (row.upload_image ? "{{ env('AWS_S3_APP_NOTIFICATION_IMAGE_LINK') }}"+row.upload_image : "#!") + '" '+(row.upload_image ? "target='_blank'" : "No Image")+' > '+(row.upload_image ? "View Uploaded Image" : "NA")+' </a>';
                        return new_data;
                    }
                },
                {
                    data: "app_name",
                    render: function(data, type, row, meta) {
                        return ((row.app_name) ? row.app_name : "NA")
                    }
                },
                {
                    data: "app_id",
                    render: function(data, type, row, meta) {
                        return ((Number.isInteger(row.app_id)) ? row.app_id : "NA")
                    }
                },
                {
                    data: "created_time",
                    render: function(data, type, row, meta) {
                        return ((row.created_time && row.created_on) ? (row.created_on+' '+row.created_time) : "NA")
                    }
                },
                {
                    data: "executed_on",
                    render: function(data, type, row, meta) {
                        return ((row.executed_on) ? row.executed_on : "NA")
                    }
                },
                {
                    data: "status",
                    render: function(data, type, row) {
                        var status = '';
                        if (data == '0') {
                            status = 'In queue';
                        } else if (data == '1') {
                            return 'Submitted';
                        } else if (data == '2') {
                            status = 'Processing';
                        } else {
                            status = 'Failed';
                        }
                        return status;
                    }
                },
            ],
        });
    }
</script>
@endsection