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

        $('#billingHistoryTable').DataTable({"bLengthChange": false,"order": [[ 1, "desc" ]]});
        var d = new Date();
        var currMonth = d.getMonth();
        var currYear = d.getFullYear();
        var month_startDate = new Date(currYear, currMonth, 1);
        $('#start_date').datepicker('setDate', 'today');
        $('#end_date').datepicker('setDate', 'today');
        getbillingHistory();

        $(document).on('click','.reinitiate_btn',function(){
            let orderId = $(this).data('order_id');
            let invoiceId = $(this).data('invoice_id');
            $.ajax({
                url: 'reInitiatePayment',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                dataType: 'json',
                data:{
                    orderId:orderId,
                    invoiceId:invoiceId
                },
                success: function (response) {
                    if(response.status==true){
                        toastr.success(response.message)
                        getbillingHistory();// re-render the data table only if data updated successfully
                    }
                    else{
                        toastr.error(response.message);
                        getbillingHistory();
                    }
                },
                error:(errResponse)=>{
                    console.log(errResponse);
                    toastr.error('Data cannot be updated')
                }
            });
         });

    });
    </script>
@endsection
@section('content')
    <style>
        .ui-datepicker-today a.ui-state-highlight {
            border-color: #000;
            background: #7ca600;
        }
        .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
            border-color: #000;
            background: #7ca600;
        }
        .reinitiate_btn{
            cursor: pointer;
        }
    </style>
	@section('page_title') Billing History @endsection
	<div class="container-fluid">	
		<div class="card">
              <div class="card-header"><h3>Payment History List
                @can('hasExcelPermission')
                <form class="pull-right" method="post" action="{{ url('exportbillinghistory') }}">
                @csrf
                <button type="submit" class="export-history-excel btn 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"/>
                <input type="hidden" name="parentid" id="parent_id_hidden"/>
                <input type="hidden" name="paymentmode" id="paymentmode_hidden"/>
                <input type="hidden" name="paymentmethod" id="paymentmethod_hidden"/>
            </form>
            @endcan
            </h3>
        </div>
		  	<div class="card-body">

                <div class="form-row">
                    <div class="col-sm-2">
                        <label for="account_id">Account Name</label>               
                        <select class="form-control" multiple id="account_id" name="account_id[]">
                        <optgroup label="ACTIVE">
                            @foreach ($master_users as $key => $value)
                            @if( $value->status > 0)
                                <option value="{{ $value->id }}">{{ $value->account_name }}-({{ $value->id }})</option>
                            @endif
                            @endforeach
                         </optgroup>
                         <optgroup label="INACTIVE">
                             @foreach ($master_users as $key => $value)
                             @if($value->status == 0)
                                <option value="{{ $value->id }}">{{ $value->account_name }}-({{ $value->id }})</option>
                            @endif
                            @endforeach
                            </optgroup>
                        </select>
                    </div>
                    {{-- <div class="col-sm-2">
                        <label for="orgname">Account Type</label>
                        <select class="form-control" name="payment_mode" id="payment_mode" required>
                            <option value="">---- All ---</option>
                            <option value="6">Postpaid</option>
                            <option value="1">Prepaid</option>
                        </select>
                    </div>       --}}
                    <div class="col-sm-2">
                        <label for="payment_method">Payment Mode</label>               
                        <select class="form-control" id="payment_method" name="payment_method">
                            <option value="">-- All --</option>
                            @foreach($payment_type as $key => $value)
                                <option value="{{$value->payment_mode}}">{{strtoupper($value->payment_mode)}}</option>
                            @endforeach
                            <option value="assign_credits">ASSIGN CREDITS</option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                    <label for="period_filter">Time Period</label>               
                        <select id="period_filter" class="form-control">
                            <option value=''>Select Time Period</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="col-sm-2">
                        <label for="start_date">From Date</label>               
                        <input type="text" id="start_date" class="dates-comb mr-1 form-control" name="start_date" placeholder="Start Date" autocomplete="off">
                    </div>
                    <div class="col-sm-2">
                        <label for="to_date">To Date</label>               
                        <input type="text" id="end_date" class="dates-comb mr-1 form-control" name="end_date" placeholder="To Date" autocomplete="off">
                    </div>
                                
                </div>
            <hr>              
        </div>
        <div class="card-body">
            <div class="table-responsive">	
                <table class="table table-bordered" id="billingHistoryTable">
                    <thead>
                        <tr>
                            <th>Account ID </th>
                            <th>Account name </th>
                            <th>Role</th>
                            <th>Email</th>
                            <th>Payment Medium</th>
                            <th>Order ID</th>
                            <th>Payment Initiated </th>
                            <th>Payment ID </th>
                            <th>Payment Mode</th>
                            <th>Amount </th>
                            <th>Amount With GST</th>
                            <th>Purchase Date</th>
                            <th>Remarks</th>
                            {{-- <th>Payment Mode </th> --}}
                            {{-- <th>Payment Date </th> --}}
                            {{-- <th>Account Type </th> --}}
                            <th>Invoice No. </th>
                            <th>Status </th>
                            <th>Attachments</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>			  	  	
            </div>
        </div>
	</div>

    <link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet">
    <script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
    <script>
         
        $('#acc_id').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
        });
        var start_date = end_date = '';
        $("#start_date").datepicker({
            dateFormat: 'yy-mm-dd',
            maxDate : 0,
            autoclose: true,
            todayHighlight: true,
            onSelect: function (selectedDate) {
                var date2 = $('#start_date').datepicker('getDate');
                $('#end_date').datepicker('option', 'minDate', date2);
                $('#end_date').datepicker('setDate', date2);
                getbillingHistory();
            }
        });
    
        $("#end_date").datepicker({
            dateFormat: 'yy-mm-dd',
            minDate: $("#start_date").datepicker("getDate"),
            maxDate : 0,
            autoclose: true,
            todayHighlight: true,
            onClose: function() {
                var dt1 = $('#start_date').datepicker('getDate');
                var dt2 = $('#end_date').datepicker('getDate');
                if (dt2 < dt1) {
                    var minDate = $('#end_date').datepicker('option', 'minDate');
                   $('#end_date').datepicker('setDate', minDate);
               }
               getbillingHistory();
            }
        });

        $('#account_id ,#payment_method').change(function() {
            getbillingHistory();
        });

        $(".export-history-excel").click(function(){
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var parent_id = $('#account_id').val();
            var payment_mode = $('#payment_method').val();
            $('#from_date_hidden').val(start_date);
            $('#to_date_hidden').val(end_date);
            $('#parent_id_hidden').val(parent_id);
            $('#paymentmode_hidden').val(payment_mode);
            $(this).submit();
        });

        function getbillingHistory() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var account_id = $('#account_id').val();
            var payment_method = $('#payment_method').val();
            $.ajax({
                type: "POST",
                url: "{{ url('/billing_history_ajax') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "start_date" : start_date,
                    "end_date" : end_date,
                    "account_id" : account_id,
                    "payment_mode" : payment_method
                },
                dataType:'json',
                success: function(data) {
                    $("#billingHistoryTable").DataTable().clear().destroy();
                    $('#billingHistoryTable').DataTable({data: data, "bLengthChange": false, "bLengthChange": true, "scrollY":  400, "pageLength": 20, "scrollX": true, "scrollCollapse": true, "order": [[ 1, "desc" ]],
                        aoColumns: [
                            { data: "user_id",
                            render: function(data, type, row, meta){
                                if(row.user_id!=null) return row.user_id;
                                return "NA";
                                } ,
                            },

                            { data: "account_name",render: function(data, type, row, meta){
                                if(row.account_name!=null) return row.account_name;
                                return "NA";
                                } ,
                            },
                            { data: "role",render: function(data, type, row, meta){
                                if(row.role!=null) return row.role;
                                return "NA";
                                } ,
                            },
                            { data: "email",render: function(data, type, row, meta){
                                if(row.email!=null) return row.email;
                                return "NA";
                                } ,
                            },
                            { data: "medium",
                                render:function(data,type,row,meta){
                                    return row.medium?row.medium:"NA";
                                }
                             },
                            { data: "order_id",
                                render: function(data, type, row, meta){
                                if(row.order_id!=null) return row.order_id;
                                return "NA";
                                } ,
                            },

                            { data: "created_on",
                                render: function(data, type, row, meta){
                                        if(row.created_on!=null) return row.created_on;
                                        return "NA";
                                    } 
                            },

                            { data: "transaction_id",
                                render: function(data, type, row, meta){
                                    if(row.transaction_id!=null) return row.transaction_id;
                                    return "NA";
                                } 
                            },
                            { data: "payment_mode",
                                render: function(data, type, row, meta){
                                    if(row.payment_mode!=null) return row.payment_mode;
                                    return "NA";
                                } 
                            },
                            { data: "amount",
                                render: function(data, type, row, meta){
                                    if(row.amount!=null) return row.amount;
                                    return "NA";
                                }  
                            },
                            { data: "GST",
                                render: function(data, type, row, meta){
                                        if(row.GST!=null) return row.GST;
                                        return "NA";
                                    }
                            },
                            { data: "purchase_date",
                                render: function(data, type, row, meta){
                                    if(row.purchase_date!=null) return row.purchase_date;
                                    return "NA";
                                 }
                            },
                            { data: "remarks", render: function(data, type, row, meta){
                                    if(row.remarks!=null) return row.remarks;
                                    return "NA";
                                } 
                            },
                            { data: "invoice_no",
                                render: function(data, type, row, meta){
                                        if(row.invoice_no!=null) return row.invoice_no;
                                        return "NA";
                                    }
                            },
                            { data: "",
                                render: function(data, type, row, meta){
                                    if(row.status == 1)data = '<label class="badge badge-success">Success</label>';
                                    else if(row.status == 2) data = '<label class="badge badge-danger">Failed</lable>';
                                        else if(row.status==0){
                                        // display only for mobi account transactions, Aiisgn credits is for Support Assign of credits
                                        data = `
                                            <div class="btn_div">
                                                <label class="badge badge-warning">Initiated</label>
                                                ${row.payment_mode!='Assign credit'?
                                                `<i title='Refresh' data-invoice_id = '${row.invoice_id}'  data-order_id='${row.order_id}' class="reinitiate_btn fa fa-refresh"  aria-hidden="true"></i>`
                                                :``}
                                            </div>
                                        `;
                                    }
                                    return data;
                                }
                            },
                            { data: "attachment",
                                render: function(data, type, row, meta){
                                        if(row.attachment){
                                            let path = row.attachment;
                                            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 download_element;
                                        }
                                        else return "NA";
                                    }
                            },                          
                        ]
                    });
                }
            });
        }
        $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).val();
            $("#acc_id").multiselect("clearSelection");
            $("#acc_id").multiselect( 'refresh' );
            $("#start_date").val('');
            $("#end_date").val('');
            if(periodValue==''){
                getbillingHistory();
            }
            //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);
                getbillingHistory();
            }

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

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

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

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

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

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

        $('#account_id').multiselect({
            includeSelectAllOption: true,
            allSelectedText: 'All Accounts selected',
            nonSelectedText: 'No Account selected',
            selectAllValue: 'all',
            selectAllText: 'Select all',
            unselectAllText: 'Unselect all',
            buttonWidth: '100%',
            enableFiltering: true,
            includeSelectAllOption: true,
            selectAllJustVisible: false,
            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