{% extends 'transactions/extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_transaction_charges.js' %}"></script>
    {% endblock %}
    <!-- start page title -->
    <div class="row p-0">
        <div class="col-md-12">
            <div class="card mt-2">
                <div class="card-header text-uppercase">
                    <div class="row align-content-between">
                        <div class="col-md-5">
                            <h4>New Fixed Asset</h4>
                        </div>
                        <div class="col-md-7">
                            <!-- Any action Here --->
                            <div class="page-title-right d-flex justify-content-end">
                                <a href="/transactions/fixed-assets/" class="btn btn-primary btn-sm">Back to Fixed
                                    Assets</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="/transactions/fixed-assets/add/" method="POST" autocomplete="off">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label">Asset Name</label>
                                    <input type="text" name="name" class="form-control" placeholder="Asset Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label">Default Asset Location</label>
                                    <div class="input-group">
                                        <select class="form-control" name="location" required id="assetlocations">
                                            <option value="" selected disabled>Select Default Asset Location</option>
                                            {% for loc in locations %}
                                                <option value="{{ loc.id }}">{{ loc.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="input-group-append">
                                            <span class="btn btn-info"
                                                  onclick="window.open('/transactions/new-fixed-assets-location/', '', 'width=800, height=600')"><i
                                                    class="fa fa-plus"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label" id="dr_lebel">Which Asset Account?</label>
                                    <div class="input-group">
                                        <select class="form-control" required name="assetgl" id="assetgl">
                                            <option value="" selected disabled>Select Asset GL</option>
                                            {% for n in assetgls %}
                                                <option value="{{ n.id }}">{{ n.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="input-group-append">
                                            <span class="btn btn-info"
                                                  onclick="window.open('/transactions/new-account/Fixed Assets/Fixed Assets/assetgl/', '', 'width=800, height=600')"><i
                                                    class="fa fa-plus"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label" id="cr_lebel">From which Supplier?</label>
                                    <div class="input-group">
                                        <select class="form-control" required name="supplier" id="supcus">
                                            <option value="" selected disabled>Select Supplier</option>
                                            {% for n in suppliers %}
                                                <option value="{{ n.id }}">{{ n.name }}</option>
                                            {% endfor %}

                                        </select>
                                        <div class="input-group-append">
                                            <span class="btn btn-info"
                                                  onclick="window.open('/transactions/new-account/Suppliers/Supplier/supcus/', '', 'width=800, height=600')"><i
                                                    class="fa fa-plus"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label">Quantity Purchased</label>
                                    <input type="number" name="qty" class="form-control"
                                           placeholder="Enter Quantity Purchased">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Purchase Price(Per Item)</label>
                                <div class="input-group mb-2">
                                    <input type="text" data-type="currency" name="amount" class="form-control" placeholder="Amount"
                                           aria-label="Number" aria-describedby="basic-addon1">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label">What is the Working Condition?</label>
                                    <select class="form-control" name="condition">
                                        <option>Select Option</option>
                                        <option value="excellent">Excellent</option>
                                        <option value="good">Good</option>
                                        <option value="bad">Bad</option>
                                        <option value="damaged">Damaged</option>
                                        <option value="irreparable">Irreparable</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label">Asset Particulars</label>
                                    <textarea class="form-control" name="particulars"
                                              placeholder="e.g. manufacturer, model, serial number etc"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-2 col-md-6">
                            <label class="form-label">Acquisition Date</label>
                            <input type="date" name="date" class="form-control" placeholder="Enter Transaction Date"
                                   required id="txdate">
                        </div>
                        <div class="form-group mb-2">
                            <input type="checkbox" style="width: 30px; font-size: 20px;"
                                   onchange="show_hide_payment(this);"><strong>Do you want to record a payment?</strong>
                            <input type="hidden" name="pay_status" value="0" id="pstatus">
                        </div>
                        <script>
                            function show_hide_payment(val) {

                                if (val.checked) {
                                    document.getElementById("showpaymenttab").style.display = 'flex';
                                    document.getElementById("pstatus").value = "1";
                                } else if (!val.checked) {
                                    document.getElementById("showpaymenttab").style.display = 'none';
                                    document.getElementById("pstatus").value = "0";
                                }
                            }
                        </script>
                        <div class="row" id="showpaymenttab" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label" id="dr_lebel">Which Mode of Payment?</label>
                                    <select class="form-control" name="payment_mode" onchange="getaccounts(this.value)">
                                        <option value="" selected disabled>Select Payment Mode</option>
                                        <option value="Cash">Cash Payment</option>
                                        <option value="Bank">Bank Payment</option>
                                        <option value="Mobile Money">Mobile Money Payment</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="form-label" id="payment_label">Which Account?</label>
                                    <select class="form-control" name="payment_account" id="payment_acc">
                                        <option value="" selected disabled>Select Account</option>
                                    </select>
                                </div>
                            </div>
                        </div>


                        {#                                            </div>#}
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger waves-effect"><i class="fa fa-times"
                                                                                         data-bs-dismiss="modal"></i>&nbsp;Cancel
                            </button>
                            <button type="reset" class="btn btn-warning waves-effect"><i class="fa fa-sync"></i>&nbsp;Reset
                                Form
                            </button>
                            <button type="submit" class="btn btn-info waves-effect"><i class="fa fa-save"></i>&nbsp;Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
{% endblock %}
{% block javascript %}

    <script>
        function Handleresults(result, id) {
            // toastr.success('Account Created Successfully', 'Success');
            new PNotify({
                title: 'Success', text: 'Saved', type: 'success'
            });
            $('#' + id).append($(result));
        }
    </script>

    <script>
        function HandleAssetsresults(result) {
            // toastr.success('Account Created Successfully', 'Success');
            new PNotify({
                title: 'Success', text: 'Saved', type: 'success'
            });
            $('#assetlocations').append($(result));

        }
    </script>


    <script>
        function getaccounts(value) {
            if (value == "Mobile Money") {
                document.getElementById("payment_label").innerHTML = "From which Mobile Money Account?";
            } else if (value == "Bank") {
                document.getElementById("payment_label").innerHTML = "From which Bank Account?";
            } else if (value == "Cash") {
                document.getElementById("payment_label").innerHTML = "From which Cash Account?";
            }
            //var acctypedr = null;

            //submit and get lists of accounts
            var request;

            if (request) {
                request.abort();
            }

            var data = {
                acctype: value
            }
            request = $.ajax({
                url: "/transactions/getdr/",
                type: "POST",
                data: data
            });
            request.done(function (response, textStatus, jqXHR) {
                //toastr.error(response, "error");

                if (response == "0") {
                    // toastr.error("You are not authenicated", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went wrong', type: 'error'
                    });

                } else if (response == "1") {
                    // toastr.error("Bad request", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went wrong', type: 'error'
                    });

                } else {
                    document.getElementById("payment_acc").innerHTML = response;
                }

            });
            //callback for failed
            request.fail(function (jqXHR, textStatus, errorThrown) {
                //log error to console
                toastr.danger("There was an error " +
                    textStatus, errorThrown, 'Error');
                alert(
                    "There was an error " +
                    textStatus, errorThrown
                );
            });


        }
    </script>
{% endblock %}