@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 btn btn-danger" data-dismiss="modal" aria-label="Close">&times;
                </button>
            </div>
            <div class="modal-body" id="loandetails">

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="lendermailmodal" tabindex="-1" aria-labelledby="lendermailmodalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Send Email</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="send_email_form" id="send_email_form">
                    @csrf
                    <input type="hidden" name="inv_id" id="inv_id" class="inv_id">
                    <div id="emailcontent"></div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="swal2-actions">
                    <button type="submit" class="btn btn-primary send_email_form" form="send_email_form" > Send Email </button>
                    <button type="button" class="btn btn-danger ml-2" data-dismiss="modal">Close</button>
                </div>
            </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_btn mr-2"><span id="All" class="btn btn-primary" style="cursor:pointer">Genererated Invoice</span></a>
                                <a href="{{ route('sendedinvoice') }}" class="inv_btn1 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_btn2 mr-2"><span id="1" class="btn btn-light" style="cursor:pointer">Payment Received By Lenders</span></a>
                            </td>
                        </tr>
                    </table>
                    <div id="mergeinvoices" class="row mt-2 d-none">
                        <div class="col-12 text-center">
                            <button id="" type="button" name="updateloanstatuses" class="btn btn-primary mt-2" onclick="updateinvoicestatus()">Send For Lender Review</button>
                        </div>
                    </div>
                    <table id="datatable" class="table table-bordered mb-0"  >
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="selectinvoiceall"> All</th>
                                <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>Send Email</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;
}
.ajaxloader {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 99999;
    opacity: 0.8;
    background:rgb(82, 82, 85);
}
.ajaxloader .spinnerDiv {
    position: absolute;
    top: 40%;
    left:0px;
    right:0px;
    font-size:30px;
}
.dashboardcard {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 12px;
    opacity: 1;
}
</style>
@endsection
@section('script')
<x-alert/>
<script type="text/javascript">
    $("#selectinvoiceall").on('change', function()
    {
        if($("#selectinvoiceall").is(':checked'))
        {
            $(".checkinvoiceclass").prop("checked", true).addClass('checkclass');
            $("#mergeinvoices").removeClass("d-none");
        }
        else
        {
            $(".checkinvoiceclass").prop("checked", false).removeClass('checkclass');
            $("#mergeinvoices").addClass("d-none"); 
        }
    });
    function updateinvoiceclass(id)
    {
        if($("#check_"+id).is(':checked'))
        {
            $("#check_"+id).prop("checked", true).addClass('checkclass');
            $("#mergeinvoices").removeClass("d-none");
        }
        else
        {
            $("#check_"+id).prop("checked", false).removeClass('checkclass');
            var totallength = $('.checkinvoiceclass').length;
            var numberOfChecked = $('.checkinvoiceclass:checked').length;
            if(totallength > numberOfChecked)
            {
                $("#selectinvoiceall").prop("checked", false);
                $("#mergeinvoices").removeClass("d-none");
            }
            if(numberOfChecked == 0)
            {
                $("#selectinvoiceall").prop("checked", false);
                $("#mergeinvoices").addClass("d-none");
            }
        }
    }

	$(document).ready(function() {
		$(".odtabs").not("#tab3").addClass('btn-outline-secondary');
		$("#tab3").addClass('btn-secondary');
        $(".odsecondtabs").not("#secondtab0").addClass('btn-outline-secondary');
        $("#secondtab0").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 updateinvoicestatus()
    {
        let invids = $(".checkinvoiceclass:checked")
                .map(function (){
                return $(this).val();
            }).toArray();

        $.ajax({
            type: "POST",
            url: "{{route('updateinvoicestatus')}}",
            data: { "_token": "{{ csrf_token() }}",
                    "invids":invids
                },
            success: function(response)
            {
                if (response) {
                    var result = response.split('@#!');
                    if (result[1] != 'error')
                    {
                        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
                        });
                    }
                }
            }
        });
    }

    function send_lender_email(invId)
    {
        $.ajax({
            type: "POST",
            url: "{{route('sendemailmodal')}}",
            data: { "_token": "{{ csrf_token() }}",
                    "invId":invId
                },
                success:function(html){
                    $('.inv_id').val(invId);
                    $('#lendermailmodal').modal('show');
                    $('#emailcontent').html(html);
                }
        });
    }

    $('#send_email_form').submit(function(e) 
    {
        $(".ajaxloader").show();
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "{{ route('sendemaildata') }}",
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(response) {
                $(".ajaxloader").hide();
                $('#lendermailmodal').modal('hide');
                var result = response.split('@#!');
                Swal.fire({
                    position: 'middle',
                    icon: result[1],
                    title: result[2],
                    showConfirmButton: false,
                    timer: 1000
                });
            },
            error: function(xhr) {
                $(".ajaxloader").hide();
                let errorMessage = 'Something went wrong!';

                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: errorMessage
                });
            }
        });
    });
</script>
@endsection