@extends('layouts.app', ['pageSlug' => 'AssignPayment'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Assign Payments</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-6">
           Payments
        </div>
        <div class="col-lg-6 text-right">
            <a href="{{route('pay-extension.assignpayment.download')}}" class="btn btn-sm btn-default"><i class="fa fa-file-excel"></i> Export All</a>
		</div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <form>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
    							<input type="text" name="min_date" id="min" class="form-control datepicker" placeholder="Min Date" autocomplete="off" value="">
    						</div>
    					</div>
                        <div class="col-md-3">
    						<div class="form-group">
    							<input type="text" name="max_date" id="max" class="form-control datepicker" placeholder="Max Date" autocomplete="off" value="">
    						</div>
    					</div>
                        <div class="col-md-3">
        				    <button type="submit" class="search-btn btn btn-primary" title="Search">Search</button>
        				</div>
        			</div>
        		</form>
                <div class="table-responsive">
                    <table style="width:100%" id="assign_payments" class="table table-striped table-bordered dttable dttable1">
                    <thead>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Type</th>
                        <th>Payment</th>
                        <th>Amount</th>
                        <th>Quantity</th>
                        <th>Attachment</th>
                        <th>Paid Date</th>
                        <th>Assign Payment</th>
                        <th>Detail</th>
                        <th>Action</th>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>

            <div class="simple_popup">
                <div class="head">
                    <span>Heading</span>
                    <i class="fa fa-times close"></i>
                </div>
                <div class="content">

                </div>

            </div>

                        <div class="please_wait">
                <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
            </div>



@endsection
@push('head')
<style>
.ui-dialog{
    /* top:500px !important;    */
}
.dttable1{
    /* display: block;
    overflow: scroll; */
}
</style>




            <style>
                .simple_popup{
                    position: absolute;
                    top: -1200000px;
                    left: 15%;
                    background-color: #d1d1d1;
                    min-width: 400px;
                    width: fit-content;
                    height: fit-content;
                    padding: 4px;
                    border-radius: 5px;
                    box-shadow: 1px 1px 32px black;
                }

                .simple_popup .head{
                    height: 50px;
                    background-color: white;
                    font-size: 20px;
                    font-weight: 600;
                    padding: 10px;
                }

                .simple_popup .content{
                    padding: 2px;
                    background-color: white;
                    margin-top: 4px;
                    min-height: 100px;
                    max-height: 500px;
                    overflow: hidden;
                    overflow-y: scroll;
                }

                .simple_popup .fa-times{
                    float:right;
                    color:black;
                }

                .suggest_payments {
                    cursor:pointer;
                }
















/*CSS LOADER BELOW*/
.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}
.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6cacff;
    margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}
.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}
.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}
.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}
.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}
.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}
.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}
@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.please_wait{
    position: absolute;
    width: 350px;
    height: 162px;
    background-color: #e6e6e6;
    top: -441%;
    left: -452%;
    border-radius: 10px;
    text-align: center;
    padding: 39px;
    box-shadow: 1px 1px 163px #5a5a5a;
}




            </style>



