{% extends '@Core/base.html.twig' %}

{% block sectionTitle %}Nuevo pedido web [ {{ websiteConfig.websiteTitle }} ]{% endblock %}
{% block sectionActions %}
{% endblock %}


{% block breadcrumbLinks %}
    <li><a class="" href="{{ path('website_list') }}">Listado de websites</a></li>
    <li><a class="" href="{{ path('website_menu', {"id": websiteConfig.id}) }}">Menu gestión web</a></li>
    <li class="active">Nuevo pedido web</li>
{% endblock %}


{% block content %}

    {% if app.session.flashBag.get('success') | length > 0 %}
        <div class="panel-flat">
            <div class="panel-body">
                {% for flash_message in app.session.flashBag.get('success') %}
                    <div class="alert alert-success alert-styled-left">
                        <span class="text-semibold">{{ flash_message }}</span>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% for flash_message in app.session.flashBag.get('error') %}
        <div class="alert alert-danger alert-styled-left" style="margin: 20px;">
            <span class="text-semibold">{{ flash_message }}</span>
        </div>
    {% endfor %}

    <div class="panel panel-flat">
        <div class="panel-body">

            <div id="reception_form">
                {% form_theme form 'bootstrap_3_layout.html.twig' %}

                {{ form_start(form) }}
                {{ form_errors(form) }}

                <!-- when we use {'render_rest': false} we need to use this form_row -->
                {{ form_row(form._token) }}

                <div class="form-group">

                    <div class="row">
                        <!-- CUSTOMER SELECTION -->
                        <div class="col-md-6">
                            <label class="control-label required" for="incidenceFormBasic_group" aria-required="true">Cliente</label>
                            <div class="input-group form-group">
                                <span class="input-group-addon bg-info"><i class="icon-user"></i></span>
                                <input type="text" class="form-control typeahead" required="required" id="customer_weborder_new" name="customer_weborder_new" placeholder="Buscar un cliente">
                            </div>
                            <div class="hidden">
                                {{ form_row(form.customer) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="">
                                {{ form_row(form.shopOut) }}
                            </div>
                            <div class="">
                                {{ form_row(form.typeWebOrderPayment) }}
                            </div>
                            <div id="paypal_div" class="hidden">
                                {{ form_row(form.paypalId) }}
                            </div>
                            <div id="tpv_div" class="hidden">
                                {{ form_row(form.chargeId) }}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="col-md-4">
                                {{ form_row(form.totalPay) }}
                            </div>
                            <div class="col-md-4">
                                {{ form_row(form.carrierAmount) }}
                            </div>
                            <div id="cost_exta_div" class="hidden col-md-4">
                                {{ form_row(form.costExtra) }}
                            </div>
                            <div class="col-md-4">
                                {{ form_row(form.total) }}
                            </div>
                        </div>
                    </div>

                    <div class="row mt-20">
                        <hr class="mb-20">
                        <div class="col-md-6">
                            <label for="isMarketplace"><input type="checkbox" id="isMarketplace" value="1">
                                ¿Es un pedido de marketplace?
                            </label>
                            <div id="amazon_order_id_div" class="hidden mt-20">
                                {{ form_row(form.amazonOrderId) }}
                            </div>

                        </div>
                    </div>
                    <div class="row mt-10">
                        <div id="amazon_list_marketplace_div" class="hidden">
                            <div class="col-md-2">
                                <div class="form-group"><div class="checkbox">
                                        <label for="weborderFormBasic_isAmazon"><input type="checkbox" id="weborderFormBasic_isAmazon" name="weborderFormBasic[isAmazon]" value="1"> Amazon</label>
                                    </div></div>
                            </div>
                            {% if groupConfiguration.amazonPrimeAutoManaged %}
                            <div class="col-md-2">
                                {{ form_row(form.isAmazonPrime) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.amazonIntegration %}
                            <div class="col-md-2">
                                {{ form_row(form.isZalando) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.spartooIntegration %}
                            <div class="col-md-2">
                                {{ form_row(form.isSpartoo) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.trendicoFOM %}
                            <div class="col-md-2">
                                {{ form_row(form.isFOM) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.trendicoAtleet %}
                            <div class="col-md-2">
                                {{ form_row(form.isATLEET) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.trendicoSotkatt %}
                            <div class="col-md-2">
                                {{ form_row(form.isSOTKATT) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumHipercalzado %}
                            <div class="col-md-2">
                                {{ form_row(form.isHipercalzado) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumALIEXPRESS %}
                            <div class="col-md-2">
                                {{ form_row(form.isALIEXPRESS) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumCarrefour %}
                            <div class="col-md-2">
                                {{ form_row(form.isCarrefour) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumDECATHLON %}
                            <div class="col-md-2">
                                {{ form_row(form.isDECATHLON) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumBULEVIP %}
                            <div class="col-md-2">
                                {{ form_row(form.isBULEVIP) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumMiinto %}
                            <div class="col-md-2">
                                {{ form_row(form.isMiinto) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumCOLISEY %}
                            <div class="col-md-2">
                                {{ form_row(form.isCOLIZEY) }}
                            </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumMIRAVIA %}
                                <div class="col-md-2">
                                    {{ form_row(form.isMIRAVIA) }}
                                </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumTRADEINN %}
                                <div class="col-md-2">
                                    {{ form_row(form.isTRADEINN) }}
                                </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumVENCA %}
                                <div class="col-md-2">
                                    {{ form_row(form.isVENCA) }}
                                </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumWORTEN %}
                                <div class="col-md-2">
                                    {{ form_row(form.isWORTEN) }}
                                </div>
                            {% endif %}
                            {% if groupConfiguration.isCrashForumPRESTASHOP %}
                                <div class="col-md-2">
                                    {{ form_row(form.isPrestashop) }}
                                </div>
                            {% endif %}

                            {% if groupConfiguration.isWaadbySHEIN %}
                                <div class="col-md-2">
                                    {{ form_row(form.isSHEIN) }}
                                </div>
                            {% endif %}
                            {% if groupConfiguration.isWaadbySPARTOO %}
                                <div class="col-md-2">
                                    {{ form_row(form.isSpartoo) }}
                                </div>
                            {% endif %}

                            {% if groupConfiguration.amarantoIntegration %}
                                <div class="col-md-2">
                                    {{ form_row(form.amarantoIntegration) }}
                                </div>
                            {% endif %}
                            {% if groupConfiguration.prestashopIntegration %}
                            <div class="col-md-2">
                                {{ form_row(form.isPrestashop) }}
                            </div>
                            {% endif %}
                        </div>
                    </div>

                </div>

                <button type="submit" class="btn-rounded btn bg-color3"><i class="icon-download position-left"></i>Guardar</button>

                <!-- It doesn't show the rest of form-->
                {{ form_end(form, {'render_rest': false}) }}
            </div>

        </div>
    </div>


    <script>

        $(document).on('click', 'input[type="checkbox"]', function() {
            $('input[type="checkbox"]').not(this).prop('checked', false);
            if (this.id === "isMarketplace"){
            }else{
                $('#isMarketplace').prop('checked',true);
            }

        });

        showHideElementsInForm();

        $('#weborderFormBasic_typeWebOrderPayment').change(function () {
            showHideElementsInForm();
        });

        $('#isMarketplace').change(function () {
            showHideElementsInForm();
        });

        function showHideElementsInForm(){
            var typeWebOrderPayment = $('#weborderFormBasic_typeWebOrderPayment').val();
            if (typeWebOrderPayment === "1"){
                $('#tpv_div').removeClass("hidden");
                $('#paypal_div').addClass("hidden");
                $('#cost_exta_div').addClass("hidden");
            }else if (typeWebOrderPayment === "2"){
                $('#tpv_div').addClass("hidden");
                $('#paypal_div').removeClass("hidden");
                $('#cost_exta_div').addClass("hidden");
            }else if (typeWebOrderPayment === "3"){
                $('#tpv_div').addClass("hidden");
                $('#paypal_div').addClass("hidden");
                $('#cost_exta_div').removeClass("hidden");
            }

            if( $('#isMarketplace').prop('checked') ) {
                $('#weborderFormBasic_isAmazon').prop('checked',true);
                $('#amazon_order_id_div').removeClass("hidden");
                $('#amazon_list_marketplace_div').removeClass("hidden");
                $('#weborderFormBasic_amazonOrderId').prop("required",true);
            }else{
                $('#amazon_order_id_div').addClass("hidden");
                $('#amazon_list_marketplace_div').addClass("hidden");
                $('#weborderFormBasic_amazonOrderId').prop("required",false);
            }
        }


        //------------------------------------ SEACH CUSTOMER TO CREATE A NEW WEB ORDER RETURN -----------------------------
        $('#customer_weborder_new').typeahead({
            highlight: true,
            minLength: 3
        },{
            name: 'articles',
            display: function(value) {
                return value.name
            },
            source: function (query,sync, async) {

                $.get(Routing.generate('_ajax_search_customer', {'text': query}), function (data) {
                    async(data);
                })
            }
        }).bind("typeahead:select",function(e,data){

            $("#customer_weborder_new").typeahead('val',data.name);
            $("#weborderFormBasic_customer").val(data.id);

            return false;
        }).bind("typeahead:autocomplete",function(e,data){
            if(e.keyCode === 9) return false;
        });

    </script>

{% endblock %}