@extends('layouts.app')
@section('title', 'Invoice List')

@section('content')
<div class="modal fade" id="loandetailmodal" tabindex="-1" aria-labelledby="loandetailmodalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 2300px !important;margin:1rem">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loandetailmodalLabel">Loan Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;
                </button>
            </div>
            <div class="modal-body" id="loandetails">

            </div>
        </div>
    </div>
</div>
<div id="myModal_payment_update" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Update Payment</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" role="form" name="payment_update_form" id="payment_update_form"
                    data-parsley-validate="">
                    @csrf
                    <input type="hidden" name="payment_id" id="payment_id" />
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Payment Mode </label>
                                <select class="form-control" name="payment_mode" id="payment_mode">
                                    <option value="" disabled>Choose Payment</option>
                                    <option value="1">ACH</option>
                                    <option value="2">Check</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="example-firstname-input" class="col-form-label" style="font-size:14px;">Comments
                                    </label>
                                <textarea name="comments" id="comments" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary"
                form="payment_update_form"> Update </button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid mt-1">
    <div class="row">
	    <x-invoicetabs/>
    </div>
	<div class="col-lg-12 p-0">
        <div class="card ">
            <div class="card-body">
                <div class="modal fade" id="invoicedocmodal" tabindex="-1" aria-labelledby="invoicedocmodalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title">View Invoice</h6>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <div id="invoicedoc"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-0">
                    <table class="w100 text-center">
                        <tr>
                            <td>
                                <a href="{{ route('invoiceslist') }}" class="inv_btn1 mr-2"><span id="All" class="btn btn-light" style="cursor:pointer">Genererated Invoice</span></a>
                                <a href="{{ route('sendedinvoice') }}" class="inv_btn2 mr-2"><span id="1" class="btn btn-light" style="cursor:pointer">Invoices Sent To The Lenders</span></a>
                                <a href="{{route('paymentreceived')}}" class="inv_btn mr-2"><span id="1" class="btn btn-primary" style="cursor:pointer">Payment Received By Lenders</span></a>
                            </td>
                        </tr>
                    </table>
                    <table id="datatable" class="table table-bordered mb-0"  >
                        <thead>
                            <tr>
                                <th>Sl.No</th>
                                <th>Client</th>
                                <th>Lender</th>
                                <th>Year</th>
                                <th>Month</th>
                                <th>Loans</th>
                                <th>Total Amount</th>
                                <th>Invoice No</th>
                                <th>Invoice</th>
                                <th>Created By</th>
                                <th>Created On</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                                                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('page_css')
<style>
#loanhistorytable thead {
    background-color: rgb(23, 25, 104) !important;
}
.inv_btn {
    color: #fff;
}
.inv_btn:hover {
    color: #fff;
}
.inv_btn1:hover{
    color: #000444;
    background-color: #cbdaed;
    border-color: #c2d3e9;
}
.inv_btn2:hover{
    color: #000444;
    background-color: #cbdaed;
    border-color: #c2d3e9;
}
</style>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">
	$(document).ready(function() {
		$(".odtabs").not("#tab3").addClass('btn-outline-secondary');
		$("#tab3").addClass('btn-secondary');
        $(".odsecondtabs").not("#secondtab1").addClass('btn-outline-secondary');
        $("#secondtab1").addClass('btn-secondary');
	});

	 var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'lBfrtip',
        buttons: [
            'excel'
        ]
    });
    function viewinvoicedoc(docid)
    {
        $.ajax({
            type:'POST',
            url: "{{route('viewinvoice')}}",
            data: {
                    "_token": "{{ csrf_token() }}",
                        "docid":docid
                  },
                success: function(data) {
                    $('#invoicedocmodal').modal('show');
                    $('#invoicedoc').html(data.data);
                }
            });
    }

    function viewloans(lenid, month, year, invId)
    {
        $.ajax({
            type:'POST',
            url: "{{route('getloans')}}",
            data: {
                "_token": "{{ csrf_token() }}",
                    "lenid":lenid,
                    "year":year,
                    "month":month,
                    "invId":invId
                },
            success: function(html) {
                $("#loandetails").html("");
                $("#loandetails").html(html);
                $('#loandetailmodal').modal('show');
                $('#loanhistorytable').DataTable({
                dom: 'lBfrtip',
                "lengthMenu": [10,50,100],
                "buttons":['excel'],
                "paging": true,
                    "info": true,
                    searching: true,
                });
            }
        });
    }
    function updateloanstatus(invId, lenid, month, year)
    {

        let loanids = $(".checkloanclass:checked")
                .map(function (){
                return $(this).val();
            }).toArray();
        $.ajax({
                type: "POST",
                url: "{{route('updateloanstatus')}}",
                data: { "_token": "{{ csrf_token() }}",
                        "loanids":loanids,
                        "invId":invId,
                        "lenid":lenid,
                        "month":month,
                        "year":year
                    },
                success: function(response)
                {
                   if (response) {
                        var result = response.split('@#!');
                        if (result[1] != 'error')
                        {
                            $("#loandetailmodal").modal('hide');
                            Swal.fire({
                                position: 'middle',
                                icon: result[1],
                                title: result[2],
                                showConfirmButton: false
                            });
                            setTimeout(function() {
                                location.href = location.href;
                            }, 500);
                        } else
                        {
                            Swal.fire({
                                position: 'middle',
                                icon: result[1],
                                title: result[2],
                                showConfirmButton: false
                            });
                            setTimeout(function() {
                                location.href = location.href;
                            }, 500);
                        }
                    }
                }
            });
    }

    function viewPayments(invId)
    {
        $('#payment_update_form').parsley().reset();
        document.getElementById("payment_update_form").reset();
        $('#myModal_payment_update').modal('show');
        $.ajax({
            url: "/editPayment/" + invId,
            dataType: "json",
            success: function(data)
            {
                $('#payment_id').val(data.result.id);
                $('#payment_mode').val(data.result.payment_mode);
                $('#comments').val(data.result.comments);
            }
        })
    }

    $('#payment_update_form').submit(function(e) {
        e.preventDefault()
        if ($("#payment_update_form").parsley()) {
            if ($("#payment_update_form").parsley().validate()) {
                if ($("#payment_update_form").parsley().isValid()) {
                    $.ajax({
                        url: "{{ route('updatepayment') }}",
                        type: "POST",
                        data: new FormData($("#payment_update_form")[0]),
                        dataType: 'html',
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response) {
                                var result = response.split('@#!');
                                if (result[1] != 'error') {
                                    $("#myModal_payment_update").modal('hide');
                                    Swal.fire({
                                        position: 'middle',
                                        icon: result[1],
                                        title: result[2],
                                        showConfirmButton: false,
                                        timer: 500
                                    });
                                    setTimeout(function() {
                                        location.href = location.href;
                                    }, 1000);
                                } else {
                                    Swal.fire({
                                        position: 'middle',
                                        icon: result[1],
                                        title: result[2],
                                        showConfirmButton: false,
                                        timer: 500
                                    });
                                }
                            }
                        }
                    });
                }
            }
        }
    });

</script>
@endsection