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

{% block title %} Suppliers{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Suppliers</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_supplier_index') }}">Suppliers</a></li>
                        <li class="breadcrumb-item active">Edit Supplier</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">
                            <h3 class="card-title">Edit Supplier</h3>
                        </div>
                        <div class="card-body">
                            <div id="edit_supplier_details" class="tab-pane active">
                                <form class="form-horizontal" action="javascript:void(0)">
                                    <div class="form-group row mb-3">
                                        <label for="supplier_name" class="col-sm-2 col-form-label">Supplier Name <span class="compulsory">*</span></label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="supplier_name" placeholder="Supplier Name" value="{{ supplier.name }}">
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label for="supplier_address" class="col-sm-2 col-form-label">Supplier Address <span class="compulsory">*</span></label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control mb-2" id="supplier_address_1" placeholder="Supplier Address Line 1" value="{{ supplier.address1 }}">
                                            <input type="text" class="form-control mb-2" id="supplier_address_2" placeholder="Supplier Address Line 2" value="{{ supplier.address2 }}">
                                            <input type="text" class="form-control mb-2" id="supplier_city" placeholder="Supplier City" value="{{ supplier.city }}">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="supplier_zip" placeholder="Supplier Post Code" value="{{ supplier.postcode }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="supplier_state" placeholder="Supplier State" value="{{ supplier.state }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label for="supplier_reference" class="col-sm-2 col-form-label">Supplier Reference <span class="compulsory">*</span></label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control" rows="5" id="supplier_reference" placeholder="Supplier Reference">{{ supplier.reference }}</textarea>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="supplier_phone" class="col-sm-3 control-label">Phone</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="supplier_phone" placeholder="Phone" value="{{ supplier.phone }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="supplier_email" class="col-sm-3 control-label">Email</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="supplier_email" placeholder="Email" value="{{ supplier.email }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="supplier_contact_person_name" class="col-sm-3 control-label">Contact Person Name</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="supplier_contact_person_name" placeholder="Contact Person Name" value="{{ supplier.contactPersonName }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="supplier_contact_person_phone" class="col-sm-3 control-label">Contact Person Phone</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control" id="supplier_contact_person_phone" placeholder="Contact Person Phone" value="{{ supplier.contactPersonPhone }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-primary" id="updateSupplierBtn" style="float: right;">Update Supplier</button>

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

                <!-- /.col (RIGHT) -->
            </div>
        </div>
    </div>

{% endblock %}

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

        $(document).ready(function () {
            $("#updateSupplierBtn").on("click",function() {

                var button = $(this);
                var supplier_name = $.trim($("#supplier_name").val());
                var supplier_address_1 = $.trim($("#supplier_address_1").val());
                var supplier_address_2 = $.trim($("#supplier_address_2").val());
                var supplier_city = $.trim($("#supplier_city").val());
                var supplier_zip = $.trim($("#supplier_zip").val());
                var supplier_state = $.trim($("#supplier_state").val());
                var supplier_reference = $.trim($("#supplier_reference").val());
                var supplier_phone = $.trim($("#supplier_phone").val());
                var supplier_email = $.trim($("#supplier_email").val());
                var supplier_contact_person_name = $.trim($("#supplier_contact_person_name").val());
                var supplier_contact_person_phone = $.trim($("#supplier_contact_person_phone").val());

                if (
                    validateInput(supplier_name, 'Supplier Name') &&
                    validateInput(supplier_address_1, 'Supplier Address Line 1') &&
                    validateInput(supplier_city, 'Supplier City') &&
                    validateInput(supplier_zip, 'Supplier Zip') &&
                    validateInput(supplier_state, 'Supplier State')
                ) {

                    button.attr('disabled', true);

                    $.ajax({
                        type: 'post',
                        url: '{{ path('api_supplier_edit') }}',
                        data: {
                            supplier_id: {{ supplier.id }},
                            supplier_name: supplier_name,
                            supplier_address_1 : supplier_address_1,
                            supplier_address_2 : supplier_address_2,
                            supplier_city : supplier_city,
                            supplier_zip : supplier_zip,
                            supplier_state : supplier_state,
                            supplier_reference: supplier_reference,
                            supplier_phone: supplier_phone,
                            supplier_email: supplier_email,
                            supplier_contact_person: supplier_contact_person_name,
                            supplier_contact_person_phone: supplier_contact_person_phone
                        },
                        success: function (html) {
                            Swal.fire(
                                'Success!',
                                'Supplier Updated Successfully!',
                                'success'
                            );
                            // reloading the page on success
                            setTimeout(function(){ location.reload(); }, 2500);
                        },
                        fail: function () {
                            button.attr('disabled', false);
                            toastr.options.progressBar = true;
                            toastr.error('Failed to Save the Supplier!', 'Error!');
                        }
                    });
                }
            });
        });

    </script>
{% endblock %}