@extends('layouts.app')

@section('content')


<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Payments <small>List</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Payment Details</li>
        </ol>
    </div>

    <div class="float-end">

    </div>

</div>
<!-- PAGE-HEADER END -->

<div class="content mt-3">

    <div class="card shadow mb-4">


        <div class="card-body">

            <div class="row mb-5">
                <div class="col-md-4">
                    <label for="account_id">Search Payments by Account</label>
                    {{ Form::select('account_id', $accounts, '', ['class'=>'standardSelect form-control mt-3', 'title'=>'Select Account', 'data-live-search'=>'true', 'id'=>'account_id', 'data-dropup-auto'=>'false', 'data-size'=>'5']) }}
                </div>

            </div>

            <hr>

            <div class="table-responsive">
                <table class="table table-bordered  data-table" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Account ID</th>
                            <th>Account Name</th>
                            <th>Phone</th>
                            <th>Invoice id</th>
                            <th>Total Amount</th>
                            <th>Amount Paid</th>
                            <th>Payment Date</th>
                        </tr>
                    </thead>

                    <tbody>
                    </tbody>
                </table>


            </div>
        </div>
    </div>

</div>


@stop

@section('scripting')

<script type="text/javascript">
    $(document).ready(function() {
        $('body').tooltip({
            selector: '[data-bs-toggle="tooltip"]'
        });
        $(".standardSelect").selectpicker();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        var table = $('#dataTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ url('getPaymentsData') }}",
                type: "GET",
                dataType: 'json',
                data: function(d) {
                    d.account_id = $('#account_id').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'id',
                    orderable: true,
                    searchable: false
                },
                {
                    data: 'account_code',
                    name: 'account_code'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'invoice_id',
                    name: 'invoice_id'
                },
                {
                    data: 'total_amount',
                    name: 'total_amount'
                },
                {
                    data: 'amount_paid',
                    name: 'amount_paid'
                },
                {
                    data: 'payment_date',
                    name: 'payment_date'
                },
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }
        });

        table.on('draw', function() {
            $('[data-toggle="tooltip"]').tooltip({
                placement: 'top'
            });
        });

        $('#account_id').change(function() {
            table.ajax.reload();
        });

        $('#submit').click(function() {
            table.ajax.reload();
        });
    });


    function get_order_details(id) {
        $.ajax({
            data: {
                "_token": "{{ csrf_token() }}",
                'id': id
            },
            url: "{{ url('order/get_order_details') }}",
            type: "POST",
            dataType: 'json',

            success: function(data) {
                // console.log(data);

                $('#advance').html(data.advance);
                $('#amount').html(data.amount);
                $('#emi_amount').html(data.emi_amount);
                $('#location').html(data.location);
                $('#months').html(data.months);
                $('#order_date').html(data.order_date);
                $('#order_ref').html(data.order_ref);
                $('#project').html(data.project);
                $('#property').html(data.property);
                $('#property_type').html(data.property_type);
                $('#emi_paid').html(data.emi_paid);
                $('#upcoming_emi_date').html(data.upcoming_emi_date);

                $('#order_ref_span').html('- ' + $("#order_id option:selected").text());
            },

            error: function(data) {
                if (data.status == 422) {
                    var x = data.responseJSON;
                    $.each(x.errors, function(index, value) {
                        $("#" + index).addClass("is-invalid");
                        $("#" + index + "-error").html(value[0]);
                    });
                }
                $('#saveBtn').html('Save Changes');
            }
        });
    }


    function show_receipt(payment_id) {
        var id = payment_id;
        $.ajax({
            type: 'GET',
            url: '{{ url("generate-receipt") }}?e=' + id,

            success: function(result, url) {
                var link = '{{ url("generate-pdf") }}?e=' + id;
                $("a.download_link").attr("href", link + '&export=pdf');

                $('.modal-title').html("Payment Receipt");
                $('.modal-body').html(result);
                $('#myModal').modal('show');

                $('.modal-container').load($(this).data('path'), function(result) {
                    $('#myModal').modal({
                        show: true
                    });
                });
            }
        });
    }
</script>


@endsection