@endpush
@push('js')
<script>
    $(function () {
      "use strict";
      var buttonCommon = {
        exportOptions: {
            format: {
                body: function ( data, row, column, node ) {
                    if (column == 6) {
                        data = data.replace(/<.*?>/ig, "");
                    }
                    if (column == 7) {
                        data = data.replace(/<.*?>/ig, "");
                    }
                    if (column == 8) {
                        data = $(data).find("option:selected").val();
                        data = data.replace(/<.*?>/ig, "");
                    }
                    if (column == 9) {
                        data = data.replace(/<.*?>/ig, "");
                    }
                    if (column == 10) {
                        data = data.replace(/<.*?>/ig, "");
                    }
                    return data;
                    }
                }
            }
        };

        class loader_class{

            show(){
                $(document).find('.please_wait').css('left', '43%');
                $(document).find('.please_wait').css('top', '40%');
            }

            hide(){
                $(document).find('.please_wait').css('left', '-440%');
                $(document).find('.please_wait').css('top', '-440%');
            }
        }


        var loader = new loader_class();


      function add_searchbar_to_table(){
          var searchbar_html = '<div id="assign_payments_filter" class="dataTables_filter"><label>Search:<input type="search" class=""  placeholder="Search Payments..." aria-controls="assign_payments"></label></div>';

          $(document).find('#assign_payments_wrapper').prepend(searchbar_html);
          if(SEARCH_TEXT){
              $(document).find('#assign_payments_filter input').focus();
              $(document).find('#assign_payments_filter input').val('').val(SEARCH_TEXT);
          }
      }



        var typingTimer;
        var delay = 1000; // Delay in milliseconds (adjust as needed)


        $(document).on('keyup','#assign_payments_filter input', function() {

            clearTimeout(typingTimer); // Clear the previous timer
            typingTimer = setTimeout(checkStopTyping, delay);
        });

        $(document).on('paste', '#assign_payments_filter input',  function(event) {
            var pastedText = event.originalEvent.clipboardData.getData('text');
            if(pastedText){
                load_table(pastedText);
            }else{
                destroy_and_init_datatable();
            }

        });

        // Function to execute when typing has stopped
        function checkStopTyping() {
            console.log('User has stopped typing!');
            var keyword = $(document).find('#assign_payments_filter input').val().toLowerCase();

            if(keyword){
                load_table(keyword);
            }else{
                destroy_and_init_datatable();
            }
        }

        var SEARCH_TEXT = '';




        function load_table(keyword){
            SEARCH_TEXT = keyword;

            var min = $('input[name=min_date]').val();
            var max = $('input[name=max_date]').val();
            loader.show();
            $.ajax({
                url: "{{url('/')}}"+'/admin/pay-extenion-mng/assign-payment?min='+min+'&max='+max+'&username='+keyword,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    // Handle the response data here
                    // console.log(response);
                    // var response_json = JSON.parse(response);

                    var tableBody = $('#assign_payments tbody');

                    table_body_html(response.data,tableBody);

                    loader.hide();

                },
                error: function(xhr, status, error) {
                    // Handle any errors that occur during the request
                    loader.hide();
                    console.error(error);
                }
            });

        }


        function table_body_html(jsonData,tableBody){
            var num = 0;
            $('#assign_payments').DataTable().clear().destroy();
            tableBody.html('');
            $.each(jsonData, function(index, row) {
                num++;
                var tableRow = $('<tr></tr>');
                tableRow.append('<td>' + num + '</td>'); // ID
                // console.log((row.old_expiration.replace(' ', 'T')).toISOString().slice(0, 10));
                tableRow.append('<td>' + row.customer + '</td>');// customer
                tableRow.append('<td>' + row.type + '</td>');
                tableRow.append('<td>' + row.pay_method + '</td>');
                tableRow.append('<td>' + row.amount + '</td>');
                tableRow.append('<td>' + row.quantity + '</td>');
                tableRow.append('<td>' + row.attachment + '</td>');
                tableRow.append('<td>' + row.created_at + '</td>');
                tableRow.append('<td>' + row.assign_payment + '</td>');
                tableRow.append('<td>' + row.detail + '</td>');
                tableRow.append('<td>' + row.action + '</td>');
                tableBody.append(tableRow);
            });

            init_datatable();

        }

        function destroy_and_init_datatable(){
            $('#assign_payments').DataTable().clear().destroy();
            $('#assign_payments tbody').html('');
            init_datatable();
        }

        init_datatable();
        function init_datatable(){
            $('#assign_payments').DataTable({
                "paging": true,
                "searching": false,
                drawCallback: function(settings) {
                    // Code to be executed after DataTable finishes rendering
                    console.log('DataTable finished rendering');

                    // Add your code here to perform the desired action

                    // Example: Trigger a custom event
                    $(document).trigger('datatableRendered');
                }
            });
            add_searchbar_to_table();
        }



        $(document).on('datatableRendered', function() {
            // console.log('Custom event: DataTable rendered');
            // Add your code here to handle the event
            $('.selectpay').select2({
                width : '100%'
            });
        });



        $('.search-btn').on("click", function(e) {
            e.preventDefault();
            $('input[name=min_date]').attr('required',true);
            $('input[name=max_date]').attr('required',true);
            if($('input[name=min_date]').val() != '' && $('input[name=max_date]').val() != ''){

                var keyword = $(document).find('#assign_payments_filter input').val().toLowerCase();
                load_table(keyword);
            }
            else{
                toastr.error('Min & Max date both are required.');
            }
        });


      $(".dttable").on('change','.selectpay',function(){
        var row = $(this).closest("tr");
        var userid = +row.find("input.userrow").val();
        var detail = +row.find(".detailrow");
        var excelrow = $(this).closest("tr").find("input.excelrow");
        var amount = $(this).find(':selected').data('amount');
        var date = $(this).find(':selected').data('date');
        var ref = $(this).find(':selected').data('ref');
        var data = '<b>Amount: </b>' + amount + '<br><b>Date: </b>' + date + '<br><b>Ref: </b>' + ref;
        var main = $(this).closest("tr").find(".detailrow");
        var rowid = $(this).val();

        if(rowid == ''){
            // alert('Please select user');
            return false;
        }else{
            if (!confirm("Confirm this payment for this user?")) {

                $(this).val('');
                $(this).select2({
                    height: '50px !important',
                    width: '100%'
                }).trigger('change');

                return false;
                //abort!
            }else{
                $.ajax({
    				headers: {
    				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    				},
                    type : 'POST',
                    dataType : 'json',
                    url : '{{ route("pay-extension.assignpayment.save") }}',
                    data : {rowid : rowid, userid : userid},
                    success : function(response){
                        main.html(data);
                        excelrow.val(rowid);
                        alert(response);
                        location.reload();
                        return false;
                    }
                });
            }
        }
     });

      $(document).on('click', '.select2', function(){
          // $('.select2-container').remove();
          var select_elem = $(this).closest('td').find('.selectpay');

          //--------------------------------------------------------------
          var optgroupCount = select_elem.find('optgroup').length;
          var selectedOption = select_elem.find('option:selected').length;
          var user_id = select_elem.attr('user_id');
          if(optgroupCount==0){
              load_user_payments(user_id, select_elem, $(this));
          }

          if(optgroupCount==1 && selectedOption==1){
              load_user_payments(user_id, select_elem, $(this));
          }
          //--------------------------------------------------------------


      });

      // $(document).on('click', '.selectpay', function(){
      //     console.log('select pay clicked !');
      //       var optgroupCount = $(this).find('optgroup').length;
      //       var selectedOption = $(this).find('option:selected').length;
      //       var user_id = $(this).attr('user_id');
      //       if(optgroupCount==0){
      //           load_user_payments(user_id, $(this));
      //       }
      //
      //       if(optgroupCount==1 && selectedOption==1){
      //           load_user_payments(user_id, $(this));
      //       }
      // });

        // $('#assign_payments tbody td:nth-child(9)').click(function() {
        //     var select_field = $(this).find('.selectpay');
        //     var optgroupCount = select_field.find('optgroup').length;
        //     var selectedOption = select_field.find('option:selected').length;
        //     var user_id = select_field.attr('user_id');
        //     if(optgroupCount==0){
        //         load_user_payments(user_id, select_field);
        //     }
        //
        //     if(optgroupCount==1 && selectedOption==1){
        //         load_user_payments(user_id, select_field);
        //     }
        // });




      function load_user_payments(user_id, select_field, select_two){
        $.ajax({
            url: "{{url('/')}}"+'/admin/pay-extenion-mng/user_portal_payments', // Replace {user_id} with the actual user ID
            type: 'GET',
            success: function(response) {
                var selectHtml = '';

                $.each(response, function(index, row) {
                    var selectString = ''; // Set selectString based on your logic for selected option

                    selectHtml += '<optgroup label="ID • ' + row.id + ' || Amount • ' + row.amount + ' || Date • ' + row.date + ' || Ref • ' + row.ref + '">' +
                        '<option ' + selectString + ' data-amount="' + row.amount + '" data-ref="' + row.ref + '" data-date="' + row.date + '" value="' + row.id + '">' + row.id + '</option>' +
                        '</optgroup>';
                });

               select_field.append(selectHtml);

                select_field.select2({
                    width:'100%'
                });
                $('.select2-container').css('width','100%');
                select_field.select2('open');

            },
            error: function(xhr, status, error) {
                console.log(error); // Handle error response
            }
        });

      }


    $("body").on('click', ".approve-btn", function(){
        var btn = $(this);
        if(btn.is('[disabled=disabled]')){
            return false;
        }
        var userid = $(this).closest("tr").find("input.userrow").val();
        var rowid = $(this).closest("tr").find("input.excelrow").val();
        console.log(userid);console.log(rowid);
        if(rowid == ''){
            // alert('Please select user');
            return false;
        }else{
            if (!confirm("Approve this payment for this user?")) {

                $(this).val('');
                $(this).select2({
                    height: '50px !important',
                    width: '100%'
                }).trigger('change');

                return false;
                //abort!
            }else{
                $.ajax({
    				headers: {
    				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    				},
                    type : 'POST',
                    dataType : 'json',
                    url : '{{ route("pay-extension.assignpayment.approve") }}',
                    data : {rowid : rowid, userid : userid},
                    success : function(response){
                        alert(response);
                        btn.attr('disabled','true');
                        return false;
                    }
                });
            }
        }
     });
    });
    function preview(link) {
        window.open(link);
    }
