@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') RCS Dashboard @endsection
<style> 
    .form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio{
        display: unset;
    }
    
    .dropdown-item{
        font-size: 0.9rem !important;
    }
    .mb-n4{
        margin-bottom: 0rem !important;
    }
    table{
        text-align: center;
    }
    .card{
        margin-bottom: 20px;        
    }
    #rcs_dashboard_filter {
        margin-top: -28px;
    }
    </style>
<script>
   
$(document).ready(function(){

    $('#rcs_dashboard').DataTable({"scrollX": true, "bLengthChange": false  });
    $('#start_date,#end_date').datepicker('setDate', 'today');
    $('#start_date,#end_date').datepicker({  maxDate: new Date() });

    $(".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();
    });
    rcsdashboard_data();
});
    
</script>

<div class="container-fluid">
<!-- @include('dashboard.whistle_dashboard_header') -->
    <div class="card ">
        <div class="row ml-0 mr-0 mt-4 mb-n4">
            <div class="form-group col-md-2">@include('rcs_menu')</div>
                @can('hasExcelPermission')
                    <div class="col-md-10">
                        <form class="pull-right mr-3" method="post" action="{{ url('export_rcs_partner_dashboard') }}">
                            @csrf
                            <button type="submit" class="export-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>
                    </div>    
                @endcan
        </div>

        <div class="d-flex flex-wrap">
            <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">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">
            </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>
            </div>
    </form>
        <table class="table-bordered table-hover" id="rcs_dashboard">
            <thead>
                <tr>
                    <th>Bot Name</th>
                    <th>Bot Type</th>
                    <th>Bot Message Type</th>
                    <th>Organisation Name</th>
                    <th>Primary Number</th>
                    <th>Primary Email</th>
                    <th>Website</th>
                    <th>Language Supported</th>
                    <th>Created On</th>
                    <th>Name</th>
                    <th>Tech Job Title</th>
                    <th>Tech Email</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
    </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>

    var start_date = end_date = '';

        $("#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);
            rcsdashboard_data();
            $('#period_filter').val('');
            // $('.rcs-filter').prop('checked', false);
        }
    });

    $("#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 (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
            rcsdashboard_data();
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $('#langOpt').change(function(){
        var parent_id = $(this).val();
        rcsdashboard_data();
    });


    $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).val();

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

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

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

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

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

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

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


        function rcsdashboard_data(){
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            $("#rcs_dashboard").DataTable().clear().destroy();

            $('#rcs_dashboard').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": [[0, "desc"]],
                    "ajax": {
                        type: "POST",
                        url: 'getRcsPartnerDashboard',
                        data: function(d) {
                            d._token = "{{ csrf_token() }}";
                            d.start_date = $('#start_date').val();
                            d.end_date = $('#end_date').val();
                        },
                        dataSrc: function(json) {
                            return json.data; 
                        }
                    },
                    "columns": [
                        { "data": "bot_name" },
                        { "data": "bot_type" },
                        { "data": "bot_message_type" },
                        { data: "orgname",
                            render: function(data, type, row, meta){
                                if(row.logo){
                                    let path = row.logo;
                                    let download_element = `<a href="getFileFromBucket?path=${path}"  data-path="${path}" class="file_down"> <i class="fa fa-cloud-download" aria-hidden="true"></i></a> `;
                                    return row.orgname+" "+download_element;
                                }
                                else return row.orgname;
                            }
                        }, 
                        { "data": "phone" },
                        { "data": "email" },
                        { "data": "website" },
                        { "data": "language_supported" },
                        { "data": "created_on" },
                        { "data": "name" },
                        { "data": "techjobtitle" },
                        { "data": "techemail" }
                    ]
                });
            }
</script>
@endsection