{% extends 'back.html.twig' %}

{% block title %} Customers{% endblock %}

{% block body %}

<div class="app-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6"><h3 class="mb-0"> Edit {{ 'Customer'|trans }} - ({{ customer.companyName }})</h3></div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                    <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('admin_customer_index') }}">{{ 'Customers'|trans }}</a></li>
                    <li class="breadcrumb-item active">Edit Customer</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="app-content">
    <div class="container-fluid">
        <div class="row g-4">
            <div class="col-md-12">
                    <div class="card ">
                        <div class="card-header with-border" style="padding-bottom: 0px;">
                            {% include '@Customer/customer/partials/customer-header-links.html.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <div id="edit_customer_details" class="tab-pane active">
                                    <form class="form-horizontal" action="javascript:void(0)">
                                        <div class="form-group row mb-3">
                                            <label for="name" class="col-sm-2 col-form-label">Customer Name <span class="compulsory">*</span></label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="name" placeholder="Customer Name" value="{{ customer.companyName }}">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="address" class="col-sm-2 col-form-label">Customer Address <span class="compulsory">*</span></label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control mb-2" id="address_1" placeholder="Address Line 1" value="{{ customer.address1 }}">
                                                <input type="text" class="form-control mb-2" id="address_2" placeholder="Address Line 2" value="{{ customer.address2 }}">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="city" class="col-sm-3 control-label">City<span class="compulsory">*</span></label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" id="city" placeholder="City" value="{{ customer.city }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="state" class="col-sm-3 control-label">State <span class="compulsory">*</span></label>
                                                    <div class="col-sm-12">
                                                        <select class="form-control" id="state">
                                                            {% for accronym, state in allStates %}
                                                                <option value="{{ accronym }}"
                                                                    {% if accronym == customer.state %}
                                                                        selected = "selected"
                                                                    {% endif %}
                                                                >{{ state }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="postcode" class="col-sm-3 control-label">Postcode <span class="compulsory">*</span></label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" id="postcode" placeholder="Postcode" value="{{ customer.postCode }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="phone" class="col-sm-3 control-label">Phone</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" id="phone" placeholder="Phone" value="{{ customer.phone }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="email" class="col-sm-3 control-label">Email</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" id="email" placeholder="Email" value="{{ customer.email }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="website" class="col-sm-2 col-form-label">Website</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="website" placeholder="Website" value="{{ customer.website }}">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="billing_email" class="col-sm-2 col-form-label">Billing Email</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="billing_email" placeholder="Billing Email" value="{{ customer.billingEmail }}">
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="invoice_disclaimer" class="col-sm-2 col-form-label">Invoice Disclaimer</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="5" id="invoice_disclaimer" placeholder="Invoice Disclaimer">{{ customer.invoiceDisclaimer }}</textarea>
                                            </div>
                                        </div>


                                        <button type="button" class="btn btn-primary" id="updateCustomerBtn" style="float: right;">Update Customer</button>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>


{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

        $("#updateCustomerBtn").on("click", function () {

            var button = $(this);
            var name = $.trim($("#name").val());
            var address_1 = $.trim($("#address_1").val());
            var address_2 = $.trim($("#address_2").val());
            var city = $.trim($("#city").val());
            var state = $.trim($("#state").val());
            var postcode = $.trim($("#postcode").val());
            var phone = $.trim($("#phone").val());
            var email = $.trim($("#email").val());
            var website = $.trim($("#website").val());
            var billing_email = $.trim($("#billing_email").val());
            var invoiceDisclaimer = $.trim($("#invoice_disclaimer").val());

            if (
                validateInput(name, 'Name') &&
                validateInput(address_1, 'Address Line 1') &&
                validateInput(city, 'City') &&
                validateInput(postcode, 'Postcode') &&
                validateInput(state, 'State')
            ) {
                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '{{ path('api_customer_edit') }}',
                    data: {
                        id: {{ customer.id }},
                        name : name,
                        address_1 : address_1,
                        address_2 : address_2,
                        city : city,
                        state : state,
                        postcode : postcode,
                        phone : phone,
                        email : email,
                        website : website,
                        billing_email : billing_email,
                        invoiceDisclaimer : invoiceDisclaimer
                    },
                    success: function (html) {

                        Swal.fire(
                            'Success!',
                            '{{ 'Customer'|trans }} Updated Successfully!',
                            'success'
                        );
                        // reloading the page on success
                        setTimeout(function(){ location.reload(); }, 1500);
                    },
                    fail: function () {
                        button.attr('disabled', false);
                        toastr.options.progressBar = true;
                        toastr.error('Failed to Save the {{ 'Customer'|trans }}!', 'Error!');
                    }
                });
            }

        });

    </script>

{% endblock %}