</script>



<script>
    $(document).ready(function(){


            class popup{

                constructor(obj){
                    this.HEADING = obj.heading;
                    $(document).find('.simple_popup .head span').html(this.HEADING);
                    this.init_events();
                }

                init_events(){
                    var baap = this;
                    $(document).on('click', '.simple_popup .close', function(){
                        baap.hide();
                    });
                }

                show(){
                    $(document).find('.simple_popup').css('left', '25%');
                    $(document).find('.simple_popup').css('top', '15%');
                }

                add_content(content){
                    $(document).find('.simple_popup .content').html(content);
                }

                hide(){
                    $(document).find('.simple_popup').css('left', '-20000px');
                }
            }





            class loader_class{

                show(){
                    $(document).find('.please_wait').css('left', '43%');
                    $(document).find('.please_wait').css('top', '40%');
                }

                hide(){
                    $(document).find('.please_wait').css('left', '-440%');
                    $(document).find('.please_wait').css('top', '-440%');
                }
            }


            var loader = new loader_class();




            var POPUP = new popup({
                heading:"SUGGESTIONS"
            });




            $(document).on('click', '.suggest_payments', function(){

                var portal_payment_id = $(this).attr('portal_payment_id');
                show_suggestions_popup(portal_payment_id)

            });




        function show_suggestions_popup(portal_payment_id){
            loader.show();
            $.ajax({
                type: "POST",
                url: "{{url('/')}}/token_free_posts/possible_payments_api",
                data:{
                    portal_payment_id:portal_payment_id
                },
                success: function(responseData, textStatus, jqXHR) {
                    var obj = JSON.parse(responseData);
                    // $(document).find('#bar-chart').remove();

                    if(obj){

                        POPUP.show();

                        if(obj.length>0){
                            POPUP.add_content(suggestion_html(obj));
                            loader.hide();
                        }else{
                            POPUP.add_content('<h3>No Suggestions Found !</h3>');
                            loader.hide();
                        }

                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            });


        }



        function suggestion_html(data){

            var html = '<table class="table"><thead><th> <td>#</td> <td>ID</td> <td>Ref</td> <td>Date</td> </th></thead><tbody>';

            html+='<tr>';
            for(var i=0;i<data.length;i++){
                html+='<td> '+i+1+'</td>';
                html+='<td> '+data[i].id+'</td>';
                html+='<td> '+data[i].ref+'</td>';
                html+='<td> '+data[i].date+'</td>';
            }
            html+='</tr>';


            html+='</table>';

            return html;
        }


    });
</script>

@endpush