@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop

@section('content')

    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">IB Mobile Money Withdrawal Requests</h3>
            </div>
            <div>
        
                <span class="m-subheader__daterange pull-right" id="daterangepicker">
                    <span class="m-subheader__daterange-label">
                        <span class="m-subheader__daterange-title"></span>
                        <span class="m-subheader__daterange-date m--font-brand"></span>
                    </span>
                    <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                        <i class="la la-angle-down"></i>
                    </a>
                </span>
            </div>
        </div>
    </div>
    
    <div class="m-content">
        <div class="m-portlet m-portlet--full-height ">
           
            <div class="m-portlet__body">

                <form class="m-form m-form--fit m--margin-bottom-20" onsubmit="return false;">
                    <div class="row m--margin-bottom-20">
                        <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                            <label>Search:</label>
                            <input type="text" class="form-control m-input" placeholder="Search" id="general-search">
                        </div>
                        <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                            <label>Search In:</label>
                            <select class="form-control m-input" id="column-index">
                                <option value="-1">All</option>
                                <option value="1">Account No</option>
                                <option value="2">Email</option>
                                <option value="3">Ac No / Wallet Id</option>
                                <option value="6">Payment Gateway</option>
                                <option value="7">Transaction Id</option>
                            </select>
                        </div>
                        <div class="col-lg-2 m--margin-bottom-10-tablet-and-mobile">
                            <label>Status:</label>
                            <div class="m-form__control">
                                <select class="form-control m-input" id="search-status">
                                    <option value="">All</option>
                                    <option value="Pending">Pending</option>
                                    <option value="Accepted">Accepted</option>
                                    <option value="Rejected">Rejected</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- Search End -->

                <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="IBwithdraw-request">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Account No</th>
                        <th>Email</th>
                        <th>Group</th>
                                                <th>Amount</th>
                        <th>USD</th>
                        <th>Payment Processor</th>
                        <th>Transaction Id</th>
                        <th>Mobile</th>
                        <th>Comment</th>
                        <th>Status</th>
                        <th>Date</th>
                        <!--<th>Updated Date</th>-->
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{ Html::script('custom/datatables/datatables.bundle.js') }}
    {{ Html::script('custom/eModal/eModal.js') }}
    <script type="text/javascript">
        var table;
        (function($){
            $(document).ready(function () {
                $('#IBwithdraw-request').each(function() {
                    table = $(this).DataTable({
                        'responsive':!0,
                        'searchDelay':500,
                        'processing':!0,
                        "oLanguage": {
                            "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                        },
                        "serverSide": true,
                        "ajax": {
                            "url": base_url+"/ib/mobile-money-withdraw-request",
                            "type": "GET",
                             "data": function(d) {
                                d.startDate =   '{{$startDate}}'
                                d.endDate =     '{{$endDate}}'
                            }
                        },
                        "order": [[ 0, "desc" ]],
                        "dom":
                            "<'row'<'col-sm-12'tr>>" +
                            "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",
                        "aoColumns": [
                            { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                            { data: 'ib_account', name: 'ib_users.ib_account'},
                            { data: 'email', name: 'ib_users.email'},
							{ data: 'GROUP', name: 'MT4_USERS.GROUP'},
                          /*  { data: 'wallet_id', name: 'wallet_id'},
                            { data: 'pk_balance', name: 'ib_pk_mast.pk_balance'},*/
                            { data: 'amount', name: 'amount'},
                            { data: 'usd', name: 'usd'},
                            { data: 'payment_processor', name: 'payment_processor'},
                            { data: 'our_transaction_id', name: 'our_transaction_id'},
                            { data: 'phone', name: 'phone',bSearchable: false},
							{ data: 'comment', name: 'comment'},
                            { data: 'status', name: 'status'},
							{ data: 'created_at', name: 'created_at'},
				// 			{ data: 'updated_at', name: 'updated_at'},
                            { data: 'action', name: 'action', bSearchable: false },
                        ]
                    });
                });

                //  ------------------------------------------------ Code of Search For Live Client Start -----------------------------------------

                $('#column-index').on('change', function() {

                var column = $(this).val();
                var data = $("#general-search").val();
                    if(data.length == 0){
                        return;
                    }else{
                        if(this.value == -1){
                            table.columns().search("").draw();
                            table.search( data ).draw();
                        }
                        else{
                            // Call the API search function
                            table.columns().search("").draw();
                            table.column(column).search( data ).draw();
                        }
                    }

                });

                $("#general-search")
                .unbind() // Unbind previous default bindings
                .bind("keyup", function(e) { // Bind our desired behavior
                    var data = $(this).val();
                    var column = $("#column-index").val();
                    // If the length is 3 or more characters, or the user pressed ENTER, search
                    if(data.length >= 3 || e.keyCode == 13 || e.keyCode == 8){


                        if(column == -1) {
                            table.search(data).draw();
                        }else{
                            table.search("").draw();
                            table.column(column).search(data).draw();

                        }
                    }
                    // Ensure we clear the search if they backspace far enough
                    if(this.value.length == 0 || column != -1) {
                        table.search("").draw();
                    }
                });
                
                $('#search-status').on('change', function () {
                        table.column('10').search($(this).val()).draw();
                    });
            });

        })(jQuery);
        eModal.setModalOptions({
            backdrop: 'static',
            keyboard: false
        });
        /*** Start Date Range Filter ***/
            jQuery(document).ready(function() {
                Daterangepicker.init();
            });
            var isFirstTime = true;
            var Daterangepicker = function() {
                var daterangepickerInit = function() {
                    if ($('#daterangepicker').length == 0) {
                        return;
                    }

                    var picker = $('#daterangepicker');
                    var starts = moment();
                    var start = moment('{{$startDate}}');
                    var end = moment('{{$endDate}}');
                    if ('{{$startDate}}' == '') {
                        
                        start = moment().subtract(30, 'year').startOf('month');
                    }

                    if ('{{$endDate}}' == '') {
                        
                    end =   moment().endOf('month');
                    }
                    
                    function cb(start, end) {
                        range = start.format('D MMM YY') + ' - ' + end.format('D MMM YY');
                        picker.find('.m-subheader__daterange-date').html(range);
                        reloadData(start,end);
                    }
                    function reloadData(start,end){
                        if(isFirstTime){
                            isFirstTime = false;
                            return;
                        }
                        
                        var startDate = start.format('YYYY-MM-DD');
                        var endDate = end.format('YYYY-MM-DD');
                        window.location.href = base_url + '/ibwithdraw_request?startDate='+startDate+'&endDate='+endDate;
                        mApp.blockPage({
                            overlayColor: '#000000',
                            type: 'loader',
                            state: 'primary',
                            message: 'Processing...'
                        });
                    }
                    picker.daterangepicker({
                        locale: {
                            format: 'DD/MM/YYYY'
                        },
                        direction: mUtil.isRTL(),
                        startDate: start,
                        endDate: end,
                        opens: 'left',
                        ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                            'This Year': [moment().startOf('year'), moment().endOf('year')],
                            'Last Year': [moment().subtract(364, 'days'), moment()],
                            'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
                        }
                    }, cb);

                    cb(start, end);
                }
                return {
                    init: function() {
                        daterangepickerInit();
                    }
                };
            }();
        /*** End Date Range Filter ***/
        
        
        $(document).on("click", "a.mobile-ib-withdraw-request", function(event){
            var id = $(this).attr('data-id');
            var user_id = $(this).attr('data-user_id');
            var url = base_url+"/ib/mobile-money-withdraw-request/"+id;
            var options = {
                url: url,
                title:'IB Withdraw Detail',
                size: 'md', //sm,lg,md,xl
                buttons: [
                    {text: 'Cancel', style: 'btn btn-secondary', close: true },
                    {text: 'Submit', style: 'btn btn-primary',   close: false, click: saveIBMobileWithdrawDetail },
                    { text: 'Pay', style: 'btn btn-default', close: false, click: function() { payMoneyIbWithdraw(id, user_id); } }
                ]
            };
            eModal.ajax(options);
        });
        
        
        function payMoneyIbWithdraw(transaction_id, user_id) {
            let wallet_id = $('#wallet_id').val();
            let payment_processor = $('#payment_processor').val();
            let amount = $('#amount').val();
            let tran_from_bank = $('#tran_from_bank').val();
            let status = $('#status').val();
        
            swal({
                title: "Do you want to proceed with the payment?",
                icon: "warning",
                buttons: {
                    cancel: "Cancel",
                    confirm: {
                        text: "Yes, Pay It!",
                        value: true,
                        visible: true,
                        className: "btn btn-primary"
                    }
                },
                dangerMode: true
            }).then(function(confirmed) {
                if (!confirmed) return;
        
                mApp.block('.modal-content', {
                    overlayColor: '#000000',
                    type: 'loader',
                    state: 'success',
                    message: 'Please Wait...'
                });
        
                $.ajax({
                    url: base_url + "/ib/mobile-money-withdraw-request-payout",
                    type: "POST",
                    data: {
                        transaction_id,
                        user_id,
                        wallet_id,
                        payment_processor,
                        amount,
                        tran_from_bank,
                        status,
                        _token: $('meta[name="csrf-token"]').attr('content') // Laravel CSRF
                    },
                    success: function(data) {
                        mApp.unblock('.modal-content');
                        if (data.status === true) {
                            swal("Success", data.message || "Payout processed successfully.", "success");
                        } else {
                            swal("Failed", data.message || "Something went wrong during the payout.", "error");
                        }
                    },
                    error: function(xhr) {
                        mApp.unblock('.modal-content');
                        let errMsg = "Something went wrong.";
                    
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            let errors = xhr.responseJSON.errors;
                            errMsg = "";
                            $.each(errors, function(key, messages) {
                                errMsg += messages.join("<br>") + "<br>";
                            });
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errMsg = xhr.responseJSON.message;
                        }
                    
                        swal("Validation Error", errMsg, "error");
                    }
                });
            });
        }

        
        function saveIBMobileWithdrawDetail() {
            $('#withdraw-form').submit();
        }
    </script>
@endsection