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

@section('content')
@section('page_title')Whatsapp Account List @endsection

<div class="container-fluid">
    <div class="card-header flex justify-content-between">
        <h3>Whatsapp Accounts List </h3>
        @can('hasAddPermission')
        <div>
            <a href="{{url('createwhatsappaccount')}}" class="btn btn-sm btn-dark">Create WhatsApp Account</a>
        </div>
        @endcan
    </div>

    <div class="card">
        <div class="card-body">
            <div class="d-inline-flex">
                <div class="form-group col-md-3"> 
                    <label for="start_date">Choose Account &nbsp; </label><br>
                    <select class="form-control" name="langOpt[]" multiple id="langOpt">
                        <optgroup label="ACTIVE">
                            @if(count($accname)>0)
                            @foreach ($accname as $key => $value)
                            @if( $value->status > 0)
                                <option value="{{ $value->id }}">{{ $value->account_name }}-({{ $value->id }})</option>
                                @endif
                                @endforeach
                            @endif
                            </optgroup>
                            <optgroup label="INACTIVE">
                            @if(count($accname)>0)
                            @foreach ($accname as $key => $value)
                            @if( $value->status == 0)
                                <option value="{{ $value->id }}">{{ $value->account_name }}-({{ $value->id }})</option>
                                @endif
                            @endforeach
                            @endif
                        </optgroup>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label>Account Number</label>
                    <input type="text" class="form-control" id="whatsapp_acc_num" name="whatsapp_acc_num" placeholder="Search Account Number " onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                </div>
                <div class="form-group col-md-2">
                    <label>Account Name</label>
                    <input type="text" class="form-control" id="whatsapp_acc_name" name="whatsapp_acc_name" placeholder="Search Account Name">
                </div>
                <div class="form-group col-md-2">
                    <label for="period_filter">Choose Time Period</label>
                    <select id="period_filter" class="form-control">
                        <option value='' selected>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" placeholder="Select Date" value="">
                </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="">
                </div>
            </div>
            <div class="table-responsive">
                <table class="table-bordered" id="whatsapp_table">
                    <thead>
                        <tr>
                            <th>S.no</th>
                            <th>Organization</th>
                            <th>Email</th>
                            <th>Platform Type</th>
                            <th>Account Name</th>
                            <th>Account Number</th>
                            <th>Username</th>
                            <th>Password</th>
                            <th>Business Status</th>
                            <th>Business Quality</th>
                            <th>Number Quality </th>
                            <th>Message Limit</th>
                            <th>Number Status </th>
                            <th>Billable Count</th>
                            <th>Created On</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script>
