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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Payments</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Customer Lists for Updating (<span class="info-msg" style="color:red;">**You can't apply a payment if a user has any pending payments. To apply a payment go to : <a href="{{route('customer.portalpayments')}}">Portal Payments</a>.</span>)
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <form id="payment_form">        
                    <table id="custom_table" class="table table-striped table-bordered">
                        <thead>
                            <th>User Name</th>
                            <th style="width:7%">Amount</th>
                            <th style="width:5%">Quantity</th>
                            <th style="width:8%">Total Price</th>
                            <th>Expiration</th>
                            <th>Remark Type</th>
                            <th>Internal Comment</th>
                            <th>New Expired Date</th>
                            <th>Receipt No</th>
                            <th>action</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="customers[0]" class="select2" id="customers__0" required>
                                        <option value=""></option>
                                        @foreach($customers as $cu)
                                        <option value="{{$cu->username}}" data-exp-date="{{date('Y-m-d', strtotime($cu->expiration))}}" data-compare="{{$cu->compareFlag}}" data-ext="{{$cu->ext}}">{{$cu->username}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="amount[0]" id="amount__0" required min=1>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="quantity[0]" id="quantity__0" required min=1>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="total_price[]" id="total_price__0" readonly>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="expiration[]" id="expiration__0" readonly>
                                </td>
                                <td>
                                    <select name="type[0]" class="select2" id="type__0" required>
                                        <option value=""></option>
                                        <option value="Subs">Subs</option>
                                        @foreach($cateogory_types as $t)
                                        <option value="{{$t->type}}">{{$t->type}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select name="paymethod[0]" class="select2" id="paymethod__0" required>
                                        <option value=""></option>
                                        @foreach($paymethods as $p)
                                        <option value="{{$p->paymethod}}">{{$p->paymethod}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="new_expired_date[]" id="new_expired_date__0" readonly>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="receipt_no[]" id="receipt_no__0" required>
                                </td>
                                <td>
                                    <a class="deleteRow"></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-lg btn-block" id="addrow" ><i class="fa fa-fw fa-plus"></i>Add new</button>
                    <button type="button" class="btn btn-success save-btn">Done</button>
                </form>  
                <div id="pageloader" style="display:none;">
                  <span><i class="fa fa-2x fa-spin fa-spinner"></i> <b>Processing</b></span>
                </div>  
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
   $(document).ready(function(){
        var counter = 0;

       $('.select2').select2();

        $("#addrow").on("click", function () {
            counter++;
            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><select name="customers['+counter+']" id="customers__'+counter+'" class="select2" required><option value=""></option>';
                @foreach($customers as $cu)
                    cols += '<option value="{{$cu->username}}" data-compare="{{$cu->compareFlag}}" data-ext="{{$cu->ext}}" data-exp-date="{{date('Y-m-d', strtotime($cu->expiration))}}">{{$cu->username}}</option>'
                @endforeach
                cols +='</select></td>';
            cols += '<td><input type="text" class="form-control" name="amount['+counter+']" id="amount__'+counter+'" required min=1></td>';
            cols += '<td><input type="text" class="form-control" name="quantity['+counter+']" id="quantity__'+counter+'" required min=1></td>';
            cols += '<td><input type="text" class="form-control" name="total_price[]" id="total_price__'+counter+'" readonly></td>';
            cols += '<td><input type="text" class="form-control" name="expiration[]" id="expiration__'+counter+'" readonly></td>';
            cols += '<td><select name="type['+counter+']" class="select2" id="type__'+counter+'" required><option value=""></option><option value="Subs">Subs</option>';
                @foreach($cateogory_types as $t)
                    cols +='<option value="{{$t->type}}">{{$t->type}}</option>';
                @endforeach
                cols +='</select></td>';
            cols += '<td><select name="paymethod['+counter+']" class="select2" id="paymethod__'+counter+'" required><option value=""></option>';
                @foreach($paymethods as $p)
                    cols +='<option value="{{$p->paymethod}}">{{$p->paymethod}}</option>';
                @endforeach
                cols +='</select></td>'
            cols +='<td><input type="text" class="form-control" name="new_expired_date[]" id="new_expired_date__'+counter+'" readonly></td>';
            cols +='<td><input type="text" class="form-control" name="receipt_no[]" id="receipt_no__'+counter+'"></td>';

            cols += '<td><a class="ibtnDel a-red btn"><i class="fa fa-fw fa-trash-alt"></i></a></td>';
            newRow.append(cols);

            $("table#custom_table").append(newRow);
            
            $('.select2').select2();
        });



        $("table#custom_table").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();
            counter -= 1
        });

        $('.save-btn').click(()=>{ 
            if ($('#payment_form').valid()) {
                $.confirm({
                    title: "Please confirm!",
                    content: 'Are you sure all values are OK?',
                    buttons: {
                        OK: {
                            text: 'OK',
                            action: function() {
                                $('#pageloader').show();
                                $('.save-btn').prop('disabled', true);
                                var data = $('#payment_form').serialize();
                                axios.post('{{route('customer.apply.payments')}}', data).then((res)=>{
                                    $('#pageloader').hide();
                                    toastr.success('success');
                                    setTimeout(()=>{
                                        location.reload();
                                    }, 1000)
                                    
                                }).catch(function (error) {
                                $('.save-btn').prop('disabled', false);
                                $('#pageloader').hide();
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }

  });
                            },
                        },
                        close: {
                            text: 'Cancel',
                            // action: function(){
                            //     form_validator.settings.ignore = "";
                            // },
                        },
                    }
                });
            }
        })

        jQuery(document.body).on('change', 'input[name^=amount]', function(){
            var id = $(this).attr('id');
            var rowId = id.split('__')[1];


            var amount = $(this).val();
            var quantity = $('input#quantity__' + rowId).val();
            if (quantity == '')  quantity = 0;  
            var total_price = amount * quantity;
            $('input#total_price__' + rowId).val(total_price);
        })

        jQuery(document.body).on('change', 'input[name^=quantity]', function(){
            
            var id = $(this).attr('id');
            var rowId = id.split('__')[1];

            var quantity = $(this).val();
            var amount = $('input#amount__' + rowId).val();
            if (amount == '')  amount = 0;
            var total_price = amount * quantity;
            $('input#total_price__' + rowId).val(total_price);


            updateNewExpiredDate(rowId);


        });

        jQuery(document.body).on('change', 'select[name^=customers]', function(){
            var id = $(this).attr('id');
            var rowId = id.split('__')[1];
            var expiredDate = $('select#customers__' + rowId).find('option:checked').data('exp-date');
            $('input#expiration__' + rowId).val(expiredDate);
            updateNewExpiredDate(rowId);
        });

        jQuery(document.body).on('change', 'select[name^=type]', function(){
            var id = $(this).attr('id');
            var rowId = id.split('__')[1];
            updateNewExpiredDate(rowId);
        })


         function getYMD(_firstDate, duration, compare, ext){
            var firstDate = new Date(_firstDate);
            var today = new Date(new Date().toLocaleString("en-US", {timeZone: "Africa/Gaborone"}));
            if (firstDate.getTime() < today.getTime()) {
                firstDate = today;
            }

            var _newdate = firstDate.setMonth(firstDate.getMonth() + parseInt(duration));
            var newdate = new Date(_newdate);
            var new_date = newdate;
            if(ext != 0){
                var new_date = newdate.setDate(newdate.getDate() - ext);
            }  
            /** 9/22/2020, 2:00:00 AM */
            var newDate = new Date(new Date(new_date).toLocaleString("en-US", {timeZone: "Africa/Gaborone"}));

            var day =newDate.getDate();
            var month=newDate.getMonth()+1;
            var year=newDate.getFullYear();
            var ymd = year + '-' + month + '-' + day;

            return ymd;
        };

        function updateNewExpiredDate(rowId){
            var type = $('select#type__' + rowId).val();
            if (type == 'Subs') {
                var expiredDate = $('select#customers__' + rowId).find('option:checked').data('exp-date');
                var months = $('input#quantity__' + rowId).val();
                var compare = $('select#customers__' + rowId).find('option:checked').data('compare');  
                var ext = $('select#customers__' + rowId).find('option:checked').data('ext');
                var ymd = getYMD(expiredDate, months, compare, ext);
                $('input#new_expired_date__' + rowId).val(ymd);
            } else {
                $('input#new_expired_date__' + rowId).val('');
            }
        }
        
        




   });

</script>
    
@endpush