@php
    $approve = 0;
    if(sizeof($Tpermistion) > 0)
    {
        $approve = $Tpermistion[0]->approve;
    }
@endphp
<table id="example_test" class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Payment Voucher Date</th>
            <th>Voucher Ref. No.</th>
            <th>Amount</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @php
            $count = 1;
        @endphp
        @foreach ($petty_cash_payment_history as $key => $value)
            <tr>
                <td>{{ $count }}</td>
                <td>{{ date('Y-m-d', strtotime($value->entry_date)) }}</td>
                <td>{{ $value->petty_cash_payment_no }}</td>
                <td>{{ number_format($value->amount, 2) }}</td>
                <td class="text-center">
                    <button type="button" class="btn btn-primary btn-xs" onclick="viewPettyCashPayment({{ $value->id }})">View</button>
                    @if($value->is_approved == 0)
                        @if($approve == 1)
                            <button type="button" class="btn btn-warning btn-xs" onclick="editPettyCashPayment({{ $value->id }})">Edit</button>
                            <button type="button" class="btn btn-success btn-xs" onclick="approvePettyCashPayment({{ $value->id }})">Approve</button>
                        @endif
                    @endif
                </td>
            </tr>
            @php
                $count++;
            @endphp
        @endforeach
    </tbody>
</table>
<script>

    $(function () {
        // $("#example_test").DataTable({
        // "responsive": true, "lengthChange": false, "autoWidth": false,
        // "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        // }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
        $('#example_test').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "responsive": true,
        });
    });

    function viewPettyCashPayment(id) {
        var token = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: '{{ url('/petty-cash-payment/petty-cash-payment-history') }}',
            type: 'POST',
            data: {
                _token: token,
                petty_cash_payments_id: id
            },
            async: true,
            success: function(data) {
                $("#petty_cash_payment_history_model_body").html(data);
                $("#petty_cash_payment_history_model").modal({
                    backdrop: 'static',
                    keyboard: false
                });
            },
            error: function(data) {

            }
        });
    }
    function editPettyCashPayment(id)
    {
        var token = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: '{{ url('/petty-cash-payment/petty-cash-payment-edit') }}',
            type: 'POST',
            data: {
                _token: token,
                petty_cash_payments_id: id
            },
            async: true,
            success: function(data) {
                
                $("#payment_table").find("tr:gt(0)").remove();
                
                // console.log(data.pettyCash);
                let dateObj = new Date(data.pettyCash.entry_date);
                let offsetDate = new Date(dateObj.getTime() - dateObj.getTimezoneOffset() * 60000);
                let entryDate = offsetDate.toISOString().split('T')[0];

                $('#petty_cash_payment_id').val(data.pettyCash.id);
                $('#entry_date').val(entryDate);

                data.pettyCashDetails.forEach(function(item, index) {
                    // item represents the current element in the array
                    // index represents the current index in the array
                    // console.log('Index:', index, 'Item:', item);

                    var payment_method_id = item.payment_type_id;
                    var payment_type_id = item.pay_chart_of_account_id; 
                    var payment_type = item.payment_method_name;
                    var payment_account_id = item.chart_of_account_id; 
                    var payment_account = item.payment_account_name; 
                    var purchace_inv_payment_remark = item.remarks;
                    var purchace_inv_payment = numberValidation(item.amount);

                    var table = document.getElementById('payment_table');
                    var rowCount = table.rows.length;

                    var row = table.insertRow(rowCount);

                    var td0 = row.insertCell(0); //count
                    var td1 = row.insertCell(1); //payment type id
                    var td2 = row.insertCell(2); //payment type
                    var td3 = row.insertCell(3); //payment account id
                    var td4 = row.insertCell(4); //payment account
                    var td5 = row.insertCell(5); //amount
                    var td6 = row.insertCell(6); //remark
                    var td7 = row.insertCell(7); //action
                    var td8 = row.insertCell(8); //payment method

                    td0.innerHTML = rowCount;
                    td1.innerHTML = payment_type_id;
                    td2.innerHTML = payment_type;
                    td3.innerHTML = payment_account_id;
                    td4.innerHTML = payment_account;
                    td5.innerHTML = parseFloat(purchace_inv_payment).toFixed(2);
                    td6.innerHTML = purchace_inv_payment_remark;
                    td7.innerHTML = "<button type='button' class='btn btn-danger btn-xs delete_btn'>Remove</button>";
                    td8.innerHTML = payment_method_id;

                    $(td1).css({
                        display: 'none'
                    });

                    $(td3).css({
                        display: 'none'
                    });

                    $(td8).css({
                        display: 'none'
                    });

                    td0.setAttribute("class", "_count text-center");
                    td1.setAttribute("class", "_payment_type_id text-left");
                    td2.setAttribute("class", "_payment_type text-left");
                    td3.setAttribute("class", "_payment_account_id text-left");
                    td4.setAttribute("class", "_payment_account text-left");
                    td5.setAttribute("class", "_payment text-right");
                    td6.setAttribute("class", "_payment_remark text-right");
                    td7.setAttribute("class", "text-center");
                    td8.setAttribute("class", "_payment_method");

                });

                calc_total();

                $('#custom-tabs-four-home-tab').tab('show');

            },
            error: function(data) {

            }
        });
    }

    function approvePettyCashPayment(id)
    {
        var token = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: '{{ url('/petty-cash-payment/petty-cash-payment-approve') }}',
            type: 'POST',
            data: {
                _token: token,
                petty_cash_payments_id: id
            },
            async: true,
            success: function(data) {
                
                if(data == 'save_ok')
                {
                    swlToster('success', "Approved successfully saved");
                    getPettyCashHistory();
                }
                else
                {
                    swlToster('error', "Approval Failed!");
                }
            },
            error: function(data) {

            }
        });
    }
</script>