{% extends 'base_admin.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% block stylesheets %}
    <style>
        .vertical-center {
            display: flex;
            align-items: center;
        }

        .logo-pic {
            position: relative;
            display: inline-block;
        }

        .logo-pic:hover .remove {
            display: block;
        }

        .remove {
            padding-top: 7px;
            padding-right: 7px;
            position: absolute;
            right: 0;
            top: 0;
            display: none;
        }

        .remove a {
            color: #000;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('seller_index') }}">Sellers</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 %}
        {% if form_errors(form) %}
            <div class="alert alert-success" role="alert">
                {{ form_errors(form) }}
            </div>
        {% endif %}
        {{ form_start(form, {'attr':{novalidate:'novalidate'}}) }}
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>{{ title }}</h4>
            </div>
            <div class="card-body">

                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.shipeuCompany) }}
                            {{ form_widget(form.shipeuCompany) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.sellerType) }}
                            {{ form_widget(form.sellerType) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.contact) }}
                            {{ form_widget(form.contact) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.company) }}
                            {{ form_widget(form.company) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.country) }}
                            {{ form_widget(form.country) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.state) }}
                            {{ form_widget(form.state) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.city) }}
                            {{ form_widget(form.city) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.postalCode) }}
                            {{ form_widget(form.postalCode) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.address) }}
                            {{ form_widget(form.address) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.phone1) }}
                            {{ form_widget(form.phone1) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.phone2) }}
                            {{ form_widget(form.phone2) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.email) }}
                            {{ form_widget(form.email) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.samCid) }}
                            {{ form_widget(form.samCid) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            {{ form_label(form.cif) }}
                            {{ form_widget(form.cif) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.margin) }}
                            <div class="input-group">
                                {{ form_widget(form.margin) }}
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        %
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.preferredImportConfig) }}
                            {{ form_widget(form.preferredImportConfig) }}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {{ form_label(form.prefCourierService) }}
                            {{ form_widget(form.prefCourierService) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.is_active) }}
                            {{ form_widget(form.is_active) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.collectIva) }}
                            {{ form_widget(form.collectIva) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.is_checked) }}
                            {{ form_widget(form.is_checked) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.observation) }}
                            {{ form_widget(form.observation) }}
                        </div>
                    </div>
                    <div class="col-md-2">
                        <br/>
                        <div class="form-group">
                            {{ form_label(form.packaging) }}
                            {{ form_widget(form.packaging) }}
                        </div>
                    </div>
{#                    <div class="col-md-2">#}
{#                        <br/>#}
{#                        <div class="form-group">#}
{#                            {{ form_label(form.isShippingToOffice) }}#}
{#                            {{ form_widget(form.isShippingToOffice) }}#}
{#                        </div>#}
{#                    </div>#}
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{ form_label(form.logo) }}
                            {{ form_widget(form.logo) }}
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.senderName) }}
                            {{ form_widget(form.senderName) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.senderTagger) }}
                            {{ form_widget(form.senderTagger) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.cttTaggerName) }}
                            {{ form_widget(form.cttTaggerName) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.clientCTT) }}
                            {{ form_widget(form.clientCTT) }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.corSenderName) }}
                            {{ form_widget(form.corSenderName) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.corSenderTagger) }}
                            {{ form_widget(form.corSenderTagger) }}
                        </div>
                    </div>
                </div>
                {% if currentLogo is defined and currentLogo != false %}
                    {{ form_widget(form.removeLogo) }}
                    <div class="row" id="logoContainer">
                        <div class="col-md-4">
                            <div class="logo-pic">
                                <img class="img-fluid" width="200px" src="{{ asset('logos_seller/' ~ currentLogo) }}" alt="Current logo"/>
                                <div class="remove" data-toggle="tooltip" data-placement="top" title="Remove logo">
                                    <a href="#" onclick="removeLogo();">
                                        <i class="fa fa-times-circle fa-lg text-danger"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Shopify api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUrlShopify) }}
                                    {{ form_widget(form.apiUrlShopify, {'attr': {'data-id' : shopify is defined ? shopify : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiKeyShopify) }}
                                    {{ form_widget(form.apiKeyShopify) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiPasswordShopify) }}
                                    {{ form_widget(form.apiPasswordShopify) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiSharedSecretShopify) }}
                                    {{ form_widget(form.apiSharedSecretShopify) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.locationIdShopify) }} &nbsp;<span class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="Location ID configured in shopify for the warehouse"></span>
                                    {{ form_widget(form.locationIdShopify) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Amazon api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.marketPlaceIdAmazon) }}
                                    {{ form_widget(form.marketPlaceIdAmazon, {'attr': {'data-id' : amazonapi is defined ? amazonapi : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.merchantIdAmazon) }}
                                    {{ form_widget(form.merchantIdAmazon) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.accessKeyIdAmazon) }}
                                    {{ form_widget(form.accessKeyIdAmazon) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.secretAccessKeyAmazon) }}
                                    {{ form_widget(form.secretAccessKeyAmazon) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Woocommerce api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUrlWoocommerce) }}
                                    {{ form_widget(form.apiUrlWoocommerce, {'attr': {'data-id' : woocommerceapi is defined ? woocommerceapi : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUserWoocommerce) }}
                                    {{ form_widget(form.apiUserWoocommerce) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiKeyWoocommerce) }}
                                    {{ form_widget(form.apiKeyWoocommerce) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Prestashop api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUrlPrestashop) }}
                                    {{ form_widget(form.apiUrlPrestashop, {'attr': {'data-id' : prestashopapi is defined ? prestashopapi : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiKeyPrestashop) }}
                                    {{ form_widget(form.apiKeyPrestashop) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Wish api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.token) }}
                                    {{ form_widget(form.token, {'attr': {'data-id' : wishapi is defined ? wishapi : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.refreshToken) }}
                                    {{ form_widget(form.refreshToken) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Config Mirakl API -->
                <div class="card">
                    <div class="card-header">
                        <h5>Mirakl api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUrlMirakl) }}
                                    {{ form_widget(form.apiUrlMirakl , {'attr': {'data-id' : miraklapi is defined ? miraklapi : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiKeyMirakl) }}
                                    {{ form_widget(form.apiKeyMirakl) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- _________________ -->

            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Opencart api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUrlOpencart) }}
                                    {{ form_widget(form.apiUrlOpencart, {'attr': {'data-id' : opencartapi is defined ? opencartapi : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.secretAccessKeyOpencart) }}
                                    {{ form_widget(form.secretAccessKeyOpencart) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUsernameOpencart) }}
                                     &nbsp;<span class="fa fa-question-circle"
                                            data-toggle="tooltip" data-placement="top"
                                            title="Only for OAuth login"></span>
                                    {{ form_widget(form.apiUsernameOpencart) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiPasswordOpencart) }}
                                     &nbsp;<span class="fa fa-question-circle"
                                            data-toggle="tooltip" data-placement="top"
                                            title="Only for OAuth login"></span>
                                    {{ form_widget(form.apiPasswordOpencart) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.clientId) }}
                                     &nbsp;<span class="fa fa-question-circle"
                                            data-toggle="tooltip" data-placement="top"
                                            title="Only for OAuth login"></span>
                                    {{ form_widget(form.clientId) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.clientSecret) }}
                                     &nbsp;<span class="fa fa-question-circle"
                                            data-toggle="tooltip" data-placement="top"
                                            title="Only for OAuth login"></span>
                                    {{ form_widget(form.clientSecret) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>Magento api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUrlMagento) }}
                                    {{ form_widget(form.apiUrlMagento, {'attr': {'data-id' : magento2restapiv1 is defined ? magento2restapiv1 : '' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiUsernameMagento) }}
                                    {{ form_widget(form.apiUsernameMagento) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.apiPasswordMagento) }}
                                    {{ form_widget(form.apiPasswordMagento) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.tokenAdminMagento) }}
                                    {{ form_widget(form.tokenAdminMagento) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>KuantoKusta api access</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.kuantoKustaApiUrl) }}
                                    {{ form_widget(form.kuantoKustaApiUrl) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    {{ form_label(form.kuantoKustaApiKey) }}
                                    {{ form_widget(form.kuantoKustaApiKey) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="submit" class="btn btn-primary" value="Save seller" />
        <a href="{{ path('seller_index') }}" class="btn btn-secondary">Cancel</a>

        {{ form_end(form) }}

        {% if form.company.vars.value != "" %}
            <hr>
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h4>Add Courier by Country <button class="btn btn-primary btn-sm open-form"
                                                       data-toggle="tooltip" data-placement="top" title="New courier by country"
                                                       data-modal-title="New courier by country"
                                                       data-form-route="{{ path('add_courier_service_country', {name: form.company.vars.value}) }}"><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="CourierCountryContainer">
                </div>
            </div>
        {% endif %}

        <hr>
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>Add Courier by Weight and Country <button class="btn btn-primary btn-sm seller-group-form"
                                                   data-toggle="tooltip" data-placement="top" title="New courier by weight"
                                                   data-modal-title="New courier by weight"
                                                   data-form-seller-group-route="{{ path('new_courier_weight', {id: sellerId }) }}"><span class="fa fa-plus fa-sm"></span></button></h4>
            </div>
            <div id="alert-forms-seller-group-success" class="alert alert-success" role="alert" style="display: none;"></div>
            <div id="alert-forms-seller-group-error" class="alert alert-danger" role="alert" style="display: none;"></div>
                <div class="card-body load-data" id="CourierWeightContainer">
            </div>
        </div>

        {% if form.company.vars.value != "" %}
            <div class="js-routes" data-add-service-country-route="{{ path('add_courier_service_country', {name: form.company.vars.value}) }}" data-courier-country-list-route="{{ path('courier_country_list_ajax', {name: form.company.vars.value}) }}"
                 data-courier-service-weight-list-route="{{ path('courier_weight_list_ajax', {id: sellerId}) }}" data-new-courier-service-weight-route="{{ path('new_courier_weight', {id: sellerId}) }}" data-country-weight-list-route="{{ path('country_weight_list_ajax', {id: 0, sellerId: sellerId}) }}" data-new-country-weight-route="{{ path('new_country_weight', {id: 0, sellerId: sellerId}) }}">
            </div>
        {% endif %}

        <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">{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="formDataContainer">
                    </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>

        <div class="modal fade" id="formSellerGroupModal" tabindex="-1" role="dialog" aria-labelledby="formSellerGroupModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="formSellerGroupModalLabel">{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="formSellerGroupDataContainer">
                    </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-seller-group">Save</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="courierCountryWeightModal" tabindex="-1" role="dialog" aria-labelledby="countriesModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="courierCountryWeightModalLabel">{Titulo}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="alert-forms-success-country-weight" class="alert alert-success" role="alert" style="display: none;"></div>
                    <div id="alert-forms-error-country-weight" class="alert alert-danger" role="alert" style="display: none;"></div>
                    <div class="modal-body" id="courierCountryWeightDataContainer">
                    </div>
                    <div class="modal-body load-data" id="formCountryWeightDetails">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/app/seller/form-v2.js') }}"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });
        function removeLogo() {
            $("#logoContainer").html('');
            $("#seller_removeLogo").val('remove');
        }
    </script>
{% endblock %}