@php
    $projectPayments = \App\Models\ProjectPayment::where('project_id', request()->route('id'))->get();
    $pushToPayment = '';
    $startCount = 1;
    if ($projectPayments->count() > 0) {
        foreach ($projectPayments as $projectPayment) {
            $pushToPayment .=
                '
            <section id="payment-list" class="mb-3 p-3 bg-light border rounded">
                    <input name="payments[]" type="hidden" value="1"/>
                    <div class="row">
                        <div class="col-4 pr-0">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="paymentName[]" value="' .
                $projectPayment->name .
                '"/>
                        </div>
                        <div class="col-3 pr-0">
                            <label class="form-label">Date</label>
                            <input type="date" id="date-payment" data-date="" data-date-format="DD/MM/YYYY" class="form-control" name="paymentDate[]" value="' .
                $projectPayment->date .
                '"/>
                        </div>
                        <div class="col-4 pr-0">
                            <label class="form-label">Amount</label>
                            <input type="text" class="form-control" name="paymentAmount[]" value="' .
                $projectPayment->amount .
                '"/>
                        </div>
                        <div class="col-1 pl-2">
                            <label class="form-label text-white">.</label>
                            <button class="btn btn-danger btn-sm w-100 mt-1" type="button" id="remove-payment">X</button>
                        </div>
                        <div class="col-12 mt-2">
                            <label class="form-label">Desc</label>
                            <textarea class="form-control" name="paymentDesc[]" rows="1">' .
                $projectPayment->desc .
                '</textarea>
                        </div>
                    </div>
                </section>
            ';
            $startCount++;
        }
    }
@endphp
@can('project-payment')
    <div class="card">
        <div class="card-header">
            <h5 class="float-left mt-2 mb-0">Payment Details</h5>
        </div>
        <div class="card-body pb-2">
            <div id="project-payment">
                <section>
                    <!-- Content for users with 'project-payment' permission -->
                </section>
            </div>
        </div>
        <div class="card-footer">
            <button class="btn btn-primary btn-sm" id="add-payment" type="button">Add New Payment</button>
        </div>
    </div>
@else
    <div id="project-payment" style="display:none">
        <section>

        </section>
    </div>
@endcan


<script>
    var pushToPayment = '';
    var startFrom = {{ $startCount }} + 1;

    $(document).ready(function() {

        $('div#project-payment').append(`{!! $pushToPayment !!}`);

        $(document).on('click', '#add-payment', function() {
            pushToPayment += `
                <section id="payment-list" class="mb-3 p-3 bg-light border rounded">
                    <input name="payments[]" type="hidden" value="1"/>
                    <div class="row">
                        <div class="col-4 pr-0">
                            <label class="form-label">Receipt No.</label>
                            <input type="text" class="form-control" name="paymentName[]"/>
                        </div>
                        <div class="col-3 pr-0">
                            <label class="form-label">Date</label>
                            <input type="date" id="date-payment" data-date="" data-date-format="DD/MM/YYYY" class="form-control" name="paymentDate[]" value="${moment().format("YYYY-MM-DD")}"/>
                        </div>
                        <div class="col-4 pr-0">
                            <label class="form-label">Amount</label>
                            <input type="text" class="form-control" name="paymentAmount[]"/>
                        </div>
                        <div class="col-1 pl-2">
                            <label class="form-label text-white">.</label>
                            <button class="btn btn-danger btn-sm w-100 mt-1" type="button" id="remove-payment">X</button>
                        </div>
                        <div class="col-12 mt-2">
                            <label class="form-label">Payment Details</label>
                            <textarea class="form-control" name="paymentDesc[]" rows="1"></textarea>
                        </div>
                    </div>
                </section>
            `;
            $("div#project-payment section:last").after(`${pushToPayment}`);
            pushToPayment = '';
            startFrom++;
            refreshPaymentData();
        });

        $(document).on('click', '#remove-payment', function() {
            var confirmDialog = confirm("Are you sure?");
            if (confirmDialog == true) {
                $(this).closest('section#payment-list').remove();
            }
        });
    });
</script>

<script>
    $(document).ready(function() {

        refreshPaymentData();

        $(document).on('change', '#date-payment', function() {
            $(this).attr("data-date", moment((this).value, "YYYY-MM-DD").format($(this).attr(
                "data-date-format")));
            console.log('mantap');
        });
    });

    function refreshPaymentData() {
        document.querySelectorAll('[data-date]').forEach(x => x.setAttribute("data-date", moment(x.value, "YYYY-MM-DD")
            .format(x.getAttribute("data-date-format"))));
    }
</script>