{% include 'common/header.html.twig' with {'assets': assets } %}
<!-- begin::Body -->
<body style="background-image: url({{ assets }}media/demos/demo4/bg-image-parti-header.jpg); background-position: center top; background-size: 100% 338px;" class="kt-page--loading-enabled kt-page--loading kt-quick-panel--right kt-demo-panel--right kt-offcanvas-panel--right kt-header--fixed kt-header--minimize-menu kt-header-mobile--fixed kt-subheader--enabled kt-subheader--transparent kt-page--loading">

<!-- begin:: Page -->

<!-- begin:: Header Mobile -->
{% include 'common/header_mobile.html.twig' %}

<!-- end:: Header Mobile -->
<div class="kt-grid kt-grid--hor kt-grid--root">
    <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">

            <!-- begin:: Header -->
            {{ render(controller('App\\Controller\\Common\\Top::index')) }}
            <!-- end:: Header -->

            <div class="kt-body kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-grid--stretch" id="kt_body">
                <div class="kt-content kt-content--fit-top  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">

                    <!-- begin:: Subheader -->
                    {% include 'common/subheader.html.twig' %}

                    <!-- end:: Subheader -->

                    <!-- begin:: Content -->
                    <div class="kt-container  kt-grid__item kt-grid__item--fluid" id="id="edit_part_page"">

                        <div class="kt-portlet kt-portlet--mobile">
                            <div class="kt-portlet__head kt-portlet__head--lg">
                                <div class="kt-portlet__head-label">
                                    <h3 class="kt-portlet__head-title">
                                        Part {{ info.title }}
                                        <small>Edit Part</small>
                                    </h3>
                                </div>
                            </div>
                            <div class="kt-portlet__body">

                            </div>
                            <div class="kt-portlet__body kt-portlet__body--fit">

                                <!--begin: Main Form -->
                                <div class="row" style="padding-left:15px;">
                                    <form name="update_part_form" id="update_part_form" action="{{ update_part_url
                                    }}" method="post">
                                        <div class="col-sm-6 float-left">
                                            <div class="mb-3">
                                                <label for="part_title" class="form-label">Part Title</label>
                                                <input type="text" class="form-control" id="part_title"
                                                       name="part_title" value="{{ info.title }}" disabled>
                                            </div>
                                            <div class="mb-3">
                                                <label for="part_statuses" class="form-label">Part
                                                    Status</label>
                                                <select class="form-control select_filter_box" name="part_statuses"
                                                        id="part_statuses">
                                                    <option value="-1">{{ lbl_select }}</option>
                                                    {% for status in parts_statuses %}
                                                        {% if status.parts_status_id == info.part_status_id %}
                                                            <option value="{{ status.parts_status_id }}" selected="selected">{{
                                                                status.title }}</option>
                                                        {% else %}
                                                            <option value="{{ status.parts_status_id }}" >{{ status.title }}</option>
                                                         {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label for="price" class="form-label">Price</label>
                                                <input type="text" class="form-control" id="price"
                                                       name="price" value="{{ info.price }}">
                                            </div>
                                            <div class="mb-3">
                                                <label for="comments" class="form-label">Comments</label>
                                                <textarea name="comments" class="form-control"
                                                          id="comments">{{ info.comments }}</textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label for="destroy_comments"
                                                       class="form-label">Destroy Comments</label>
                                                <textarea name="destroy_comments" class="form-control"
                                                          id="destroy_comments">{{ info.destroy_comment }}</textarea>
                                            </div>
                                            <button id="update_part" type="submit" class="btn
                                            btn-primary">Submit</button>
                                        </div>

                                        <div class="col-sm-6 float-left">
                                            <div class="mb-3" id="parts_number_section">
                                                <label class="col-sm-12 form-label">Parts Numbers</label>
                                                {% for part_num in part_numbers %}
                                                    <span part_num_id="{{ part_num.parts_number_id }}" class="badge
                                                    badge-pill badge-success float-let part_number"
                                                          >{{ part_num.part_number }}
                                                        <button id="remove_part_nmuber" part_number_id="{{ part_num
                                                        .parts_number_id}}" class="close" data-dismiss="alert"
                                                                aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    </span>
                                                {% endfor %}
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <button id="add_part_number" class="btn btn-primary"
                                                            type="button">Add New</button>
                                                </div>
                                                <input type="text" class="form-control" name="part_number" id="part_number">
                                            </div>
                                            <div class="mb-3">
                                                <label class="col-sm-12 form-label">Images</label>
                                                {% for image in images %}
                                                    <div class="column" col_id="{{ image.parts_image_id
                                                    }}">
                                                        <div class="image-area">
                                                            <img src="{{ image.src }}"  alt="Preview">
                                                            <a class="remove-image" image_id="{{ image.parts_image_id
                                                            }}" href="#"style="display:inline;">&#215;</a>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>

                                        <input type="hidden" class="form-control" name="ads_id" value="{{ info.ads_id }}">
                                        <input type="hidden" class="form-control" name="ad_parts_id" value="{{ info.ads_parts_id }}">
                                    </form>

                                </div>
                                <!--end: Main Form -->
                            </div>
                        </div>
                    </div>

                    <!-- end:: Content -->

                    <!-- begin:: Footer -->

                    <script type="text/javascript">

                        jQuery(document).ready(function() {

                            $(document).on('click','#add_part_number',function() {

                                $.ajax({
                                    url: '{{ add_part_number_url }}',
                                    datatype: 'json',
                                    data: {
                                        ad_parts_id: $('#ad_parts_id').val(),
                                        part_number: $('#part_number').val(),
                                    },
                                    method: 'POST',
                                    success: function (json) {
                                        var result = $.parseJSON(json);
                                        var html = '';
                                        if (result) {
                                            html +='<span class="badge badge-pill badge-success float-let ' +
                                                'part_number">' + result.part_number + '<button ' +
                                                'id="remove_part_nmuber" part_number_id="' + result.parts_number_id
                                            + '" class="close" data-dismiss="alert" aria-label="Close"><span ' +
                                                'aria-hidden="true">&times;</span></button></span>';
                                        }

                                        $('#parts_number_section span:last-child').after().append(html);
                                        $('#part_number').val('');
                                    } //end function
                                }); //end ajax
                            })

                            $(document).on('click','.remove-image',function() {
                                //remove image
                                var image_id = $(this).attr('image_id');

                                $.ajax({
                                    url: '{{ remove_part_image_url }}',
                                    datatype: 'json',
                                    data: {
                                        image_id: image_id,
                                    },
                                    method: 'POST',
                                    success: function (json) {
                                        var result = $.parseJSON(json);
                                        var html = '';
                                        if (result) {
                                            $('[col_id="' + image_id + '"]').remove();
                                        }

                                    } //end function
                                }); //end ajax
                            })

                            $(document).on('click','#remove_part_nmuber',function() {
                                //remove part number

                                var part_number_id = $(this).attr('part_number_id');

                                $.ajax({
                                    url: '{{ remove_part_number_url }}',
                                    datatype: 'json',
                                    data: {
                                        part_number_id: part_number_id,
                                    },
                                    method: 'POST',
                                    success: function (json) {
                                        var result = $.parseJSON(json);
                                        var html = '';
                                        if (result) {
                                            $('[part_num_id="' + part_number_id + '"]').remove();
                                        }
                                    } //end function
                                }); //end ajax
                            })

                        });
                    </script>

                    {{ render(controller('App\\Controller\\Common\\Footer::index')) }}