$(document).ready(function() {
    getWhatsappList();
    /**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');
            var todaysDate = new Date();
            var client_id = $('#client_filter').val();
            if (todaysDate.setHours(0,0,0,0) == startDate.setHours(0,0,0,0)) {
                $('#end_date').datepicker('option', 'maxDate', startDate);
            } else {
                $('#end_date').datepicker('option', 'maxDate', "-1D");
                $('#end_date').datepicker('option', 'minDate', startDate);
            }
            $('#end_date').datepicker('setDate', startDate);
            var account_id = $("#langOpt").val();
            var whatsapp_acc_num = $("#whatsapp_acc_num").val();
            var whatsapp_acc_name = $("#whatsapp_acc_name").val();
            getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            $('#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);
            }
            var account_id = $("#langOpt").val();
            var whatsapp_acc_num = $("#whatsapp_acc_num").val();
            var whatsapp_acc_name = $("#whatsapp_acc_name").val();
            getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $("body").on("change", "#period_filter", function(){
        var periodValue = $(this).val();
        var account_id = $("#langOpt").val();
        var whatsapp_acc_num = $("#whatsapp_acc_num").val();
        var whatsapp_acc_name = $("#whatsapp_acc_name").val();
        $("#start_date").val('');
        $("#end_date").val('');
        if(periodValue!=''){
            //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', 'maxDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
            //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);
                console.log(start_date);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'maxDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
            //filter by this month
            else if(periodValue=='3'){
                var start_date = new Date();
                var end_date = new Date();
                end_date =   end_date.setDate(end_date.getDate() - 1);
                end_date = new Date(end_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);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
            //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);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
            //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);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
            //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);
                console.log(start_date);

                end_date = new Date();
                end_date =   end_date.setDate(end_date.getDate() - 1);
                end_date = new Date(end_date).toJSON().slice(0, 10);
                console.log(end_date);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
            //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').val(end_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
            }
        } else {
            getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name);
        }
    });
    $('#langOpt').change(function(){
        var account_id =  $(this).val();
        var whatsapp_acc_num = $("#whatsapp_acc_num").val();
        var whatsapp_acc_name = $("#whatsapp_acc_name").val();
        getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name);
    });

     /*WhatsApp Account Number  filter*/
     $("#whatsapp_acc_num").keyup(function(){
        var account_id = $("#langOpt").val();
        var whatsapp_acc_num = $(this).val();
        var whatsapp_acc_name = $("#whatsapp_acc_name").val();
        getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
    });

    $("#whatsapp_acc_name").keyup(function(){
        var account_id = $("#langOpt").val();
        var whatsapp_acc_num = $("#whatsapp_acc_num").val();
        var whatsapp_acc_name = $(this).val();
        getWhatsappList(account_id,whatsapp_acc_num,whatsapp_acc_name); 
    });
});
    //    fetch all data in data-table
    function getWhatsappList(account_id=null,whatsapp_acc_num=null,whatsapp_acc_name=null) {
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        $("#whatsapp_table").DataTable().clear().destroy();
        $('#whatsapp_table').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "scrollX": true,
            "scrollY":  400,
            "pageLength": 20,
            "scrollCollapse": true,
            "order": [
                [0, "desc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
            },
            "ajax": {
                "url": "{{ url('getWhatsappAccountList') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                    "parent_id": account_id,
                    "whatsapp_acc_num": whatsapp_acc_num,
                    "whatsapp_acc_name":whatsapp_acc_name,
                    "start_date" : start_date,
                    "end_date"   : end_date,
                },
            },
            aoColumns: [{
                    data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data:"organization",
                    render: function(data, type, row, meta){
                        return ((row.organization) ? row.organization : "NA")
                    }
                },
                {
                    data:"email",
                    render: function(data, type, row, meta){
                        return ((row.email) ? row.email : "NA")
                    }
                },
                {
                    data: "platform_type",
                    render: function(data, type, row, meta) {
                        return ((row.platform_type == 1) ? "Route"  : row.platform_type==2?'Pinnnacle':'Cloud API');
                    }
                },
                {
                    data: "account_name",
                    render: function(data, type, row, meta) {
                        return ((row.account_name) ? row.account_name : "NA")
                    }
                },
                {
                    data: "account_number",
                    render: function(data, type, row, meta) {
                        return ((row.account_number) ? row.account_number : "NA")
                    }
                },
                {
                    data: "username",
                    render: function(data, type, row, meta) {
                        return ((row.username) ? row.username : "NA")
                    }
                },
                {
                    data: "password",
                    render: function(data, type, row, meta) {
                        let inp = ``;
                        return ((row.password) ? row.password : "NA")
                    }
                },
                {
                    data: "waba_status",
                    render: function(data, type, row, meta) {
                        if (row.waba_status == 'CONNECTED'){
                            return '<span class="waba-quality-high">' + (row.waba_status ? row.waba_status : 'NA') + '</span>';
                        } else {
                            return (row.waba_status ? row.waba_status : 'NA');
                        }
                    }
                },
                {
                    data: "waba_quality",
                    render: function(data, type, row, meta) {
                        if (row.waba_quality == 'High') {
                            return '<span class="waba-quality-high">' + (row.waba_quality ? row.waba_quality : 'NA') + '</span>';
                        } else if (row.waba_quality == 'Low') {
                            return '<span class="waba-quality-low">' + (row.waba_quality ? row.waba_quality : 'NA') + '</span>';
                        } else if (row.waba_quality == 'Medium'){
                            return '<span class="waba-quality-medium">' + (row.waba_quality ? row.waba_quality : 'NA') + '</span>';
                        } else {
                            return (row.waba_quality ? row.waba_quality : 'NA');
                        }
                    }
                },
                {
                    data: "number_quality",
                    render: function(data, type, row, meta) {
                        if (row.number_quality == 'High') {
                            return '<span class="number-quality-high">' + (row.number_quality ? row.number_quality : 'NA') + '</span>';
                        } else if (row.number_quality == 'Low') {
                            return '<span class="number-quality-low">' + (row.number_quality ? row.number_quality : 'NA') + '</span>';
                        } else if (row.number_quality == 'Medium'){
                            return '<span class="number-quality-medium">' + (row.number_quality ? row.number_quality : 'NA') + '</span>';
                        } else {
                            return (row.number_quality ? row.number_quality : 'NA');
                        }
                    }
                },
                {
                    data: "messaging_limit",
                    render: function(data, type, row, meta) {
                        return '<span class="messaging_limit">' + ((row.messaging_limit) ? row.messaging_limit : "NA")
                    }
                },
                {
                    data: "number_status",
                    render: function(data, type, row, meta) {
                        return '<span class="number_status">' +((row.number_status) ? row.number_status : "NA")
                    }
                },
                {
                    data: "billable_count",
                    render: function(data, type, row, meta) {
                        return ((row.billable_count) ? row.billable_count : "NA")
                    }
                },
                {
                    data: "created_at",
                    render: function(data, type, row, meta) {
                        return ((row.created_at) ? row.created_at : "NA")
                    }
                },
                {
                    data: "status",
                    render: function(data, type, row, meta) {
                        data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event" data-toggle="toggle" data-offstyle="danger" data-on="Active" data-off="De-Active" data-size="small" data-info="'+row.id+'" >';
                        return data;
                    }
                },
                { 
                    data: "",
                    render: function(data, type, row, meta){
                        data = '<a id="edit'+row.id+'" title="Edit WhatsApp Account" href="editWhatsappAccount/'+row.id +'" class="btn btn-info edit-data fa fa-edit cursor-pointer greyIcon creditbtn '+(row.status == 0 ? 'disabled':'active')+'">Edit</a>';
                        return data;
                    }
                },
            ],
            "fnDrawCallback": function () {
                jQuery('.toggle-event').bootstrapToggle();
            }
        });
    }

    $(document).ready(function() {
        $('.toggle-event').bootstrapToggle();
        $(document).on('change', '.toggle-event', function (e) {
            let click_val = $(this).prop('checked');
            let id_val = $(this).attr('data-info');
            let url;
            if(click_val)
            { 
                click_val = 1;
                $(this).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
                $message = "Are you sure you want to Activate this Template?";
            }else{
                click_val = 0;
                $(this).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
                $message = "Are you sure you want to Deactive this Template?";
            }
            if(confirm($message)){
                $.ajax({
                    type: "POST",
                    url: "{{ url('/whatsappStatus') }}",
                    data: {
                        "_token" : "{{ csrf_token() }}",
                        "row_id" : id_val,
                        "action" : click_val
                    },
                    dataType:'json',
                    success: function(data) {
                        if(click_val){
                            $('#'+data.row_id).parent().removeClass("btn-danger off").addClass('btn-success');
                            $('#edit'+data.row_id).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
                            toastr.success('Activated Successfully !!');
                        }else{
                            $('#'+data.row_id).parent().removeClass("btn-success").addClass('btn-danger off');
                            $('#edit'+data.row_id).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
                            toastr.error('De-Activated Successfully !!');
                        }
                    }
                
                });
            }else {
                if(click_val == 1){
                    $(this).prop('checked', false);
                    $(this).parent().removeClass('btn-sm btn-success').addClass('btn-danger off btn-sm');
                    $('#edit' + id_val).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
                }else{
                    $(this).prop('checked', true);
                    $(this).parent().removeClass('btn-danger off btn-sm').addClass('btn-sm btn-success');
                    $('#edit' + id_val).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
                }
            }
        });
    });
    //multiselect for account
    $('#langOpt').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
                filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });
</script>
@endsection