@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="px-3 mt-3">
                        <div class="form-body">
                            <form class="form" id="vendorPayBillForm">
                            <h4 class="form-section">
                                <i class="icon-user"></i> Payment Bill</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="vendor_id">Select Vendor</label>
                                        <select name="vendor_id" id="vendor_id" class="form-control">
                                            <option value="" disabled selected>Select Vendor</option>
                                            @foreach ($vendor as $v)
                                                <option value="{{$v->id}}">{{$v->v_fname}} {{$v->v_lname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table ">
                                        <thead>
                                            <tr>
                                                <th>Select</th>
                                                <th>Due Date</th>
                                                <th>Vendor</th>
                                                <th>Reference</th>
                                                <th>Amount</th>
                                                <th>Amount to Pay</th>
                                                <th>Advance Adjustment</th>
                                            </tr>
                                        </thead>
                                        <tbody id="payment_details">
    
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <input type="hidden" name="vendor_id">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="amount">Payment</label>
                                        <input type="number" placeholder="Payment" id="amount" class="form-control" name="amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="bill_payment_date">Date</label>
                                        <input type="date" name="bill_payment_date" id="bill_payment_date" placeholder="Amount" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="memo_paid">Memo</label>
                                        <input type="text" name="memo_paid" id="memo_paid" placeholder="Memo" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="method">Method</label>
                                        <a class="float-right" href="#addMethod" data-toggle="modal" data-keyboard="false">Add Method</a>
                                        <select name="method" class="form-control mode_lists" id="method">
                                            <option disabled selected>Select Method</option>
                                            @foreach ($payment_modes as $mode)
                                                <option value="{{$mode->id}}">{{$mode->mode_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Account Type</label>
                                        <select name="account_type" class="form-control" id="account_type">
                                            <option value="">Please Select</option>
                                            <option value="Bank">Bank</option>
                                            <option value="Employee">Employee</option>
                                            <option value="Vendor">Vendor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="pay_from">Pay From</label>
                                        <p for="pay_from " style="float: right;font-weight:bold">Remaining Balance : <span class="balance">0</span></p>
                                        <select name="pay_from" class="form-control" id="pay_from">
                                            <option disabled selected>Select Option</option>
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="paid_from_type" class="paid_from_type"/>
                                <input type="hidden" name="bill_id_hidden" id="bill_id_hidden">
                                <input type="hidden" name="amount_hidden" id="amount_hidden">
                                <input type="hidden" name="advance_hidden" id="advance_hidden">
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="submit" class="btn btn-success" id="saveBtn">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade text-left" id="addMethod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Method</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="methodForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="mode_name">Payment Mode Name</label>
                                <input type="text" id="mode_name" class="form-control" name="mode_name">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addMethodForm">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
@endsection

@section('afterScript')
{{-- <script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js')}}"></script> --}}
    <script>
        $(document).ready(function(){
            $('#vendor_id').select2();
            $('#pay_from').select2();
            var amount = 0;

            function separator(numb) {
                var str = numb.toString().split(".");
                str[0] = str[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                return str.join(".");
            }


            $(document).on('change','#pay_from',function(){
                var attr = $('#pay_from option:selected').attr('data-name');
                var balance = $('#pay_from option:selected').attr('data-balance');
                $('.paid_from_type').val(attr);
                balance  = balance - amount;
                $('.balance').text(separator(balance));
            });

            $(document).on('change','#account_type',function(){
            var type=$(this).val();
            var output='<option>Please Select</option>';
            if(type=='Bank'){
                output+='@foreach ($banks as $b)';
                output+='<option data-name="banks" data-balance="{{$b->balance}}" value="{{$b->id}}">{{$b->account_name}}-{{$b->banks->bank_name}}</option>';
                output+='@endforeach';
            }
            if(type=='Vendor'){
                output+='@foreach ($vendor as $vend)';
                output+='<option data-name="vendors" data-balance="{{$vend->balance}}" value="{{$vend->id}}">{{$vend->v_fname}} {{$vend->v_lname}}</option>';
                output+='@endforeach';
            }
            if(type=='Employee'){
                output+='@foreach ($cash as $ca)';
                output+='<option data-name="accounts" data-balance="{{$ca->balance}}" value="{{$ca->id}}">{{$ca->name}}</option>';
                output+='@endforeach';
            }
            $('#pay_from').empty();
            $('#pay_from').append(output);
        });

            $(document).on('change','#vendor_id',function(){
                var id = $(this).val();
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "getUnpaidBill/"+id,
                    type: "GET",
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (res) {
                        var html=""
                        res.forEach(element => {
                            html+='<tr>';
                            html+= '<td><input type="checkbox" class="chckBill form-check" value="'+element.id+'" name="chckBill[]"/><input type="hidden" value="'+element.id+'" name="bill_id[]" /></td>';
                            html+= '<td>'+element.bill_due_date+'</td>';
                            html+= '<td>'+$('#vendor_id option:selected').text()+'</td>';
                            html+= '<td>'+element.reference+'</td>'
                            html+= '<td>'+element.amount+'</td>';
                            html+= '<td><input type="text" value="'+element.balance+'" max="'+element.balance+'" name="amount_to_pay[]" data-check='+element.id+' class="form-control amount_to_pay"/></td>';
                            html+='<td><input name="advance_adjustment" id="advance_adjustment" class="form-control advance_adjustment" value="0" /></td>';
                            html+='</tr>';
                        });
                        $('[name=vendor_id]').val(id);
                        $('#payment_details').html(html);
                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });

            });

            $(document).on('click','.chckBill',function(){
                var id = $(this).attr('data-id')
                var amountAdd = $(this).closest('tr').find('.amount_to_pay').val();
                if($(this).is(":checked"))
                {
                    // $('.payment_bill_id_'+id).val(id)
                    amount = parseInt(amount) + parseInt(amountAdd)
                    $('[name=amount]').val(parseInt(amount))
                } else {
                    amount = parseInt(amount) - parseInt(amountAdd)
                    $('[name=amount]').val(parseInt(amount))
                }
            })

            $(document).on('keyup','.amount_to_pay',function(){
                var id = $(this).attr('data-check')
                var amountAdd = $(this).val();
                amount = 0
                $('[name=amount]').val(amount)
                $('.chckBill').prop('checked',false)
                
            })

            $(document).on('click',"#addMethodForm", function(e){
                e.preventDefault();
            
                var form_data = new FormData($("#methodForm")[0]);
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "{{ route('mode_payment.store') }}",
                    type: "POST",
                    data : form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (res) {
                        swal("Inserted!", "Mode of Payment has been Added Successfully!", "success");
                        $('.mode_lists').append('<option value="'+res.id+'">'+res.mode_name+'</option>');
                        $('#addMethod').modal('hide');
                        $('#methodForm')[0].reset();
                        $('.mode_lists').val(res.id).trigger('change');
                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });
            });

            $(document).on('submit',"#vendorPayBillForm", function(e){
                var input=$('input[type="checkbox"]:checked').length;
                if(input>0){
                    var bill_id_array=[];
                    var amount_array=[];
                    var advance_array=[];
                    $('input[type="checkbox"]:checked').each(function(){
                        var bill_id=$(this).val();
                        var amount=$(this).closest('tr').find('.amount_to_pay').val();
                        var advance=$(this).closest('tr').find('.advance_adjustment').val();
                        amount_array.push(amount);
                        bill_id_array.push(bill_id);
                        advance_array.push(advance);
                    });
                    $('#bill_id_hidden').val(bill_id_array);
                    $('#amount_hidden').val(amount_array);
                    $('#advance_hidden').val(advance_array);
                    var form_data = new FormData($("#vendorPayBillForm")[0]);
                    $.ajaxSetup({
                        headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url : "{{ route('vendor_pay_bill.store') }}",
                        type: "POST",
                        data : form_data,
                        async: false,
                        cache: false,
                        contentType: false,
                        enctype: 'multipart/form-data',
                        processData: false,
                        success: function (res) {
                            swal("Inserted!", "Vendor Bill has been Paid Successfully!", "success");
                            //  setTimeout(function() { 
                            //     // location.reload();
                            // }, 1000);
                            $('#vendor_id').val(null).trigger('change');
                            $('#payment_details').html('');
                            $('#vendorPayBillForm')[0].reset();
                        },
                        error: function(err) {
                            swal('Not Valid',err.responseJSON.message,'error');
                            // setTimeout(function() { 
                            //     location.reload();
                            // }, 1000);
                        
                        }
                    });
                }
                else{
                    alert('Please Select at least one bill');
                }
                e.preventDefault();
            
            });
        })
    </script>
@endsection