@extends('layouts.app') @section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection @section('content') @section('page_title') Whistle Leads
Details list @endsection
<style>
#datalist_filter{
    margin-top: -48px;
    margin-bottom: 40px;
 }
</style>
<div class="container-fluid">
	<div class="card">
        <div class="card-header">
            <h3>Whistle Leads
            @can('hasExcelPermission')
                <form class="pull-right" method="post" action="{{ url('exportOrganicReport') }}">
                    @csrf
                    <button type="submit" class="export-account-list btn excel-btn btn-sm 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-body table-responsive">
            <form class="flex">
                <div class="form-group col-md-2">
                    <label for="period_filter">Choose Time Period</label>
                    <select id="period_filter" class="form-control">
                        <option value=''>Select</option>
                        <option value="1" selected>Today</option>
                        <option value="2">Yesterday</option>
                        <option value="3">This Month</option>
                        <option value="4">Last Month</option>
                        <option value="5">Last 6 Months</option>
                        <option value="6">This Year</option>
                        <option value="7">Last Year</option>
                    </select>
                </div>
                <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" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </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" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>
            </form>
				<table class="table table-bordered table-hover text-center" id="datalist">
					<thead>
						<tr>
                            <th>Sl.No</th>
                            <th>Account ID</th>
                            <th>Organisation Name</th>
                            <th>UserName</th>
                            <th>Account Category</th>
                            <th>Email</th>
                            <th>Mobile Number</th>
                            <th>No. of Sub-Users</th>
                            <th>UTM Medium</th>
                            <th>UTM Source</th>
                            <th>Created On</th>
                            <th>Last Logged In</th>
                            <th>Last Campaign Date</th>
                            <th>Credit Balance</th>
                            <th>Total Launch</th>
                            <th>Total Spends</th>
                            <th>Total SMS Units</th>
                            <th>Total Clicks</th>
                            <th>PAN Number</th>
                            <th>GST Number</th>
                            <th>State</th>
                            <th>City</th>
                            <th>Pincode</th>
                            <th>Account Manager</th>
                            <th>Relationship Manager</th>
                            <th>Last Payment Amount</th>
                            <th>Last Payment Date</th>
                            <th>No. of Payments</th>
                            <th>Account Type</th>
                            <th>Boarding Status</th>
                            <th>Type of Sales</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>
    $(document).ready(function () {
        whistleLeads();
    });
    $(".export-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();
    });
    /**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);
            whistleLeads();
            $('#period_filter').val('');
        }
    });
    /**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);
            }
            whistleLeads();
        },
        onSelect: function () {
            $('#period_filter').val('');
        }
    });
    $("body").on("change", "#period_filter", function () {
        var periodValue = $(this).val();
        $("#start_date").val('');
        $("#end_date").val('');
        if (periodValue == '') {
            whistleLeads();
        }
        //filter by today
        if (periodValue == '1') {
            var start_date = new Date().toJSON().slice(0, 10);
            var end_date = new Date().toJSON().slice(0, 10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            whistleLeads();
        }
        //filter by yesterday
        else if (periodValue == '2') {
            var start_date = new Date(Date.now() - 864e5).toJSON().slice(0, 10);
            var end_date = new Date(Date.now() - 864e5).toJSON().slice(0, 10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            whistleLeads();
        }
        //filter by this month
        else if (periodValue == '3') {
            var start_date = new Date();
            var end_date = new Date().toJSON().slice(0, 10);
            start_date = new Date(start_date.setMonth(start_date.getMonth()));
            start_date = new Date(start_date.setDate(1));
            start_date = start_date.toJSON().slice(0, 10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            whistleLeads();
        }
        //filter by last month
        else if (periodValue == '4') {
            var start_date = new Date();
            var end_date = new Date();
            start_date = new Date(start_date.setDate(1));
            start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
            start_date = start_date.toJSON().slice(0, 10);
            end_date = new Date(end_date.setDate(1) - 864e5);
            end_date = end_date.toJSON().slice(0, 10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            whistleLeads();
        }
        //filter by last 6 month
        else if (periodValue == '5') {
            var start_date = new Date();
            var end_date = new Date();
            end_date = new Date(end_date.setDate(1) - 864e5);
            end_date = end_date.toJSON().slice(0, 10);
            start_date = new Date(start_date.setDate(1));
            start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
            start_date = start_date.toJSON().slice(0, 10);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            whistleLeads();
        }
        //filter by this year
    });
    function whistleLeads(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
		$("#datalist").DataTable().clear().destroy();
        $('#datalist').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "scrollX": true,
            "language": {
                search: '',
                searchPlaceholder: "Search..."
            },
            "order": [
                [0, "desc"]
            ],
            "ajax":{
                    "url": "{{ url('getOrganicLead') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data":{
                        _token: "{{csrf_token()}}",
                        start_date: start_date,
                        end_date: end_date
                    }
                   },
            "columns": [
                { data: "id",
                    render: function(data, type, row, meta){
                    	return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
            	{ data: "account_id",
                    render: function(data, type, row, meta){
                    return ((row.account_id)  ? row.account_id :  "NA")
                }
                },
                { data: "account_name",
                    render: function(data, type, row, meta){
                    return ((row.account_name)  ? row.account_name :  "NA")
                }
                },
                { data: "username",
                    render: function(data, type, row, meta){
                    return ((row.username)  ? row.username :  "NA")
                }
                },
                { data: "account_category",
                    render: function(data, type, row, meta){
                    return ((row.account_category == 0)  ? "Not Assigned" :  "NA")
                }
                },
                { data: "email",
                    render: function(data, type, row, meta){
                    return ((row.email)  ? row.email :  "NA")
                }
                },
                { data: "mobile_number",
                    render: function(data, type, row, meta){
                    return ((row.mobile_number)  ? row.mobile_number :  "NA")
                }
                },
                { data: "sub_users",
                    render: function(data, type, row, meta){
                    return ((row.sub_users)  ? row.sub_users :  "NA")
                }
                },
                { data: "utm_medium",
                    render: function(data, type, row, meta){
                    return ((row.utm_medium)  ? row.utm_medium :  "NA")
                }
                },
                { data: "utm_source",
                    render: function(data, type, row, meta){
                    return ((row.utm_source)  ? row.utm_source :  "NA")
                }
                },
                { data: "created_on" },
                { data: "last_loggedin",
                    render: function(data, type, row, meta){
                    return ((row.last_loggedin ==null)  ? "No Login" : row.last_loggedin)
                }
                },
                { data: "last_campaign_date",
               render: function(data, type, row, meta){
                    return ((row.last_campaign_date ==null)  ? "No Campaigns" : row.last_campaign_date)
                    }
                },
                { data: "credits" },
           { data: "total_launch" },
           { data: "total_spends",
               render: function(data, type, row, meta){
                   return ((row.total_spends =='0.000')  ? "0" : row.total_spends)
               }
           },
           { data: "total_units" },
           { data: "total_clicks" },
           { data: "pan_number",
            render: function(data, type, row, meta){
                return ((row.pan_number)  ? row.pan_number :  "NA")
            }
           },
           { data: "GST",
            render: function(data, type, row, meta){
                return ((row.GST)  ? row.GST :  "NA")
            }
           },
           { data: "state",
            render: function(data, type, row, meta){
                return ((row.state)  ? row.state :  "NA")
            }
           },
           { data: "city",
            render: function(data, type, row, meta){
                return ((row.city)  ? row.city :  "NA")
            }
           },
           { data: "pincode",
            render: function(data, type, row, meta){
                return ((row.pincode)  ? row.pincode :  "NA")
            }
           },
           { data: "account_manager",
            render: function(data, type, row, meta){
                return ((row.account_manager)  ? row.account_manager :  "Not Assigned ")
            }
           },
           { data: "relation_manager",
            render: function(data, type, row, meta){
                return ((row.relation_manager)  ? row.relation_manager :  "Not Assigned")
            }
           },
           { data: "last_payment_amt",
            render: function(data, type, row, meta){
                return ((row.last_payment_amt)  ? row.last_payment_amt :  "No Payment")
            }
           },
           { data: "last_payment_date",
            render: function(data, type, row, meta){
                return ((row.last_payment_date)  ? row.last_payment_date :  "No Payment")
            }
           },
           { data: "num_pay_till_date",
            render: function(data, type, row, meta){
                return ((row.num_pay_till_date)  ? row.num_pay_till_date :  "0")
            }
           },
           { data: "user_type",
              render: function(data, type, row, meta){
                if(row.user_type == 1){
                  data = '<label class="greenIcon">Postpaid</label>';
                }else{
                  data = '<label class="redIcon">Prepaid</lable>';
                }   
                return data;
              }
           },
           { data: "boarding_status",
              render: function(data, type, row, meta){
                if(row.boarding_status == 1){
                  data = 'Onboarded';
                }else{
                  data = 'Not Onboarded';
                }   
                return data;
              }
           },
           { data: "sales_type",
            render: function(data, type, row, meta){
                if(row.sales_type == 'N'){
                  data = 'New';
                }else if(row.sales_type=='R'){
                  data = 'Retention';
                }else {
                     data = '-';
                 }
                return data;
            }
           },

            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
        });
    }

    $(".export-account-list").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();
    });
</script>
@endsection