<?php

include "../../classes/autoload.php";

$html = new html("");

$app = new inner_app();
$app->quick_bar('/app/payments');
$app->app_start();

$payment_res = $db->query("payments", "SELECT * FROM payments WHERE record_id = {$_GET['record_id']}");
$payment = $payment_res->fetch_assoc();

$invoice_res = $db->query("invoices", "SELECT * FROM invoices WHERE record_id = {$payment['invoice_id']}");
$invoice = $invoice_res->fetch_assoc();

echo "<datalist id='invoice_list'>";
echo $function->get_unpaid_invoices_list();
echo "</datalist>";
?>

<div class="column width_80 background_1 border_radius">
    <h1>EDIT PAYMENT</h1>
    <div class="row width_80">
        <div class="column width_50">
            <label>Payment Type</label>
            <select name="pyament_type" id="payment_type">
                <option></option>
                <option value="CASH">CASH</option>
                <option value="EFT">EFT</option>
                <option value="CARD">CARD</option>
            </select>
            <script>
                document.getElementById('payment_type').value = '<?php echo $payment['pyament_type']; ?>';
            </script>
            <label>Invoice</label>
            <input name='invoice_number' id="invoice_number" onchange="get_invoice_id(this.value)"
                value="<?php echo $invoice['invoice_number']; ?>" list="invoice_list">
            <input name='invoice_id' id="invoice_id" hidden>
            <script>

                document.getElementById('invoice_id').value = '<?php echo $payment['invoice_id']; ?>';

            </script>
            <label>Date</label>
            <input type="date" class="width_80" id='date' name='date' value="<?php echo $payment['date_time']; ?>" />
            <label>Amount</label>
            <input type="text" class="width_80" id='amount' name='amount'
                value="R <?php echo number_format($payment['amount'], 2); ?>" />
            <input type="text" hidden class="width_80" id='record_id' name='record_id'
                value="<?php echo $payment['record_id']; ?>" />
            <br>

        </div>
        <div id="invoice_payments">

        </div>

    </div>

    <button class="width_90" onclick="save('update_payments.php')">SAVE</button>
    <br>


</div>


<script>
    function get_invoice_id(invoice_no) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                if (this.responseText == '0' || this.responseText == 0) {
                    alert("invoice selected incorrect");
                    document.getElementById("invoice_id").value = '';
                    document.getElementById("invoice_number").value = '';

                } else {
                    document.getElementById("invoice_id").value = this.responseText;
                    ajax_history(this.responseText);
                }
            }
        }
        xhttp.open("GET", "invoice_no.ajax.php?invoice_number=" + invoice_no + "&invoice_no_get", true);
        xhttp.send();
    }

    function ajax_history(invoice_id) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("invoice_payments").innerHTML = this.responseText;
            }
        }
        xhttp.open("GET", "invoice_ajax.php?invoice_id=" + invoice_id, true);
        xhttp.send();
    }
    ajax_history(<?php echo $payment['invoice_id']; ?>);
    function save(url) {
        var elements = document.getElementsByTagName('input');
        var payload = {};
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            if (element.type === 'text' || element.type === 'date' || element.type === 'email') {
                payload[element.name] = element.value;
            }
        }

        var elements = document.getElementsByTagName('select');
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];

            payload[element.name] = element.value;

        }

        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;

        for (var key in payload) {
            if (payload.hasOwnProperty(key)) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = payload[key];

                form.appendChild(input);
            }
        }

        document.body.appendChild(form);
        form.submit();
    }
</script>