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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Portal Payments For Customer</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Portal Payments
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <form id="payment_form" action='upload_file' role="form" method="post" enctype=multipart/form-data>    
            @csrf
                <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%">Type</th>
                        <th>Payment Method</th>
                        <th>Ref</th>
                        <th>Receipt No.</th>
                        <th>Paid Date</th>
                        <th>Attachment</th>
                        <th>action</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select name="username[0]" class="select2" id="customers__0" required>
                                    <option value=""></option>
                                    @foreach($customers as $cu)
                                    <option value="{{$cu->username}}">{{$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>
                                <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="pay_method[0]" class="paymethod select2" id="paymethod__0" required>
                                    <option value=""></option>
                                    @foreach($paymethods as $p)
                                    <option value="{{$p->paymethod}}">{{$p->paymethod}}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <div class="form-group ref-block">
                                    <input type="text" style="width: 100%;" original-value="" required="" class="ref-td form-control input-sm" name="reference[0]" id="reference_0" value="">
                                </div>
                            </td>
                            <td>
                                <div class="form-group receipt-block">
                                    <input type="number" style="width: 100%;" original-value="" class="form-control input-sm" name="receipt_no[0]" id="receipt_no_0" value="">
                                </div>
                            </td>
                            @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
                            <td>
                                <input type="text" style="width: 100%;" original-value="" required="" class="form-control input-sm picker_date" autocomplete="off" name="paid_date[0]" id="paid_date_0" value="">
                            </td>
                            @endif
                            <td>
                                <input type="file" style="width: 100%;" original-value="" force-send="1" class="form-control input-sm" autocomplete="off" name="attachment[0]" id="attachment_0" value="">
                            </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>
@endsection

@push('js')
<script>
   $(document).ready(function(){
        var counter = 0;
       $('body .ref-block').hide();
    //   $('.receipt-block').hide();
       $('body').on('change','.paymethod',function(){ 
           console.log($(this).closest('td').find('.ref-block'));
        if ($(this).val() == 'FNB' || $(this).val() == 'Ewallet'){
            $(this).closest('td').next('td').find('.ref-block').show();
            $(this).closest('td').next('td').find('.ref-td').attr('required',true);
        }else{
            $(this).closest('td').next('td').find('.ref-block').hide();
            $(this).closest('td').next('td').find('.ref-td').attr('required',false);
        }
        // if ($(this).val() == 'Office Payment'){
        //     $('.receipt-block').show();
        //     $('#receipt_no').attr('required',true);
        // }else{
        //     $('.receipt-block').hide();$('#receipt_no').attr('required',false);
        // }
       });

        $( ".picker_date" ).datepicker({
            dateFormat : 'yy-mm-dd',
            maxDate:'0'
        }).datepicker("setDate", 'd');
        
       $('.select2').select2();

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

            cols += '<td><select name="username['+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><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="pay_method['+counter+']" class="paymethod select2" id="pay_method__'+counter+'" required><option value=""></option>';
                @foreach($paymethods as $p)
                    cols +='<option value="{{$p->paymethod}}">{{$p->paymethod}}</option>';
                @endforeach
                cols +='</select></td>';
            cols +='<td><div class="form-group ref-block"><input type="text" style="width: 100%;" original-value="" required="" class="ref-td form-control input-sm" name="reference[]" id="reference_'+counter+'" value=""></div></td>';
            cols +='<td><input type="text" class="form-control" name="receipt_no[]" id="receipt_no_'+counter+'"></td>';
            cols +='<td><input type="text" style="width: 100%;" original-value="" required="" class="form-control input-sm picker_date" autocomplete="off" name="paid_date[]" id="paid_date_'+counter+'" value=""></td>';
            cols +='<td><input type="file" style="width: 100%;" original-value="" force-send="1" class="form-control input-sm" autocomplete="off" name="attachment[]" id="attachment_'+counter+'" value=""></td>';
            cols += '<td><a class="ibtnDel a-red btn"><i class="fa fa-fw fa-trash-alt"></i></a></td>';
            newRow.append(cols);
            newRow.find('.ref-block').hide();
            $("table#custom_table").append(newRow);
            
            $('.select2').select2();
            $( ".picker_date" ).datepicker({
                dateFormat : 'yy-mm-dd',
                maxDate:'0'
            }).datepicker("setDate", 'd');
        });


        $("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 frm = $('#payment_form');
                                let formData = new FormData(frm[0]);
                                console.log(formData);
                                axios.post('{{route('customer.apply.portalpayments')}}', formData).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 = "";
                            // },
                        },
                    }
                });
            }
        });
   });
</script>
@endpush