{% 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 button-list d-flex justify-content-end">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#add_location"
                                   class="btn btn-primary btn-sm">Add New Location</a>
                                <a href="/transactions/fixed-assets/" class="btn btn-warning btn-sm">Back to Fixed
                                    Assets</a>
                            </div>
                        </div>
                    </div>

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

    <div class="row">
        <div id="add_location" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Add new Location</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                    </div>
                    <form id="savelocation">
                        {% csrf_token %}
                        <div class="modal-body">
                            <div class="form-group mb-2">
                                <label class="form-label">Location Name</label>
                                <input type="text" name="name" class="form-control" placeholder="Location Name">
                            </div>
                            <div class="form-group mb-2">
                                <label class="form-label">Address</label>
                                <textarea name="address" class="form-control" placeholder="Location Address"></textarea>
                            </div>
                            <div class="form-group mb-2">
                                <label class="form-label">Other Details</label>
                                <textarea name="details" class="form-control"
                                          placeholder="Location details. eg. Contact person, etc"></textarea>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info waves-effect">Submit</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Location Name</th>
                                <th>Address</th>
                                <th>Details</th>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for f in locations %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ f.name }}</td>
                                    <td>{{ f.address }}</td>
                                    <td>{{ f.details }}</td>
                                    <td>
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#editlocation{{ f.id }}"
                                           class="btn btn-primary"><i class="fa fa-edit"></i></a>
                                    </td>
                                </tr>
                                <div id="editlocation{{ f.id }}" class="modal fade" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">Edit {{ f.name }}</h4>
                                                <button type="button" class="close" data-bs-dismiss="modal"
                                                        aria-hidden="true">×
                                                </button>
                                            </div>
                                            <form class="saveeditlocation">
                                                {% csrf_token %}
                                                <div class="modal-body">

                                                    <div class="form-group">
                                                        <label>Location Name</label>
                                                        <input type="hidden" name="id" value="{{ f.id }}">
                                                        <input type="text" name="name" class="form-control"
                                                               placeholder="Location Name" value="{{ f.name }}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Address</label>
                                                        <textarea name="address" class="form-control"
                                                                  placeholder="Location Address">{{ f.address }}</textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Other Details</label>
                                                        <textarea name="details" class="form-control"
                                                                  placeholder="Location details. eg. Contact person, etc">{{ f.details }}</textarea>
                                                    </div>


                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-info waves-effect">Submit
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- /.modal-content -->
                                    </div>
                                    <!-- /.modal-dialog -->
                                </div>

                            {% endfor %}

                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascript %}
    <script>
        var request;
        $("#savelocation").submit(function (event) {
            event.preventDefault();

            if (request) {
                request.abort();
            }
            var $form = $(this);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            $inputs.prop("disabled", true);
            request = $.ajax({
                url: "/transactions/fixed-assets/location/add/",
                type: "POST",
                data: serializedData
            });

            request.done(function (response, textStatus, jqXHR) {
                //toastr.error(response, "error");

                if (response == "0") {
                    // toastr.error("Location Name Already Exists", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Location Name Already Exists', type: 'error'
                    });

                } else if (response == "1") {
                    // toastr.error("Something went Wrong. Please try again", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went Wrong. Please try again', type: 'error'
                    });

                } else {
                    // toastr.success("Location Created successfully.", 'Success');
                    new PNotify({
                        title: 'Success', text: 'Successfully Created', type: 'success'
                    });
                    setTimeout(function () {
                        window.location.href = response;
                    }, 3000);
                }

            });

            //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
                );
            });

            //call back called regardless
            request.always(function () {
                $inputs.prop("disabled", false);

            });
        });
    </script>
    <script>
        var request;
        $(".saveeditlocation").submit(function (event) {
            event.preventDefault();

            if (request) {
                request.abort();
            }
            var $form = $(this);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            $inputs.prop("disabled", true);
            request = $.ajax({
                url: "/transactions/fixed-assets/location/edit/",
                type: "POST",
                data: serializedData
            });

            request.done(function (response, textStatus, jqXHR) {
                //toastr.error(response, "error");

                if (response == "0") {
                    // toastr.error("Location Name Already Exists", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Location Name Already Exists', type: 'error'
                    });

                } else if (response == "1") {
                    // toastr.error("Something went Wrong. Please try again", 'Error');
                    new PNotify({
                        title: 'Error', text: 'Something went Wrong. Please try again', type: 'error'
                    });

                } else {
                    // toastr.success("Location Editted successfully.", 'Success');
                    new PNotify({
                        title: 'Success', text: 'Location Editted Successfully', type: 'success'
                    });
                    setTimeout(function () {
                        window.location.href = response;
                    }, 3000);
                }

            });

            //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
                );
            });

            //call back called regardless
            request.always(function () {
                $inputs.prop("disabled", false);

            });
        });
    </script>
{% endblock %}