@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
SMS Landing Page
@endsection
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3> SMS Landing Page Report
            @can('hasExcelPermission')
                <form action="{{ url('exportSmsLandingPage') }}" class="pull-right">
                    @csrf
                    <button type="submit" class="landingpage_excel_btn 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-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-bordered table-hover" id="sms-landing-table">
                <thead>
                    <tr>
                        <th>Sr.no</th>
                        <th>UserName</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Web Url</th>
                        <th>Utm Source</th>
                        <th>Utm Medium</th>
                        <th>Created On</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 src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>

/* call function while DOM get ready to get all records.*/
getsmslandinglist();
$(".landingpage_excel_btn").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);
        getsmslandinglist();
        $('#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);
        }
        getsmslandinglist();
    },
    onSelect: function () {
        $('#period_filter').val('');
    }
});

$("body").on("change", "#period_filter", function () {
    var periodValue = $(this).val();
    $("#start_date").val('');
    $("#end_date").val('');
    if (periodValue == '') {
        getsmslandinglist();
    }
    //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);
        getsmslandinglist();
    }

    //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);
        getsmslandinglist();
    }

    //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);
        getsmslandinglist();
    }

    //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);
        getsmslandinglist();
    }

    //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);
        getsmslandinglist();
    }

    //filter by this year
    else if (periodValue == '6') {
        var end_date = new Date().toJSON().slice(0, 10);
        var makeDate = new Date(end_date);
        var start_date = new Date(makeDate.setMonth(0));
        start_date = new Date(makeDate.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);
        getsmslandinglist();
    }
    //filter by previous year
    else if (periodValue == '7') {
        var end_date = new Date();
        var start_date = new Date();
        end_date = new Date(end_date.setMonth(0));
        end_date = new Date(end_date.setDate(1) - 864e5).toJSON().slice(0, 10);
        start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
        start_date = new Date(start_date.setMonth(0));
        start_date = new Date(start_date.setDate(1)).toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        getsmslandinglist();
    }
});



//all records displaying here

function getsmslandinglist() {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    $.ajax({
        type: "POST",
        url: 'smsLandingPage',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            "start_date": start_date,
            "end_date": end_date,
        },
        success: function (data) {
            var landingpagedata = data['data'];
            $("#sms-landing-table").DataTable().clear().destroy();
         var table = $('#sms-landing-table').DataTable({
                data: landingpagedata,
                "bLengthChange": false,
                "scrollX": true,
                "pageLength": 50,
                "scrollY":  400,
                "scrollCollapse": true,
                "fixedHeader":{ header: true},
                language: { search: '', searchPlaceholder: "Search..." },
                scrollCollapse: true,
                aoColumns: [
                    { data: "", render: function ( data, type, row ) {
                        return '';
				    }
                    },
                    {
                        data: "username"
                    },
                    {
                        data: "mobile"
                    },
                    {
                        data: "email"
                    },
                    {
                        data: "city"
                    },
                    {
                        data: "web_url"
                    },
                    {
                        data: "utm_source"
                    },
                    {
                        data: "utm_medium"
                    },
                    {
                        data: "created_on"
                    },
                ],
                order:[],
                fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $('td:eq(0)', nRow).html(iDisplayIndexFull + 1);
                    return nRow;
                },
                "fnDrawCallback": function () {
                    $('.paginate_button').click(function(){
                        $('.dataTables_scrollBody').scrollTop(0);
                    })
                }
            });
        }
    });
}
</script>
@endsection