{% extends 'base_admin.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/tagsinput.css') }}">
{% endblock %}
{% block body %}
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('product_index') }}">Products</a></li>
                <li class="breadcrumb-item active">{{ title }}</li>
            </ul>
        </div>
    </div>
    <br/>
    <div class="container-fluid">
        {% for message in app.flashes('notice') %}
            <div class="alert alert-success" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% if form_errors(form) %}
            <div class="alert alert-danger" role="alert">
                {{ form_errors(form) }}
            </div>
        {% endif %}
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>{{ title }}</h4>
            </div>
            <div class="card-body">
                {{ form_start(form, {'attr':{novalidate:'novalidate', id: 'mainForm'}}) }}
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.seller) }}
                            {{ form_widget(form.seller) }}
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            {{ form_label(form.name) }}
                            {{ form_widget(form.name) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.barcode) }}
                            {{ form_widget(form.barcode) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.barcode2) }}
                            {{ form_widget(form.barcode2) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.barcode3) }}
                            {{ form_widget(form.barcode3) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.sku) }}
                            {{ form_widget(form.sku) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.fnSku) }}
                            {{ form_widget(form.fnSku) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.barcode) }}
                            {{ form_widget(form.barcode) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.asin) }}
                            {{ form_widget(form.asin) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        {{ form_label(form.location) }}
                        {{ form_widget(form.location) }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {{ form_label(form.location2) }}
                        {{ form_widget(form.location2) }}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {{ form_label(form.location3) }}
                        {{ form_widget(form.location3) }}
                    </div>
                </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.price) }}
                            {{ form_widget(form.price) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {% if totalCost is null %}
                                {{ form_label(form.cost) }}
                                {{ form_widget(form.cost) }}
                            {% else %}
                                <label>Cost</label> <span class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="Calculated value based on the sum of the cost of the base products"></span>
                                <input type="text" value="{{ totalCost }}" disabled class="form-control">
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.stock) }}
                            {{ form_widget(form.stock) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.prefCourierService) }}
                            {{ form_widget(form.prefCourierService) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.height) }}
                            {{ form_widget(form.height) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.width) }}
                            {{ form_widget(form.width) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.length) }}
                            {{ form_widget(form.length) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {% if totalWeight is null %}
                                {{ form_label(form.weight) }}
                                {{ form_widget(form.weight) }}
                            {% else %}
                                <label>Weight</label> <span class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" title="Calculated value based on the sum of the weight of the base products"></span>
                                <input type="text" value="{{ totalWeight }}" disabled class="form-control">
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.vat) }}
                            {{ form_widget(form.vat) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{ form_label(form.currency) }}
                            {{ form_widget(form.currency) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.isBaseProduct) }}
                            {{ form_widget(form.isBaseProduct) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.separatePackage) }}
                            {{ form_widget(form.separatePackage) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.isFragile) }}
                            {{ form_widget(form.isFragile) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.ignoreStock) }}
                            {{ form_widget(form.ignoreStock) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.urgent) }}
                            {{ form_widget(form.urgent) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                        {{ form_label(form.extraStock) }}
                        {{ form_widget(form.extraStock) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                        {{ form_label(form.extraStockLocation) }}
                        {{ form_widget(form.extraStockLocation) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            {{ form_label(form.longTitle) }}
                            {{ form_widget(form.longTitle) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.shortTitle) }}
                            {{ form_widget(form.shortTitle) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            {{ form_label(form.longDescription) }}
                            {{ form_widget(form.longDescription) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.shortDescription) }}
                            {{ form_widget(form.shortDescription) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.photo) }}
                            {{ form_widget(form.photo) }}
                        </div>
                    </div>
                </div>
                {% if currentPhoto is defined and currentPhoto != false %}
                    {{ form_widget(form.removeProductPhoto) }}
                    <div class="row" id="photoContainer">
                        <div class="col-md-4">
                            <div class="logo-pic">
                                    <img class="img-fluid" src="{{ asset('products/' ~ currentPhoto) }}" alt="Current logo"/>
                                    <div class="remove" data-toggle="tooltip" data-placement="top" title="Remove logo">
                                        <a href="#" onclick="removePhoto();">
                                            <i class="fa fa-times-circle fa-lg text-danger"></i>
                                        </a>
                                    </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="row">
                    <div class="col-md-12">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.photo_url) }}
                            {{ form_widget(form.photo_url) }}
                        </div>
                    </div>
                </div>
                {% if currentPhotoUrl is defined and currentPhotoUrl != false%}
                    <div class="row" id="photoUrlContainer">
                        <div class="col-md-4">
                            <div class="logo-pic">
                                <img class="img-fluid" src="{{ currentPhotoUrl }}" alt="Current logo"/>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="row">
                    <div class="col-md-12">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.keywords) }}
                            {{ form_widget(form.keywords) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <label for="">Bullet points</label>
                        <div class="form-group bulletPointTemplate">
                            <div class="input-group">
                                <input type="text" class="form-control bullet-point">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-danger fa fa-times-circle btnRemoveBulletPoint" data-toggle="tooltip" data-placement="top" title="Remove bullet point"></button>
                                </div>
                            </div>
                        </div>
                        <div id="bulletPoints">

                        </div>
                        <button class="btn btn-primary btn-sm" id="btnAddBulletPoint"><span class="fa fa-plus"></span> Add bullet point</button>
                    </div>
                </div>
                <hr>
                {{ form_widget(form) }}
                <input type="submit" class="btn btn-primary" id="btnSubmit" value="Save product" />
                <a href="{{ back }}" class="btn btn-secondary">Cancel</a>
                {{ form_end(form) }}
            </div>
        </div>
        {% if productId is defined %}
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h4>Products of the combinations <button type="button" class="btn btn-primary open-products-list" data-products-seller-route="{{ path('products_seller_list_ajax', {id: productId}) }}"><span class="fa fa-plus"></span> Add sub-product </button></h4>
                </div>

                <div class="card-body">
                    <div class="alert alert-success" role="alert" id="successMessagesTableSubproducts" style="display: none;">
                    </div>
                    <div class="alert alert-danger" role="alert" id="errorMessagesTableSubproducts" style="display: none;">
                    </div>
                    <div id="subProductsContainer">
                    </div>
                </div>
            </div>
{#            Secondary Seller#}
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h4>Add secondary seller for products <button class="btn btn-primary btn-sm open-form"
                                                       data-toggle="tooltip" data-placement="top" title="New secondary seller"
                                                       data-modal-title="New secondary seller"
                                                       data-form-route="{{ path('add_secondary_seller', {id: productId}) }}"><span class="fa fa-plus fa-sm"></span></button></h4>
                </div>
                <div id="alert-forms-success" class="alert alert-success" role="alert" style="display: none;"></div>
                <div id="alert-forms-error" class="alert alert-danger" role="alert" style="display: none;"></div>
                <div class="card-body load-data" id="SecondarySellerContainer">
                </div>
            </div>

            <div class="modal fade" id="formModalSecondarySeller" tabindex="-1" role="dialog" aria-labelledby="formModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="formModalLabelSecondarySeller">{TITLE}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="formDataContainerSecondarySeller">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary submit">Save</button>
                        </div>
                    </div>
                </div>
            </div>
{#            End Secondary Seller#}
            <div class="js-routes" data-sub-products-route="{{ path('sub_products_list_ajax', {id: productId}) }}"
                 data-add-sub-products-route="{{ path('sub_product_add', {id: productId}) }}"
                 data-delete-sub-products-route="{{ path('sub_product_delete', {id: productId}) }}"
                 data-add-secondary-seller-route="{{ path('add_secondary_seller', {id: productId}) }}"
                 data-secondary-seller-list-route="{{ path('secondary_seller_list_ajax', {id: productId}) }}">
            </div>

            <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="formModalLabel">Products of {{ sellerName }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-danger" role="alert" id="errorMessagesTable" style="display: none;">
                            </div>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="input-group mb-3">
                                        <input type="text" id="txtSearchString" class="form-control" placeholder="Enter a search string..."
                                               aria-label="Enter a search string..."
                                               aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary btnSearchString" value="Search">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="productsSellerDataContainer">

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>


{% endblock %}
{% block javascripts %}
    <script src="{{ asset('js/app/product/index-v2.js') }}"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger : 'hover'
            });

            $('[data-toggle="tooltip"]').on('click', function () {
                $(this).tooltip('hide')
            });
        });

        function removePhoto() {
            $("#photoContainer").html('');
            $("#product_removeProductPhoto").val('remove');
        }

    </script>
    <script src="{{ asset('js/tagsinput.js') }}"></script>
{% endblock javascripts %}